diff --git a/Web_Backgrounds/luminous-theme.css b/Web_Backgrounds/luminous-theme.css
new file mode 100644
index 0000000..4fc6b96
--- /dev/null
+++ b/Web_Backgrounds/luminous-theme.css
@@ -0,0 +1,1510 @@
+/* ===== 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;
+}
diff --git a/Web_Backgrounds/luminous-tokens.json b/Web_Backgrounds/luminous-tokens.json
new file mode 100644
index 0000000..c71b008
--- /dev/null
+++ b/Web_Backgrounds/luminous-tokens.json
@@ -0,0 +1,119 @@
+{
+  "theme": {
+    "id": "luminous",
+    "name": "Luminous",
+    "description": "Deep Glass / Glassmorphism 2.0 — blue-teal-amber palette with specular highlights, 3D bevel/emboss borders, refraction effects, and ultra-frosted translucent surfaces inspired by iOS & HarmonyOS",
+    "type": "dual",
+    "default": false
+  },
+  "modes": {
+    "dark": {
+      "colors": {
+        "background": "hsl(215, 30%, 6%)",
+        "foreground": "hsl(210, 30%, 96%)",
+        "card": "hsl(215, 25%, 10%)",
+        "cardForeground": "hsl(210, 30%, 96%)",
+        "popover": "hsl(215, 25%, 10%)",
+        "popoverForeground": "hsl(210, 30%, 96%)",
+        "primary": "hsl(210, 75%, 55%)",
+        "primaryForeground": "hsl(0, 0%, 100%)",
+        "secondary": "hsl(185, 70%, 45%)",
+        "secondaryForeground": "hsl(0, 0%, 100%)",
+        "muted": "hsl(215, 15%, 14%)",
+        "mutedForeground": "hsl(215, 12%, 55%)",
+        "accent": "hsl(35, 80%, 55%)",
+        "accentForeground": "hsl(0, 0%, 0%)",
+        "destructive": "hsl(0, 75%, 50%)",
+        "destructiveForeground": "hsl(0, 0%, 100%)",
+        "border": "hsl(215, 18%, 20%)",
+        "input": "hsl(215, 15%, 16%)",
+        "ring": "hsl(210, 75%, 55%)",
+        "sidebar": "hsl(215, 30%, 6%)",
+        "sidebarForeground": "hsl(210, 30%, 96%)",
+        "sidebarPrimary": "hsl(210, 75%, 55%)",
+        "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
+        "sidebarAccent": "hsl(210, 35%, 16%)",
+        "sidebarAccentForeground": "hsl(210, 30%, 96%)",
+        "sidebarBorder": "hsl(215, 18%, 16%)",
+        "sidebarRing": "hsl(210, 75%, 55%)"
+      },
+      "textColors": {
+        "heading": "linear-gradient(135deg, #60a5fa, #2dd4bf)",
+        "body": "#e2e8f0",
+        "muted": "#7a8a9a",
+        "link": "#60a5fa",
+        "linkHover": "#f59e0b",
+        "code": "#2dd4bf",
+        "placeholder": "#5a6a7a"
+      },
+      "backgroundImage": null,
+      "backgroundGradients": [
+        "rgba(50, 140, 240, 0.18) at 10% 20%",
+        "rgba(0, 200, 210, 0.10) at 85% 75%",
+        "rgba(200, 160, 40, 0.06) at 50% 15%",
+        "rgba(50, 140, 240, 0.07) at 35% 85%"
+      ]
+    },
+    "light": {
+      "colors": {
+        "background": "hsl(205, 38%, 86%)",
+        "foreground": "hsl(210, 30%, 15%)",
+        "card": "hsl(0, 0%, 100%)",
+        "cardForeground": "hsl(210, 30%, 15%)",
+        "popover": "hsl(0, 0%, 100%)",
+        "popoverForeground": "hsl(210, 30%, 15%)",
+        "primary": "hsl(210, 65%, 48%)",
+        "primaryForeground": "hsl(0, 0%, 100%)",
+        "secondary": "hsl(185, 65%, 38%)",
+        "secondaryForeground": "hsl(0, 0%, 100%)",
+        "muted": "hsl(205, 20%, 90%)",
+        "mutedForeground": "hsl(210, 12%, 48%)",
+        "accent": "hsl(35, 75%, 50%)",
+        "accentForeground": "hsl(0, 0%, 0%)",
+        "destructive": "hsl(0, 75%, 45%)",
+        "destructiveForeground": "hsl(0, 0%, 100%)",
+        "border": "hsl(210, 18%, 78%)",
+        "input": "hsl(210, 15%, 84%)",
+        "ring": "hsl(210, 65%, 48%)",
+        "sidebar": "hsl(0, 0%, 100%)",
+        "sidebarForeground": "hsl(210, 30%, 15%)",
+        "sidebarPrimary": "hsl(210, 65%, 48%)",
+        "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
+        "sidebarAccent": "hsl(205, 18%, 90%)",
+        "sidebarAccentForeground": "hsl(210, 30%, 15%)",
+        "sidebarBorder": "hsl(210, 18%, 78%)",
+        "sidebarRing": "hsl(210, 65%, 48%)"
+      },
+      "textColors": {
+        "heading": "linear-gradient(135deg, #3b82f6, #0d9488)",
+        "body": "#1e293b",
+        "muted": "#6b7280",
+        "link": "#3b82f6",
+        "linkHover": "#d97706",
+        "code": "#3b82f6",
+        "placeholder": "#9ca3af"
+      },
+      "backgroundImage": null,
+      "backgroundGradients": [
+        "rgba(50, 140, 240, 0.06) at 15% 20%",
+        "rgba(0, 200, 210, 0.04) at 85% 75%",
+        "rgba(200, 160, 40, 0.02) at 50% 50%"
+      ]
+    }
+  },
+  "borderRadius": "0.75rem",
+  "typography": {
+    "fontFamily": "Inter, sans-serif",
+    "headingFont": "Inter, sans-serif"
+  },
+  "keyColors": {
+    "primary": "#60a5fa (dark) / #3b82f6 (light)",
+    "background": "#0b111e (dark) / #d2e2f2 (light)",
+    "card": "#121a28 (dark) / #ffffff (light)",
+    "sidebar": "#0b111e (dark) / #ffffff (light)",
+    "border": "#283040 (dark) / #d4d4dc (light)",
+    "text": "#e2e8f0 (dark) / #1e293b (light)",
+    "mutedText": "#7a8a9a (dark) / #6b7280 (light)",
+    "headingGradient": "#60a5fa → #2dd4bf (dark) / #3b82f6 → #0d9488 (light)"
+  }
+}
diff --git a/database/migrations/026_email_campaigns.sql b/database/migrations/026_email_campaigns.sql
index e0b6bca..ab03131 100644
--- a/database/migrations/026_email_campaigns.sql
+++ b/database/migrations/026_email_campaigns.sql
@@ -55,7 +55,8 @@ CREATE TABLE IF NOT EXISTS email_campaign_logs (
     error_message TEXT
 );
 
-ALTER TABLE email_campaign_subscribers ADD CONSTRAINT IF NOT EXISTS uq_campaign_lead UNIQUE (campaign_id, lead_id);
+-- Already defined inline in CREATE TABLE; IF NOT EXISTS not supported on this PostgreSQL version
+-- ALTER TABLE email_campaign_subscribers ADD CONSTRAINT IF NOT EXISTS uq_campaign_lead UNIQUE (campaign_id, lead_id);
 
 CREATE INDEX idx_campaign_steps_order ON email_campaign_steps(campaign_id, step_order);
 CREATE INDEX idx_campaign_subscribers ON email_campaign_subscribers(campaign_id, status);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bcba99c..bb7e5f3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,6 +11,7 @@ import "../../Web_Backgrounds/cyberpunk-theme.css"
 import "../../Web_Backgrounds/cyber2-theme.css"
 import "../../Web_Backgrounds/pumpkin-theme.css"
 import "../../Web_Backgrounds/bw-theme.css"
+import "../../Web_Backgrounds/luminous-theme.css"
 
 const inter = Inter({
   variable: "--font-inter",
diff --git a/src/components/settings/theme-settings.tsx b/src/components/settings/theme-settings.tsx
index 756659f..79aaf5f 100644
--- a/src/components/settings/theme-settings.tsx
+++ b/src/components/settings/theme-settings.tsx
@@ -38,6 +38,7 @@ const backgroundOptions = [
   { value: "cyber2", label: "Cyber2.0", icon: Shield, color: "bg-gradient-to-r from-cyan-400 to-fuchsia-500", ring: "ring-cyan-400", desc: "Neon grid with magenta and cyan glow" },
   { value: "pumpkin", label: "Pumpkin Spice", icon: Shield, color: "bg-gradient-to-r from-orange-600 to-amber-500", ring: "ring-orange-600", desc: "Warm autumn orange with spicy accents" },
   { value: "bw", label: "Black & White", icon: Shield, color: "bg-gradient-to-r from-gray-900 to-gray-400", ring: "ring-gray-500", desc: "Clean monochrome with subtle texture" },
+  { value: "luminous", label: "Luminous", icon: Shield, color: "bg-gradient-to-r from-blue-500 to-teal-400", ring: "ring-blue-500", desc: "Deep Glass 2.0 — blue-teal-amber with specular highlights and 3D bevel borders" },
 ]
 
 function getStoredColorTheme(): string {
diff --git a/src/providers/website-theme-provider.tsx b/src/providers/website-theme-provider.tsx
index 1847e66..954aec8 100644
--- a/src/providers/website-theme-provider.tsx
+++ b/src/providers/website-theme-provider.tsx
@@ -11,6 +11,7 @@ const themeClasses: Record<string, string> = {
   cyber2: "theme-cyber2",
   pumpkin: "theme-pumpkin",
   bw: "theme-bw",
+  luminous: "theme-luminous",
 }
 
 interface WebsiteThemeContextValue {