diff --git a/web/src/tabs/MyStrategiesTab.tsx b/web/src/tabs/MyStrategiesTab.tsx
index c5cb9f4..56ce30c 100644
--- a/web/src/tabs/MyStrategiesTab.tsx
+++ b/web/src/tabs/MyStrategiesTab.tsx
@@ -54,10 +54,10 @@ const ActiveStrategyCard: React.FC<{
     const explanation = getStrategyExplanation(profile, botState);
 
     return (
-        <div style={{
-            background: '#14151a',
-            borderRadius: '28px',
-            border: `1px solid ${profile.is_active ? 'rgba(0, 255, 136, 0.1)' : 'rgba(255, 255, 255, 0.05)'}`,
+        <div style={{
+            background: 'var(--card-elevated)',
+            borderRadius: '28px',
+            border: `1px solid ${profile.is_active ? 'var(--bl-success-muted)' : 'var(--bl-border-subtle)'}`,
             padding: '32px',
             display: 'flex',
             flexDirection: 'column',
@@ -75,8 +75,8 @@ const ActiveStrategyCard: React.FC<{
                 left: 0,
                 bottom: 0,
                 width: '4px',
-                background: profile.is_active ? '#00ff88' : '#222',
-                opacity: profile.is_active ? 1 : 0.3
+                background: profile.is_active ? 'var(--bl-success)' : 'var(--bl-border-subtle)',
+                opacity: profile.is_active ? 1 : 0.3
             }} />
 
             {/* 2. Header Area */}
@@ -86,17 +86,17 @@ const ActiveStrategyCard: React.FC<{
                         width: '44px',
                         height: '44px',
                         borderRadius: '14px',
-                        background: 'rgba(255,255,255,0.03)',
+                        background: 'var(--bl-surface-highlight)',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        border: '1px solid rgba(255, 255, 255, 0.05)',
-                        color: isSafe ? '#3498db' : isAggressive ? '#ff3366' : '#00ff88'
+                        border: '1px solid var(--bl-border-subtle)',
+                        color: isSafe ? 'var(--bl-info-strong)' : isAggressive ? 'var(--bl-danger)' : 'var(--bl-success)'
                     }}>
                         {isSafe ? <Shield size={20} /> : isAggressive ? <Zap size={20} /> : <Scale size={20} />}
                     </div>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                        <span style={{ fontSize: '10px', fontWeight: 900, color: '#444', textTransform: 'uppercase', letterSpacing: '2px' }}>Active Strategy</span>
+                        <span style={{ fontSize: '10px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Active Strategy</span>
                         <span style={{ fontSize: '13px', fontWeight: 800, color: 'white', textTransform: 'uppercase' }}>
                             {profile.is_active ? 'Running' : 'Paused'}
                         </span>
@@ -104,10 +104,10 @@ const ActiveStrategyCard: React.FC<{
                 </div>
                 <div style={{ display: 'flex', gap: '8px' }}>
                     {onBacktest && (
-                        <IconButton type="button" label={`Backtest ${profile.name}`} icon={<Activity size={18} />} onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
+                        <IconButton type="button" label={`Backtest ${profile.name}`} icon={<Activity size={18} />} onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
                     )}
-                    <IconButton type="button" label={`Edit ${profile.name}`} icon={<Settings size={18} />} onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
-                    <IconButton type="button" label={`Delete ${profile.name}`} icon={<Trash2 size={18} />} onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
+                    <IconButton type="button" label={`Edit ${profile.name}`} icon={<Settings size={18} />} onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
+                    <IconButton type="button" label={`Delete ${profile.name}`} icon={<Trash2 size={18} />} onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
                 </div>
             </div>
 
@@ -115,10 +115,10 @@ const ActiveStrategyCard: React.FC<{
             <div style={{ marginBottom: '24px' }}>
                 <h3 style={{ fontSize: '24px', fontWeight: 950, color: 'white', letterSpacing: '-0.02em' }}>{profile.name}</h3>
                 <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginTop: '12px' }}>
-                    <span style={{ background: 'rgba(0,255,136,0.05)', color: '#00ff88', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid rgba(0,255,136,0.1)', textTransform: 'uppercase' }}>
+                    <span style={{ background: 'var(--bl-success-muted)', color: 'var(--bl-success)', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid var(--bl-success-muted)', textTransform: 'uppercase' }}>
                         {profile.symbols}
                     </span>
-                    <span style={{ background: 'rgba(255,255,255,0.03)', color: '#666', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.05)', textTransform: 'uppercase' }}>
+                    <span style={{ background: 'var(--bl-surface-highlight)', color: 'var(--bl-text-quiet)', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid var(--bl-border-subtle)', textTransform: 'uppercase' }}>
                         {strategyKindLabel}
                     </span>
                 </div>
@@ -127,21 +127,21 @@ const ActiveStrategyCard: React.FC<{
             {/* 4. Operational DNA (Specs) */}
             <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px', marginBottom: '28px' }}>
                 {[
-                    { label: 'Allocation', value: `$${profile.allocated_capital.toLocaleString()}`, icon: <DollarSign size={14} />, color: '#00ff88' },
-                    { label: 'PnL (Global)', value: '$0.00', icon: <TrendingUp size={14} />, color: '#3498db' },
-                    { label: 'Target', value: `$${config?.riskLimits?.dailyProfitTargetUsd || 0}`, icon: <Target size={14} />, color: '#ffaa00' },
-                    { label: 'Latency', value: '5ms', icon: <Cpu size={14} />, color: '#ff3366' }
+                    { label: 'Allocation', value: `$${profile.allocated_capital.toLocaleString()}`, icon: <DollarSign size={14} />, color: 'var(--bl-success)' },
+                    { label: 'PnL (Global)', value: '$0.00', icon: <TrendingUp size={14} />, color: 'var(--bl-info-strong)' },
+                    { label: 'Target', value: `$${config?.riskLimits?.dailyProfitTargetUsd || 0}`, icon: <Target size={14} />, color: 'var(--bl-warning)' },
+                    { label: 'Latency', value: '5ms', icon: <Cpu size={14} />, color: 'var(--bl-danger)' }
                 ].map((spec, i) => (
                     <div key={i} style={{
-                        background: 'rgba(0,0,0,0.2)',
-                        border: '1px solid rgba(255,255,255,0.03)',
+                        background: 'var(--bl-surface-overlay)',
+                        border: '1px solid var(--bl-border-subtle)',
                         padding: '16px',
                         borderRadius: '20px',
                         display: 'flex',
                         flexDirection: 'column',
                         gap: '6px'
                     }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#555', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--bl-text-quiet)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
                             {spec.icon} {spec.label}
                         </div>
                         <div style={{ color: 'white', fontWeight: 900, fontSize: '16px' }}>{spec.value}</div>
@@ -159,8 +159,8 @@ const ActiveStrategyCard: React.FC<{
                         width: '100%',
                         padding: '16px',
                         borderRadius: '20px',
-                        background: 'rgba(255,255,255,0.02)',
-                        border: '1px solid rgba(255,255,255,0.05)',
+                        background: 'var(--bl-surface-highlight)',
+                        border: '1px solid var(--bl-border-subtle)',
                         display: 'flex',
                         flexDirection: 'column',
                         gap: '8px',
@@ -169,26 +169,26 @@ const ActiveStrategyCard: React.FC<{
                     }}
                 >
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#00ff88', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--bl-success)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
                             <Fingerprint size={14} /> Diagnostic Intelligence {tier === 'free' && <Lock size={12} style={{ marginLeft: '4px', opacity: 0.5 }} />}
                         </div>
-                        {isExpanded ? <ChevronUp size={14} color="#555" /> : <ChevronDown size={14} color="#555" />}
+                        {isExpanded ? <ChevronUp size={14} color="var(--bl-text-quiet)" /> : <ChevronDown size={14} color="var(--bl-text-quiet)" />}
                     </div>
-                    <p style={{ fontSize: '12px', color: '#929292', margin: 0, fontWeight: 500 }}>
+                    <p style={{ fontSize: '12px', color: 'var(--bl-text-secondary)', margin: 0, fontWeight: 500 }}>
                         {explanation.reason}
                     </p>
                     {isExpanded && explanation.recommendation && (
                         <div style={{
                             marginTop: '12px',
                             padding: '12px',
-                            background: 'rgba(251, 191, 36, 0.05)',
-                            border: '1px solid rgba(251, 191, 36, 0.1)',
+                            background: 'var(--bl-warning-muted)',
+                            border: '1px solid var(--bl-warning-muted)',
                             borderRadius: '12px'
                         }}>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#fbbf24', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', marginBottom: '4px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--bl-warning)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', marginBottom: '4px' }}>
                                 <Lightbulb size={12} /> Optimization
                             </div>
-                            <p style={{ fontSize: '11px', color: '#fbbf24', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
+                            <p style={{ fontSize: '11px', color: 'var(--bl-warning)', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
                         </div>
                     )}
                 </Button>
@@ -203,10 +203,10 @@ const ActiveStrategyCard: React.FC<{
                     style={{
                         width: '100%',
                         height: '56px',
-                        background: profile.is_active ? 'rgba(255,255,255,0.03)' : '#00ff88',
-                        color: profile.is_active ? '#929292' : 'black',
+                        background: profile.is_active ? 'var(--bl-surface-highlight)' : 'var(--bl-success)',
+                        color: profile.is_active ? 'var(--bl-text-secondary)' : 'black',
                         borderRadius: '18px',
-                        border: profile.is_active ? '1px solid rgba(255,255,255,0.05)' : 'none',
+                        border: profile.is_active ? '1px solid var(--bl-border-subtle)' : 'none',
                         fontWeight: 900,
                         fontSize: '12px',
                         textTransform: 'uppercase',
@@ -215,7 +215,7 @@ const ActiveStrategyCard: React.FC<{
                         alignItems: 'center',
                         justifyContent: 'center',
                         gap: '12px',
-                        boxShadow: profile.is_active ? 'none' : '0 12px 36px -12px rgba(0, 255, 136, 0.4)',
+                        boxShadow: profile.is_active ? 'none' : '0 12px 36px -12px color-mix(in oklab, var(--bl-success) 40%, transparent)',
                         transition: 'all 0.2s',
                         letterSpacing: '1.5px'
                     }}
@@ -231,15 +231,15 @@ const ActiveStrategyCard: React.FC<{
 
             <style>{`
                 .strategy-card-hover:hover {
-                    border-color: rgba(0, 255, 136, 0.2) !important;
-                    transform: translateY(-8px);
-                    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8) !important;
-                    background: #1a1b21 !important;
-                }
-                .icon-btn-hover:hover {
-                    background: rgba(255,255,255,0.08) !important;
-                    color: white !important;
-                }
+                    border-color: var(--bl-success-muted) !important;
+                    transform: translateY(-8px);
+                    box-shadow: 0 40px 80px -20px color-mix(in oklab, var(--background) 80%, black) !important;
+                    background: var(--bl-surface-strong) !important;
+                }
+                .icon-btn-hover:hover {
+                    background: color-mix(in oklab, var(--card) 88%, var(--foreground)) !important;
+                    color: white !important;
+                }
                 .action-btn-hover:hover {
                     filter: brightness(1.1);
                     transform: scale(1.02);
@@ -309,7 +309,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                             setEditingProfile(null);
                         }}
                         variant="ghost"
-                        style={{ background: 'none', border: 'none', color: '#666', fontWeight: 900, fontSize: '12px', textTransform: 'uppercase', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
+                        style={{ background: 'none', border: 'none', color: 'var(--bl-text-quiet)', fontWeight: 900, fontSize: '12px', textTransform: 'uppercase', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
                     >
                         ← Back to My Strategies
                     </Button>
@@ -341,7 +341,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                 flexDirection: 'column',
                 marginBottom: '60px',
                 padding: '60px 0',
-                borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
+                borderBottom: '1px solid var(--bl-border-subtle)',
                 position: 'relative',
                 alignItems: 'flex-start'
             }}>
@@ -360,7 +360,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                     display: 'inline-flex',
                     alignItems: 'center',
                     gap: '12px',
-                    color: '#00ff88',
+                    color: 'var(--bl-success)',
                     fontSize: '11px',
                     fontWeight: 900,
                     textTransform: 'uppercase',
@@ -368,7 +368,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                     marginBottom: '24px'
                 }}>
                     DEPLOYED FLEET
-                    <div style={{ width: '30px', height: '1px', background: '#00ff88', opacity: 0.2 }} />
+                    <div style={{ width: '30px', height: '1px', background: 'var(--bl-success)', opacity: 0.2 }} />
                 </div>
 
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '100%', flexWrap: 'wrap', gap: '32px' }}>
@@ -383,20 +383,20 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                             textTransform: 'uppercase'
                         }}>
                             My<br />
-                            <span style={{ color: '#00ff88' }}>Strategies</span>
+                            <span style={{ color: 'var(--bl-success)' }}>Strategies</span>
                         </h2>
-                        <p style={{ fontSize: '20px', color: '#666', marginTop: '24px', maxWidth: '600px', fontWeight: 500, margin: '24px 0 0 0', textAlign: 'left' }}>
+                        <p style={{ fontSize: '20px', color: 'var(--bl-text-quiet)', marginTop: '24px', maxWidth: '600px', fontWeight: 500, margin: '24px 0 0 0', textAlign: 'left' }}>
                             Monitor and manage your proprietary trading nodes.
                         </p>
                     </div>
 
                     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
                         <div style={{
-                            background: 'rgba(0, 255, 136, 0.05)',
-                            border: '1px solid rgba(0, 255, 136, 0.1)',
+                            background: 'var(--bl-success-muted)',
+                            border: '1px solid var(--bl-success-muted)',
                             padding: '12px 24px',
                             borderRadius: '16px',
-                            color: '#00ff88',
+                            color: 'var(--bl-success)',
                             fontSize: '11px',
                             fontWeight: 900,
                             textTransform: 'uppercase',
@@ -443,10 +443,10 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                 return (
                     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '48px' }}>
                         {/* Recent Activity */}
-                        <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '24px', padding: '24px 28px' }}>
+                        <div style={{ background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', borderRadius: '24px', padding: '24px 28px' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
-                                <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#00ff88', boxShadow: '0 0 8px #00ff88' }} />
-                                <span style={{ fontSize: '11px', fontWeight: 900, color: '#555', textTransform: 'uppercase', letterSpacing: '2px' }}>Recent Activity</span>
+                                <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'var(--bl-success)', boxShadow: '0 0 8px var(--bl-success)' }} />
+                                <span style={{ fontSize: '11px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Recent Activity</span>
                             </div>
                             <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                                 {recentAlerts.map((alert, i) => {
@@ -454,39 +454,39 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                                     const mins = Math.floor((Date.now() - alert.timestamp) / 60000);
                                     const timeAgo = mins < 1 ? 'just now' : mins < 60 ? `${mins}m ago` : `${Math.floor(mins / 60)}h ago`;
                                     return (
-                                        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 12px', background: 'rgba(0,0,0,0.2)', borderRadius: '10px' }}>
+                                        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 12px', background: 'var(--bl-surface-overlay)', borderRadius: '10px' }}>
                                             <span>{icons[alert.type] || 'ℹ️'}</span>
-                                            <span style={{ fontSize: '12px', color: '#666', fontWeight: 700, minWidth: '60px' }}>{alert.symbol}</span>
-                                            <span style={{ fontSize: '11px', color: '#444', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{alert.message}</span>
-                                            <span style={{ fontSize: '10px', color: '#333', fontWeight: 700, whiteSpace: 'nowrap' }}>{timeAgo}</span>
+                                            <span style={{ fontSize: '12px', color: 'var(--bl-text-quiet)', fontWeight: 700, minWidth: '60px' }}>{alert.symbol}</span>
+                                            <span style={{ fontSize: '11px', color: 'var(--bl-text-quiet)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{alert.message}</span>
+                                            <span style={{ fontSize: '10px', color: 'var(--bl-text-tertiary)', fontWeight: 700, whiteSpace: 'nowrap' }}>{timeAgo}</span>
                                         </div>
                                     );
                                 })}
-                                {recentAlerts.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: '#2a2a2a', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
+                                {recentAlerts.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
                             </div>
                         </div>
 
                         {/* Symbol-Specific Volatility */}
-                        <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '24px', padding: '24px 28px' }}>
+                        <div style={{ background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', borderRadius: '24px', padding: '24px 28px' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
                                 <span style={{ fontSize: '16px' }}>📊</span>
-                                <span style={{ fontSize: '11px', fontWeight: 900, color: '#555', textTransform: 'uppercase', letterSpacing: '2px' }}>Your Markets (24h)</span>
+                                <span style={{ fontSize: '11px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Your Markets (24h)</span>
                             </div>
                             <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                                 {symbolVolatility.map(({ symbol, change }) => (
-                                    <div key={symbol} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'rgba(0,0,0,0.2)', borderRadius: '12px' }}>
+                                    <div key={symbol} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--bl-surface-overlay)', borderRadius: '12px' }}>
                                         <span style={{ fontWeight: 800, fontSize: '13px', color: 'white' }}>{symbol}</span>
                                         <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                                            <div style={{ width: '60px', height: '3px', background: 'rgba(255,255,255,0.05)', borderRadius: '99px', overflow: 'hidden' }}>
-                                                <div style={{ width: `${Math.min(Math.abs(change) * 5, 60)}px`, height: '100%', background: change >= 0 ? '#00ff88' : '#ff3366', borderRadius: '99px' }} />
-                                            </div>
-                                            <span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? '#00ff88' : '#ff3366', minWidth: '55px', textAlign: 'right' }}>
+                                            <div style={{ width: '60px', height: '3px', background: 'var(--bl-border-subtle)', borderRadius: '99px', overflow: 'hidden' }}>
+                                                <div style={{ width: `${Math.min(Math.abs(change) * 5, 60)}px`, height: '100%', background: change >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)', borderRadius: '99px' }} />
+                                            </div>
+                                            <span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)', minWidth: '55px', textAlign: 'right' }}>
                                                 {change >= 0 ? '+' : ''}{change.toFixed(2)}%
                                             </span>
                                         </div>
                                     </div>
                                 ))}
-                                {symbolVolatility.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: '#2a2a2a', fontSize: '12px', fontStyle: 'italic' }}>Deploy a strategy to see its market data</div>}
+                                {symbolVolatility.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>Deploy a strategy to see its market data</div>}
                             </div>
                         </div>
                     </div>
@@ -532,8 +532,8 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                     <div style={{
                         gridColumn: '1 / -1',
                         padding: '100px',
-                        background: 'rgba(255,255,255,0.01)',
-                        border: '2px dashed rgba(255,255,255,0.03)',
+                        background: 'var(--bl-surface-highlight)',
+                        border: '2px dashed var(--bl-border-subtle)',
                         borderRadius: '40px',
                         display: 'flex',
                         flexDirection: 'column',
@@ -541,9 +541,9 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                         justifyContent: 'center',
                         textAlign: 'center'
                     }}>
-                        <Activity size={60} color="#222" style={{ marginBottom: '24px' }} />
-                        <h3 style={{ color: '#444', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No Engines Deployed</h3>
-                        <p style={{ color: '#222', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Your fleet is currently dormant. Deploy your first engine to begin automated dominance.</p>
+                        <Activity size={60} color="var(--bl-text-quiet)" style={{ marginBottom: '24px' }} />
+                        <h3 style={{ color: 'var(--bl-text-quiet)', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No Engines Deployed</h3>
+                        <p style={{ color: 'var(--bl-text-quiet)', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Your fleet is currently dormant. Deploy your first engine to begin automated dominance.</p>
                         <Button
                             type="button"
                             onClick={() => setShowWizard(true)}