diff --git a/Web_Backgrounds/cyberpunk-theme.css b/Web_Backgrounds/cyberpunk-theme.css
new file mode 100644
index 0000000..fc413b9
--- /dev/null
+++ b/Web_Backgrounds/cyberpunk-theme.css
@@ -0,0 +1,931 @@
+/* ============================================================================
+   Cyberpunk Theme � Dark retro-futuristic synthwave/cyberpunk aesthetic
+   Scoped under .dark.theme-cyberpunk and .light.theme-cyberpunk
+   ============================================================================ */
+
+.dark.theme-cyberpunk {
+  --background: 240 18% 4%;
+  --foreground: 210 40% 93%;
+  --card: 240 15% 7%;
+  --card-foreground: 210 40% 93%;
+  --popover: 240 15% 7%;
+  --popover-foreground: 210 40% 93%;
+  --primary: 330 100% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 180 100% 50%;
+  --secondary-foreground: 0 0% 0%;
+  --muted: 240 12% 12%;
+  --muted-foreground: 240 8% 55%;
+  --accent: 260 80% 60%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 55%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 110 100% 50%;
+  --success-foreground: 0 0% 0%;
+  --warning: 30 100% 55%;
+  --warning-foreground: 0 0% 0%;
+  --border: 270 30% 15%;
+  --input: 240 12% 12%;
+  --ring: 330 100% 50%;
+  --radius: 0.5rem;
+  --sidebar: 240 15% 3%;
+  --sidebar-foreground: 210 40% 93%;
+  --sidebar-primary: 330 100% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 10% 10%;
+  --sidebar-accent-foreground: 210 40% 93%;
+  --sidebar-border: 270 25% 12%;
+  --sidebar-ring: 330 100% 50%;
+}
+.light.theme-cyberpunk {
+  --background: 220 15% 96%;
+  --foreground: 240 30% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 30% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 30% 10%;
+  --primary: 330 80% 48%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 180 80% 38%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 240 8% 92%;
+  --muted-foreground: 240 8% 48%;
+  --accent: 260 65% 52%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 80% 55%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 270 15% 84%;
+  --input: 240 8% 92%;
+  --ring: 330 80% 48%;
+  --radius: 0.5rem;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 240 30% 10%;
+  --sidebar-primary: 330 80% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 8% 92%;
+  --sidebar-accent-foreground: 240 30% 10%;
+  --sidebar-border: 270 15% 84%;
+  --sidebar-ring: 330 80% 48%;
+}
+
+/* ============================================================================
+   Cyberpunk Cityscape Background � High-tech digital grid with fixed parallax
+   ============================================================================ */
+.dark.theme-cyberpunk body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: url("https://images.unsplash.com/photo-1558009624-d1449e45e8b6?w=1920&q=80") no-repeat center center fixed;
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center;
+}
+
+.light.theme-cyberpunk body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255, 0, 127, 0.03) 59px, transparent 61px),
+    repeating-linear-gradient(0deg, transparent 0px, transparent 39px, rgba(0, 200, 255, 0.02) 39px, transparent 41px);
+  background-size: 200% 200%;
+  animation: cyberpunk-bg 50s ease-in-out infinite;
+}
+
+@keyframes cyberpunk-bg {
+  0% { background-position: 0% 0%; }
+  25% { background-position: 5% 3%; }
+  50% { background-position: 8% 6%; }
+  75% { background-position: 3% 3%; }
+  100% { background-position: 0% 0%; }
+}
+/* ============================================================================
+   App Shell � Make the background transparent so body::before shows through
+   ============================================================================ */
+.dark.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\] {
+  background: transparent !important;
+}
+.dark.theme-cyberpunk .dark\:bg-\[\#0A0A0A\] {
+  background: transparent !important;
+}
+
+/* ============================================================================
+   Top Navigation & Header Bar
+   ============================================================================ */
+.dark.theme-cyberpunk header.sticky {
+  background: hsl(240, 15%, 3%) !important;
+  border-bottom-color: hsl(270, 25%, 10%) !important;
+}
+.dark.theme-cyberpunk header .text-primary.font-bold.tracking-wide {
+  color: hsl(330, 100%, 55%) !important;
+  text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
+}
+.dark.theme-cyberpunk header button:hover {
+  background: hsla(330, 100%, 50%, 0.1) !important;
+  color: hsl(330, 100%, 60%) !important;
+}
+.dark.theme-cyberpunk .dark\:bg-\[\#1E1E1E\] {
+  background: hsl(240, 12%, 9%) !important;
+}
+.dark.theme-cyberpunk .dark\:border-\[\#222222\] {
+  border-color: hsl(270, 20%, 12%) !important;
+}
+.dark.theme-cyberpunk input::placeholder {
+  color: hsl(240, 8%, 40%) !important;
+  font-size: 0.8rem;
+}
+.dark.theme-cyberpunk .rounded-full.bg-primary.text-\[10px\] {
+  background: hsl(330, 100%, 50%) !important;
+  box-shadow: 0 0 6px rgba(255, 0, 127, 0.6);
+}
+.dark.theme-cyberpunk header .w-\[6px\] {
+  background: linear-gradient(180deg, hsl(330, 100%, 50%), hsl(180, 100%, 50%), hsl(260, 80%, 60%)) !important;
+}
+.dark.theme-cyberpunk header .w-\[6px\] > div {
+  background: none !important;
+}
+
+/* ============================================================================
+   Page Header � Dashboard title
+   ============================================================================ */
+.dark.theme-cyberpunk .border-l-4.border-\[\#C84B4B\] {
+  border-left-color: hsl(330, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk .dark\:border-\[\#FF1111\] {
+  border-left-color: hsl(330, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk .dark\:text-white.text-2xl.font-bold {
+  color: hsl(0, 0%, 97%) !important;
+  text-shadow: 0 0 6px rgba(255, 0, 127, 0.15);
+}
+.dark.theme-cyberpunk .dark\:text-\[\#AAAAAA\] {
+  color: hsl(240, 8%, 50%) !important;
+}
+
+/* ============================================================================
+   Section Subtitles � "Pipeline Overview" / "Analytics"
+   ============================================================================ */
+.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest {
+  color: hsl(240, 8%, 38%) !important;
+  letter-spacing: 0.18em;
+}
+
+/* ============================================================================
+   Left Navigation Sidebar
+   ============================================================================ */
+.dark.theme-cyberpunk aside.border-r {
+  border-right-color: hsl(270, 25%, 10%) !important;
+}
+.dark.theme-cyberpunk aside .bg-sidebar {
+  background: hsl(240, 15%, 3%) !important;
+}
+
+/* Active nav item � neon-pink pill */
+.dark.theme-cyberpunk aside a.bg-sidebar-primary {
+  background: hsl(330, 100%, 50%) !important;
+  color: hsl(0, 0%, 100%) !important;
+  box-shadow: 0 0 10px rgba(255, 0, 127, 0.3), 0 0 20px rgba(255, 0, 127, 0.1);
+  border-radius: 9999px !important;
+}
+.dark.theme-cyberpunk aside a.bg-sidebar-primary svg {
+  color: hsl(0, 0%, 100%) !important;
+}
+
+/* Active nav item collapsed */
+.dark.theme-cyberpunk aside a.relative.h-10.w-10.bg-sidebar-primary {
+  background: hsl(330, 100%, 50%) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
+  border-radius: 9999px !important;
+}
+
+/* Inactive nav items */
+.dark.theme-cyberpunk aside a.text-sidebar-foreground\/60 {
+  color: hsl(240, 8%, 50%) !important;
+}
+.dark.theme-cyberpunk aside a.text-sidebar-foreground\/60:hover {
+  background: hsla(330, 100%, 50%, 0.08) !important;
+  color: hsl(0, 0%, 90%) !important;
+}
+.dark.theme-cyberpunk aside a.hover\:text-sidebar-accent-foreground:hover {
+  color: hsl(0, 0%, 95%) !important;
+}
+.dark.theme-cyberpunk aside a svg.h-5 {
+  color: hsl(240, 8%, 50%);
+}
+
+/* Sidebar borders */
+.dark.theme-cyberpunk aside .border-b,
+.dark.theme-cyberpunk aside .border-t {
+  border-color: hsl(270, 25%, 10%) !important;
+}
+
+/* User profile avatar */
+.dark.theme-cyberpunk aside [class*="AvatarFallback"] {
+  background: hsl(330, 100%, 50%) !important;
+  color: hsl(0, 0%, 100%) !important;
+  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3);
+}
+.dark.theme-cyberpunk aside .text-xs.text-sidebar-foreground\/60 {
+  color: hsl(240, 8%, 45%) !important;
+}
+
+/* Unread badge � neon pink */
+.dark.theme-cyberpunk aside .bg-red-500 {
+  background: hsl(330, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
+}
+.dark.theme-cyberpunk aside .shadow-\[0_0_10px_\#ef4444\] {
+  box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
+}
+.dark.theme-cyberpunk aside .shadow-\[0_0_8px_\#ef4444\] {
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.5) !important;
+}
+
+/* System monitor values */
+.dark.theme-cyberpunk aside .text-\[var\(--theme-primary\, #3b91f7\)\] {
+  color: hsl(180, 100%, 55%) !important;
+}
+.dark.theme-cyberpunk aside .text-red-400 {
+  color: hsl(330, 100%, 55%) !important;
+}
+/* ============================================================================
+   Stat Cards � Glass panels with neon-pink accents
+   ============================================================================ */
+
+/* Pipeline Overview metric cards � semi-transparent glass + neon-pink glow border */
+.dark.theme-cyberpunk .group.h-full > .rounded-xl.border {
+  background: rgba(20, 20, 25, 0.75) !important;
+  backdrop-filter: blur(10px) !important;
+  border: 2px solid hsl(330, 100%, 50%) !important;
+  box-shadow: 0 0 0 1px hsla(330, 100%, 50%, 0.4),
+              0 0 15px rgba(255, 0, 127, 0.2),
+              0 0 40px rgba(255, 0, 127, 0.1),
+              0 -2px 8px rgba(255, 0, 127, 0.15),
+              0 4px 24px rgba(0, 0, 0, 0.5) !important;
+}
+.dark.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
+  border-color: hsl(330, 100%, 55%) !important;
+  box-shadow: 0 0 0 2px hsla(330, 100%, 50%, 0.5),
+              0 0 20px rgba(255, 0, 127, 0.3),
+              0 0 50px rgba(255, 0, 127, 0.15),
+              0 -4px 12px rgba(255, 0, 127, 0.25),
+              0 8px 32px rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Neon-pink top border strip on every card */
+.dark.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
+  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3), 0 0 16px rgba(255, 0, 127, 0.1) !important;
+}
+
+/* Stat value � bright white with subtle glow */
+.dark.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
+  color: hsl(0, 0%, 97%) !important;
+  text-shadow: 0 0 8px rgba(255, 0, 127, 0.1);
+}
+
+/* Stat title � muted */
+.dark.theme-cyberpunk .text-sm.font-medium.text-muted-foreground {
+  color: hsl(240, 8%, 50%) !important;
+}
+
+/* Stat description */
+.dark.theme-cyberpunk .text-xs.text-\[\#8A9078\] {
+  color: hsl(240, 8%, 42%) !important;
+}
+
+/* Trend indicators � green up, red down */
+.dark.theme-cyberpunk .text-emerald-500 {
+  color: hsl(110, 100%, 50%) !important;
+  text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
+}
+.dark.theme-cyberpunk .text-rose-500 {
+  color: hsl(330, 100%, 50%) !important;
+}
+
+/* Icon containers � replace red/blue bg with dark glass */
+.dark.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl {
+  background: hsla(330, 100%, 50%, 0.08) !important;
+  box-shadow: 0 0 6px rgba(255, 0, 127, 0.05);
+}
+.dark.theme-cyberpunk .flex.h-12.w-12.items-center svg.h-6 {
+  color: hsl(330, 100%, 55%) !important;
+}
+
+/* Sparkline SVG � cyan glow */
+.dark.theme-cyberpunk svg.opacity-60 path {
+  stroke: hsl(180, 100%, 55%) !important;
+  stroke-width: 2;
+  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.3));
+}
+
+/* Progress bar background */
+.dark.theme-cyberpunk .w-full.h-1\.5.bg-muted.rounded-full {
+  background: hsl(240, 12%, 14%) !important;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Progress bar fill � pink to cyan gradient */
+.dark.theme-cyberpunk .h-full.rounded-full.bg-gradient-to-r {
+  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
+  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3);
+}
+
+/* Bottom glow bar on cards */
+.dark.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
+  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.25), transparent) !important;
+}
+
+/* Stat card alternating patterns � override spidey red/blue with pink/cyan */
+.dark.theme-cyberpunk .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(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
+}
+.dark.theme-cyberpunk .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(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
+  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
+}
+.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
+  background: hsla(330, 100%, 50%, 0.12) !important;
+}
+.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
+  background: hsla(180, 100%, 50%, 0.1) !important;
+}
+.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
+  color: hsl(330, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
+  color: hsl(180, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk .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(330, 100%, 50%, 0.3), transparent) !important;
+}
+.dark.theme-cyberpunk .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(180, 100%, 50%, 0.25), transparent) !important;
+}
+.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
+  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
+}
+/* ============================================================================
+   Charts � Lead Status Donut & Leads Per Month Bar
+   ============================================================================ */
+
+/* Donut chart � card glass */
+.dark.theme-cyberpunk .h-full .rounded-xl.border:has(svg) {
+  background: hsla(240, 15%, 7%, 0.65) !important;
+  backdrop-filter: blur(12px) !important;
+  border-color: hsla(270, 30%, 20%, 0.35) !important;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(330, 100%, 50%, 0.06);
+}
+
+/* Donut center text */
+.dark.theme-cyberpunk svg text[font-size="28"] {
+  fill: hsl(0, 0%, 97%) !important;
+  font-weight: 700;
+}
+.dark.theme-cyberpunk svg text[font-size="12"] {
+  fill: hsl(240, 8%, 50%) !important;
+}
+
+/* Donut legend items � glass background with neon border */
+.dark.theme-cyberpunk .grid.w-full.grid-cols-2.gap-2 > div {
+  background: hsla(240, 15%, 8%, 0.6) !important;
+  backdrop-filter: blur(4px);
+  border: 1px solid hsla(270, 30%, 18%, 0.3) !important;
+  border-radius: 12px !important;
+}
+.dark.theme-cyberpunk .grid.w-full.grid-cols-2.gap-2 > div:hover {
+  border-color: hsla(330, 100%, 50%, 0.15) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.05);
+}
+
+/* Legend name */
+.dark.theme-cyberpunk .text-xs.font-medium {
+  color: hsl(210, 40%, 85%) !important;
+}
+.dark.theme-cyberpunk .mt-0\.5.text-\[11px\] {
+  color: hsl(240, 8%, 50%) !important;
+}
+.dark.theme-cyberpunk .text-xs.font-semibold:last-child {
+  color: hsl(210, 40%, 80%) !important;
+}
+
+/* Bar chart � card glass */
+.dark.theme-cyberpunk .h-full > .rounded-xl.border:has(.overflow-visible) {
+  background: hsla(240, 15%, 7%, 0.65) !important;
+  backdrop-filter: blur(12px) !important;
+  border-color: hsla(270, 30%, 20%, 0.35) !important;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(330, 100%, 50%, 0.06);
+}
+
+/* Bar chart subtitle */
+.dark.theme-cyberpunk .mt-1.text-sm.text-muted-foreground {
+  color: hsl(240, 8%, 55%) !important;
+}
+
+/* Bar chart legend labels */
+.dark.theme-cyberpunk .text-xs.text-muted-foreground {
+  color: hsl(240, 8%, 55%) !important;
+}
+
+/* Year selector */
+.dark.theme-cyberpunk .rounded-lg.border.px-2.py-1 {
+  background: hsla(240, 12%, 10%, 0.6) !important;
+  border-color: hsl(270, 25%, 15%) !important;
+}
+.dark.theme-cyberpunk .min-w-\[50px\].text-center.text-sm.font-semibold {
+  color: hsl(0, 0%, 90%) !important;
+}
+.dark.theme-cyberpunk .rounded-lg.border button:hover {
+  background: hsla(330, 100%, 50%, 0.1) !important;
+  color: hsl(330, 100%, 55%) !important;
+}
+
+/* Bar chart grid lines */
+.dark.theme-cyberpunk svg line[stroke="#d1d5db"],
+.dark.theme-cyberpunk svg line[stroke="#e5e7eb"] {
+  stroke: hsla(270, 25%, 20%, 0.3) !important;
+}
+
+/* Bar chart x-axis labels */
+.dark.theme-cyberpunk svg text[fill="#6b7280"],
+.dark.theme-cyberpunk svg text[fill="#9ca3af"] {
+  fill: hsl(240, 8%, 45%) !important;
+}
+.dark.theme-cyberpunk svg text[fill="#374151"],
+.dark.theme-cyberpunk svg text[fill="#4b5563"] {
+  fill: hsl(210, 40%, 75%) !important;
+}
+
+/* New Leads bars — intense neon-pink with intense glow */
+.dark.theme-cyberpunk svg rect[fill*="newLeadsGrad"] {
+  fill: hsl(330, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.5)) !important;
+  rx: 4;
+}
+
+/* Closed bars — bright neon cyan with glow */
+.dark.theme-cyberpunk svg rect[fill*="closedGrad"] {
+  fill: hsl(186, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)) !important;
+  rx: 4;
+}
+
+/* Bar chart legend swatch — New Lead (intense neon pink #FF1493) */
+.dark.theme-cyberpunk .items-start .gap-4 > :first-child .rounded-sm {
+  background: hsl(330, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(255, 0, 127, 0.7), 0 0 20px rgba(255, 0, 127, 0.25) !important;
+  border: 1px solid hsl(330, 100%, 60%) !important;
+}
+
+/* Bar chart legend swatch — Closed (bright neon cyan #00F0FF) */
+.dark.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .rounded-sm {
+  background: hsl(186, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.2) !important;
+  border: 1px solid hsl(186, 100%, 55%) !important;
+}
+
+/* Bar chart legend label — New Lead (neon pink text) */
+.dark.theme-cyberpunk .items-start .gap-4 > :first-child .text-xs {
+  color: hsl(330, 100%, 65%) !important;
+  font-weight: 600;
+}
+
+/* Bar chart legend label — Closed (neon cyan text) */
+.dark.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .text-xs {
+  color: hsl(186, 100%, 60%) !important;
+  font-weight: 600;
+}
+
+/* Hover tooltip */
+.dark.theme-cyberpunk .min-w-\[150px\].rounded-xl.border.p-3 {
+  background: hsla(240, 15%, 8%, 0.95) !important;
+  border-color: hsl(270, 30%, 20%) !important;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px hsla(330, 100%, 50%, 0.1);
+  backdrop-filter: blur(8px);
+}
+.dark.theme-cyberpunk .mb-1\.5.text-xs.font-semibold {
+  color: hsl(0, 0%, 90%) !important;
+}
+/* ============================================================================
+   Data Tables � Alternating obsidian rows, glowing status badges
+   ============================================================================ */
+
+/* Card wrapper */
+.dark.theme-cyberpunk .rounded-xl.border:has(table) {
+  background: hsla(240, 15%, 7%, 0.65) !important;
+  backdrop-filter: blur(12px) !important;
+  border-color: hsla(270, 30%, 20%, 0.35) !important;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* Table header */
+.dark.theme-cyberpunk table thead tr {
+  border-bottom-color: hsl(270, 25%, 14%) !important;
+}
+.dark.theme-cyberpunk table thead th {
+  color: hsl(240, 8%, 45%) !important;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+}
+
+/* Table body rows � alternating ultra-dark obsidian */
+.dark.theme-cyberpunk table tbody tr {
+  border-bottom-color: hsla(270, 25%, 12%, 0.4) !important;
+}
+.dark.theme-cyberpunk table tbody tr:nth-child(even) {
+  background: hsla(240, 15%, 5%, 0.3) !important;
+}
+.dark.theme-cyberpunk table tbody tr:nth-child(odd) {
+  background: hsla(240, 12%, 4%, 0.2) !important;
+}
+.dark.theme-cyberpunk table tbody tr:hover {
+  background: hsla(330, 100%, 50%, 0.04) !important;
+}
+
+/* Company name link */
+.dark.theme-cyberpunk table tbody td a.font-medium {
+  color: hsl(210, 40%, 85%) !important;
+}
+.dark.theme-cyberpunk table tbody td a.font-medium:hover {
+  color: hsl(330, 100%, 60%) !important;
+  text-shadow: 0 0 6px rgba(255, 0, 127, 0.2);
+}
+
+/* Contact text */
+.dark.theme-cyberpunk table tbody td.text-muted-foreground {
+  color: hsl(240, 8%, 48%) !important;
+}
+
+/* Status Badges � rounded pills with glowing text */
+.dark.theme-cyberpunk .bg-blue-500\/10 {
+  background: hsla(180, 100%, 50%, 0.1) !important;
+  border-color: hsla(180, 100%, 50%, 0.2) !important;
+  color: hsl(180, 100%, 60%) !important;
+  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
+  border-radius: 9999px !important;
+}
+
+.dark.theme-cyberpunk .text-blue-600.dark\:text-blue-400 {
+  color: hsl(180, 100%, 60%) !important;
+  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
+}
+
+.dark.theme-cyberpunk .bg-amber-500\/10 {
+  background: hsla(30, 100%, 55%, 0.1) !important;
+  border-color: hsla(30, 100%, 55%, 0.2) !important;
+  color: hsl(30, 100%, 60%) !important;
+  text-shadow: 0 0 6px rgba(255, 165, 0, 0.4);
+  border-radius: 9999px !important;
+}
+
+.dark.theme-cyberpunk .text-amber-600.dark\:text-amber-400 {
+  color: hsl(30, 100%, 60%) !important;
+  text-shadow: 0 0 6px rgba(255, 165, 0, 0.4);
+}
+
+.dark.theme-cyberpunk .bg-purple-500\/10 {
+  background: hsla(260, 80%, 60%, 0.1) !important;
+  border-color: hsla(260, 80%, 60%, 0.2) !important;
+  color: hsl(260, 80%, 65%) !important;
+  text-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
+  border-radius: 9999px !important;
+}
+
+.dark.theme-cyberpunk .text-purple-600.dark\:text-purple-400 {
+  color: hsl(260, 80%, 65%) !important;
+  text-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
+}
+
+.dark.theme-cyberpunk .bg-emerald-500\/10 {
+  background: hsla(110, 100%, 50%, 0.1) !important;
+  border-color: hsla(110, 100%, 50%, 0.2) !important;
+  color: hsl(110, 100%, 55%) !important;
+  text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
+  border-radius: 9999px !important;
+}
+
+.dark.theme-cyberpunk .text-emerald-600.dark\:text-emerald-400 {
+  color: hsl(110, 100%, 55%) !important;
+  text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
+}
+
+.dark.theme-cyberpunk .bg-zinc-500\/10 {
+  background: hsla(240, 8%, 50%, 0.08) !important;
+  border-color: hsla(240, 8%, 50%, 0.15) !important;
+  color: hsl(240, 8%, 50%) !important;
+  border-radius: 9999px !important;
+}
+
+.dark.theme-cyberpunk .text-zinc-600.dark\:text-zinc-400 {
+  color: hsl(240, 8%, 50%) !important;
+}
+
+/* Status dot inside badge */
+.dark.theme-cyberpunk .mr-1\.5.h-1\.5.w-1\.5.rounded-full {
+  box-shadow: 0 0 4px currentColor;
+}
+
+/* "View all" link */
+.dark.theme-cyberpunk .text-primary.hover\:underline {
+  color: hsl(330, 100%, 55%) !important;
+}
+.dark.theme-cyberpunk .text-primary.hover\:underline:hover {
+  text-shadow: 0 0 6px rgba(255, 0, 127, 0.2);
+}
+
+/* ============================================================================
+   Other Components
+   ============================================================================ */
+
+/* Badge component (generic) */
+.dark.theme-cyberpunk .inline-flex.items-center.border.rounded-full {
+  border-radius: 9999px !important;
+}
+
+/* DataTable pagination */
+.dark.theme-cyberpunk .flex.items-center.justify-between.px-2 .text-sm.text-muted-foreground {
+  color: hsl(240, 8%, 45%) !important;
+}
+
+/* Page size selector */
+.dark.theme-cyberpunk .h-8.w-\[70px\] {
+  border-color: hsl(270, 25%, 15%) !important;
+  background: hsla(240, 12%, 10%, 0.6) !important;
+}
+
+/* Nav buttons (pagination) */
+.dark.theme-cyberpunk .h-8.w-8.p-0,
+.dark.theme-cyberpunk .h-8.w-8 {
+  border-color: hsl(270, 25%, 15%) !important;
+  color: hsl(240, 8%, 50%) !important;
+}
+.dark.theme-cyberpunk .h-8.w-8:hover {
+  background: hsla(330, 100%, 50%, 0.1) !important;
+  color: hsl(330, 100%, 55%) !important;
+  border-color: hsla(330, 100%, 50%, 0.2) !important;
+}
+
+/* Loading skeleton */
+.dark.theme-cyberpunk .h-4.animate-pulse.rounded.bg-muted {
+  background: hsl(240, 12%, 14%) !important;
+}
+
+/* Toast notifications */
+.dark.theme-cyberpunk [data-sonner-toaster] {
+  --normal-bg: hsl(240, 15%, 7%);
+  --normal-border: hsl(270, 30%, 15%);
+  --normal-text: hsl(210, 40%, 93%);
+}
+
+/* Focus ring */
+.dark.theme-cyberpunk button:focus-visible {
+  box-shadow: 0 0 0 2px hsl(330, 100%, 50%), 0 0 8px rgba(255, 0, 127, 0.4);
+}
+
+/* Spidey watermark (DAILY BUGLE) */
+.dark.theme-cyberpunk .absolute.top-12.right-4 {
+  display: none !important;
+}
+/* ============================================================================
+   Donut Chart — Lead Status Segment Colors (Cyberpunk Neon Overhaul)
+   ============================================================================ */
+
+/* Arc path 1 — Open → Neon Purple/Magenta (#BD00FF) */
+.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(1) {
+  fill: hsl(285, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.4));
+}
+
+/* Arc path 2 — Contacted → Bright Cyberpunk Cyan (#00E5FF) */
+.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(2) {
+  fill: hsl(186, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
+}
+
+/* Arc path 3 — Pending → Electric Neon Yellow/Orange (#FFD700) */
+.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(3) {
+  fill: hsl(51, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
+}
+
+/* Arc path 4 — Closed → Glowing Lime Green (#39FF14) */
+.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(4) {
+  fill: hsl(110, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
+}
+
+/* Arc path 5 — Ignored → Deep Neon Crimson (#FF0055) */
+.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(5) {
+  fill: hsl(340, 100%, 50%) !important;
+  filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.3));
+}
+
+/* Legend dot 1 — Open (Neon Purple) */
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1) .rounded-full {
+  background: hsl(285, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(189, 0, 255, 0.5) !important;
+}
+
+/* Legend dot 2 — Contacted (Bright Cyan) */
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2) .rounded-full {
+  background: hsl(186, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
+}
+
+/* Legend dot 3 — Pending (Electric Yellow/Orange) */
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3) .rounded-full {
+  background: hsl(51, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
+}
+
+/* Legend dot 4 — Closed (Lime Green) */
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4) .rounded-full {
+  background: hsl(110, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
+}
+
+/* Legend dot 5 — Ignored (Deep Neon Crimson) */
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5) .rounded-full {
+  background: hsl(340, 100%, 50%) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 85, 0.4) !important;
+}
+
+/* Legend container hover border — match segment color */
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1):hover {
+  border-color: hsla(285, 100%, 50%, 0.35) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2):hover {
+  border-color: hsla(186, 100%, 50%, 0.35) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3):hover {
+  border-color: hsla(51, 100%, 50%, 0.35) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4):hover {
+  border-color: hsla(110, 100%, 50%, 0.35) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5):hover {
+  border-color: hsla(340, 100%, 50%, 0.35) !important;
+}
+
+/* Highlight text colors on hover */
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1):hover .text-xs.font-semibold {
+  color: hsl(285, 100%, 55%) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2):hover .text-xs.font-semibold {
+  color: hsl(186, 100%, 55%) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3):hover .text-xs.font-semibold {
+  color: hsl(51, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4):hover .text-xs.font-semibold {
+  color: hsl(110, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5):hover .text-xs.font-semibold {
+  color: hsl(340, 100%, 55%) !important;
+}
+/* ============================================================================
+   Sidebar — Toggle, icons, monitor, facebook
+   ============================================================================ */
+
+/* Sidebar toggle button hover state */
+.dark.theme-cyberpunk aside button:hover svg {
+  color: hsl(330, 100%, 55%) !important;
+  filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.3));
+}
+
+/* Bottom-left sidebar icon/badge catch-all — any SVG icon near user area gets neon pink */
+.dark.theme-cyberpunk aside .border-t + div svg,
+.dark.theme-cyberpunk aside .border-t ~ div svg {
+  color: hsl(330, 100%, 50%) !important;
+  filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.2));
+}
+
+/* System monitor values — neon cyan */
+.dark.theme-cyberpunk aside .text-\[var\(--theme-primary\, #3b91f7\)\] {
+  color: hsl(180, 100%, 55%) !important;
+}
+
+/* Force any Facebook icon / blue circular button in sidebar to neon pink */
+.dark.theme-cyberpunk aside button:has(.lucide-facebook),
+.dark.theme-cyberpunk aside [class*="facebook"] {
+  background: hsl(330, 100%, 50%) !important;
+  border-color: hsl(330, 100%, 50%) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
+}
+.dark.theme-cyberpunk aside button:has(.lucide-facebook) svg,
+.dark.theme-cyberpunk aside [class*="facebook"] svg {
+  color: hsl(0, 0%, 100%) !important;
+}
+
+/* ============================================================================
+   1. METRIC CARDS — Balanced Glowing Pink Highlights (Top & Bottom)
+============================================================================ */
+.dark.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
+.dark.theme-cyberpunk [class*="bg-card"],
+.dark.theme-cyberpunk .rounded-xl.border.bg-card {
+  border-top: 2px solid hsl(330, 100%, 50%) !important;
+  border-bottom: 2px solid hsl(330, 100%, 50%) !important;
+  box-shadow: 0 4px 20px rgba(255, 0, 127, 0.15) !important;
+}
+
+/* ============================================================================
+   2. TOP RIGHT NAV + SIDEBAR + TABLE — All Avatar Fallbacks → Neon Pink
+   Targets: .bg-muted span that is a direct child of the Avatar root
+   (Avatar root always has shrink-0 + overflow-hidden classes)
+============================================================================ */
+.dark.theme-cyberpunk [class*="shrink-0"][class*="overflow-hidden"] > .bg-muted {
+  background: hsl(330, 100%, 50%) !important;
+  color: #ffffff !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
+}
+
+/* ============================================================================
+   3. BOTTOM LEFT SIDEBAR — Lightning / Zap Icons
+============================================================================ */
+.dark.theme-cyberpunk aside [class*="lucide-zap"],
+.dark.theme-cyberpunk aside svg[class*="text-blue"],
+.dark.theme-cyberpunk aside [class*="lightning"] {
+  background: hsl(330, 100%, 50%) !important;
+  color: #ffffff !important;
+  fill: #ffffff !important;
+  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
+}
+
+/* ============================================================================
+   4. STATUS BADGES — Neon Cyberpunk Pills (Recent Leads Table)
+============================================================================ */
+
+/* Open → Bright Cyan */
+.dark.theme-cyberpunk [class*="bg-blue-500/10"] {
+  background: hsla(186, 100%, 50%, 0.12) !important;
+  color: hsl(186, 100%, 55%) !important;
+  border-color: hsla(186, 100%, 50%, 0.25) !important;
+  box-shadow: 0 0 6px rgba(0, 229, 255, 0.15) !important;
+}
+
+/* Contacted → Cyberpunk Purple/Magenta */
+.dark.theme-cyberpunk [class*="bg-amber-500/10"] {
+  background: hsla(285, 100%, 50%, 0.12) !important;
+  color: hsl(285, 100%, 55%) !important;
+  border-color: hsla(285, 100%, 50%, 0.25) !important;
+  box-shadow: 0 0 6px rgba(189, 0, 255, 0.15) !important;
+}
+
+/* Pending → Cyberpunk Orange/Yellow */
+.dark.theme-cyberpunk [class*="bg-purple-500/10"] {
+  background: hsla(40, 100%, 55%, 0.12) !important;
+  color: hsl(40, 100%, 55%) !important;
+  border-color: hsla(40, 100%, 55%, 0.25) !important;
+  box-shadow: 0 0 6px rgba(255, 170, 0, 0.15) !important;
+}
+
+/* Closed → Cyberpunk Crimson/Deep Red */
+.dark.theme-cyberpunk [class*="bg-emerald-500/10"] {
+  background: hsla(350, 75%, 45%, 0.12) !important;
+  color: hsl(350, 75%, 50%) !important;
+  border-color: hsla(350, 75%, 45%, 0.25) !important;
+  box-shadow: 0 0 6px rgba(200, 30, 60, 0.15) !important;
+}
+
+/* Ignored — subtle muted grey */
+.dark.theme-cyberpunk [class*="bg-zinc-500/10"] {
+  background: hsla(0, 0%, 40%, 0.08) !important;
+  color: hsl(0, 0%, 50%) !important;
+  border-color: hsla(0, 0%, 40%, 0.15) !important;
+}
+
+/* Status dot — matches badge color (LeadStatusBadge component) */
+.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-blue-500 {
+  background: hsl(186, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-amber-500 {
+  background: hsl(285, 100%, 50%) !important;
+}
+.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-purple-500 {
+  background: hsl(40, 100%, 55%) !important;
+}
+.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-emerald-500 {
+  background: hsl(350, 75%, 45%) !important;
+}
+.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-zinc-500 {
+  background: hsl(0, 0%, 40%) !important;
+}
+
+/* (Covered by section 2 — universal [data-radix-avatar-fallback] rule) */
+
+/* ============================================================================
+   6. SECTION HEADERS — "Pipeline Overview" & "Analytics" → High Contrast
+============================================================================ */
+.dark.theme-cyberpunk .text-xs.font-semibold.tracking-widest.uppercase {
+  color: hsl(210, 20%, 88%) !important;
+}
+.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest.uppercase {
+  color: hsl(210, 20%, 88%) !important;
+}
diff --git a/Web_Backgrounds/theme.json b/Web_Backgrounds/theme.json
new file mode 100644
index 0000000..e84ec74
--- /dev/null
+++ b/Web_Backgrounds/theme.json
@@ -0,0 +1,113 @@
+{
+  "theme": {
+    "id": "cyberpunk",
+    "name": "Cyberpunk Theme",
+    "description": "Complete cyberpunk transformation: semi-transparent metric cards with 2px glowing hot-pink borders, fixed cyberpunk cityscape background, neon-pink avatar badges, and vibrant chart legends with hot-pink/cyan neon swatches.",
+    "type": "dual",
+    "default": false
+  },
+  "modes": {
+    "dark": {
+      "colors": {
+        "background": "hsl(240, 18%, 4%)",
+        "foreground": "hsl(210, 40%, 93%)",
+        "card": "hsl(240, 15%, 7%)",
+        "cardForeground": "hsl(210, 40%, 93%)",
+        "popover": "hsl(240, 15%, 7%)",
+        "popoverForeground": "hsl(210, 40%, 93%)",
+        "primary": "hsl(330, 100%, 50%)",
+        "primaryForeground": "hsl(0, 0%, 100%)",
+        "secondary": "hsl(180, 100%, 50%)",
+        "secondaryForeground": "hsl(0, 0%, 0%)",
+        "muted": "hsl(240, 12%, 12%)",
+        "mutedForeground": "hsl(240, 8%, 55%)",
+        "accent": "hsl(260, 80%, 60%)",
+        "accentForeground": "hsl(0, 0%, 100%)",
+        "destructive": "hsl(0, 84%, 55%)",
+        "destructiveForeground": "hsl(0, 0%, 100%)",
+        "border": "hsl(270, 30%, 15%)",
+        "input": "hsl(240, 12%, 12%)",
+        "ring": "hsl(330, 100%, 50%)",
+        "sidebar": "hsl(240, 15%, 3%)",
+        "sidebarForeground": "hsl(210, 40%, 93%)",
+        "sidebarPrimary": "hsl(330, 100%, 50%)",
+        "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
+        "sidebarAccent": "hsl(240, 10%, 10%)",
+        "sidebarAccentForeground": "hsl(210, 40%, 93%)",
+        "sidebarBorder": "hsl(270, 25%, 12%)",
+        "sidebarRing": "hsl(330, 100%, 50%)"
+      }
+    },
+    "light": {
+      "colors": {
+        "background": "hsl(220, 15%, 96%)",
+        "foreground": "hsl(240, 30%, 10%)",
+        "card": "hsl(0, 0%, 100%)",
+        "cardForeground": "hsl(240, 30%, 10%)",
+        "popover": "hsl(0, 0%, 100%)",
+        "popoverForeground": "hsl(240, 30%, 10%)",
+        "primary": "hsl(330, 80%, 48%)",
+        "primaryForeground": "hsl(0, 0%, 100%)",
+        "secondary": "hsl(180, 80%, 38%)",
+        "secondaryForeground": "hsl(0, 0%, 100%)",
+        "muted": "hsl(240, 8%, 92%)",
+        "mutedForeground": "hsl(240, 8%, 48%)",
+        "accent": "hsl(260, 65%, 52%)",
+        "accentForeground": "hsl(0, 0%, 100%)",
+        "destructive": "hsl(0, 80%, 55%)",
+        "destructiveForeground": "hsl(0, 0%, 100%)",
+        "border": "hsl(270, 15%, 84%)",
+        "input": "hsl(240, 8%, 92%)",
+        "ring": "hsl(330, 80%, 48%)",
+        "sidebar": "hsl(0, 0%, 100%)",
+        "sidebarForeground": "hsl(240, 30%, 10%)",
+        "sidebarPrimary": "hsl(330, 80%, 48%)",
+        "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
+        "sidebarAccent": "hsl(240, 8%, 92%)",
+        "sidebarAccentForeground": "hsl(240, 30%, 10%)",
+        "sidebarBorder": "hsl(270, 15%, 84%)",
+        "sidebarRing": "hsl(330, 80%, 48%)"
+      }
+    }
+  },
+  "borderRadius": "0.5rem",
+  "typography": {
+    "fontFamily": "Inter, sans-serif",
+    "headingFont": "Inter, sans-serif"
+  },
+  "keyColors": {
+    "primary": "#ff007f",
+    "background": "#0a0a10 (dark) / #f0f2f8 (light)",
+    "card": "#0f0f18 (dark) / #ffffff (light)",
+    "sidebar": "#07070d (dark) / #ffffff (light)",
+    "border": "#1c1430 (dark) / #d4d0e0 (light)",
+    "text": "#e8e8f0 (dark) / #1a1a2e (light)",
+    "mutedText": "#7a7a9a (dark) / #6b7280 (light)"
+  },
+  "neon": {
+    "pink": "#ff007f",
+    "cyan": "#00f0ff",
+    "violet": "#8b5cf6",
+    "yellow": "#ffd700",
+    "acidGreen": "#39ff14",
+    "orange": "#ff8c00"
+  },
+  "chartSegments": {
+    "open": { "label": "Open", "color": "#BD00FF", "description": "Neon Purple — 35%" },
+    "contacted": { "label": "Contacted", "color": "#00E5FF", "description": "Cyberpunk Cyan — 25%" },
+    "pending": { "label": "Pending", "color": "#FFD700", "description": "Electric Yellow/Orange — 17%" },
+    "closed": { "label": "Closed", "color": "#39FF14", "description": "Glowing Lime Green — 23%" },
+    "ignored": { "label": "Ignored", "color": "#FF0055", "description": "Deep Neon Crimson — 0%" }
+  },
+  "barChart": {
+    "newLeads": { "color": "#FF1493", "glow": "rgba(255, 0, 127, 0.5)" },
+    "closed": { "color": "#00F0FF", "glow": "rgba(0, 229, 255, 0.4)" }
+  },
+  "statusBadges": {
+    "open": { "color": "#00E5FF", "label": "Cyan Neon" },
+    "contacted": { "color": "#BD00FF", "label": "Purple Magenta" },
+    "pending": { "color": "#FFAA00", "label": "Orange Yellow" },
+    "closed": { "color": "#C81E3C", "label": "Crimson Red" },
+    "ignored": { "color": "#666666", "label": "Muted Grey" }
+  }
+}