/* ===== LUMINOUS THEME — Deep Glass / HarmonyOS-style ===== */

/* ── Animations ─────────────────────────────────────────── */

@keyframes orb-drift {
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(3%,-2%) scale(1.03); }
  50%  { transform: translate(-2%,3%) scale(0.97); }
  75%  { transform: translate(2%,2%) scale(1.02); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes ring-spin-cw {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ring-spin-ccw {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes ring-spin-cw-fast {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes aurora-wave {
  0%   { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
  10%  { opacity: 0.05; }
  50%  { opacity: 0.08; }
  90%  { opacity: 0.05; }
  100% { transform: translateX(200%) skewX(-15deg); opacity: 0; }
}

@keyframes particle-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  20% { transform: translateY(-10px) translateX(5px); }
  40% { transform: translateY(-3px) translateX(-6px); }
  60% { transform: translateY(-14px) translateX(3px); }
  80% { transform: translateY(-5px) translateX(-2px); }
}

@keyframes particle-float-2 {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(6px) translateX(-8px); }
  50% { transform: translateY(-4px) translateX(4px); }
  75% { transform: translateY(10px) translateX(-2px); }
}

@keyframes glass-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 300% center; }
}

@keyframes orbit-elliptical {
  0%   { transform: rotate(0deg) scaleX(1); }
  50%  { transform: rotate(180deg) scaleX(0.7); }
  100% { transform: rotate(360deg) scaleX(1); }
}

/* ── CSS Variables ─────────────────────────────────────── */

.dark.theme-luminous {
  --background: 220 32% 7%;
  --foreground: 210 30% 94%;
  --card: 218 30% 8%;
  --card-foreground: 210 30% 94%;
  --popover: 218 30% 8%;
  --popover-foreground: 210 30% 94%;
  --primary: 210 75% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 185 70% 45%;
  --secondary-foreground: 0 0% 100%;
  --muted: 218 18% 12%;
  --muted-foreground: 218 12% 55%;
  --accent: 35 80% 55%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 75% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 218 20% 16%;
  --input: 218 18% 14%;
  --ring: 210 75% 55%;
  --radius: 0.75rem;
  --sidebar: 220 32% 7%;
  --sidebar-foreground: 210 30% 94%;
  --sidebar-primary: 210 75% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 218 30% 12%;
  --sidebar-accent-foreground: 210 30% 94%;
  --sidebar-border: 218 20% 12%;
  --sidebar-ring: 210 75% 55%;
}

.light.theme-luminous {
  --background: 205 38% 86%;
  --foreground: 210 30% 15%;
  --card: 0 0% 100%;
  --card-foreground: 210 30% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 30% 15%;
  --primary: 210 65% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 185 65% 38%;
  --secondary-foreground: 0 0% 100%;
  --muted: 205 20% 90%;
  --muted-foreground: 210 12% 48%;
  --accent: 35 75% 50%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 75% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 18% 78%;
  --input: 210 15% 84%;
  --ring: 210 65% 48%;
  --radius: 0.75rem;
  --sidebar: 0 0% 100%;
  --sidebar-foreground: 210 30% 15%;
  --sidebar-primary: 210 65% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 205 18% 90%;
  --sidebar-accent-foreground: 210 30% 15%;
  --sidebar-border: 210 18% 78%;
  --sidebar-ring: 210 65% 48%;
}

/* ═══ DARK MODE — COSMIC BACKGROUND ══════════════════════ */

.dark.theme-luminous body {
  position: relative;
  background: hsl(220, 32%, 7%);
  overflow-x: hidden;
}

.dark.theme-luminous body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -8;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 45% 40%, hsla(210, 65%, 35%, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 72% 25%, hsla(185, 75%, 40%, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 18% 72%, hsla(35, 80%, 45%, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 68%, hsla(220, 60%, 20%, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 35% 40% at 8% 12%, hsla(200, 70%, 40%, 0.035) 0%, transparent 45%),
    radial-gradient(ellipse 30% 40% at 88% 42%, hsla(230, 40%, 25%, 0.03) 0%, transparent 45%),
    radial-gradient(ellipse 100% 80% at 50% 50%, hsla(220, 50%, 10%, 0.25) 0%, transparent 70%);
}

.dark.theme-luminous body::after {
  content: "";
  position: fixed;
  z-index: -7;
  pointer-events: none;
  top: 50%; left: 50%;
  width: 820px; height: 820px;
  margin: -410px 0 0 -410px;
  border-radius: 50%;
  border: 1px solid hsla(210, 60%, 55%, 0.04);
  outline: 1px solid hsla(185, 65%, 50%, 0.025);
  outline-offset: 40px;
  box-shadow:
    0 0 0 90px hsla(210, 55%, 50%, 0.018),
    0 0 0 150px hsla(185, 60%, 50%, 0.012),
    0 0 0 210px hsla(35, 70%, 50%, 0.007),
    0 0 0 280px hsla(210, 50%, 50%, 0.01),
    0 0 0 360px hsla(185, 55%, 50%, 0.005),
    0 0 0 430px hsla(210, 45%, 50%, 0.008),
    0 0 50px hsla(210, 60%, 55%, 0.02);
  background:
    conic-gradient(
      from 45deg,
      transparent 0deg, hsla(210, 60%, 60%, 0.012) 0deg, hsla(210, 60%, 60%, 0.012) 1deg, transparent 1deg,
      transparent 44deg, hsla(210, 60%, 60%, 0.008) 44deg, hsla(210, 60%, 60%, 0.008) 45deg, transparent 45deg,
      transparent 89deg, hsla(185, 65%, 55%, 0.01) 89deg, hsla(185, 65%, 55%, 0.01) 90deg, transparent 90deg,
      transparent 134deg, hsla(185, 65%, 55%, 0.007) 134deg, hsla(185, 65%, 55%, 0.007) 135deg, transparent 135deg,
      transparent 179deg, hsla(35, 70%, 50%, 0.007) 179deg, hsla(35, 70%, 50%, 0.007) 180deg, transparent 180deg,
      transparent 224deg, hsla(210, 60%, 60%, 0.007) 224deg, hsla(210, 60%, 60%, 0.007) 225deg, transparent 225deg,
      transparent 269deg, hsla(185, 65%, 50%, 0.007) 269deg, hsla(185, 65%, 50%, 0.007) 270deg, transparent 270deg,
      transparent 314deg, hsla(35, 70%, 50%, 0.005) 314deg, hsla(35, 70%, 50%, 0.005) 315deg, transparent 315deg
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px,
      transparent 30px, hsla(210, 50%, 55%, 0.012) 30px, hsla(210, 50%, 55%, 0.012) 31px, transparent 31px,
      transparent 70px, hsla(210, 50%, 55%, 0.01) 70px, hsla(210, 50%, 55%, 0.01) 71px, transparent 71px,
      transparent 120px, hsla(185, 55%, 50%, 0.01) 120px, hsla(185, 55%, 50%, 0.01) 121px, transparent 121px,
      transparent 150px, hsla(210, 50%, 50%, 0.008) 150px, hsla(210, 50%, 50%, 0.008) 151px, transparent 151px,
      transparent 210px, hsla(35, 65%, 50%, 0.007) 210px, hsla(35, 65%, 50%, 0.007) 211px, transparent 211px,
      transparent 260px, hsla(210, 50%, 50%, 0.008) 260px, hsla(210, 50%, 50%, 0.008) 261px, transparent 261px,
      transparent 320px, hsla(185, 55%, 50%, 0.006) 320px, hsla(185, 55%, 50%, 0.006) 321px, transparent 321px,
      transparent 370px, hsla(210, 45%, 50%, 0.007) 370px, hsla(210, 45%, 50%, 0.007) 371px, transparent 371px,
      transparent 430px, hsla(35, 60%, 50%, 0.005) 430px, hsla(35, 60%, 50%, 0.005) 431px, transparent 431px
    );
  animation: ring-spin-ccw 240s linear infinite;
}

.dark.theme-luminous .min-h-screen.bg-background {
  position: relative;
}

.dark.theme-luminous .min-h-screen.bg-background::before {
  content: "";
  position: fixed;
  z-index: -6;
  pointer-events: none;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent, transparent 48px,
      hsla(210, 15%, 50%, 0.008) 48px, hsla(210, 15%, 50%, 0.008) 49px,
      transparent 49px, transparent 100px
    ),
    repeating-linear-gradient(90deg,
      transparent, transparent 48px,
      hsla(210, 15%, 50%, 0.006) 48px, hsla(210, 15%, 50%, 0.006) 49px,
      transparent 49px, transparent 100px
    ),
    repeating-linear-gradient(45deg,
      transparent, transparent 70px,
      hsla(185, 15%, 50%, 0.004) 70px, hsla(185, 15%, 50%, 0.004) 71px,
      transparent 71px, transparent 140px
    ),
    repeating-linear-gradient(-45deg,
      transparent, transparent 70px,
      hsla(185, 15%, 50%, 0.003) 70px, hsla(185, 15%, 50%, 0.003) 71px,
      transparent 71px, transparent 140px
    ),
    radial-gradient(1px 1px at 4% 8%, hsla(210, 30%, 60%, 0.025), transparent),
    radial-gradient(1px 1px at 12% 22%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 20% 5%, hsla(210, 30%, 60%, 0.03), transparent),
    radial-gradient(1px 1px at 28% 18%, hsla(185, 30%, 55%, 0.02), transparent),
    radial-gradient(1px 1px at 36% 10%, hsla(210, 30%, 60%, 0.025), transparent),
    radial-gradient(1px 1px at 44% 25%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 52% 8%, hsla(185, 30%, 55%, 0.025), transparent),
    radial-gradient(1px 1px at 60% 20%, hsla(210, 30%, 60%, 0.03), transparent),
    radial-gradient(1px 1px at 68% 12%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 76% 28%, hsla(35, 30%, 55%, 0.015), transparent),
    radial-gradient(1px 1px at 84% 6%, hsla(210, 30%, 60%, 0.025), transparent),
    radial-gradient(1px 1px at 92% 16%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 8% 38%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 16% 48%, hsla(185, 30%, 55%, 0.025), transparent),
    radial-gradient(1px 1px at 24% 32%, hsla(210, 30%, 60%, 0.03), transparent),
    radial-gradient(1px 1px at 32% 55%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 40% 42%, hsla(185, 30%, 55%, 0.02), transparent),
    radial-gradient(1px 1px at 48% 35%, hsla(210, 30%, 60%, 0.025), transparent),
    radial-gradient(1px 1px at 56% 50%, hsla(35, 30%, 55%, 0.015), transparent),
    radial-gradient(1px 1px at 64% 38%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 72% 48%, hsla(185, 30%, 55%, 0.025), transparent),
    radial-gradient(1px 1px at 80% 30%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 88% 45%, hsla(210, 30%, 60%, 0.03), transparent),
    radial-gradient(1px 1px at 96% 36%, hsla(185, 30%, 55%, 0.02), transparent),
    radial-gradient(1px 1px at 6% 65%, hsla(210, 30%, 60%, 0.025), transparent),
    radial-gradient(1px 1px at 14% 78%, hsla(35, 30%, 55%, 0.015), transparent),
    radial-gradient(1px 1px at 22% 62%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 30% 72%, hsla(185, 30%, 55%, 0.02), transparent),
    radial-gradient(1px 1px at 38% 58%, hsla(210, 30%, 60%, 0.03), transparent),
    radial-gradient(1px 1px at 46% 68%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 54% 82%, hsla(185, 30%, 55%, 0.025), transparent),
    radial-gradient(1px 1px at 62% 60%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 70% 75%, hsla(210, 30%, 60%, 0.025), transparent),
    radial-gradient(1px 1px at 78% 55%, hsla(35, 30%, 55%, 0.015), transparent),
    radial-gradient(1px 1px at 86% 70%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 94% 62%, hsla(185, 30%, 55%, 0.025), transparent),
    radial-gradient(1px 1px at 10% 90%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(1px 1px at 26% 88%, hsla(210, 30%, 60%, 0.025), transparent),
    radial-gradient(1px 1px at 42% 95%, hsla(185, 30%, 55%, 0.02), transparent),
    radial-gradient(1px 1px at 58% 85%, hsla(210, 30%, 60%, 0.03), transparent),
    radial-gradient(1px 1px at 74% 92%, hsla(35, 30%, 55%, 0.015), transparent),
    radial-gradient(1px 1px at 90% 80%, hsla(210, 30%, 60%, 0.02), transparent),
    radial-gradient(ellipse 35% 22% at 28% 28%, hsla(210, 70%, 50%, 0.02) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 68% 52%, hsla(185, 70%, 45%, 0.015) 0%, transparent 50%),
    radial-gradient(ellipse 20% 30% at 48% 72%, hsla(35, 70%, 50%, 0.012) 0%, transparent 50%),
    radial-gradient(ellipse 25% 20% at 15% 55%, hsla(200, 60%, 45%, 0.015) 0%, transparent 45%),
    radial-gradient(ellipse 20% 18% at 85% 20%, hsla(210, 60%, 50%, 0.015) 0%, transparent 45%);
}

.dark.theme-luminous .min-h-screen.bg-background::after {
  content: "";
  position: fixed;
  z-index: -5;
  pointer-events: none;
  top: 50%; left: 50%;
  width: 920px; height: 920px;
  margin: -460px 0 0 -460px;
  border-radius: 50%;
  border: 1px solid hsla(210, 60%, 55%, 0.035);
  box-shadow:
    0 0 50px hsla(210, 60%, 55%, 0.012),
    0 0 0 1px hsla(210, 60%, 55%, 0.012);
  background:
    radial-gradient(circle at 50% 0%, hsla(210, 70%, 55%, 0.015) 0%, transparent 30%);
  animation: ring-spin-cw 150s linear infinite;
}

.dark.theme-luminous .min-h-screen > .flex.h-full { position: relative; z-index: 0; }

.dark.theme-luminous .min-h-screen > .flex.h-full::before {
  content: "";
  position: fixed;
  z-index: -4;
  pointer-events: none;
  top: 50%; left: 50%;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  border: 1px solid hsla(185, 65%, 50%, 0.03);
  box-shadow: 0 0 25px hsla(185, 65%, 50%, 0.008);
  background:
    radial-gradient(circle at 50% 50%, hsla(185, 70%, 50%, 0.012) 0%, transparent 40%);
  animation: ring-spin-ccw 110s linear infinite;
}

.dark.theme-luminous header + main::before,
.dark.theme-luminous nav + main::before {
  content: "" !important;
  position: fixed !important;
  z-index: -3 !important;
  pointer-events: none !important;
  top: 50% !important; left: 50% !important;
  width: 260px !important; height: 260px !important;
  margin: -130px 0 0 -130px !important;
  border-radius: 50% !important;
  border: 1px solid hsla(35, 70%, 55%, 0.025) !important;
  box-shadow: 0 0 15px hsla(35, 70%, 55%, 0.006) !important;
  background: transparent !important;
  animation: ring-spin-cw-fast 60s linear infinite !important;
}

.dark.theme-luminous .min-h-screen > .flex.h-full::after {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 20%; left: 0;
  width: 120%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(210, 70%, 55%, 0.025) 12%,
    hsla(185, 70%, 50%, 0.035) 28%,
    hsla(210, 75%, 55%, 0.025) 42%,
    hsla(35, 80%, 55%, 0.015) 52%,
    hsla(210, 70%, 55%, 0.025) 68%,
    transparent 100%
  );
  filter: blur(28px);
  animation: aurora-wave 35s ease-in-out infinite;
}

.dark.theme-luminous header + *::before,
.dark.theme-luminous nav + *::before,
.dark.theme-luminous .fixed + main::before {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 50%; left: 0;
  width: 120%; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(185, 70%, 45%, 0.02) 18%,
    hsla(210, 70%, 50%, 0.03) 38%,
    hsla(185, 75%, 55%, 0.025) 58%,
    transparent 100%
  );
  filter: blur(32px);
  animation: aurora-wave 45s ease-in-out infinite 12s;
}

.dark.theme-luminous .min-h-screen > .flex > .flex-1::before {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 75%; left: 0;
  width: 120%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(210, 60%, 50%, 0.015) 25%,
    hsla(35, 70%, 50%, 0.02) 50%,
    transparent 75%
  );
  filter: blur(25px);
  animation: aurora-wave 55s ease-in-out infinite 20s;
}

.dark.theme-luminous .fixed.inset-0.z-\[-1\] {
  display: block !important;
  background: transparent !important;
}

.dark.theme-luminous .fixed.inset-0.z-\[-1\]::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: hsla(210, 70%, 80%, 0.2);
  box-shadow:
    50px 120px 0 0 hsla(210, 80%, 75%, 0.18),
    180px 60px 0 0 hsla(210, 80%, 70%, 0.15),
    320px 200px 0 1px hsla(210, 80%, 80%, 0.1),
    480px 80px 0 0 hsla(210, 70%, 75%, 0.2),
    620px 250px 0 0 hsla(210, 80%, 70%, 0.12),
    780px 140px 0 2px hsla(210, 70%, 80%, 0.08),
    920px 50px 0 0 hsla(210, 80%, 75%, 0.15),
    1100px 300px 0 0 hsla(210, 70%, 70%, 0.1),
    100px 400px 0 1px hsla(185, 80%, 75%, 0.15),
    250px 550px 0 0 hsla(185, 80%, 70%, 0.18),
    400px 700px 0 0 hsla(185, 70%, 80%, 0.1),
    550px 450px 0 2px hsla(185, 80%, 75%, 0.08),
    700px 600px 0 0 hsla(185, 80%, 70%, 0.15),
    850px 800px 0 0 hsla(185, 70%, 75%, 0.12),
    1050px 500px 0 1px hsla(185, 80%, 80%, 0.06),
    1200px 650px 0 0 hsla(185, 70%, 70%, 0.14),
    150px 900px 0 0 hsla(35, 80%, 75%, 0.12),
    450px 1050px 0 1px hsla(35, 90%, 80%, 0.06),
    750px 950px 0 0 hsla(35, 80%, 70%, 0.1),
    1000px 1100px 0 0 hsla(35, 80%, 75%, 0.08),
    60px 1300px 0 1px hsla(200, 80%, 75%, 0.1),
    300px 1450px 0 0 hsla(210, 70%, 70%, 0.14),
    500px 1250px 0 0 hsla(185, 75%, 75%, 0.12),
    650px 1500px 0 2px hsla(210, 80%, 80%, 0.05),
    850px 1350px 0 0 hsla(185, 80%, 70%, 0.15),
    1050px 1600px 0 0 hsla(210, 70%, 75%, 0.1),
    200px 1800px 0 0 hsla(210, 80%, 80%, 0.08),
    400px 1950px 0 1px hsla(210, 70%, 70%, 0.12),
    600px 1750px 0 0 hsla(210, 80%, 75%, 0.1),
    800px 2000px 0 0 hsla(185, 70%, 75%, 0.08),
    1100px 1850px 0 1px hsla(210, 80%, 80%, 0.06);
  animation: particle-float 18s ease-in-out infinite;
}

.dark.theme-luminous .fixed.inset-0.z-\[-1\]::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: hsla(185, 80%, 75%, 0.12);
  box-shadow:
    120px 220px 0 0 hsla(210, 70%, 80%, 0.05),
    280px 380px 0 0 hsla(185, 70%, 75%, 0.06),
    450px 150px 0 0 hsla(210, 80%, 85%, 0.04),
    600px 500px 0 0 hsla(35, 70%, 75%, 0.05),
    820px 350px 0 0 hsla(210, 70%, 80%, 0.06),
    950px 600px 0 0 hsla(185, 75%, 80%, 0.04),
    200px 750px 0 0 hsla(210, 80%, 85%, 0.05),
    500px 900px 0 0 hsla(35, 70%, 80%, 0.04),
    720px 1100px 0 0 hsla(210, 70%, 75%, 0.06),
    920px 850px 0 0 hsla(185, 80%, 80%, 0.04),
    150px 1400px 0 0 hsla(210, 70%, 80%, 0.05),
    380px 1600px 0 0 hsla(185, 70%, 75%, 0.06),
    680px 1400px 0 0 hsla(210, 80%, 85%, 0.04),
    950px 1700px 0 0 hsla(35, 70%, 75%, 0.04),
    250px 1900px 0 0 hsla(210, 70%, 80%, 0.06),
    550px 2100px 0 0 hsla(185, 75%, 80%, 0.04),
    320px 240px 0 0 hsla(210, 70%, 80%, 0.04),
    640px 420px 0 0 hsla(185, 70%, 75%, 0.05),
    160px 580px 0 0 hsla(210, 80%, 85%, 0.03),
    780px 720px 0 0 hsla(35, 70%, 75%, 0.03);
  animation: particle-float-2 26s ease-in-out infinite;
}

/* ═══ LIGHT MODE — HARMONYOS BACKGROUND ══════════════════ */

.light.theme-luminous body {
  position: relative;
  background: hsl(205, 38%, 86%);
  overflow-x: hidden;
}

.light.theme-luminous body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -8;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 45% 40%, hsla(210, 60%, 78%, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 72% 25%, hsla(185, 55%, 75%, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 18% 72%, hsla(35, 60%, 82%, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 68%, hsla(220, 40%, 82%, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 35% 40% at 8% 12%, hsla(200, 60%, 82%, 0.05) 0%, transparent 45%),
    radial-gradient(ellipse 30% 40% at 88% 42%, hsla(30, 45%, 80%, 0.04) 0%, transparent 45%),
    radial-gradient(ellipse 100% 80% at 50% 50%, hsla(205, 30%, 92%, 0.5) 0%, transparent 70%);
}

.light.theme-luminous body::after {
  content: "";
  position: fixed;
  z-index: -7;
  pointer-events: none;
  top: 50%; left: 50%;
  width: 820px; height: 820px;
  margin: -410px 0 0 -410px;
  border-radius: 50%;
  border: 1.5px solid hsla(0, 0%, 100%, 0.06);
  outline: 1.5px solid hsla(0, 0%, 100%, 0.04);
  outline-offset: 40px;
  box-shadow:
    0 0 0 90px hsla(0, 0%, 100%, 0.035),
    0 0 0 150px hsla(0, 0%, 100%, 0.025),
    0 0 0 210px hsla(35, 50%, 70%, 0.012),
    0 0 0 280px hsla(0, 0%, 100%, 0.02),
    0 0 0 360px hsla(185, 30%, 60%, 0.01),
    0 0 0 430px hsla(0, 0%, 100%, 0.015),
    0 0 50px hsla(0, 0%, 100%, 0.03);
  background:
    conic-gradient(
      from 45deg,
      transparent 0deg, hsla(0, 0%, 100%, 0.025) 0deg, hsla(0, 0%, 100%, 0.025) 1deg, transparent 1deg,
      transparent 44deg, hsla(0, 0%, 100%, 0.018) 44deg, hsla(0, 0%, 100%, 0.018) 45deg, transparent 45deg,
      transparent 89deg, hsla(185, 40%, 70%, 0.02) 89deg, hsla(185, 40%, 70%, 0.02) 90deg, transparent 90deg,
      transparent 134deg, hsla(185, 35%, 65%, 0.015) 134deg, hsla(185, 35%, 65%, 0.015) 135deg, transparent 135deg,
      transparent 179deg, hsla(35, 40%, 75%, 0.015) 179deg, hsla(35, 40%, 75%, 0.015) 180deg, transparent 180deg,
      transparent 224deg, hsla(0, 0%, 100%, 0.015) 224deg, hsla(0, 0%, 100%, 0.015) 225deg, transparent 225deg,
      transparent 269deg, hsla(185, 35%, 65%, 0.015) 269deg, hsla(185, 35%, 65%, 0.015) 270deg, transparent 270deg,
      transparent 314deg, hsla(35, 35%, 70%, 0.012) 314deg, hsla(35, 35%, 70%, 0.012) 315deg, transparent 315deg
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px,
      transparent 30px, hsla(0, 0%, 100%, 0.025) 30px, hsla(0, 0%, 100%, 0.025) 31px, transparent 31px,
      transparent 70px, hsla(0, 0%, 100%, 0.02) 70px, hsla(0, 0%, 100%, 0.02) 71px, transparent 71px,
      transparent 120px, hsla(185, 40%, 72%, 0.02) 120px, hsla(185, 40%, 72%, 0.02) 121px, transparent 121px,
      transparent 150px, hsla(0, 0%, 100%, 0.018) 150px, hsla(0, 0%, 100%, 0.018) 151px, transparent 151px,
      transparent 210px, hsla(35, 40%, 72%, 0.015) 210px, hsla(35, 40%, 72%, 0.015) 211px, transparent 211px,
      transparent 260px, hsla(0, 0%, 100%, 0.018) 260px, hsla(0, 0%, 100%, 0.018) 261px, transparent 261px,
      transparent 320px, hsla(185, 35%, 65%, 0.015) 320px, hsla(185, 35%, 65%, 0.015) 321px, transparent 321px,
      transparent 370px, hsla(0, 0%, 100%, 0.015) 370px, hsla(0, 0%, 100%, 0.015) 371px, transparent 371px,
      transparent 430px, hsla(35, 35%, 70%, 0.012) 430px, hsla(35, 35%, 70%, 0.012) 431px, transparent 431px
    );
  animation: ring-spin-ccw 240s linear infinite;
}

.light.theme-luminous .min-h-screen.bg-background::before {
  content: "";
  position: fixed;
  z-index: -6;
  pointer-events: none;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent, transparent 48px,
      hsla(0, 0%, 100%, 0.018) 48px, hsla(0, 0%, 100%, 0.018) 49px,
      transparent 49px, transparent 100px
    ),
    repeating-linear-gradient(90deg,
      transparent, transparent 48px,
      hsla(0, 0%, 100%, 0.014) 48px, hsla(0, 0%, 100%, 0.014) 49px,
      transparent 49px, transparent 100px
    ),
    repeating-linear-gradient(45deg,
      transparent, transparent 70px,
      hsla(185, 30%, 70%, 0.01) 70px, hsla(185, 30%, 70%, 0.01) 71px,
      transparent 71px, transparent 140px
    ),
    repeating-linear-gradient(-45deg,
      transparent, transparent 70px,
      hsla(185, 25%, 65%, 0.008) 70px, hsla(185, 25%, 65%, 0.008) 71px,
      transparent 71px, transparent 140px
    ),
    radial-gradient(1.5px 1.5px at 4% 8%, hsla(0, 0%, 100%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 12% 22%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 20% 5%, hsla(0, 0%, 100%, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 28% 18%, hsla(185, 30%, 75%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 36% 10%, hsla(0, 0%, 100%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 44% 25%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 52% 8%, hsla(185, 30%, 75%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, hsla(0, 0%, 100%, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 68% 12%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 76% 28%, hsla(35, 30%, 80%, 0.05), transparent),
    radial-gradient(1.5px 1.5px at 84% 6%, hsla(0, 0%, 100%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 92% 16%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 8% 38%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 16% 48%, hsla(185, 30%, 75%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 24% 32%, hsla(0, 0%, 100%, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 32% 55%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 40% 42%, hsla(185, 30%, 75%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 48% 35%, hsla(0, 0%, 100%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 56% 50%, hsla(35, 30%, 80%, 0.05), transparent),
    radial-gradient(1.5px 1.5px at 64% 38%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 72% 48%, hsla(185, 30%, 75%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 80% 30%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 88% 45%, hsla(0, 0%, 100%, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 96% 36%, hsla(185, 30%, 75%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 6% 65%, hsla(0, 0%, 100%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 14% 78%, hsla(35, 30%, 80%, 0.05), transparent),
    radial-gradient(1.5px 1.5px at 22% 62%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 30% 72%, hsla(185, 30%, 75%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 38% 58%, hsla(0, 0%, 100%, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 46% 68%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 54% 82%, hsla(185, 30%, 75%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 62% 60%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 70% 75%, hsla(0, 0%, 100%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 78% 55%, hsla(35, 30%, 80%, 0.05), transparent),
    radial-gradient(1.5px 1.5px at 86% 70%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 94% 62%, hsla(185, 30%, 75%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 10% 90%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 26% 88%, hsla(0, 0%, 100%, 0.07), transparent),
    radial-gradient(1.5px 1.5px at 42% 95%, hsla(185, 30%, 75%, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 58% 85%, hsla(0, 0%, 100%, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 74% 92%, hsla(35, 30%, 80%, 0.05), transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, hsla(0, 0%, 100%, 0.06), transparent),
    radial-gradient(ellipse 35% 22% at 28% 28%, hsla(210, 55%, 78%, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 68% 52%, hsla(185, 50%, 72%, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 20% 30% at 48% 72%, hsla(35, 50%, 80%, 0.025) 0%, transparent 50%),
    radial-gradient(ellipse 25% 20% at 15% 55%, hsla(200, 50%, 78%, 0.025) 0%, transparent 45%),
    radial-gradient(ellipse 20% 18% at 85% 20%, hsla(210, 50%, 78%, 0.025) 0%, transparent 45%);
}

.light.theme-luminous .min-h-screen.bg-background::after {
  content: "";
  position: fixed;
  z-index: -5;
  pointer-events: none;
  top: 50%; left: 50%;
  width: 920px; height: 920px;
  margin: -460px 0 0 -460px;
  border-radius: 50%;
  border: 1.5px solid hsla(0, 0%, 100%, 0.04);
  box-shadow:
    0 0 60px hsla(0, 0%, 100%, 0.025),
    0 0 0 1px hsla(0, 0%, 100%, 0.02);
  background:
    radial-gradient(circle at 50% 0%, hsla(210, 55%, 80%, 0.025) 0%, transparent 30%);
  animation: ring-spin-cw 150s linear infinite;
}

.light.theme-luminous .min-h-screen > .flex.h-full::before {
  content: "";
  position: fixed;
  z-index: -4;
  pointer-events: none;
  top: 50%; left: 50%;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  border: 1.5px solid hsla(0, 0%, 100%, 0.05);
  box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.02);
  background:
    radial-gradient(circle at 50% 50%, hsla(185, 45%, 72%, 0.02) 0%, transparent 40%);
  animation: ring-spin-ccw 110s linear infinite;
}

.light.theme-luminous header + main::before,
.light.theme-luminous nav + main::before {
  content: "" !important;
  position: fixed !important;
  z-index: -3 !important;
  pointer-events: none !important;
  top: 50% !important; left: 50% !important;
  width: 260px !important; height: 260px !important;
  margin: -130px 0 0 -130px !important;
  border-radius: 50% !important;
  border: 1.5px solid hsla(0, 0%, 100%, 0.04) !important;
  box-shadow: 0 0 20px hsla(0, 0%, 100%, 0.015) !important;
  background: transparent !important;
  animation: ring-spin-cw-fast 60s linear infinite !important;
}

.light.theme-luminous .min-h-screen > .flex.h-full::after {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 20%; left: 0;
  width: 120%; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(210, 60%, 85%, 0.04) 12%,
    hsla(185, 55%, 80%, 0.06) 28%,
    hsla(210, 60%, 85%, 0.04) 42%,
    hsla(35, 55%, 82%, 0.03) 52%,
    hsla(210, 60%, 85%, 0.04) 68%,
    transparent 100%
  );
  filter: blur(28px);
  animation: aurora-wave 30s ease-in-out infinite;
}

.light.theme-luminous header + *::before,
.light.theme-luminous nav + *::before,
.light.theme-luminous .fixed + main::before {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 50%; left: 0;
  width: 120%; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(185, 50%, 75%, 0.035) 18%,
    hsla(210, 60%, 85%, 0.05) 38%,
    hsla(185, 55%, 78%, 0.04) 58%,
    transparent 100%
  );
  filter: blur(30px);
  animation: aurora-wave 40s ease-in-out infinite 12s;
}

.light.theme-luminous .min-h-screen > .flex > .flex-1::before {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 75%; left: 0;
  width: 120%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(210, 55%, 80%, 0.025) 25%,
    hsla(35, 50%, 80%, 0.035) 50%,
    transparent 75%
  );
  filter: blur(25px);
  animation: aurora-wave 50s ease-in-out infinite 20s;
}

.light.theme-luminous .fixed.inset-0.z-\[-1\] {
  display: block !important;
  background: transparent !important;
}

.light.theme-luminous .fixed.inset-0.z-\[-1\]::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.15);
  box-shadow:
    50px 120px 0 0 hsla(0, 0%, 100%, 0.12),
    180px 60px 0 0 hsla(0, 0%, 100%, 0.1),
    320px 200px 0 1px hsla(0, 0%, 100%, 0.07),
    480px 80px 0 0 hsla(0, 0%, 100%, 0.15),
    620px 250px 0 0 hsla(0, 0%, 100%, 0.1),
    780px 140px 0 2px hsla(0, 0%, 100%, 0.06),
    920px 50px 0 0 hsla(0, 0%, 100%, 0.12),
    1100px 300px 0 0 hsla(0, 0%, 100%, 0.08),
    100px 400px 0 1px hsla(185, 40%, 78%, 0.12),
    250px 550px 0 0 hsla(185, 35%, 75%, 0.12),
    400px 700px 0 0 hsla(185, 30%, 70%, 0.07),
    550px 450px 0 2px hsla(185, 35%, 72%, 0.06),
    700px 600px 0 0 hsla(185, 40%, 78%, 0.12),
    850px 800px 0 0 hsla(185, 35%, 75%, 0.1),
    1050px 500px 0 1px hsla(185, 30%, 70%, 0.05),
    1200px 650px 0 0 hsla(185, 35%, 72%, 0.1),
    150px 900px 0 0 hsla(35, 35%, 80%, 0.1),
    450px 1050px 0 1px hsla(35, 30%, 75%, 0.05),
    750px 950px 0 0 hsla(35, 35%, 80%, 0.08),
    1000px 1100px 0 0 hsla(35, 30%, 75%, 0.07),
    60px 1300px 0 1px hsla(200, 40%, 78%, 0.08),
    300px 1450px 0 0 hsla(0, 0%, 100%, 0.1),
    500px 1250px 0 0 hsla(185, 35%, 75%, 0.08),
    650px 1500px 0 2px hsla(0, 0%, 100%, 0.05),
    850px 1350px 0 0 hsla(185, 35%, 75%, 0.12),
    1050px 1600px 0 0 hsla(0, 0%, 100%, 0.08),
    200px 1800px 0 0 hsla(0, 0%, 100%, 0.07),
    400px 1950px 0 1px hsla(0, 0%, 100%, 0.1),
    600px 1750px 0 0 hsla(0, 0%, 100%, 0.08),
    800px 2000px 0 0 hsla(185, 35%, 75%, 0.07),
    1100px 1850px 0 1px hsla(0, 0%, 100%, 0.06);
  animation: particle-float 18s ease-in-out infinite;
}

.light.theme-luminous .fixed.inset-0.z-\[-1\]::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.1);
  box-shadow:
    120px 220px 0 0 hsla(0, 0%, 100%, 0.05),
    280px 380px 0 0 hsla(185, 35%, 75%, 0.06),
    450px 150px 0 0 hsla(0, 0%, 100%, 0.04),
    600px 500px 0 0 hsla(35, 30%, 75%, 0.05),
    820px 350px 0 0 hsla(0, 0%, 100%, 0.06),
    950px 600px 0 0 hsla(185, 35%, 75%, 0.04),
    200px 750px 0 0 hsla(0, 0%, 100%, 0.05),
    500px 900px 0 0 hsla(35, 30%, 75%, 0.04),
    720px 1100px 0 0 hsla(0, 0%, 100%, 0.06),
    920px 850px 0 0 hsla(185, 35%, 75%, 0.04),
    150px 1400px 0 0 hsla(0, 0%, 100%, 0.05),
    380px 1600px 0 0 hsla(185, 35%, 75%, 0.06),
    680px 1400px 0 0 hsla(0, 0%, 100%, 0.04),
    950px 1700px 0 0 hsla(35, 30%, 75%, 0.04),
    250px 1900px 0 0 hsla(0, 0%, 100%, 0.06),
    550px 2100px 0 0 hsla(185, 35%, 75%, 0.04),
    320px 240px 0 0 hsla(0, 0%, 100%, 0.04),
    640px 420px 0 0 hsla(185, 35%, 75%, 0.05),
    160px 580px 0 0 hsla(0, 0%, 100%, 0.03),
    780px 720px 0 0 hsla(35, 30%, 75%, 0.03);
  animation: particle-float-2 26s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   ══  DEEP GLASS 2.0 — Glass Morphism                     ══
   ════════════════════════════════════════════════════════════ */

.dark.theme-luminous .bg-card,
.dark.theme-luminous .bg-popover {
  background: hsla(218, 30%, 8%, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative !important;
  border: 1.5px solid hsla(210, 55%, 70%, 0.05) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow:
    0 0 0 1px hsla(210, 60%, 65%, 0.025),
    0 2px 0 0 hsla(220, 40%, 2%, 0.35),
    0 8px 28px hsla(220, 45%, 2%, 0.3),
    inset 0 1.5px 0 hsla(210, 60%, 80%, 0.1),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.2),
    inset 1.5px 0 0 hsla(210, 60%, 80%, 0.035),
    inset -1.5px 0 0 hsla(220, 50%, 0%, 0.12) !important;
  border-radius: 0.75rem !important;
}

.dark.theme-luminous .bg-card::before,
.dark.theme-luminous .bg-popover::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  box-shadow:
    inset 0 2px 1px -1px hsla(210, 80%, 75%, 0.05),
    inset -2px 0 1px -1px hsla(185, 75%, 65%, 0.025),
    inset 0 -2px 1px -1px hsla(35, 80%, 75%, 0.025),
    inset 2px 0 1px -1px hsla(210, 80%, 75%, 0.025) !important;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 25%,
    hsla(210, 80%, 85%, 0.035) 30%,
    hsla(185, 70%, 75%, 0.015) 35%,
    transparent 40%,
    transparent 60%,
    hsla(210, 80%, 85%, 0.02) 65%,
    hsla(35, 80%, 80%, 0.012) 70%,
    transparent 75%,
    transparent 100%
  ) !important;
  background-size: 300% 100% !important;
  background-position: 100% center !important;
}

.dark.theme-luminous .bg-card:hover::before,
.dark.theme-luminous .bg-popover:hover::before {
  animation: glass-shine 2s ease-out forwards !important;
}

.dark.theme-luminous .bg-card > *,
.dark.theme-luminous .bg-popover > * {
  position: relative !important;
  z-index: 1 !important;
}

.dark.theme-luminous .bg-card:hover,
.dark.theme-luminous .bg-popover:hover {
  border-color: hsla(210, 75%, 55%, 0.08) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px hsla(210, 75%, 55%, 0.035),
    0 4px 0 0 hsla(220, 40%, 2%, 0.35),
    0 12px 36px hsla(220, 45%, 2%, 0.35),
    inset 0 1.5px 0 hsla(210, 60%, 80%, 0.12),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.2),
    inset 1.5px 0 0 hsla(210, 60%, 80%, 0.04),
    inset -1.5px 0 0 hsla(220, 50%, 0%, 0.12),
    0 0 20px hsla(210, 75%, 55%, 0.035) !important;
}

.light.theme-luminous .bg-card,
.light.theme-luminous .bg-popover {
  background: hsla(0, 0%, 100%, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative !important;
  border: 1.5px solid hsla(0, 0%, 100%, 0.3) !important;
  box-shadow:
    0 0 0 1px hsla(0, 0%, 100%, 0.45),
    0 2px 0 0 hsla(210, 15%, 70%, 0.06),
    0 8px 32px hsla(210, 20%, 55%, 0.035),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.55),
    inset 0 -1.5px 0 hsla(210, 20%, 45%, 0.04),
    inset 1.5px 0 0 hsla(0, 0%, 100%, 0.15),
    inset -1.5px 0 0 hsla(210, 15%, 55%, 0.03) !important;
  border-radius: 0.75rem !important;
}

.light.theme-luminous .bg-card::before,
.light.theme-luminous .bg-popover::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  box-shadow:
    inset 0 2px 1px -1px hsla(0, 0%, 100%, 0.3),
    inset -2px 0 1px -1px hsla(210, 30%, 80%, 0.06),
    inset 0 -2px 1px -1px hsla(35, 20%, 65%, 0.04),
    inset 2px 0 1px -1px hsla(210, 30%, 80%, 0.06) !important;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 25%,
    hsla(0, 0%, 100%, 0.18) 30%,
    hsla(185, 30%, 85%, 0.08) 35%,
    transparent 42%,
    transparent 60%,
    hsla(0, 0%, 100%, 0.1) 65%,
    hsla(35, 30%, 85%, 0.06) 70%,
    transparent 78%,
    transparent 100%
  ) !important;
  background-size: 300% 100% !important;
  background-position: 100% center !important;
}

.light.theme-luminous .bg-card:hover::before,
.light.theme-luminous .bg-popover:hover::before {
  animation: glass-shine 2s ease-out forwards !important;
}

.light.theme-luminous .bg-card > *,
.light.theme-luminous .bg-popover > * {
  position: relative !important;
  z-index: 1 !important;
}

.light.theme-luminous .bg-card:hover,
.light.theme-luminous .bg-popover:hover {
  border-color: hsla(210, 65%, 48%, 0.08) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px hsla(210, 65%, 48%, 0.035),
    0 12px 40px hsla(210, 20%, 55%, 0.04),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.55),
    inset 0 -1.5px 0 hsla(210, 20%, 45%, 0.04) !important;
}

/* ═══ SIDEBAR ════════════════════════════════════════════ */

.dark.theme-luminous .bg-sidebar {
  background: hsla(220, 32%, 7%, 0.05) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  position: relative !important;
  border-right: 1.5px solid hsla(210, 40%, 55%, 0.035) !important;
  box-shadow:
    0 0 0 1px hsla(210, 40%, 60%, 0.012),
    0 2px 0 0 hsla(220, 40%, 2%, 0.3),
    inset 0 1.5px 0 hsla(210, 50%, 70%, 0.05),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.12),
    inset 1.5px 0 0 hsla(210, 50%, 70%, 0.025),
    4px 0 20px hsla(220, 45%, 2%, 0.08) !important;
}

.dark.theme-luminous .bg-sidebar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: linear-gradient(180deg,
    hsla(210, 50%, 70%, 0.025) 0%,
    transparent 30%,
    transparent 70%,
    hsla(220, 30%, 0%, 0.035) 100%
  ) !important;
}

.dark.theme-luminous .bg-sidebar > * { position: relative !important; z-index: 1 !important; }

.dark.theme-luminous aside .flex.items-center.gap-2.rounded-md.px-3.py-2.text-sm { transition: all 0.2s ease !important; }

.dark.theme-luminous aside .flex.items-center.gap-2.rounded-md.px-3.py-2.text-sm:hover {
  background: hsla(210, 65%, 50%, 0.04) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid hsla(210, 75%, 55%, 0.05) !important;
  margin: -1px !important;
}

.dark.theme-luminous aside .bg-primary\/10.text-primary {
  background: hsla(210, 75%, 55%, 0.04) !important;
  backdrop-filter: blur(6px) !important;
  position: relative !important;
  border: 1px solid hsla(210, 75%, 55%, 0.06) !important;
  box-shadow:
    0 0 12px hsla(210, 75%, 55%, 0.04),
    0 1px 0 0 hsla(220, 40%, 2%, 0.15),
    inset 0 1px 0 hsla(210, 60%, 80%, 0.06),
    inset 0 -1px 0 hsla(210, 50%, 30%, 0.06) !important;
}

.light.theme-luminous .bg-sidebar {
  background: hsla(0, 0%, 100%, 0.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-right: 1.5px solid hsla(0, 0%, 100%, 0.15) !important;
  box-shadow:
    0 2px 0 0 hsla(210, 15%, 70%, 0.04),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.25),
    inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.025) !important;
}

.light.theme-luminous .bg-sidebar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: linear-gradient(180deg,
    hsla(0, 0%, 100%, 0.12) 0%,
    transparent 50%,
    hsla(210, 10%, 55%, 0.025) 100%
  ) !important;
}

.light.theme-luminous .bg-sidebar > * { position: relative !important; z-index: 1 !important; }
.light.theme-luminous aside .flex.items-center.gap-2.rounded-md.px-3.py-2.text-sm:hover { background: hsla(210, 65%, 48%, 0.035) !important; }

.light.theme-luminous aside .bg-primary\/10.text-primary {
  background: hsla(210, 65%, 48%, 0.04) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid hsla(210, 65%, 48%, 0.06) !important;
}

/* ═══ HEADERS ════════════════════════════════════════════ */

.dark.theme-luminous header,
.dark.theme-luminous nav,
.dark.theme-luminous header.bg-card\/80 {
  background: hsla(218, 30%, 6%, 0.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  position: relative !important;
  border-bottom: 1.5px solid hsla(210, 40%, 55%, 0.028) !important;
  box-shadow:
    0 2px 0 0 hsla(220, 40%, 2%, 0.2),
    inset 0 1.5px 0 hsla(210, 50%, 70%, 0.04),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.08),
    0 4px 16px hsla(220, 45%, 2%, 0.08) !important;
}

.dark.theme-luminous header::before,
.dark.theme-luminous nav::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: linear-gradient(180deg,
    hsla(210, 50%, 70%, 0.025) 0%,
    transparent 50%,
    hsla(220, 30%, 0%, 0.03) 100%
  ) !important;
}

.dark.theme-luminous header > *, .dark.theme-luminous nav > * { position: relative !important; z-index: 1 !important; }

.light.theme-luminous header,
.light.theme-luminous nav,
.light.theme-luminous header.bg-card\/80 {
  background: hsla(0, 0%, 100%, 0.035) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  position: relative !important;
  border-bottom: 1.5px solid hsla(0, 0%, 100%, 0.12) !important;
  box-shadow:
    0 2px 0 0 hsla(210, 15%, 70%, 0.04),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.25),
    inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.02) !important;
}

.light.theme-luminous header::before,
.light.theme-luminous nav::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: linear-gradient(180deg,
    hsla(0, 0%, 100%, 0.1) 0%,
    transparent 50%,
    hsla(210, 10%, 55%, 0.02) 100%
  ) !important;
}

.light.theme-luminous header > *, .light.theme-luminous nav > * { position: relative !important; z-index: 1 !important; }

/* ═══ NESTED GLASS ═══════════════════════════════════════ */

.dark.theme-luminous .bg-card .bg-card,
.dark.theme-luminous .bg-popover .bg-card,
.dark.theme-luminous .bg-card .bg-popover {
  background: hsla(218, 25%, 11%, 0.06) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid hsla(210, 40%, 60%, 0.035) !important;
  box-shadow:
    0 0 0 1px hsla(210, 40%, 60%, 0.012),
    0 1px 0 0 hsla(220, 40%, 2%, 0.15),
    inset 0 1px 0 hsla(210, 50%, 70%, 0.05),
    inset 0 -1px 0 hsla(220, 50%, 0%, 0.12) !important;
}

.light.theme-luminous .bg-card .bg-card,
.light.theme-luminous .bg-popover .bg-card,
.light.theme-luminous .bg-card .bg-popover {
  background: hsla(0, 0%, 100%, 0.1) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid hsla(0, 0%, 100%, 0.2) !important;
  box-shadow:
    0 1px 0 0 hsla(210, 15%, 70%, 0.04),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.25) !important;
}

/* ═══ BUTTONS ════════════════════════════════════════════ */

.dark.theme-luminous .bg-primary {
  background: linear-gradient(145deg, hsl(210, 75%, 46%), hsl(210, 75%, 56%)) !important;
  position: relative !important;
  border: none !important;
  box-shadow:
    0 4px 20px hsla(210, 75%, 55%, 0.18),
    0 2px 0 0 hsla(220, 40%, 2%, 0.3),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.18),
    inset 0 -1.5px 0 hsla(210, 50%, 28%, 0.3),
    inset 1.5px 0 0 hsla(0, 0%, 100%, 0.06),
    inset -1.5px 0 0 hsla(210, 50%, 28%, 0.12) !important;
  transition: all 0.25s ease !important;
}

.dark.theme-luminous .bg-primary:hover {
  background: linear-gradient(145deg, hsl(210, 75%, 50%), hsl(210, 75%, 60%)) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 28px hsla(210, 75%, 55%, 0.3),
    0 2px 0 0 hsla(220, 40%, 2%, 0.3),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.18),
    inset 0 -1.5px 0 hsla(210, 50%, 28%, 0.3),
    inset 1.5px 0 0 hsla(0, 0%, 100%, 0.06),
    inset -1.5px 0 0 hsla(210, 50%, 28%, 0.12) !important;
}

.dark.theme-luminous .bg-primary:active {
  transform: translateY(0) !important;
  box-shadow:
    0 2px 10px hsla(210, 75%, 55%, 0.12),
    0 1px 0 0 hsla(220, 40%, 2%, 0.15),
    inset 0 1.5px 0 hsla(210, 50%, 28%, 0.12),
    inset 0 -1.5px 0 hsla(0, 0%, 100%, 0.04) !important;
}

.light.theme-luminous .bg-primary {
  background: linear-gradient(145deg, hsl(210, 65%, 42%), hsl(210, 65%, 50%)) !important;
  position: relative !important;
  border: none !important;
  box-shadow:
    0 4px 16px hsla(210, 65%, 48%, 0.12),
    0 2px 0 0 hsla(215, 20%, 65%, 0.06),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
    inset 0 -1.5px 0 hsla(210, 50%, 30%, 0.18) !important;
}

.light.theme-luminous .bg-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 24px hsla(210, 65%, 48%, 0.22),
    0 2px 0 0 hsla(215, 20%, 65%, 0.06),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
    inset 0 -1.5px 0 hsla(210, 50%, 30%, 0.18) !important;
}

.light.theme-luminous .bg-primary:active {
  transform: translateY(0) !important;
  box-shadow:
    0 2px 10px hsla(210, 65%, 48%, 0.1),
    inset 0 1.5px 0 hsla(210, 50%, 30%, 0.1) !important;
}

/* ═══ BADGES ═════════════════════════════════════════════ */

.dark.theme-luminous .bg-secondary {
  background: hsla(185, 70%, 45%, 0.04) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid hsla(185, 70%, 45%, 0.06) !important;
  color: hsl(185, 70%, 58%) !important;
  box-shadow:
    0 1px 0 0 hsla(220, 40%, 2%, 0.12),
    inset 0 1px 0 hsla(185, 60%, 80%, 0.06),
    inset 0 -1px 0 hsla(185, 50%, 20%, 0.06) !important;
}

.dark.theme-luminous .bg-accent {
  background: hsla(35, 80%, 55%, 0.04) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid hsla(35, 80%, 55%, 0.06) !important;
  color: hsl(35, 80%, 62%) !important;
  box-shadow:
    0 1px 0 0 hsla(220, 40%, 2%, 0.12),
    inset 0 1px 0 hsla(35, 70%, 80%, 0.06),
    inset 0 -1px 0 hsla(35, 60%, 20%, 0.06) !important;
}

.dark.theme-luminous .bg-destructive {
  background: hsla(0, 75%, 50%, 0.04) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid hsla(0, 75%, 50%, 0.06) !important;
  color: hsl(0, 75%, 62%) !important;
  box-shadow:
    0 1px 0 0 hsla(220, 40%, 2%, 0.12),
    inset 0 1px 0 hsla(0, 60%, 80%, 0.06),
    inset 0 -1px 0 hsla(0, 60%, 20%, 0.06) !important;
}

.light.theme-luminous .bg-secondary {
  background: hsla(185, 65%, 38%, 0.03) !important;
  border: 1px solid hsla(185, 65%, 38%, 0.06) !important;
  color: hsl(185, 65%, 42%) !important;
}

.light.theme-luminous .bg-accent {
  background: hsla(35, 75%, 50%, 0.03) !important;
  border: 1px solid hsla(35, 75%, 50%, 0.06) !important;
  color: hsl(35, 75%, 48%) !important;
}

.light.theme-luminous .bg-destructive {
  background: hsla(0, 75%, 45%, 0.03) !important;
  border: 1px solid hsla(0, 75%, 45%, 0.06) !important;
  color: hsl(0, 75%, 50%) !important;
}

.light.theme-luminous .bg-secondary,
.light.theme-luminous .bg-accent,
.light.theme-luminous .bg-destructive {
  box-shadow:
    0 1px 0 0 hsla(210, 15%, 70%, 0.05),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.25),
    inset 0 -1px 0 hsla(210, 15%, 50%, 0.03) !important;
}

/* ═══ INPUTS ═════════════════════════════════════════════ */

.dark.theme-luminous input,
.dark.theme-luminous textarea,
.dark.theme-luminous select {
  background: hsla(218, 18%, 12%, 0.04) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1.5px solid hsla(210, 30%, 50%, 0.035) !important;
  transition: all 0.25s ease !important;
  box-shadow:
    inset 0 1.5px 0 hsla(210, 40%, 60%, 0.025),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.06),
    0 1px 0 0 hsla(220, 40%, 2%, 0.12) !important;
}

.dark.theme-luminous input:focus,
.dark.theme-luminous textarea:focus,
.dark.theme-luminous select:focus {
  background: hsla(218, 18%, 14%, 0.06) !important;
  border-color: hsla(210, 75%, 55%, 0.1) !important;
  box-shadow:
    0 0 0 3px hsla(210, 75%, 55%, 0.035),
    0 4px 12px hsla(220, 45%, 2%, 0.12),
    inset 0 1.5px 0 hsla(210, 40%, 60%, 0.025),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.06) !important;
  outline: none !important;
}

.light.theme-luminous input,
.light.theme-luminous textarea,
.light.theme-luminous select {
  background: hsla(0, 0%, 100%, 0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1.5px solid hsla(0, 0%, 100%, 0.15) !important;
  transition: all 0.25s ease !important;
  box-shadow:
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
    inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.025) !important;
}

.light.theme-luminous input:focus,
.light.theme-luminous textarea:focus,
.light.theme-luminous select:focus {
  background: hsla(0, 0%, 100%, 0.15) !important;
  border-color: hsla(210, 65%, 48%, 0.1) !important;
  box-shadow:
    0 0 0 3px hsla(210, 65%, 48%, 0.035),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
    inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.025) !important;
  outline: none !important;
}

/* ═══ MISC ════════════════════════════════════════════════ */

.dark.theme-luminous .bg-muted {
  background: hsla(218, 18%, 12%, 0.04) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid hsla(210, 20%, 40%, 0.025) !important;
}

.light.theme-luminous .bg-muted {
  background: hsla(0, 0%, 100%, 0.06) !important;
  backdrop-filter: blur(4px) !important;
}

.dark.theme-luminous .border-border { border-color: hsla(210, 30%, 50%, 0.035) !important; }
.light.theme-luminous .border-border { border-color: hsla(210, 18%, 78%, 0.05) !important; }
.dark.theme-luminous .bg-background { background: transparent !important; }
.light.theme-luminous .bg-background { background: transparent !important; }

.dark.theme-luminous ::selection { background: hsla(210, 75%, 55%, 0.15); color: hsl(0, 0%, 100%); }
.light.theme-luminous ::selection { background: hsla(210, 65%, 48%, 0.08); color: hsl(0, 0%, 0%); }

.dark.theme-luminous input::placeholder,
.dark.theme-luminous textarea::placeholder { color: hsl(218, 10%, 42%); }

.light.theme-luminous input::placeholder,
.light.theme-luminous textarea::placeholder { color: hsl(210, 12%, 55%); }

/* ═══ HEADINGS / TEXT ═══════════════════════════════════ */

.dark.theme-luminous .text-glow {
  text-shadow: 0 0 12px hsl(210, 75%, 55%), 0 0 30px hsla(210, 75%, 55%, 0.3), 0 0 60px hsla(210, 75%, 55%, 0.12);
}

.dark.theme-luminous h1,
.dark.theme-luminous h2,
.dark.theme-luminous h3,
.dark.theme-luminous .page-header-title {
  background: linear-gradient(135deg, hsl(210, 75%, 62%), hsl(185, 70%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark.theme-luminous .stat-card-value { color: hsl(210, 70%, 62%); }

.dark.theme-luminous .growth-word,
.light.theme-luminous .growth-word {
  -webkit-text-fill-color: #1BB0CE !important;
  color: #1BB0CE !important;
  background: none !important;
}

.dark.theme-luminous a { color: hsl(210, 70%, 62%); transition: color 0.2s ease, text-shadow 0.2s ease; }
.dark.theme-luminous a:hover { color: hsl(35, 80%, 60%); text-shadow: 0 0 8px hsla(35, 80%, 55%, 0.2); }

.dark.theme-luminous blockquote {
  border-left: 3px solid hsla(210, 75%, 55%, 0.3);
  background: hsla(210, 50%, 30%, 0.03);
  backdrop-filter: blur(6px);
  color: hsl(210, 15%, 68%);
}

.dark.theme-luminous code {
  color: hsl(185, 70%, 58%);
  background: hsla(218, 20%, 12%, 0.35);
  border: 1px solid hsla(218, 20%, 22%, 0.08);
  backdrop-filter: blur(4px);
}

.dark.theme-luminous pre {
  background: hsla(218, 20%, 7%, 0.35);
  border: 1px solid hsla(218, 20%, 20%, 0.06);
  backdrop-filter: blur(6px);
}

.dark.theme-luminous hr { border-color: hsla(218, 20%, 20%, 0.15); }
.dark.theme-luminous table th { color: hsl(210, 70%, 62%); }
.dark.theme-luminous table td { border-color: hsla(218, 20%, 20%, 0.08); }
.dark.theme-luminous .badge { color: hsl(210, 70%, 62%); }

.light.theme-luminous h1,
.light.theme-luminous h2,
.light.theme-luminous h3,
.light.theme-luminous .page-header-title,
.light.theme-luminous .stat-card-value { color: hsl(210, 65%, 48%); }

/* ── Misc card gradient bars ── */
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(210, 75%, 55%), hsl(210, 75%, 72%), hsl(210, 75%, 55%)) !important;
}

.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(185, 70%, 45%), hsl(185, 70%, 62%), hsl(185, 70%, 45%)) !important;
}

.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 { background: hsla(210, 75%, 55%, 0.06) !important; }
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 { background: hsla(185, 70%, 45%, 0.06) !important; }
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg { color: hsl(210, 75%, 55%) !important; }
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg { color: hsl(185, 70%, 45%) !important; }
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 { background: linear-gradient(to right, transparent, hsla(210, 75%, 55%, 0.18), transparent) !important; }
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 { background: linear-gradient(to right, transparent, hsla(185, 70%, 45%, 0.18), transparent) !important; }
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r { background: linear-gradient(to right, hsl(210, 75%, 55%), hsl(185, 70%, 45%)) !important; }

.light.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(210, 65%, 48%), hsl(210, 65%, 62%), hsl(210, 65%, 48%)) !important;
}

.light.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(185, 65%, 38%), hsl(185, 65%, 54%), hsl(185, 65%, 38%)) !important;
}

/* ═══ DROPDOWN / MENU ════════════════════════════════════ */

.dark.theme-luminous [data-radix-popper-content-wrapper] > div,
.dark.theme-luminous [role="listbox"],
.dark.theme-luminous [role="menu"] {
  background: hsla(218, 30%, 10%, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid hsla(210, 40%, 55%, 0.05) !important;
  box-shadow:
    0 0 0 1px hsla(210, 40%, 60%, 0.015),
    0 4px 0 0 hsla(220, 40%, 2%, 0.2),
    0 8px 36px hsla(220, 45%, 2%, 0.3),
    inset 0 1.5px 0 hsla(210, 50%, 70%, 0.05),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.12) !important;
}

.dark.theme-luminous [data-radix-popper-content-wrapper] > div > *,
.dark.theme-luminous [role="listbox"] > *,
.dark.theme-luminous [role="menu"] > * { position: relative !important; z-index: 1 !important; }

.dark.theme-luminous [role="menuitem"],
.dark.theme-luminous [role="option"] { transition: all 0.15s ease !important; }

.dark.theme-luminous [role="menuitem"]:hover,
.dark.theme-luminous [role="option"]:hover {
  background: hsla(210, 65%, 50%, 0.035) !important;
  backdrop-filter: blur(4px) !important;
}

/* ═══ SCROLLBAR ══════════════════════════════════════════ */

.dark.theme-luminous ::-webkit-scrollbar-track {
  background: hsla(218, 20%, 8%, 0.08) !important;
  border: 1px solid hsla(210, 30%, 40%, 0.015) !important;
}

.dark.theme-luminous ::-webkit-scrollbar-thumb {
  background: hsla(210, 50%, 50%, 0.08) !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}

.dark.theme-luminous ::-webkit-scrollbar-thumb:hover {
  background: hsla(210, 50%, 55%, 0.14) !important;
  background-clip: content-box !important;
}

.light.theme-luminous ::-webkit-scrollbar-track { background: hsla(210, 15%, 78%, 0.06) !important; }
.light.theme-luminous ::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.15) !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}

/* ═══ DIALOG / MODAL ════════════════════════════════════ */

.dark.theme-luminous [role="dialog"] > div {
  background: hsla(218, 30%, 8%, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid hsla(210, 50%, 65%, 0.06) !important;
  box-shadow:
    0 0 0 1px hsla(210, 50%, 65%, 0.025),
    0 8px 0 0 hsla(220, 40%, 2%, 0.25),
    0 16px 55px hsla(220, 45%, 2%, 0.35),
    inset 0 1.5px 0 hsla(210, 60%, 80%, 0.06),
    inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.15) !important;
}

.light.theme-luminous [role="dialog"] > div {
  background: hsla(0, 0%, 100%, 0.07) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid hsla(0, 0%, 100%, 0.25) !important;
  box-shadow:
    0 8px 0 0 hsla(210, 15%, 70%, 0.05),
    0 16px 60px hsla(210, 20%, 55%, 0.035),
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.35),
    inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.03) !important;
}

.dark.theme-luminous .fixed.inset-0.bg-black\/80 {
  background: hsla(220, 32%, 3%, 0.35) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}