From d3d6af33cc907418ca880b12303bd928b999a9a1 Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Fri, 13 Mar 2026 00:29:32 +0530
Subject: [PATCH] feat(procanvas): full light/dark mode redesign with distinct
 visual identities
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Light mode — Energetic & Clean (Duolingo/fitness app aesthetic):
- GlassPanel rebuilt as function component using useTheme; light mode gets
  solid colored header banners per panel (gold=Showdown, fire=Hot Streak,
  cyan=Weekly, blue=Stats/Leaderboard, purple=Rewards/Badges) with white
  text on color; dark mode keeps existing glass panel + accent glow line
- Page background: zinc-100/80 so white cards float visually
- Event cards (Showdown, Hot Streak, 12 Appointments) promoted to use
  GlassPanel title+icon props — each gets its own colored identity banner
- OperatorCard: soft shadow + amber ring in light mode; stays dark (sports
  card aesthetic intentional); harsh rgba(0,0,0,0.6) shadow removed
- Live Event Banner: vibrant emerald-600→green-700 gradient in light mode
  replacing the always-dark green-900; softer shadow and border
- Log Action buttons: clean bg-white with shadow-sm, removed dark inset
  shadow that made them look dirty in light mode
- Neon/cyan on white fixed: #AAFF00→green-600, #00E5FF→sky-500/sky-600
- EnergyBar tracks: bg-zinc-200 in light, bg-black/60 in dark
- Leaderboard, badge cards, reward nodes: all adapted with dark: variants
- XP badge in header: bg-zinc-100/border-zinc-200 in light mode
- Import useTheme added to support GlassPanel and OperatorCard hooks

Dark mode — unchanged; all existing glass panel aesthetics preserved.
---
 src/pages/ProCanvas.jsx | 343 +++++++++++++++++++++-------------------
 1 file changed, 182 insertions(+), 161 deletions(-)

diff --git a/src/pages/ProCanvas.jsx b/src/pages/ProCanvas.jsx
index fae1a1e..498c91f 100644
--- a/src/pages/ProCanvas.jsx
+++ b/src/pages/ProCanvas.jsx
@@ -5,6 +5,7 @@ import { useAuth } from '../context/AuthContext';
 import { useMockStore } from '../data/mockStore';
 import { GamificationProvider, useGamification } from '../context/GamificationContext';
 import { useGamification as useOldGamification } from '../hooks/useGamification';
+import { useTheme } from '../context/ThemeContext';
 import FloatingXPManager from '../components/ProCanvas/gamification/FloatingXPManager';
 import LevelUpModal from '../components/ProCanvas/gamification/LevelUpModal';
 import profilePic from '../assets/images/Profile_Pic_1_Agent.png';
@@ -104,14 +105,23 @@ const HexLevelBadge = ({ level, color = C.gold, size = 100, mobileSize = 85 }) =
 
 // Fut-style Player Card
 const OperatorCard = ({ user, gamestate }) => {
+    const { theme } = useTheme();
+    const isDark = theme === 'dark';
     return (
         <motion.div
             initial={{ scale: 0.95, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
-            className="relative w-[90%] sm:w-full aspect-[2.5/3.8] max-w-[340px] sm:max-w-[400px] mx-auto rounded-[1.5rem] sm:rounded-[2rem] overflow-hidden shadow-[0_20px_40px_rgba(0,0,0,0.6)] sm:shadow-[0_30px_60px_rgba(0,0,0,0.7)] cursor-pointer group"
+            className={`relative w-[90%] sm:w-full aspect-[2.5/3.8] max-w-[340px] sm:max-w-[400px] mx-auto rounded-[1.5rem] sm:rounded-[2rem] overflow-hidden cursor-pointer group
+                ${isDark
+                    ? 'shadow-[0_20px_40px_rgba(0,0,0,0.6)] sm:shadow-[0_30px_60px_rgba(0,0,0,0.7)]'
+                    : 'shadow-[0_8px_30px_rgba(0,0,0,0.18)] ring-1 ring-amber-200/60'
+                }`}
         >
             {/* Card Background (Elite Gold Theme) */}
-            <div className="absolute inset-0 bg-gradient-to-br from-zinc-800 via-zinc-900 to-black z-0" />
+            <div className={`absolute inset-0 z-0 ${isDark
+                ? 'bg-gradient-to-br from-zinc-800 via-zinc-900 to-black'
+                : 'bg-gradient-to-br from-zinc-800 via-zinc-900 to-black'
+            }`} />
 
             {/* Glossy overlay */}
             <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50 z-10 pointer-events-none" style={{ clipPath: 'polygon(0 0, 100% 0, 100% 30%, 0 50%)' }} />
@@ -194,33 +204,52 @@ const OperatorCard = ({ user, gamestate }) => {
 };
 
 // Sleek Glass Panel (base container for UI)
-const GlassPanel = ({ children, className = '', accentColor = 'transparent', title, icon: Icon, extra }) => (
-    <div className={`relative rounded-[1.5rem] overflow-hidden backdrop-blur-xl border flex flex-col ${className}`}
-        style={{ backgroundColor: C.glass, borderColor: C.border, boxShadow: '0 12px 40px rgba(0,0,0,0.4)' }}>
+function GlassPanel({ children, className = '', accentColor = 'transparent', title, icon: Icon, extra }) {
+    const { theme } = useTheme();
+    const isDark = theme === 'dark';
+    const hasAccent = accentColor !== 'transparent';
 
-        {/* Subtle accent glow at the top */}
-        {accentColor !== 'transparent' && (
-            <div className="absolute top-0 inset-x-0 h-[2px] opacity-70 shadow-[0_0_20px_3px]" style={{ backgroundColor: accentColor, color: accentColor }} />
-        )}
+    return (
+        <div className={`relative rounded-[1.5rem] overflow-hidden border flex flex-col
+            ${isDark
+                ? 'bg-zinc-900/70 backdrop-blur-xl border-white/[0.08] shadow-[0_12px_40px_rgba(0,0,0,0.4)]'
+                : 'bg-white border-zinc-200/60 shadow-md'
+            } ${className}`}>
 
-        {/* Header if provided */}
-        {(title || Icon || extra) && (
-            <div className="px-6 py-5 flex items-center justify-between border-b" style={{ borderColor: C.border }}>
-                <div className="flex items-center gap-3">
-                    {Icon && <Icon size={24} style={{ color: accentColor !== 'transparent' ? accentColor : '#fff' }} />}
-                    <h3 className="font-['Barlow_Condensed'] font-black uppercase tracking-widest text-[#E4E4E5] text-xl">
-                        {title}
-                    </h3>
-                </div>
-                {extra && <div className="text-lg font-bold">{extra}</div>}
+            {/* Dark mode: subtle accent glow line at top */}
+            {isDark && hasAccent && (
+                <div className="absolute top-0 inset-x-0 h-[2px] opacity-70 shadow-[0_0_20px_3px]"
+                    style={{ backgroundColor: accentColor, color: accentColor }} />
+            )}
+
+            {/* Header */}
+            {(title || Icon || extra) && (
+                isDark ? (
+                    <div className="px-6 py-4 flex items-center justify-between border-b border-white/[0.08]">
+                        <div className="flex items-center gap-3">
+                            {Icon && <Icon size={20} style={{ color: hasAccent ? accentColor : undefined }} className="text-zinc-300" />}
+                            <h3 className="font-['Barlow_Condensed'] font-bold uppercase tracking-widest text-[#E4E4E5] text-sm">{title}</h3>
+                        </div>
+                        {extra && <div className="text-lg font-bold text-white/80">{extra}</div>}
+                    </div>
+                ) : (
+                    <div className="px-5 py-3 flex items-center justify-between rounded-t-[1.4rem]"
+                        style={{ backgroundColor: hasAccent ? accentColor : '#e4e4e7' }}>
+                        <div className="flex items-center gap-2.5">
+                            {Icon && <Icon size={18} className="text-white" style={{ opacity: 0.9 }} />}
+                            <h3 className="font-['Barlow_Condensed'] font-black uppercase tracking-widest text-white text-sm">{title}</h3>
+                        </div>
+                        {extra && <div className="text-sm font-bold text-white/90">{extra}</div>}
+                    </div>
+                )
+            )}
+
+            <div className="relative z-10 p-6 flex-1 flex flex-col">
+                {children}
             </div>
-        )}
-
-        <div className="relative z-10 p-6 flex-1 flex flex-col">
-            {children}
         </div>
-    </div>
-);
+    );
+}
 
 // Progress Bar (Sleek, bright energy bar)
 const EnergyBar = ({ current, max, color = C.neon, label }) => {
@@ -229,11 +258,11 @@ const EnergyBar = ({ current, max, color = C.neon, label }) => {
         <div className="w-full">
             {label && (
                 <div className="flex justify-between items-end mb-2 font-['Barlow_Condensed']">
-                    <span className="text-sm font-bold text-white/60 tracking-wider uppercase">{label}</span>
-                    <span className="text-xl font-black text-white"><CountUp to={current} /> <span className="text-white/40">/ {max}</span></span>
+                    <span className="text-sm font-bold text-zinc-500 dark:text-white/60 tracking-wider uppercase">{label}</span>
+                    <span className="text-xl font-black text-zinc-900 dark:text-white"><CountUp to={current} /> <span className="text-zinc-400 dark:text-white/40">/ {max}</span></span>
                 </div>
             )}
-            <div className="h-3 w-full bg-black/60 rounded-full overflow-hidden shadow-inner border border-white/5">
+            <div className="h-3 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden shadow-inner border border-zinc-300 dark:border-white/5">
                 <motion.div
                     initial={{ width: 0 }}
                     animate={{ width: `${pct}%` }}
@@ -289,27 +318,27 @@ const LogActionModal = ({ actionKey, onClose, gs }) => {
                     {actionKey === 'knock' && (
                         <>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Address / Location</label>
-                                <input required type="text" placeholder="e.g. 123 Main St" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Address / Location</label>
+                                <input required type="text" placeholder="e.g. 123 Main St" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
                             </div>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Client Name (Optional)</label>
-                                <input type="text" placeholder="e.g. John Doe" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Client Name (Optional)</label>
+                                <input type="text" placeholder="e.g. John Doe" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
                             </div>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Phone Number (Optional)</label>
-                                <input type="tel" placeholder="(555) 123-4567" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Phone Number (Optional)</label>
+                                <input type="tel" placeholder="(555) 123-4567" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
                             </div>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Interaction Result</label>
-                                <select onChange={(e) => setXpReward(e.target.value === 'Pitched' ? 15 : 10)} className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Interaction Result</label>
+                                <select onChange={(e) => setXpReward(e.target.value === 'Pitched' ? 15 : 10)} className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
                                     <option value="Not Home">Not Home</option>
                                     <option value="Pitched">Pitched / Conversation</option>
                                     <option value="Follow Up">Follow Up Needed</option>
                                 </select>
                             </div>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Details / Notes</label>
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Details / Notes</label>
                                 <textarea rows="2" placeholder="Brief notes about the home or conversation..." className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors resize-none" />
                             </div>
                         </>
@@ -317,33 +346,33 @@ const LogActionModal = ({ actionKey, onClose, gs }) => {
                     {(actionKey === 'lead' || actionKey === 'appt' || actionKey === 'meeting') && (
                         <>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Client / Lead Name</label>
-                                <input required type="text" placeholder="e.g. John Doe" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Client / Lead Name</label>
+                                <input required type="text" placeholder="e.g. John Doe" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
                             </div>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Phone Number</label>
-                                <input type="tel" placeholder="(555) 123-4567" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Phone Number</label>
+                                <input type="tel" placeholder="(555) 123-4567" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
                             </div>
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Address / Location</label>
-                                <input type="text" placeholder="e.g. 123 Main St" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Address / Location</label>
+                                <input type="text" placeholder="e.g. 123 Main St" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
                             </div>
                             {actionKey === 'appt' && (
                                 <div className="grid grid-cols-2 gap-4">
                                     <div className="flex flex-col gap-1.5">
-                                        <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Date</label>
-                                        <input required type="date" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
+                                        <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Date</label>
+                                        <input required type="date" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
                                     </div>
                                     <div className="flex flex-col gap-1.5">
-                                        <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Time</label>
-                                        <input required type="time" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
+                                        <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Time</label>
+                                        <input required type="time" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
                                     </div>
                                 </div>
                             )}
                             {(actionKey === 'meeting' || actionKey === 'lead') && (
                                 <div className="flex flex-col gap-1.5">
-                                    <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Interaction Type</label>
-                                    <select className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
+                                    <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Interaction Type</label>
+                                    <select className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
                                         <option value="Initial">Initial Contact</option>
                                         <option value="Follow Up">Follow Up</option>
                                         <option value="Closing">Closing Attempt</option>
@@ -351,7 +380,7 @@ const LogActionModal = ({ actionKey, onClose, gs }) => {
                                 </div>
                             )}
                             <div className="flex flex-col gap-1.5">
-                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Details / Notes</label>
+                                <label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Details / Notes</label>
                                 <textarea rows="2" placeholder="Brief notes..." className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors resize-none" />
                             </div>
                         </>
@@ -379,7 +408,7 @@ const BadgesModal = ({ onClose, gs }) => (
         <motion.div initial={{ scale: 0.95, opacity: 0, y: 20 }} animate={{ scale: 1, opacity: 1, y: 0 }}
             className="relative bg-gradient-to-br from-zinc-900 to-black border border-white/20 p-6 sm:p-8 rounded-[2rem] w-full max-w-4xl max-h-[90vh] overflow-y-auto shadow-[0_30px_60px_rgba(0,0,0,0.8)] flex flex-col gap-6 scrollbar-hide">
 
-            <div className="flex items-center justify-between border-b border-white/10 pb-4 sticky top-0 bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
+            <div className="flex items-center justify-between border-b border-zinc-200 dark:border-white/10 pb-4 sticky top-0 bg-white/90 dark:bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
                 <div>
                     <h3 className="font-['Barlow_Condensed'] font-black uppercase text-3xl text-white tracking-widest leading-none flex items-center gap-3"><Award className="text-[#FFD700]" /> Trophy Room</h3>
                     <span className="text-sm font-bold uppercase tracking-widest text-white/50 mt-1 block">View all unlockable badges and progress</span>
@@ -410,29 +439,29 @@ const BadgesModal = ({ onClose, gs }) => (
                 </div>
 
                 {/* Locked */}
-                <div className="bg-zinc-900/50 rounded-xl p-5 border border-white/5 flex flex-col items-center text-center">
-                    <div className="absolute top-3 right-3 bg-white/10 text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
-                    <div className="w-20 h-20 rounded-full bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
-                        <Star size={40} className="text-white" />
+                <div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-5 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center">
+                    <div className="absolute top-3 right-3 bg-zinc-200 dark:bg-white/10 text-zinc-400 dark:text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
+                    <div className="w-20 h-20 rounded-full bg-zinc-300 dark:bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
+                        <Star size={40} className="text-zinc-500 dark:text-white" />
                     </div>
-                    <span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-white/50">Star Closer</span>
-                    <p className="text-white/40 text-sm mt-2 mb-4">Set 50 total appointments.</p>
+                    <span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-zinc-400 dark:text-white/50">Star Closer</span>
+                    <p className="text-zinc-400 dark:text-white/40 text-sm mt-2 mb-4">Set 50 total appointments.</p>
                     <div className="w-full">
-                        <div className="flex justify-between text-xs font-bold text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>12 / 50</span></div>
-                        <div className="h-2 w-full bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-white/20" style={{ width: '24%' }} /></div>
+                        <div className="flex justify-between text-xs font-bold text-zinc-400 dark:text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>12 / 50</span></div>
+                        <div className="h-2 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-zinc-400 dark:bg-white/20" style={{ width: '24%' }} /></div>
                     </div>
                 </div>
 
-                <div className="bg-zinc-900/50 rounded-xl p-5 border border-white/5 flex flex-col items-center text-center">
-                    <div className="absolute top-3 right-3 bg-white/10 text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
-                    <div className="w-20 h-20 rounded-full bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
-                        <MapIcon size={40} className="text-white" />
+                <div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-5 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center">
+                    <div className="absolute top-3 right-3 bg-zinc-200 dark:bg-white/10 text-zinc-400 dark:text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
+                    <div className="w-20 h-20 rounded-full bg-zinc-300 dark:bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
+                        <MapIcon size={40} className="text-zinc-500 dark:text-white" />
                     </div>
-                    <span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-white/50">Map Master</span>
-                    <p className="text-white/40 text-sm mt-2 mb-4">Cover 10 different neighborhoods entirely.</p>
+                    <span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-zinc-400 dark:text-white/50">Map Master</span>
+                    <p className="text-zinc-400 dark:text-white/40 text-sm mt-2 mb-4">Cover 10 different neighborhoods entirely.</p>
                     <div className="w-full">
-                        <div className="flex justify-between text-xs font-bold text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>3 / 10</span></div>
-                        <div className="h-2 w-full bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-white/20" style={{ width: '30%' }} /></div>
+                        <div className="flex justify-between text-xs font-bold text-zinc-400 dark:text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>3 / 10</span></div>
+                        <div className="h-2 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-zinc-400 dark:bg-white/20" style={{ width: '30%' }} /></div>
                     </div>
                 </div>
             </div>
@@ -446,7 +475,7 @@ const RewardsModal = ({ onClose, gs }) => (
         <motion.div initial={{ scale: 0.95, opacity: 0, y: 20 }} animate={{ scale: 1, opacity: 1, y: 0 }}
             className="relative bg-gradient-to-br from-zinc-900 to-black border border-white/20 p-6 sm:p-8 rounded-[2rem] w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-[0_30px_60px_rgba(0,0,0,0.8)] flex flex-col gap-6 scrollbar-hide">
 
-            <div className="flex items-center justify-between border-b border-white/10 pb-4 sticky top-0 bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
+            <div className="flex items-center justify-between border-b border-zinc-200 dark:border-white/10 pb-4 sticky top-0 bg-white/90 dark:bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
                 <div>
                     <h3 className="font-['Barlow_Condensed'] font-black uppercase text-3xl text-white tracking-widest leading-none flex items-center gap-3"><Gift className="text-[#B388FF]" /> Season Rewards</h3>
                     <span className="text-sm font-bold uppercase tracking-widest text-white/50 mt-1 block">Your milestone roadmap for the month</span>
@@ -455,7 +484,7 @@ const RewardsModal = ({ onClose, gs }) => (
             </div>
 
             <div className="flex flex-col gap-4 relative">
-                <div className="absolute left-[24px] top-4 bottom-4 w-1 bg-black/50 rounded-full z-0"><div className="w-full bg-gradient-to-b from-[#B388FF] to-[#00E5FF] shadow-[0_0_15px_rgba(179,136,255,0.8)]" style={{ height: '50%' }} /></div>
+                <div className="absolute left-[24px] top-4 bottom-4 w-1 bg-zinc-200 dark:bg-black/50 rounded-full z-0"><div className="w-full bg-gradient-to-b from-[#B388FF] to-[#00E5FF] shadow-[0_0_15px_rgba(179,136,255,0.8)]" style={{ height: '50%' }} /></div>
 
                 {[
                     { title: 'Daily Grind', target: 'Reach 1,000 XP', reward: '+400 XP Bonus', done: true, claimable: false },
@@ -508,11 +537,11 @@ const ProCanvasContent = () => {
     const [showRewards, setShowRewards] = useState(false);
 
     return (
-        <div className="min-h-screen bg-[#09090b] text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden pb-40 relative">
+        <div className="min-h-screen bg-zinc-100/80 dark:bg-[#09090b] text-zinc-900 dark:text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden pb-40 relative">
 
             {/* Ambient Background Glows */}
             <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
-                <div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#3B82F6]/10 rounded-full blur-[180px]" />
+                <div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#3B82F6]/5 dark:bg-[#3B82F6]/10 rounded-full blur-[180px]" />
                 <div className="absolute bottom-[-10%] right-[-10%] w-[50vw] h-[50vw] bg-[#FFD700]/5 rounded-full blur-[180px]" />
             </div>
 
@@ -520,25 +549,25 @@ const ProCanvasContent = () => {
             <LevelUpModal />
 
             {/* TOP NAVIGATION */}
-            <header className="relative z-40 flex items-center justify-between px-8 py-5 backdrop-blur-3xl border-b border-white/5 bg-zinc-950/60 sticky top-0">
+            <header className="relative z-40 flex items-center justify-between px-8 py-5 backdrop-blur-3xl border-b border-zinc-200 dark:border-white/5 bg-white/90 dark:bg-zinc-950/60 sticky top-0">
                 <div className="flex items-center gap-4">
                     <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#FFD700] to-[#FF8C00] flex items-center justify-center shadow-[0_0_25px_rgba(255,215,0,0.3)]">
                         <Flame size={24} className="text-black" fill="currentColor" />
                     </div>
                     <div className="flex flex-col">
-                        <h1 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-widest leading-none text-white drop-shadow-md">
+                        <h1 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-widest leading-none text-zinc-900 dark:text-white drop-shadow-md">
                             LynkedUp <span className="text-[#FFD700]">Pro</span>
                         </h1>
-                        <span className="text-xs font-bold text-white/50 tracking-widest uppercase mt-0.5">SEASON 3 ACTIVE</span>
+                        <span className="text-xs font-bold text-zinc-500 dark:text-white/50 tracking-widest uppercase mt-0.5">SEASON 3 ACTIVE</span>
                     </div>
                 </div>
 
                 {/* Resource Bar (Like Coins/Points in FUT) */}
                 <div className="flex items-center gap-6">
-                    <div className="hidden md:flex items-center bg-black/60 border border-white/10 rounded-full px-6 py-2 shadow-inner">
+                    <div className="hidden md:flex items-center bg-zinc-100 dark:bg-black/60 border border-zinc-200 dark:border-white/10 rounded-full px-6 py-2 shadow-sm dark:shadow-inner">
                         <Trophy size={20} className="text-[#FFD700] mr-3" />
-                        <span className="font-['Barlow_Condensed'] font-black text-2xl tracking-wider text-white">
-                            <CountUp to={gs.xp || 3360} /> <span className="text-white/40 text-sm ml-1">XP</span>
+                        <span className="font-['Barlow_Condensed'] font-black text-2xl tracking-wider text-zinc-700 dark:text-white">
+                            <CountUp to={gs.xp || 3360} /> <span className="text-zinc-400 dark:text-white/40 text-sm ml-1">XP</span>
                         </span>
                     </div>
                     <div className="w-14 h-14 rounded-full p-1 bg-gradient-to-b from-[#FFD700] to-transparent cursor-pointer shadow-lg hover:scale-105 transition-transform">
@@ -558,21 +587,21 @@ const ProCanvasContent = () => {
                     <OperatorCard user={mockDbUser} gamestate={gs} />
 
                     {/* Quick Stat Bar (Detailed XP/Streak) */}
-                    <GlassPanel className="py-6" accentColor={C.blue}>
+                    <GlassPanel title="Season Stats" icon={TrendingUp} accentColor={C.blue}>
                         <div className="flex flex-col gap-6">
                             {/* Detailed XP Progress */}
                             <div className="w-full">
                                 <div className="flex justify-between items-end mb-2 font-['Barlow_Condensed']">
                                     <div className="flex flex-col">
-                                        <span className="text-sm font-bold text-white/60 tracking-wider uppercase">XP Progress</span>
-                                        <span className="text-xs font-bold text-[#AAFF00] tracking-widest uppercase mt-0.5">Next: {gs.nextLevelTitle || 'Field Trooper'}</span>
+                                        <span className="text-sm font-bold text-zinc-500 dark:text-white/60 tracking-wider uppercase">XP Progress</span>
+                                        <span className="text-xs font-bold text-green-600 dark:text-[#AAFF00] tracking-widest uppercase mt-0.5">Next: {gs.nextLevelTitle || 'Field Trooper'}</span>
                                     </div>
                                     <div className="flex flex-col items-end">
-                                        <span className="text-2xl font-black text-white"><CountUp to={gs.xp || 3360} /> <span className="text-white/40 text-lg">/ {4800}</span></span>
-                                        <span className="text-xs font-bold text-[#00E5FF] tracking-widest uppercase mt-0.5">{4800 - (gs.xp || 3360)} XP TO NEXT LEVEL</span>
+                                        <span className="text-2xl font-black text-zinc-600 dark:text-white"><CountUp to={gs.xp || 3360} /> <span className="text-zinc-400 dark:text-white/40 text-lg">/ {4800}</span></span>
+                                        <span className="text-xs font-bold text-sky-500 dark:text-[#00E5FF] tracking-widest uppercase mt-0.5">{4800 - (gs.xp || 3360)} XP TO NEXT LEVEL</span>
                                     </div>
                                 </div>
-                                <div className="h-4 w-full bg-black/60 rounded-full overflow-hidden shadow-inner border border-white/5">
+                                <div className="h-4 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden shadow-inner border border-zinc-300 dark:border-white/5">
                                     <motion.div
                                         initial={{ width: 0 }}
                                         animate={{ width: `${Math.min(((gs.xp || 3360) / 4800) * 100, 100)}%` }}
@@ -588,10 +617,10 @@ const ProCanvasContent = () => {
                             {/* Streak Flow */}
                             <div className="w-full">
                                 <div className="flex justify-between items-end mb-2 font-['Barlow_Condensed']">
-                                    <span className="text-sm font-bold text-white/60 tracking-wider uppercase">Streak Flow</span>
-                                    <span className="text-2xl font-black text-white"><CountUp to={gs.streak || 12} /> <span className="text-white/40 text-lg">/ 30</span></span>
+                                    <span className="text-sm font-bold text-zinc-500 dark:text-white/60 tracking-wider uppercase">Streak Flow</span>
+                                    <span className="text-2xl font-black text-zinc-600 dark:text-white"><CountUp to={gs.streak || 12} /> <span className="text-zinc-400 dark:text-white/40 text-lg">/ 30</span></span>
                                 </div>
-                                <div className="h-4 w-full bg-black/60 rounded-full overflow-hidden shadow-inner border border-white/5">
+                                <div className="h-4 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden shadow-inner border border-zinc-300 dark:border-white/5">
                                     <motion.div
                                         initial={{ width: 0 }}
                                         animate={{ width: `${Math.min(((gs.streak || 12) / 30) * 100, 100)}%` }}
@@ -613,10 +642,10 @@ const ProCanvasContent = () => {
                                 <motion.button key={key}
                                     whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
                                     onClick={() => setLogAction(key)}
-                                    className="flex flex-col items-center justify-center p-5 rounded-2xl bg-black/40 border border-white/5 hover:bg-white/5 transition-all gap-3 relative overflow-hidden group shadow-[inset_0_0_20px_rgba(0,0,0,0.5)]">
+                                    className="flex flex-col items-center justify-center p-5 rounded-2xl bg-white dark:bg-black/40 border border-zinc-200 dark:border-white/5 hover:bg-zinc-50 dark:hover:bg-white/5 transition-all gap-3 relative overflow-hidden group shadow-sm dark:shadow-[inset_0_0_20px_rgba(0,0,0,0.5)]">
                                     <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t opacity-0 group-hover:opacity-30 transition-opacity" style={{ backgroundImage: `linear-gradient(to top, ${color}, transparent)` }} />
                                     <I size={28} style={{ color }} />
-                                    <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-[#E4E4E5] group-hover:text-white">{label}</span>
+                                    <span className="font-['Barlow_Condensed'] font-bold text-xs uppercase tracking-widest text-zinc-400 dark:text-[#E4E4E5] group-hover:text-zinc-600 dark:group-hover:text-white">{label}</span>
                                 </motion.button>
                             ))}
                         </div>
@@ -626,7 +655,7 @@ const ProCanvasContent = () => {
                     <GlassPanel title="Daily Missions" icon={Zap} accentColor={C.neon}>
                         <div className="flex flex-col gap-6">
                             {/* Weekly Challenge */}
-                            <div className="bg-black/30 p-4 rounded-xl border border-white/5">
+                            <div className="bg-zinc-100 dark:bg-black/30 p-4 rounded-xl border border-zinc-200 dark:border-white/5">
                                 <div className="flex items-center gap-2 mb-3">
                                     <Trophy size={16} className="text-[#FFD700]" />
                                     <span className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest uppercase text-[#FFD700]">Weekly Challenge</span>
@@ -637,8 +666,8 @@ const ProCanvasContent = () => {
                             {/* Daily Quests List */}
                             <div className="flex flex-col gap-4">
                                 <div className="flex items-center gap-2 mb-1">
-                                    <Zap size={16} className="text-[#AAFF00]" />
-                                    <span className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest uppercase text-[#AAFF00]">Daily Quests</span>
+                                    <Zap size={16} className="text-green-500 dark:text-[#AAFF00]" />
+                                    <span className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest uppercase text-green-600 dark:text-[#AAFF00]">Daily Quests</span>
                                 </div>
                                 <EnergyBar current={gs.dailyQuests?.knocks?.current || 18} max={20} color={C.blue} label="Door Knocks" />
                                 <EnergyBar current={gs.dailyQuests?.leads?.current || 4} max={5} color={C.neon} label="New Leads" />
@@ -662,12 +691,12 @@ const ProCanvasContent = () => {
                     {/* HERO LIVE EVENT BANNER (Today's Mission) */}
                     <motion.div
                         whileHover={{ scale: 1.01 }}
-                        className="relative w-full rounded-[2rem] overflow-hidden cursor-pointer shadow-[0_20px_50px_rgba(0,0,0,0.6)] group border border-white/10"
+                        className="relative w-full rounded-[2rem] overflow-hidden cursor-pointer shadow-[0_8px_30px_rgba(0,0,0,0.15)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.6)] group border border-emerald-600/30 dark:border-white/10"
                         onClick={() => navigate('/emp/fa/maps')}
                     >
                         {/* Event Background Image/Gradient */}
-                        <div className="absolute inset-0 bg-gradient-to-r from-green-900 via-[#1A2E1A] to-zinc-900 z-0" />
-                        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-30 mix-blend-overlay pointer-events-none z-0" />
+                        <div className="absolute inset-0 bg-gradient-to-r from-emerald-600 via-green-700 to-emerald-800 dark:from-green-900 dark:via-[#1A2E1A] dark:to-zinc-900 z-0" />
+                        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 dark:opacity-30 mix-blend-overlay pointer-events-none z-0" />
 
                         <div className="relative z-10 p-8 sm:p-10 flex flex-col sm:flex-row items-start sm:items-center justify-between min-h-[180px] gap-8">
                             <div className="flex flex-col text-center sm:text-left">
@@ -697,65 +726,57 @@ const ProCanvasContent = () => {
                     {/* THREE GRID: Showdown, Streak, Challenge */}
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                         {/* Showdown Event Card */}
-                        <GlassPanel accentColor={C.gold}>
-                            <div className="absolute top-0 right-0 p-6 opacity-10"><Trophy size={100} fill={C.gold} /></div>
-                            <span className="font-['Barlow_Condensed'] font-bold text-xs text-white/50 tracking-widest uppercase mb-2 block">Leaderboard Event</span>
-                            <h4 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-wide text-white mb-auto relative z-10">Showdown</h4>
-
-                            <div className="mt-8 flex items-end justify-between relative z-10">
+                        <GlassPanel title="Showdown" icon={Trophy} accentColor={C.gold}>
+                            <div className="absolute top-0 right-0 p-6 opacity-5 dark:opacity-10"><Trophy size={100} fill={C.gold} /></div>
+                            <span className="font-['Barlow_Condensed'] font-bold text-xs text-zinc-400 dark:text-white/50 tracking-widest uppercase mb-3 block">Leaderboard Event</span>
+                            <div className="mt-2 flex items-end justify-between relative z-10">
                                 <div>
                                     <span className="block font-['Barlow_Condensed'] font-black italic text-5xl text-[#FFD700] leading-none drop-shadow-md">1ST</span>
-                                    <span className="text-sm font-bold text-white/70 uppercase tracking-widest">18 Leads Today</span>
+                                    <span className="text-sm font-bold text-zinc-400 dark:text-white/70 uppercase tracking-widest mt-1 block">18 Leads Today</span>
                                 </div>
-                                <div className="bg-[#FFD700]/20 text-[#FFD700] border border-[#FFD700]/50 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg shadow-[0_0_15px_rgba(255,215,0,0.2)]">+250 XP</div>
+                                <div className="bg-[#FFD700]/20 text-[#ca9a04] dark:text-[#FFD700] border border-[#FFD700]/40 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg">+250 XP</div>
                             </div>
                         </GlassPanel>
 
                         {/* Streak Event Card */}
-                        <GlassPanel accentColor={C.fire}>
-                            <div className="absolute top-0 right-0 p-6 opacity-10"><Flame size={100} fill={C.fire} /></div>
-                            <span className="font-['Barlow_Condensed'] font-bold text-xs text-white/50 tracking-widest uppercase mb-2 block">Consistency Tracker</span>
-                            <h4 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-wide text-white mb-auto relative z-10">Hot Streak</h4>
-
-                            <div className="mt-8 flex items-end justify-between relative z-10">
+                        <GlassPanel title="Hot Streak" icon={Flame} accentColor={C.fire}>
+                            <div className="absolute top-0 right-0 p-6 opacity-5 dark:opacity-10"><Flame size={100} fill={C.fire} /></div>
+                            <span className="font-['Barlow_Condensed'] font-bold text-xs text-zinc-400 dark:text-white/50 tracking-widest uppercase mb-3 block">Consistency Tracker</span>
+                            <div className="mt-2 flex items-end justify-between relative z-10">
                                 <div className="flex flex-col items-center">
-                                    {/* The animated numbering user requested */}
                                     <motion.span
-                                        animate={{ scale: [1, 1.05, 1], textShadow: ["0 0 10px rgba(255,69,0,0.5)", "0 0 20px rgba(255,69,0,0.8)", "0 0 10px rgba(255,69,0,0.5)"] }}
+                                        animate={{ scale: [1, 1.05, 1] }}
                                         transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
-                                        className="block font-['Barlow_Condensed'] font-black italic text-6xl text-[#FF4500] leading-none drop-shadow-lg ml-2 origin-bottom">
+                                        className="block font-['Barlow_Condensed'] font-black italic text-6xl text-[#FF4500] leading-none ml-2 origin-bottom">
                                         <CountUp to={gs.streak || 12} />
                                     </motion.span>
-                                    <span className="text-sm font-bold text-white/70 uppercase tracking-widest mt-1">Days Row</span>
+                                    <span className="text-sm font-bold text-zinc-400 dark:text-white/70 uppercase tracking-widest mt-1">Days Row</span>
                                 </div>
-                                <div className="bg-[#4CAF50]/20 text-[#4CAF50] border border-[#4CAF50]/50 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg shadow-[0_0_15px_rgba(76,175,80,0.2)]">+50 XP</div>
+                                <div className="bg-[#4CAF50]/20 text-[#2e7d32] dark:text-[#4CAF50] border border-[#4CAF50]/40 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg">+50 XP</div>
                             </div>
                         </GlassPanel>
 
                         {/* Weekly Challenge Card */}
-                        <GlassPanel accentColor={C.cyan} className="md:col-span-2 lg:col-span-1">
-                            <div className="absolute top-0 right-0 p-6 opacity-10"><Star size={100} fill={C.cyan} /></div>
-                            <span className="font-['Barlow_Condensed'] font-bold text-xs text-white/50 tracking-widest uppercase mb-2 block">Weekly Objective</span>
-                            <h4 className="font-['Barlow_Condensed'] font-black text-2xl uppercase tracking-wide text-white mb-auto relative z-10 leading-tight">
-                                12 Appointments
-                            </h4>
+                        <GlassPanel title="12 Appointments" icon={Star} accentColor={C.cyan} className="md:col-span-2 lg:col-span-1">
+                            <div className="absolute top-0 right-0 p-6 opacity-5 dark:opacity-10"><Star size={100} fill={C.cyan} /></div>
+                            <span className="font-['Barlow_Condensed'] font-bold text-xs text-zinc-400 dark:text-white/50 tracking-widest uppercase mb-3 block">Weekly Objective</span>
 
                             <div className="mt-8 w-full relative z-10">
                                 <EnergyBar current={3} max={12} color={C.cyan} />
                                 <div className="flex justify-end mt-4">
-                                    <div className="bg-[#00E5FF]/20 text-[#00E5FF] border border-[#00E5FF]/50 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg shadow-[0_0_15px_rgba(0,229,255,0.2)]">+300 XP</div>
+                                    <div className="bg-[#00E5FF]/20 text-sky-600 dark:text-[#00E5FF] border border-[#00E5FF]/40 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg">+300 XP</div>
                                 </div>
                             </div>
                         </GlassPanel>
                     </div>
 
                     {/* SEASON PASS / REWARD PATH (Restored to larger size, scrollable on mobile) */}
-                    <GlassPanel className="cursor-pointer hover:border-[#B388FF]/50 transition-colors" title="Rewards & Checkpoints" icon={Gift} accentColor={C.purple} extra={<span className="font-['Barlow_Condensed'] text-xl text-[#B388FF]">48%</span>}>
+                    <GlassPanel className="cursor-pointer" title="Rewards & Checkpoints" icon={Gift} accentColor={C.purple} extra={<span className="font-['Barlow_Condensed'] font-black text-sm text-white/90">48% Complete</span>}>
                         <div onClick={() => setShowRewards(true)} className="absolute inset-0 z-20" />
                         <div className="relative w-full py-16 min-h-[220px] overflow-x-auto overflow-y-hidden scrollbar-hide z-10 flex items-center">
                             <div className="min-w-[700px] w-full relative px-4">
                                 {/* Track Background */}
-                                <div className="absolute top-1/2 left-8 right-8 h-2.5 bg-black/60 rounded-full transform -translate-y-1/2 z-0 border border-white/5" />
+                                <div className="absolute top-1/2 left-8 right-8 h-2.5 bg-zinc-200 dark:bg-black/60 rounded-full transform -translate-y-1/2 z-0 border border-zinc-300 dark:border-white/5" />
                                 {/* Track Fill */}
                                 <div className="absolute top-1/2 left-8 h-2.5 bg-gradient-to-r from-[#B388FF] to-[#00E5FF] rounded-full transform -translate-y-1/2 z-0 shadow-[0_0_20px_rgba(179,136,255,0.7)]" style={{ width: '48%' }} />
 
@@ -773,21 +794,21 @@ const ProCanvasContent = () => {
                                         return (
                                             <div key={i} className="flex flex-col items-center relative group">
                                                 {/* Node Circle */}
-                                                <div className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full border-4 flex items-center justify-center transition-all bg-zinc-900
-                                                ${done ? 'border-[#00E5FF] shadow-[0_0_20px_rgba(0,229,255,0.5)]' : active ? 'border-[#B388FF] shadow-[0_0_25px_rgba(179,136,255,0.8)] ring-4 ring-[#B388FF]/30 scale-110' : 'border-white/10'}`}>
+                                                <div className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full border-4 flex items-center justify-center transition-all bg-white dark:bg-zinc-900
+                                                ${done ? 'border-[#00E5FF] shadow-[0_0_20px_rgba(0,229,255,0.5)]' : active ? 'border-[#B388FF] shadow-[0_0_25px_rgba(179,136,255,0.8)] ring-4 ring-[#B388FF]/30 scale-110' : 'border-zinc-300 dark:border-white/10'}`}>
                                                     {done ? <CheckCircle size={28} className="text-[#00E5FF]" /> :
                                                         active ? <Gift size={32} className="text-[#B388FF]" /> :
-                                                            <Lock size={24} className="text-white/30" />}
+                                                            <Lock size={24} className="text-zinc-400 dark:text-white/30" />}
                                                 </div>
                                                 {/* Reward Label (floating below) */}
                                                 <div className="absolute top-[80px] w-max text-center flex flex-col gap-1.5 items-center">
-                                                    <span className={`font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest ${active || done ? 'text-white' : 'text-white/40'}`}>
+                                                    <span className={`font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest ${active || done ? 'text-zinc-500 dark:text-white' : 'text-zinc-400 dark:text-white/40'}`}>
                                                         {node.title}
                                                     </span>
                                                     <div className={`px-2 py-0.5 rounded border font-['Barlow_Condensed'] font-bold text-xs uppercase
                                                     ${done ? 'bg-[#00E5FF]/20 border-[#00E5FF]/50 text-[#00E5FF]' :
                                                             active ? 'bg-[#B388FF]/20 border-[#B388FF]/50 text-[#B388FF]' :
-                                                                'bg-white/5 border-white/10 text-white/30'}`}>
+                                                                'bg-zinc-100 dark:bg-white/5 border-zinc-300 dark:border-white/10 text-zinc-400 dark:text-white/30'}`}>
                                                         {node.reward}
                                                     </div>
                                                 </div>
@@ -804,59 +825,59 @@ const ProCanvasContent = () => {
                         <div onClick={() => setShowBadges(true)} className="absolute inset-0 z-20" />
                         <div className="grid grid-cols-2 md:grid-cols-5 gap-4 relative z-10">
                             {/* Badge 1 */}
-                            <div className="bg-gradient-to-br from-zinc-800 to-black rounded-xl p-4 border border-[#FF4500]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FF4500] transition-colors shadow-[0_0_15px_rgba(255,69,0,0.2)]">
+                            <div className="bg-zinc-100 dark:bg-gradient-to-br dark:from-zinc-800 dark:to-black rounded-xl p-4 border border-[#FF4500]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FF4500] transition-colors shadow-[0_0_15px_rgba(255,69,0,0.2)]">
                                 <div className="absolute top-2 right-2"><CheckCircle size={14} className="text-[#FF4500]" /></div>
-                                <div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
+                                <div className="w-16 h-16 rounded-full bg-[#FF4500]/10 dark:bg-black/50 flex items-center justify-center mb-3">
                                     <Crosshair size={32} className="text-[#FF4500]" />
                                 </div>
-                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white">Hot Spot Hunter</span>
+                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white">Hot Spot Hunter</span>
                                 <span className="font-['Barlow_Condensed'] font-bold text-xs uppercase text-[#FF4500] mt-2">Unlocked</span>
                             </div>
                             {/* Badge 2 */}
-                            <div className="bg-gradient-to-br from-zinc-800 to-black rounded-xl p-4 border border-[#FFD700]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FFD700] transition-colors shadow-[0_0_15px_rgba(255,215,0,0.2)]">
+                            <div className="bg-zinc-100 dark:bg-gradient-to-br dark:from-zinc-800 dark:to-black rounded-xl p-4 border border-[#FFD700]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FFD700] transition-colors shadow-[0_0_15px_rgba(255,215,0,0.2)]">
                                 <div className="absolute top-2 right-2"><CheckCircle size={14} className="text-[#FFD700]" /></div>
-                                <div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
+                                <div className="w-16 h-16 rounded-full bg-[#FFD700]/10 dark:bg-black/50 flex items-center justify-center mb-3">
                                     <Zap size={32} className="text-[#FFD700]" />
                                 </div>
-                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white">Storm Chaser</span>
+                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white">Storm Chaser</span>
                                 <span className="font-['Barlow_Condensed'] font-bold text-xs uppercase text-[#FFD700] mt-2">Unlocked</span>
                             </div>
                             {/* Badge 3 Locked */}
-                            <div className="bg-zinc-900/50 rounded-xl p-4 border border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all">
-                                <div className="absolute top-2 right-2"><Lock size={14} className="text-white/30" /></div>
-                                <div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
-                                    <Star size={32} className="text-white/40" />
+                            <div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-4 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all">
+                                <div className="absolute top-2 right-2"><Lock size={14} className="text-zinc-400 dark:text-white/30" /></div>
+                                <div className="w-16 h-16 rounded-full bg-zinc-200 dark:bg-black/50 flex items-center justify-center mb-3">
+                                    <Star size={32} className="text-zinc-400 dark:text-white/40" />
                                 </div>
-                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white/60">Star Closer</span>
+                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white/60">Star Closer</span>
                             </div>
                             {/* Badge 4 Locked */}
-                            <div className="bg-zinc-900/50 rounded-xl p-4 border border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
-                                <div className="absolute top-2 right-2"><Lock size={14} className="text-white/30" /></div>
-                                <div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
-                                    <MapIcon size={32} className="text-white/40" />
+                            <div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-4 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
+                                <div className="absolute top-2 right-2"><Lock size={14} className="text-zinc-400 dark:text-white/30" /></div>
+                                <div className="w-16 h-16 rounded-full bg-zinc-200 dark:bg-black/50 flex items-center justify-center mb-3">
+                                    <MapIcon size={32} className="text-zinc-400 dark:text-white/40" />
                                 </div>
-                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white/60">Map Master</span>
+                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white/60">Map Master</span>
                             </div>
                             {/* Badge 5 Locked */}
-                            <div className="bg-zinc-900/50 rounded-xl p-4 border border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
-                                <div className="absolute top-2 right-2"><Lock size={14} className="text-white/30" /></div>
-                                <div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
-                                    <Shield size={32} className="text-white/40" />
+                            <div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-4 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
+                                <div className="absolute top-2 right-2"><Lock size={14} className="text-zinc-400 dark:text-white/30" /></div>
+                                <div className="w-16 h-16 rounded-full bg-zinc-200 dark:bg-black/50 flex items-center justify-center mb-3">
+                                    <Shield size={32} className="text-zinc-400 dark:text-white/40" />
                                 </div>
-                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white/60">First Knock</span>
+                                <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white/60">First Knock</span>
                             </div>
                         </div>
                     </GlassPanel>
 
                     {/* Restored: Full Leaderboard List */}
-                    <GlassPanel title="Leaderboard" icon={Trophy} accentColor={C.blue} extra={<div className="font-['Barlow_Condensed'] font-black text-xl text-[#AAFF00] flex items-center gap-2"><Calendar size={20} /> Resets in {resetCountdown}</div>}>
+                    <GlassPanel title="Leaderboard" icon={Trophy} accentColor={C.blue} extra={<div className="font-['Barlow_Condensed'] font-black text-sm text-white/90 flex items-center gap-1.5"><Calendar size={15} /> Resets in {resetCountdown}</div>}>
                         <div className="flex flex-col gap-2 relative mt-4 overflow-x-auto scrollbar-hide">
                             <div className="min-w-[400px]">
                                 {/* Table Header */}
-                                <div className="grid grid-cols-[40px_1fr_80px] sm:grid-cols-[50px_1fr_100px] gap-2 sm:gap-4 px-4 sm:px-6 py-2 border-b border-white/10 mb-2">
-                                    <span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-white/40">Rank</span>
-                                    <span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-white/40">Agent</span>
-                                    <span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-white/40 text-right">XP Total</span>
+                                <div className="grid grid-cols-[40px_1fr_80px] sm:grid-cols-[50px_1fr_100px] gap-2 sm:gap-4 px-4 sm:px-6 py-2 border-b border-zinc-200 dark:border-white/10 mb-2">
+                                    <span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-zinc-400 dark:text-white/40">Rank</span>
+                                    <span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-zinc-400 dark:text-white/40">Agent</span>
+                                    <span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-zinc-400 dark:text-white/40 text-right">XP Total</span>
                                 </div>
 
                                 {(gs.leaderboard || []).slice(0, 10).map((row, i) => (
@@ -866,7 +887,7 @@ const ProCanvasContent = () => {
                                         animate={{ x: 0, opacity: 1, scale: row.isUser ? [1, 1.02, 1] : 1 }}
                                         transition={{ delay: i * 0.1, duration: 0.5 }}
                                         className={`grid grid-cols-[40px_1fr_80px] sm:grid-cols-[50px_1fr_100px] gap-2 sm:gap-4 items-center px-4 sm:px-6 py-3 sm:py-4 rounded-xl transition-all hover:bg-white/5 relative
-                                            ${row.isUser ? 'bg-[#3B82F6]/10 border border-[#3B82F6]/50 shadow-[0_0_20px_rgba(59,130,246,0.15)] z-10' : 'bg-black/30 border border-white/5 z-0'}`}>
+                                            ${row.isUser ? 'bg-[#3B82F6]/10 border border-[#3B82F6]/50 shadow-[0_0_20px_rgba(59,130,246,0.15)] z-10' : 'bg-zinc-100 dark:bg-black/30 border border-zinc-200 dark:border-white/5 z-0'}`}>
 
                                         {row.isUser && (
                                             <div className="absolute inset-0 border-2 border-[#3B82F6] rounded-xl opacity-0 animate-[pulse_2s_infinite]" />
@@ -886,21 +907,21 @@ const ProCanvasContent = () => {
                                                     <Trophy size={16} className="text-black" />
                                                 </div>
                                             ) : (
-                                                <span className="font-['Barlow_Condensed'] font-black text-2xl text-white/50">{i + 1}.</span>
+                                                <span className="font-['Barlow_Condensed'] font-black text-2xl text-zinc-400 dark:text-white/50">{i + 1}.</span>
                                             )}
                                         </div>
 
                                         <div className="flex items-center gap-4">
-                                            <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-zinc-800 flex items-center justify-center font-bold text-white/80 border border-white/10 shrink-0 text-xs sm:text-base">
+                                            <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center font-bold text-zinc-700 dark:text-white/80 border border-zinc-300 dark:border-white/10 shrink-0 text-xs sm:text-base">
                                                 {row.avatar}
                                             </div>
-                                            <span className={`font-['Barlow_Condensed'] font-black text-lg sm:text-xl tracking-wide ${row.isUser ? 'text-[#3B82F6]' : 'text-white'}`}>
+                                            <span className={`font-['Barlow_Condensed'] font-black text-lg sm:text-xl tracking-wide ${row.isUser ? 'text-[#3B82F6]' : 'text-zinc-500 dark:text-white'}`}>
                                                 {row.name}
                                             </span>
                                         </div>
 
                                         <div className="text-right">
-                                            <span className={`font-['Barlow_Condensed'] font-black text-xl sm:text-2xl ${row.isUser ? 'text-[#3B82F6]' : 'text-white/80'}`}>
+                                            <span className={`font-['Barlow_Condensed'] font-black text-xl sm:text-2xl ${row.isUser ? 'text-[#3B82F6]' : 'text-zinc-400 dark:text-white/80'}`}>
                                                 <CountUp to={row.points} duration={1000} />
                                             </span>
                                         </div>
@@ -914,7 +935,7 @@ const ProCanvasContent = () => {
             </div>
 
             {/* FIXED BOTTOM NAVIGATION */}
-            <div className="fixed bottom-0 inset-x-0 h-[80px] sm:h-[100px] bg-zinc-950/90 backdrop-blur-2xl border-t border-white/10 z-50 flex items-center justify-center pointer-events-none">
+            <div className="fixed bottom-0 inset-x-0 h-[80px] sm:h-[100px] bg-white/95 dark:bg-zinc-950/90 backdrop-blur-2xl border-t border-zinc-200 dark:border-white/10 z-50 flex items-center justify-center pointer-events-none">
                 <div className="max-w-[1000px] w-full px-2 sm:px-6 flex items-center justify-between pointer-events-auto">
                     {[
                         { label: 'Map', icon: MapIcon, active: true },
@@ -925,12 +946,12 @@ const ProCanvasContent = () => {
                     ].map((item, i) => (
                         <div key={i} className="flex flex-col items-center justify-center gap-1.5 sm:gap-2 cursor-pointer group px-2 sm:px-6 py-2 sm:py-3 w-1/5">
                             <div className={`relative w-10 h-10 sm:w-14 sm:h-14 rounded-full flex items-center justify-center transition-all duration-300
-                                ${item.active ? 'bg-[#3B82F6] text-white shadow-[0_0_20px_rgba(59,130,246,0.5)] scale-110' : 'bg-transparent text-white/40 group-hover:bg-white/10 group-hover:text-white/80'}`}>
+                                ${item.active ? 'bg-[#3B82F6] text-white shadow-[0_0_20px_rgba(59,130,246,0.5)] scale-110' : 'bg-transparent text-zinc-400 dark:text-white/40 group-hover:bg-zinc-100 dark:group-hover:bg-white/10 group-hover:text-zinc-700 dark:group-hover:text-white/80'}`}>
                                 <item.icon className="w-5 h-5 sm:w-[26px] sm:h-[26px]" />
                                 {item.active && <div className="absolute -bottom-2 sm:-bottom-3 w-1 h-1 sm:w-1.5 sm:h-1.5 rounded-full bg-[#3B82F6] shadow-[0_0_10px_#3B82F6]" />}
                             </div>
                             <span className={`font-['Barlow_Condensed'] font-bold text-[10px] sm:text-xs uppercase tracking-widest transition-colors mt-0.5 sm:mt-1 hidden min-[350px]:block
-                                ${item.active ? 'text-white' : 'text-white/40 group-hover:text-white/80'}`}>
+                                ${item.active ? 'text-white' : 'text-zinc-400 dark:text-white/40 group-hover:text-zinc-700 dark:group-hover:text-white/80'}`}>
                                 {item.label}
                             </span>
                         </div>