:root {
  --background: 210 20% 98%;
  --foreground: 222 47% 11%;
  --primary: 221 74% 31%;
  --secondary: 0 72% 51%;
  --info: 198 100% 72%;
  --muted: 210 20% 94%;
  --destructive: 0 84% 60%;
  --border: 214 32% 85%;
  --card: 0 0% 100%;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.12);

  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 222 47% 4%;
  --foreground: 210 20% 96%;
  --primary: 221 74% 45%;
  --secondary: 0 72% 51%;
  --info: 198 100% 76%;
  --muted: 223 49% 7%;
  --destructive: 0 84% 60%;
  --border: 223 42% 15%;
  --card: 224 58% 6.5%;

  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.65);
}

html, body, #root {
  min-height: 100%;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: hsla(var(--foreground), 0.12);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--foreground), 0.2);
}

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

img {
  display: block;
}

a, button, input, select {
  transition: all var(--transition-fast);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px hsla(var(--primary), 0.18), 0 0 24px hsla(var(--primary), 0.18);
}

.glass {
  background: hsla(var(--card), 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsla(var(--border), 0.5);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes caHeaderNeonPulse {
  0%, 100% {
    filter: drop-shadow(0 0 34px hsla(var(--info), 0.68)) drop-shadow(0 0 82px hsla(var(--primary), 0.44)) drop-shadow(0 0 110px hsla(var(--secondary), 0.18));
  }
  50% {
    filter: drop-shadow(0 0 44px hsla(var(--info), 0.84)) drop-shadow(0 0 108px hsla(var(--primary), 0.56)) drop-shadow(0 0 140px hsla(var(--secondary), 0.24));
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.premium-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.premium-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg), 0 0 30px hsla(var(--primary), 0.12);
}

.neon-text-primary {
  text-shadow: 0 0 8px hsla(var(--primary), 0.6), 0 0 16px hsla(var(--primary), 0.3);
}

.neon-text-secondary {
  text-shadow: 0 0 8px hsla(var(--secondary), 0.6), 0 0 16px hsla(var(--secondary), 0.3);
}

.neon-text-blue {
  color: hsl(var(--info));
  text-shadow: 0 0 3px hsla(var(--info), 0.34), 0 0 8px hsla(var(--info), 0.16);
}

.neon-text-destructive {
  text-shadow: 0 0 8px hsla(var(--destructive), 0.6), 0 0 16px hsla(var(--destructive), 0.3);
}

.neon-text-foreground {
  text-shadow: 0 0 8px hsla(var(--foreground), 0.3), 0 0 16px hsla(var(--foreground), 0.1);
}

/* Light mode: ensure numeric values render as dark, non-glowing text for clarity. */
html:not(.dark) :is(
  .neon-text-foreground,
  .neon-text-primary,
  .neon-text-secondary,
  .neon-text-destructive,
  .neon-text-blue,
  .overview-stat-number
) {
  text-shadow: none !important;
  filter: none !important;
}

html:not(.dark) .neon-text-blue {
  color: hsl(var(--primary));
}

.overview-stat-number {
  letter-spacing: 0.01em;
  filter: drop-shadow(0 0 0.5px currentColor) drop-shadow(0 0 1.5px currentColor);
  text-shadow:
    0 0 0.5px currentColor,
    0 0 2px currentColor,
    0 0 5px hsla(var(--info), 0.035);
}

/* Keep Azure dark-blue cards readable in DARK theme.
   These surfaces are intentionally dark, so we locally override
   foreground/border tokens for content INSIDE them. */
.dark :is(
  .overview-surface,
  .overview-subsurface,
  .scan-surface,
  .scan-subsurface,
  .trade-surface,
  .trade-subsurface,
  .reviews-surface,
  .reviews-subsurface,
  .history-surface,
  .history-subsurface,
  .guide-surface,
  .guide-subsurface
) {
  --foreground: 210 20% 96%;
  --border: 223 42% 15%;
}

/* Azure Light Blue (LIGHT theme) surfaces */
html:not(.dark) :is(
  .overview-surface,
  .scan-surface,
  .trade-surface,
  .reviews-surface,
  .history-surface,
  .guide-surface
) {
  background:
    linear-gradient(180deg, hsla(198, 100%, 94%, 0.98), hsla(210, 30%, 98%, 0.98)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.17), transparent 55%);
  border-color: hsla(198, 100%, 38%, 0.28);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.09),
    0 0 18px hsla(198, 100%, 56%, 0.14);
}

html:not(.dark) :is(
  .overview-subsurface,
  .scan-subsurface,
  .trade-subsurface,
  .reviews-subsurface,
  .history-subsurface,
  .guide-subsurface
) {
  background:
    linear-gradient(180deg, hsla(198, 100%, 93%, 0.985), hsla(210, 25%, 97%, 0.985)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.15), transparent 60%);
  border-color: hsla(198, 100%, 38%, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.07),
    0 0 10px hsla(198, 100%, 56%, 0.1);
}

/* Azure Dark Blue (solid layered) surfaces */
.overview-surface {
  background:
    linear-gradient(180deg, hsla(224, 60%, 10%, 0.995), hsla(224, 70%, 4.6%, 0.995)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.08), transparent 42%);
  border-color: hsla(198, 100%, 72%, 0.18);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.04),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.035),
    0 0 14px hsla(198, 100%, 60%, 0.09),
    0 0 20px hsla(var(--primary), 0.07);
}

.overview-subsurface {
  background:
    linear-gradient(180deg, hsla(224, 56%, 7.4%, 0.99), hsla(224, 70%, 4.2%, 0.99)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.06), transparent 48%);
  border-color: hsla(198, 100%, 72%, 0.15);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, 0.03),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.03),
    0 0 7px hsla(198, 100%, 60%, 0.06),
    0 0 10px hsla(var(--primary), 0.045);
}

/* Scan section: solid Azure dark blue layered cards (no glass) */
.scan-surface {
  background:
    linear-gradient(180deg, hsla(224, 60%, 10%, 0.995), hsla(224, 70%, 4.6%, 0.995)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.08), transparent 42%);
  border-color: hsla(198, 100%, 72%, 0.18);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.04),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.035),
    0 0 14px hsla(198, 100%, 60%, 0.09),
    0 0 20px hsla(var(--primary), 0.07);
}

.scan-subsurface {
  background:
    linear-gradient(180deg, hsla(224, 56%, 7.4%, 0.99), hsla(224, 70%, 4.2%, 0.99)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.06), transparent 48%);
  border-color: hsla(198, 100%, 72%, 0.15);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, 0.03),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.03),
    0 0 7px hsla(198, 100%, 60%, 0.06),
    0 0 10px hsla(var(--primary), 0.045);
}

/* Trade Log section: match Scan/Overview solid Azure dark blue layered cards (no glass) */
.trade-surface {
  background:
    linear-gradient(180deg, hsla(224, 60%, 10%, 0.995), hsla(224, 70%, 4.6%, 0.995)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.08), transparent 42%);
  border-color: hsla(198, 100%, 72%, 0.18);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.04),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.035),
    0 0 14px hsla(198, 100%, 60%, 0.09),
    0 0 20px hsla(var(--primary), 0.07);
}

.trade-subsurface {
  background:
    linear-gradient(180deg, hsla(224, 56%, 7.4%, 0.99), hsla(224, 70%, 4.2%, 0.99)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.06), transparent 48%);
  border-color: hsla(198, 100%, 72%, 0.15);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, 0.03),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.03),
    0 0 7px hsla(198, 100%, 60%, 0.06),
    0 0 10px hsla(var(--primary), 0.045);
}

/* Reviews section: match Scan/Overview solid Azure dark blue layered cards (no glass) */
.reviews-surface {
  background:
    linear-gradient(180deg, hsla(224, 60%, 10%, 0.995), hsla(224, 70%, 4.6%, 0.995)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.08), transparent 42%);
  border-color: hsla(198, 100%, 72%, 0.18);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.04),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.035),
    0 0 14px hsla(198, 100%, 60%, 0.09),
    0 0 20px hsla(var(--primary), 0.07);
}

.reviews-subsurface {
  background:
    linear-gradient(180deg, hsla(224, 56%, 7.4%, 0.99), hsla(224, 70%, 4.2%, 0.99)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.06), transparent 48%);
  border-color: hsla(198, 100%, 72%, 0.15);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, 0.03),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.03),
    0 0 7px hsla(198, 100%, 60%, 0.06),
    0 0 10px hsla(var(--primary), 0.045);
}

/* History section: match Scan/Overview solid Azure dark blue layered cards (no glass) */
.history-surface {
  background:
    linear-gradient(180deg, hsla(224, 60%, 10%, 0.995), hsla(224, 70%, 4.6%, 0.995)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.08), transparent 42%);
  border-color: hsla(198, 100%, 72%, 0.18);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.04),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.035),
    0 0 14px hsla(198, 100%, 60%, 0.09),
    0 0 20px hsla(var(--primary), 0.07);
}

.history-subsurface {
  background:
    linear-gradient(180deg, hsla(224, 56%, 7.4%, 0.99), hsla(224, 70%, 4.2%, 0.99)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.06), transparent 48%);
  border-color: hsla(198, 100%, 72%, 0.15);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, 0.03),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.03),
    0 0 7px hsla(198, 100%, 60%, 0.06),
    0 0 10px hsla(var(--primary), 0.045);
}

/* Guide section: match Scan/Overview solid Azure dark blue layered cards (no glass) */
.guide-surface {
  background:
    linear-gradient(180deg, hsla(224, 60%, 10%, 0.995), hsla(224, 70%, 4.6%, 0.995)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.08), transparent 42%);
  border-color: hsla(198, 100%, 72%, 0.18);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.04),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.035),
    0 0 14px hsla(198, 100%, 60%, 0.09),
    0 0 20px hsla(var(--primary), 0.07);
}

.guide-subsurface {
  background:
    linear-gradient(180deg, hsla(224, 56%, 7.4%, 0.99), hsla(224, 70%, 4.2%, 0.99)),
    linear-gradient(135deg, hsla(198, 100%, 72%, 0.06), transparent 48%);
  border-color: hsla(198, 100%, 72%, 0.15);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, 0.03),
    inset 0 0 0 1px hsla(198, 100%, 72%, 0.03),
    0 0 7px hsla(198, 100%, 60%, 0.06),
    0 0 10px hsla(var(--primary), 0.045);
}

.app-header-shell {
  background:
    linear-gradient(135deg, hsla(224, 60%, 2%, 0.98), hsla(214, 70%, 1%, 0.99) 38%, hsla(231, 60%, 3%, 0.98) 100%),
    radial-gradient(circle at 11% 20%, hsla(var(--info), 0.14), transparent 22%),
    radial-gradient(circle at 83% 18%, hsla(var(--primary), 0.16), transparent 20%),
    radial-gradient(circle at 48% 78%, hsla(var(--secondary), 0.04), transparent 26%);
  border-color: hsla(var(--info), 0.22);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.08),
    inset 0 0 0 1px hsla(var(--info), 0.04),
    0 0 0 1px hsla(var(--info), 0.08),
    0 0 34px hsla(var(--primary), 0.12),
    0 0 62px hsla(var(--info), 0.1);
}

/* Dark abstract design layer (clearly visible, no logo shapes) */
.app-header-abstract {
  background:
    radial-gradient(900px 240px at 18% 22%, hsla(var(--info), 0.12), transparent 62%),
    radial-gradient(720px 220px at 82% 14%, hsla(var(--primary), 0.13), transparent 58%),
    radial-gradient(560px 220px at 48% 88%, hsla(var(--secondary), 0.05), transparent 62%),
    linear-gradient(135deg, #010206 0%, #03050a 48%, #010103 100%);
  overflow: hidden;
  opacity: 1;
}

.app-header-abstract::before {
  content: '';
  position: absolute;
  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;
  background:
    radial-gradient(circle at 22% 32%, hsla(var(--info), 0.08) 0%, transparent 28%),
    radial-gradient(circle at 55% 52%, hsla(var(--primary), 0.06) 0%, transparent 34%),
    radial-gradient(circle at 78% 72%, hsla(var(--secondary), 0.03) 0%, transparent 42%),
    conic-gradient(from 220deg at 50% 50%, transparent 0 16%, hsla(var(--info), 0.03) 20%, transparent 28%, hsla(var(--primary), 0.02) 40%, transparent 48%, hsla(var(--info), 0.02) 62%, transparent 74%, hsla(var(--primary), 0.02) 88%, transparent 100%);
  filter: blur(58px);
  opacity: 0.95;
  animation: caRotate 70s linear infinite;
}

.app-header-abstract::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, hsla(var(--foreground), 0.05) 1px, transparent 1px),
    linear-gradient(180deg, hsla(var(--foreground), 0.05) 1px, transparent 1px),
    radial-gradient(hsla(var(--info), 0.07) 0.8px, transparent 0.9px);
  background-size: 56px 56px, 56px 56px, 22px 22px;
  background-position: 0 0, 0 0, 11px 10px;
  opacity: 0.26;
  mix-blend-mode: overlay;
  mask-image: radial-gradient(circle at 50% 42%, black 40%, transparent 72%);
}

.app-header-techno-lines {
  background:
    linear-gradient(115deg, transparent 0 40%, hsla(var(--info), 0.06) 40.5%, transparent 41%),
    linear-gradient(115deg, transparent 0 45%, hsla(var(--info), 0.03) 45.5%, transparent 46%),
    linear-gradient(295deg, transparent 0 30%, hsla(var(--primary), 0.06) 30.5%, transparent 31%),
    linear-gradient(25deg, transparent 0 60%, hsla(var(--info), 0.02) 60.5%, transparent 61%);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.app-header-glow {
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.95;
}

.app-header-glow-a {
  inset: -20% auto auto -10%;
  width: 38%;
  height: 160%;
  background: radial-gradient(circle, hsla(var(--info), 0.2) 0, hsla(var(--info), 0.1) 34%, transparent 70%);
}

.app-header-glow-b {
  inset: auto -8% -40% auto;
  width: 34%;
  height: 150%;
  background: radial-gradient(circle, hsla(var(--primary), 0.18) 0, hsla(var(--secondary), 0.06) 40%, transparent 72%);
}

.app-header-orb {
  filter: blur(12px);
  opacity: 0.88;
}

.app-header-orb-a {
  background: radial-gradient(circle, hsla(var(--info), 0.24), hsla(var(--info), 0.08) 44%, transparent 72%);
}

.app-header-orb-b {
  background: radial-gradient(circle, hsla(var(--primary), 0.2), hsla(var(--secondary), 0.08) 46%, transparent 72%);
}

.app-header-orb-c {
  background: radial-gradient(circle, hsla(var(--info), 0.14), hsla(var(--primary), 0.06) 48%, transparent 72%);
}

.app-header-diagonal {
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsla(var(--info), 0.32), transparent);
  opacity: 0.8;
  box-shadow: 0 0 12px hsla(var(--info), 0.14);
}

.app-header-diagonal-a {
  top: 24%;
  right: -4%;
  transform: rotate(-12deg);
}

.app-header-diagonal-b {
  bottom: 20%;
  left: -6%;
  transform: rotate(10deg);
}

.app-header-beam {
  background: linear-gradient(90deg, transparent, hsla(var(--info), 0.8), hsla(var(--primary), 0.5), transparent);
  box-shadow: 0 0 18px hsla(var(--info), 0.22);
  opacity: 0.85;
}

.app-header-brandmark {
  box-shadow:
    0 0 0 1px hsla(0, 0%, 100%, 0.06),
    0 0 18px hsla(var(--primary), 0.28),
    0 0 34px hsla(var(--info), 0.14);
}

/* Stronger direct neon glow around the logo mark */
.app-header-brandmark-neon {
  position: relative;
  filter:
    drop-shadow(0 0 18px hsla(var(--info), 0.62))
    drop-shadow(0 0 40px hsla(var(--primary), 0.4))
    drop-shadow(0 0 54px hsla(var(--secondary), 0.22));
  animation: caHeaderNeonPulse 2.4s ease-in-out infinite;
}

.app-header-brandmark-neon::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 42% 38%, hsla(var(--info), 0.34), transparent 60%),
    radial-gradient(circle at 62% 58%, hsla(var(--secondary), 0.18), transparent 64%);
  filter: blur(14px);
  opacity: 1;
  pointer-events: none;
}

/* Extra glow targeted specifically at the chart SVG colors */
.app-header-logo-svg {
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.56))
    drop-shadow(0 0 44px hsla(var(--info), 0.42))
    drop-shadow(0 0 58px hsla(var(--primary), 0.26));
}

.app-header-title {
  text-shadow:
    0 0 10px hsla(var(--info), 0.18),
    0 0 22px hsla(var(--primary), 0.14);
}

/* Premium glow for the app name (strong + unmistakable) */
.app-header-title-glow {
  text-shadow:
    0 0 18px hsla(var(--info), 1),
    0 0 34px hsla(var(--info), 0.82),
    0 0 62px hsla(var(--info), 0.56),
    0 0 88px hsla(var(--primary), 0.78),
    0 0 132px hsla(var(--primary), 0.52),
    0 0 168px hsla(var(--secondary), 0.18) !important;
  filter:
    drop-shadow(0 0 22px hsla(var(--info), 0.72))
    drop-shadow(0 0 58px hsla(var(--primary), 0.48));
}

.app-header-copy {
  text-shadow: 0 0 14px hsla(var(--info), 0.06);
}

/* User badge */
.user-badge {
  isolation: isolate;
}

/* Direct glow for the initial letter shown in the avatar */
.user-badge-avatar {
  position: relative;
  text-shadow:
    0 0 16px hsla(var(--info), 1),
    0 0 42px hsla(var(--info), 0.62),
    0 0 78px hsla(var(--primary), 0.3);
  filter:
    drop-shadow(0 0 14px hsla(var(--info), 0.92))
    drop-shadow(0 0 34px hsla(var(--info), 0.52))
    drop-shadow(0 0 46px hsla(var(--primary), 0.28));
}

.user-badge-avatar::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 40% 35%, hsla(var(--info), 0.5), transparent 62%),
    radial-gradient(circle at 60% 65%, hsla(var(--primary), 0.26), transparent 68%);
  filter: blur(16px);
  opacity: 1;
  pointer-events: none;
}

.neon-tab {
  position: relative;
  background: hsla(198, 100%, 10%, 0.65);
  border: 1px solid hsla(198, 100%, 72%, 0.25);
  color: hsl(198, 100%, 72%);
  overflow: hidden;
}

.neon-tab::before {
  content: '';
  position: absolute;
  inset: -40% auto auto -120%;
  width: 70%;
  height: 180%;
  background: linear-gradient(90deg, transparent, hsla(var(--info), 0.22), transparent);
  transform: rotate(18deg);
  transition: left 260ms ease;
  pointer-events: none;
}

.neon-tab:hover::before,
.neon-tab:focus-visible::before {
  left: 140%;
}

.neon-tab:hover,
.neon-tab:focus-visible {
  transform: translateY(-1px);
  background: hsla(198, 100%, 15%, 0.85);
  border-color: hsla(198, 100%, 72%, 0.5);
  color: white;
  box-shadow:
    0 0 0 1px hsla(var(--info), 0.28),
    0 0 14px hsla(var(--info), 0.2),
    0 0 28px hsla(var(--info), 0.24);
  text-shadow: 0 0 8px hsla(var(--info), 0.55);
}

.neon-tab-active {
  background: hsla(198, 100%, 30%, 0.4);
  border-color: hsla(198, 100%, 72%, 0.7);
  color: white;
  box-shadow:
    0 0 0 1px hsla(var(--info), 0.3),
    0 0 18px hsla(var(--info), 0.18),
    inset 0 0 18px hsla(var(--info), 0.1);
  text-shadow: 0 0 8px hsla(var(--info), 0.6);
}

header,
section,
article,
table,
form,
nav,
.premium-card {
  box-shadow: var(--shadow-md), 0 0 32px hsla(var(--primary), 0.08);
}

button,
a.rounded-xl,
a.rounded-2xl,
input,
select,
textarea {
  box-shadow: 0 0 0 1px hsla(var(--border), 0.55), 0 0 16px hsla(var(--primary), 0.06);
}

button:hover,
a.rounded-xl:hover,
a.rounded-2xl:hover {
  box-shadow: 0 0 0 1px hsla(var(--primary), 0.24), 0 0 22px hsla(var(--primary), 0.14), 0 0 30px hsla(var(--secondary), 0.08);
}

h1, h2, h3 {
  text-shadow: 0 0 14px hsla(var(--primary), 0.12);
}

.live-background {
  isolation: isolate;
}

.live-background-base {
  background: linear-gradient(180deg, hsla(var(--background), 0.88), hsla(var(--background), 0.94) 42%, hsla(var(--background), 0.97));
}

/* Light theme: slightly darker live background for better contrast */
html:not(.dark) .live-background-base {
  background: linear-gradient(
    180deg,
    hsla(var(--foreground), 0.06),
    hsla(var(--background), 0.92) 42%,
    hsla(var(--background), 0.96)
  );
}

.live-orb {
  box-shadow: 0 0 120px currentColor;
  will-change: transform;
  filter: saturate(115%);
}

.abstract-mesh {
  border-radius: 58% 42% 63% 37% / 40% 46% 54% 60%;
  opacity: 0.88;
  mix-blend-mode: screen;
}

.abstract-rings {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, hsla(var(--info),0.16) 18.4%, transparent 19.4%),
    radial-gradient(circle at 50% 50%, transparent 0 31%, hsla(var(--primary),0.12) 31.5%, transparent 32.5%),
    radial-gradient(circle at 50% 50%, transparent 0 46%, hsla(var(--secondary),0.08) 46.4%, transparent 47.2%);
  mix-blend-mode: screen;
}

.abstract-beams {
  background:
    radial-gradient(circle at 18% 22%, hsla(var(--info),0.18), transparent 18%),
    radial-gradient(circle at 82% 24%, hsla(var(--secondary),0.12), transparent 20%),
    radial-gradient(circle at 48% 72%, hsla(var(--primary),0.16), transparent 24%),
    linear-gradient(125deg, transparent 0 32%, hsla(var(--info),0.06) 48%, transparent 64%),
    linear-gradient(305deg, transparent 8%, hsla(var(--primary),0.06) 42%, transparent 72%);
  mix-blend-mode: screen;
}

.abstract-grid {
  background:
    linear-gradient(to right, hsla(var(--foreground),0.03) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(var(--foreground),0.03) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(circle at center, black 48%, transparent 100%);
}

.abstract-noise {
  background-image:
    radial-gradient(hsla(var(--foreground),0.08) 0.7px, transparent 0.8px),
    radial-gradient(hsla(var(--info),0.1) 0.7px, transparent 0.8px);
  background-position: 0 0, 18px 18px;
  background-size: 26px 26px, 32px 32px;
}

@keyframes caBlobA {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(8%, 10%, 0) scale(1.1) rotate(10deg); }
}

@keyframes caBlobB {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(-8%, -8%, 0) scale(1.15) rotate(-10deg); }
}

@keyframes caBlobC {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(-8deg); }
  100% { transform: translate3d(5%, -8%, 0) scale(1.08) rotate(8deg); }
}

@keyframes caBlobD {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(10%, -4%, 0) scale(1.12) rotate(14deg); }
}

@keyframes caRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.neon-ui {
  color: hsl(var(--foreground));
}

.neon-ui main,
.neon-ui header,
.neon-ui section,
.neon-ui article,
.neon-ui table,
.neon-ui font,
.neon-ui nav {
  filter: drop-shadow(0 0 18px hsla(var(--primary), 0.06));
}

.neon-ui p,
.neon-ui span,
.neon-ui label {
  text-shadow: 0 0 10px hsla(var(--primary), 0.06);
}

.neon-ui button,
.neon-ui a,
.neon-ui input,
.neon-ui select,
.neon-ui textarea {
  box-shadow:
    0 0 0 1px hsla(var(--border), 0.6),
    0 0 18px hsla(var(--primary), 0.12),
    0 0 24px hsla(var(--secondary), 0.06);
}

.neon-ui button:hover,
.neon-ui a:hover {
  box-shadow:
    0 0 0 1px hsla(var(--primary), 0.3),
    0 0 22px hsla(var(--primary), 0.2),
    0 0 36px hsla(var(--secondary), 0.12);
}

.neon-ui input:focus,
.neon-ui select:focus,
.neon-ui textarea:focus {
  box-shadow:
    0 0 0 1px hsla(var(--primary), 0.35),
    0 0 0 4px hsla(var(--primary), 0.18),
    0 0 28px hsla(var(--primary), 0.2);
}