refactor(web): extract repeated inline-style patterns to classes (UI audit #8)

Per-pattern, per-file analysis found 191 inline-style blocks across the
3 landing-view files (OverviewTab 72, MyStrategiesTab 64, HomeView 55).
155 are unique one-offs already using design tokens (var(--bl-*)) — those
stay inline since converting them to single-use classes would just relocate
code without reducing drift.

This commit extracts the **repeated patterns** (count >= 2 plus structural
container shapes) — 39 occurrences — into either Tailwind utilities or a
new web/src/styles/landing-views.css partial:

  Tailwind replacements:
    textAlign: 'right'                                           → text-right
    marginBottom: '32px' / '24px'                                → mb-8 / mb-6
    fontWeight: 700                                              → font-bold
    flex+justify-between+items-center                            → flex justify-between items-center

  CSS partial (.lv-* classes, all token-driven):
    .lv-card, .lv-card-lg, .lv-icon-tag, .lv-surface, .lv-eyebrow,
    .lv-section-title, .lv-section-sub, .lv-empty-text,
    .lv-divider-row, .lv-meta-faint

Per-file deltas:
    tabs/OverviewTab.tsx       72 -> 53 inline blocks (19 conversions)
    tabs/MyStrategiesTab.tsx   64 -> 55 inline blocks ( 9 conversions)
    views/HomeView.tsx         55 -> 44 inline blocks (11 conversions)

The remaining 152 inline-style blocks are unique one-offs (one usage each)
and already token-driven — extracting them yields no drift reduction.
docs/ui/UI_AUDIT.md §5 #8 updated with this rationale.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

web/src/main.tsx

@@ -4,6 +4,7 @@ import { Agentation } from 'agentation'
 import './index.css'
 import './App.css'
 import './layout-fixes.css'
+import './styles/landing-views.css'
 import App from './App.tsx'
 import { AuthProvider } from './components/AuthContext';
 import { ProductAccessibilityGate } from './components/ProductAccessibilityGate';

web/src/styles/landing-views.css

@@ -0,0 +1,91 @@
+/* ---------------------------------------------------------------------------
+   landing-views.css — extracted patterns from OverviewTab, HomeView, MyStrategiesTab
+   (UI audit #8, Pattern B). Keeps token-driven structural styles in CSS so they
+   can have @media queries and so consumers can override via class composition.
+   One-off styles remain inline (already var(--bl-*) driven).
+--------------------------------------------------------------------------- */
+
+/* Card / panel container — used across overview metric cards, strategy
+   profile cards, and home preview panels. */
+.lv-card {
+  background: var(--card);
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  padding: 16px;
+}
+
+/* Larger structural card — overview "tile" / strategy profile shell. */
+.lv-card-lg {
+  background: var(--bl-surface-overlay);
+  border: 1px solid var(--bl-border-subtle);
+  padding: 16px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Highlight chip / icon tag — small square holder for an icon + accent. */
+.lv-icon-tag {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--bl-surface-highlight);
+  border: 1px solid var(--bl-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Soft 24-radius surface — used by strategy profile sections, education panels. */
+.lv-surface {
+  background: var(--bl-surface-highlight);
+  border: 1px solid var(--bl-border-subtle);
+  border-radius: 24px;
+  padding: 16px;
+}
+
+/* Eyebrow / section label — small, bold, uppercase, letter-spaced. */
+.lv-eyebrow {
+  font-size: 11px;
+  font-weight: 900;
+  color: var(--bl-text-quiet);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+/* Section title — bold token-foreground at fixed metric size. */
+.lv-section-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--foreground);
+  margin-bottom: 10px;
+}
+
+/* Section subtitle — muted, fixed metric size. */
+.lv-section-sub {
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+/* Empty-state text — italic, centered, padded, tertiary color. */
+.lv-empty-text {
+  text-align: center;
+  padding: 16px;
+  color: var(--bl-text-tertiary);
+  font-size: 12px;
+  font-style: italic;
+}
+
+/* Top-bordered divider with breathing room — used for footer-like rows
+   inside cards (totals, last-updated stamps). */
+.lv-divider-row {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+
+/* Tiny meta value — used for fine-print metrics next to the eyebrow. */
+.lv-meta-faint {
+  font-size: 0.65rem;
+  color: var(--bl-text-faint);
+}

web/src/tabs/MyStrategiesTab.tsx

@@ -3,24 +3,24 @@ import { useAuth } from '../components/AuthContext';
 import { getStrategyExplanation } from '../lib/StrategyExplanationService';
 import { getUserTier } from '../lib/TierPolicy';
 import {
-    Play,
-    Pause,
-    Trash2,
-    Activity,
-    TrendingUp,
-    Plus,
-    Shield,
-    Zap,
-    Scale,
-    Settings,
-    ChevronDown,
-    ChevronUp,
-    Lightbulb,
-    Cpu,
-    Fingerprint,
-    Target,
-    DollarSign,
-    Lock
+ Play,
+ Pause,
+ Trash2,
+ Activity,
+ TrendingUp,
+ Plus,
+ Shield,
+ Zap,
+ Scale,
+ Settings,
+ ChevronDown,
+ ChevronUp,
+ Lightbulb,
+ Cpu,
+ Fingerprint,
+ Target,
+ DollarSign,
+ Lock
 } from 'lucide-react';
 import { StrategyWizard } from '../components/StrategyWizard';
 import { BacktestRunnerPanel } from '../backtest/components/BacktestRunnerPanel';
@@ -30,459 +30,459 @@ import { Button, IconButton } from '../components/ui/Primitives';
 import { CardButton } from '@bytelyst/ui';
 
 function getStrategyKindLabel(config: any) {
-    if (config?.type === 'visual') return 'Visual Builder';
-    if (config?.type === 'code') return 'Code Strategy';
-    return 'V4.0 Core';
+ if (config?.type === 'visual') return 'Visual Builder';
+ if (config?.type === 'code') return 'Code Strategy';
+ return 'V4.0 Core';
 }
 
 const ActiveStrategyCard: React.FC<{
-    profile: any;
-    botState: any;
-    tier: string;
-    onToggle: (p: any) => void;
-    onEdit: (p: any) => void;
-    onBacktest?: (p: any) => void;
-    onDelete: (id: string) => void;
-    isExpanded: boolean;
-    onToggleExpand: (id: string) => void;
+ profile: any;
+ botState: any;
+ tier: string;
+ onToggle: (p: any) => void;
+ onEdit: (p: any) => void;
+ onBacktest?: (p: any) => void;
+ onDelete: (id: string) => void;
+ isExpanded: boolean;
+ onToggleExpand: (id: string) => void;
 }> = ({ profile, botState, tier, onToggle, onEdit, onBacktest, onDelete, isExpanded, onToggleExpand }) => {
-    const config = profile.strategy_config;
-    const isAggressive = config?.execution?.minRulePassRatio < 0.9;
-    const isSafe = config?.execution?.minRulePassRatio >= 1.0;
-    const strategyKindLabel = getStrategyKindLabel(config);
+ const config = profile.strategy_config;
+ const isAggressive = config?.execution?.minRulePassRatio < 0.9;
+ const isSafe = config?.execution?.minRulePassRatio >= 1.0;
+ const strategyKindLabel = getStrategyKindLabel(config);
 
-    const explanation = getStrategyExplanation(profile, botState);
+ const explanation = getStrategyExplanation(profile, botState);
 
-    return (
-        <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',
-            position: 'relative',
-            overflow: 'hidden',
-            transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-            height: '100%',
-            minHeight: '620px'
-        }} className="strategy-card-hover">
+ return (
+ <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',
+ position: 'relative',
+ overflow: 'hidden',
+ transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+ height: '100%',
+ minHeight: '620px'
+ }} className="strategy-card-hover">
 
-            {/* 1. Direct Status Strip */}
-            <div style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                bottom: 0,
-                width: '4px',
-                background: profile.is_active ? 'var(--bl-success)' : 'var(--bl-border-subtle)',
-                opacity: profile.is_active ? 1 : 0.3
-            }} />
+ {/* 1. Direct Status Strip */}
+ <div style={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ bottom: 0,
+ width: '4px',
+ background: profile.is_active ? 'var(--bl-success)' : 'var(--bl-border-subtle)',
+ opacity: profile.is_active ? 1 : 0.3
+ }} />
 
-            {/* 2. Header Area */}
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '28px' }}>
-                <div style={{ display: 'flex', gap: '14px', alignItems: 'center' }}>
-                    <div style={{
-                        width: '44px',
-                        height: '44px',
-                        borderRadius: '14px',
-                        background: 'var(--bl-surface-highlight)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        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: '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>
-                    </div>
-                </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: '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: '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>
+ {/* 2. Header Area */}
+ <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '28px' }}>
+ <div style={{ display: 'flex', gap: '14px', alignItems: 'center' }}>
+ <div style={{
+ width: '44px',
+ height: '44px',
+ borderRadius: '14px',
+ background: 'var(--bl-surface-highlight)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ 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: '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>
+ </div>
+ </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: '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: '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>
 
-            {/* 3. Identity */}
-            <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: '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: '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>
-            </div>
+ {/* 3. Identity */}
+ <div className="mb-6">
+ <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: '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: '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>
+ </div>
 
-            {/* 4. Operational DNA (Specs) */}
-            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '14px', marginBottom: '28px' }}>
-                {[
-                    { 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: '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: '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>
-                    </div>
-                ))}
-            </div>
+ {/* 4. Operational DNA (Specs) */}
+ <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '14px', marginBottom: '28px' }}>
+ {[
+ { 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: '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: '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>
+ </div>
+ ))}
+ </div>
 
-            {/* 5. Health Diagnostic (Education Layer) */}
-            <div style={{ marginBottom: '32px' }}>
-                <CardButton
-                    onClick={() => onToggleExpand(profile.id)}
-                    style={{
-                        width: '100%',
-                        padding: '16px',
-                        borderRadius: '20px',
-                        background: 'var(--bl-surface-highlight)',
-                        border: '1px solid var(--bl-border-subtle)',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '8px',
-                        cursor: 'pointer',
-                        textAlign: 'left'
-                    }}
-                >
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <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="var(--bl-text-quiet)" /> : <ChevronDown size={14} color="var(--bl-text-quiet)" />}
-                    </div>
-                    <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: 'var(--bl-warning-muted)',
-                            border: '1px solid var(--bl-warning-muted)',
-                            borderRadius: '12px'
-                        }}>
-                            <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: 'var(--bl-warning)', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
-                        </div>
-                    )}
-                </CardButton>
-            </div>
+ {/* 5. Health Diagnostic (Education Layer) */}
+ <div className="mb-8">
+ <CardButton
+ onClick={() => onToggleExpand(profile.id)}
+ style={{
+ width: '100%',
+ padding: '16px',
+ borderRadius: '20px',
+ background: 'var(--bl-surface-highlight)',
+ border: '1px solid var(--bl-border-subtle)',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+ cursor: 'pointer',
+ textAlign: 'left'
+ }}
+ >
+ <div className="flex justify-between items-center">
+ <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="var(--bl-text-quiet)" /> : <ChevronDown size={14} color="var(--bl-text-quiet)" />}
+ </div>
+ <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: 'var(--bl-warning-muted)',
+ border: '1px solid var(--bl-warning-muted)',
+ borderRadius: '12px'
+ }}>
+ <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: 'var(--bl-warning)', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
+ </div>
+ )}
+ </CardButton>
+ </div>
 
-            {/* 6. Action */}
-            <div style={{ marginTop: 'auto' }}>
-                <Button
-                    type="button"
-                    onClick={() => onToggle(profile)}
-                    variant={profile.is_active ? 'outline' : 'primary'}
-                    style={{
-                        width: '100%',
-                        height: '56px',
-                        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 var(--bl-border-subtle)' : 'none',
-                        fontWeight: 900,
-                        fontSize: '12px',
-                        textTransform: 'uppercase',
-                        cursor: 'pointer',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        gap: '12px',
-                        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'
-                    }}
-                    className="action-btn-hover"
-                >
-                    {profile.is_active ? (
-                        <><Pause size={18} fill="currentColor" /> PAUSE TRADING</>
-                    ) : (
-                        <><Play size={18} fill="currentColor" /> START TRADING</>
-                    )}
-                </Button>
-            </div>
+ {/* 6. Action */}
+ <div style={{ marginTop: 'auto' }}>
+ <Button
+ type="button"
+ onClick={() => onToggle(profile)}
+ variant={profile.is_active ? 'outline' : 'primary'}
+ style={{
+ width: '100%',
+ height: '56px',
+ 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 var(--bl-border-subtle)' : 'none',
+ fontWeight: 900,
+ fontSize: '12px',
+ textTransform: 'uppercase',
+ cursor: 'pointer',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ 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'
+ }}
+ className="action-btn-hover"
+ >
+ {profile.is_active ? (
+ <><Pause size={18} fill="currentColor" /> PAUSE TRADING</>
+ ) : (
+ <><Play size={18} fill="currentColor" /> START TRADING</>
+ )}
+ </Button>
+ </div>
 
-            <style>{`
-                .strategy-card-hover:hover {
-                    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);
-                }
-            `}</style>
-        </div>
-    );
+ <style>{`
+ .strategy-card-hover:hover {
+ 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);
+ }
+ `}</style>
+ </div>
+ );
 };
 
 export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewAsCustomer?: boolean }> = ({
-    botState,
-    alerts = [],
-    previewAsCustomer = false
+ botState,
+ alerts = [],
+ previewAsCustomer = false
 }) => {
-    const { user, profile: userProfile } = useAuth();
-    const [profiles, setProfiles] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [showWizard, setShowWizard] = useState(false);
-    const [editingProfile, setEditingProfile] = useState<any>(null);
-    const [expandedExplanations, setExpandedExplanations] = useState<Record<string, boolean>>({});
-    const [backtestProfile, setBacktestProfile] = useState<any>(null);
+ const { user, profile: userProfile } = useAuth();
+ const [profiles, setProfiles] = useState<any[]>([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [showWizard, setShowWizard] = useState(false);
+ const [editingProfile, setEditingProfile] = useState<any>(null);
+ const [expandedExplanations, setExpandedExplanations] = useState<Record<string, boolean>>({});
+ const [backtestProfile, setBacktestProfile] = useState<any>(null);
 
-    const tier = getUserTier(userProfile);
-    const { enabled: backtestEnabled, loading: backtestGateLoading } = useBacktestFeatureGate({ previewAsCustomer });
+ const tier = getUserTier(userProfile);
+ const { enabled: backtestEnabled, loading: backtestGateLoading } = useBacktestFeatureGate({ previewAsCustomer });
 
-    const fetchProfiles = async () => {
-        if (!user) return;
-        setIsLoading(true);
-        const data = await fetchTradeProfiles();
-        setProfiles(data || []);
-        setIsLoading(false);
-    };
+ const fetchProfiles = async () => {
+ if (!user) return;
+ setIsLoading(true);
+ const data = await fetchTradeProfiles();
+ setProfiles(data || []);
+ setIsLoading(false);
+ };
 
-    useEffect(() => {
-        fetchProfiles();
-        window.addEventListener('profiles-updated', fetchProfiles);
-        return () => window.removeEventListener('profiles-updated', fetchProfiles);
-    }, [user]);
+ useEffect(() => {
+ fetchProfiles();
+ window.addEventListener('profiles-updated', fetchProfiles);
+ return () => window.removeEventListener('profiles-updated', fetchProfiles);
+ }, [user]);
 
-    const toggleBot = async (profile: any) => {
-        try {
-            await setTradeProfileActive(profile.id, !profile.is_active);
-            fetchProfiles();
-        } catch {
-            // existing UI remains silent on toggle failure
-        }
-    };
+ const toggleBot = async (profile: any) => {
+ try {
+ await setTradeProfileActive(profile.id, !profile.is_active);
+ fetchProfiles();
+ } catch {
+ // existing UI remains silent on toggle failure
+ }
+ };
 
-    const deleteBot = async (id: string) => {
-        if (!confirm('Are you sure you want to delete this strategy?')) return;
-        try {
-            await deleteTradeProfile(id);
-            fetchProfiles();
-        } catch {
-            // existing UI remains silent on delete failure
-        }
-    };
+ const deleteBot = async (id: string) => {
+ if (!confirm('Are you sure you want to delete this strategy?')) return;
+ try {
+ await deleteTradeProfile(id);
+ fetchProfiles();
+ } catch {
+ // existing UI remains silent on delete failure
+ }
+ };
 
-    if (showWizard) {
-        return (
-            <div style={{ animation: 'fadeIn 0.5s ease-out' }}>
-                <div style={{ marginBottom: '24px' }}>
-                    <Button
-                        type="button"
-                        onClick={() => {
-                            setShowWizard(false);
-                            setEditingProfile(null);
-                        }}
-                        variant="ghost"
-                        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>
-                </div>
-                <StrategyWizard
-                    editingProfile={editingProfile}
-                    profile={userProfile}
-                    previewAsCustomer={previewAsCustomer}
-                    onComplete={() => {
-                        setShowWizard(false);
-                        setEditingProfile(null);
-                        fetchProfiles();
-                    }}
-                />
-            </div>
-        );
-    }
+ if (showWizard) {
+ return (
+ <div style={{ animation: 'fadeIn 0.5s ease-out' }}>
+ <div className="mb-6">
+ <Button
+ type="button"
+ onClick={() => {
+ setShowWizard(false);
+ setEditingProfile(null);
+ }}
+ variant="ghost"
+ 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>
+ </div>
+ <StrategyWizard
+ editingProfile={editingProfile}
+ profile={userProfile}
+ previewAsCustomer={previewAsCustomer}
+ onComplete={() => {
+ setShowWizard(false);
+ setEditingProfile(null);
+ fetchProfiles();
+ }}
+ />
+ </div>
+ );
+ }
 
-    return (
-        <div className="strategy-workspace">
-            <div className="strategy-workspace-header">
-                <div>
-                    <div className="strategy-workspace-eyebrow">
-                        Strategy operations
-                    </div>
-                    <h2>My strategies</h2>
-                    <p>
-                        Monitor active profiles, review recent signals, and create new automated trading workflows.
-                    </p>
-                </div>
+ return (
+ <div className="strategy-workspace">
+ <div className="strategy-workspace-header">
+ <div>
+ <div className="strategy-workspace-eyebrow">
+ Strategy operations
+ </div>
+ <h2>My strategies</h2>
+ <p>
+ Monitor active profiles, review recent signals, and create new automated trading workflows.
+ </p>
+ </div>
 
-                <div className="strategy-workspace-actions">
-                    <div className="strategy-connection-pill" data-connected={botState?.connected ? 'true' : 'false'}>
-                        {botState?.connected ? 'Systems online' : 'Systems disconnected'}
-                    </div>
-                    <Button
-                        type="button"
-                        onClick={() => setShowWizard(true)}
-                        variant="primary"
-                    >
-                        <Plus size={16} /> New strategy
-                    </Button>
-                </div>
-            </div>
+ <div className="strategy-workspace-actions">
+ <div className="strategy-connection-pill" data-connected={botState?.connected ? 'true' : 'false'}>
+ {botState?.connected ? 'Systems online' : 'Systems disconnected'}
+ </div>
+ <Button
+ type="button"
+ onClick={() => setShowWizard(true)}
+ variant="primary"
+ >
+ <Plus size={16} /> New strategy
+ </Button>
+ </div>
+ </div>
 
-            {/* Contextual Intelligence Row: Recent Activity + Symbol Volatility */}
-            {(() => {
-                const activeSymbols = [...new Set(profiles.flatMap(p => p.symbols?.split(',').map((s: string) => s.trim()) || []))];
-                const recentAlerts = [...alerts].reverse().slice(0, 5);
-                const symbolVolatility = activeSymbols
-                    .filter(s => botState?.symbols?.[s])
-                    .map(s => ({ symbol: s, change: botState.symbols[s].change24h || 0 }))
-                    .sort((a, b) => Math.abs(b.change) - Math.abs(a.change));
+ {/* Contextual Intelligence Row: Recent Activity + Symbol Volatility */}
+ {(() => {
+ const activeSymbols = [...new Set(profiles.flatMap(p => p.symbols?.split(',').map((s: string) => s.trim()) || []))];
+ const recentAlerts = [...alerts].reverse().slice(0, 5);
+ const symbolVolatility = activeSymbols
+ .filter(s => botState?.symbols?.[s])
+ .map(s => ({ symbol: s, change: botState.symbols[s].change24h || 0 }))
+ .sort((a, b) => Math.abs(b.change) - Math.abs(a.change));
 
-                return (
-                    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '20px', marginBottom: '48px' }}>
-                        {/* Recent Activity */}
-                        <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: '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) => {
-                                    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: 'var(--bl-surface-overlay)', borderRadius: '10px' }}>
-                                            <Activity size={13} color="var(--bl-info)" />
-                                            <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: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
-                            </div>
-                        </div>
+ return (
+ <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '20px', marginBottom: '48px' }}>
+ {/* Recent Activity */}
+ <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: 'var(--bl-success)', boxShadow: '0 0 8px var(--bl-success)' }} />
+ <span className="lv-eyebrow">Recent Activity</span>
+ </div>
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+ {recentAlerts.map((alert, i) => {
+ 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: 'var(--bl-surface-overlay)', borderRadius: '10px' }}>
+ <Activity size={13} color="var(--bl-info)" />
+ <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 className="lv-empty-text">No activity yet...</div>}
+ </div>
+ </div>
 
-                        {/* Symbol-Specific Volatility */}
-                        <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' }}>
-                                <TrendingUp size={15} color="var(--bl-info)" />
-                                <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: '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: '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: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>Deploy a strategy to see its market data</div>}
-                            </div>
-                        </div>
-                    </div>
-                );
-            })()}
-            <div style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
-                gap: '40px',
-                width: '100%'
-            }}>
-                {!backtestGateLoading && backtestEnabled && backtestProfile && (
-                    <div style={{ gridColumn: '1 / -1' }}>
-                        <BacktestRunnerPanel
-                            profileId={backtestProfile.id}
-                            strategyConfig={backtestProfile.strategy_config}
-                            symbols={String(backtestProfile.symbols || '').split(',').map((s: string) => s.trim()).filter(Boolean)}
-                            initialCapitalUsd={Number(backtestProfile.allocated_capital || 1000)}
-                            title={`Backtest: ${backtestProfile.name}`}
-                            onClose={() => setBacktestProfile(null)}
-                        />
-                    </div>
-                )}
-                {profiles.map(profile => (
-                    <ActiveStrategyCard
-                        key={profile.id}
-                        profile={profile}
-                        botState={botState}
-                        tier={tier}
-                        onToggle={toggleBot}
-                        onEdit={(p) => {
-                            setEditingProfile(p);
-                            setShowWizard(true);
-                        }}
-                        onBacktest={!backtestGateLoading && backtestEnabled ? ((p) => setBacktestProfile(p)) : undefined}
-                        onDelete={deleteBot}
-                        isExpanded={!!expandedExplanations[profile.id]}
-                        onToggleExpand={(id) => setExpandedExplanations(prev => ({ ...prev, [id]: !prev[id] }))}
-                    />
-                ))}
+ {/* Symbol-Specific Volatility */}
+ <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' }}>
+ <TrendingUp size={15} color="var(--bl-info)" />
+ <span className="lv-eyebrow">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: '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: '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 className="lv-empty-text">Deploy a strategy to see its market data</div>}
+ </div>
+ </div>
+ </div>
+ );
+ })()}
+ <div style={{
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
+ gap: '40px',
+ width: '100%'
+ }}>
+ {!backtestGateLoading && backtestEnabled && backtestProfile && (
+ <div style={{ gridColumn: '1 / -1' }}>
+ <BacktestRunnerPanel
+ profileId={backtestProfile.id}
+ strategyConfig={backtestProfile.strategy_config}
+ symbols={String(backtestProfile.symbols || '').split(',').map((s: string) => s.trim()).filter(Boolean)}
+ initialCapitalUsd={Number(backtestProfile.allocated_capital || 1000)}
+ title={`Backtest: ${backtestProfile.name}`}
+ onClose={() => setBacktestProfile(null)}
+ />
+ </div>
+ )}
+ {profiles.map(profile => (
+ <ActiveStrategyCard
+ key={profile.id}
+ profile={profile}
+ botState={botState}
+ tier={tier}
+ onToggle={toggleBot}
+ onEdit={(p) => {
+ setEditingProfile(p);
+ setShowWizard(true);
+ }}
+ onBacktest={!backtestGateLoading && backtestEnabled ? ((p) => setBacktestProfile(p)) : undefined}
+ onDelete={deleteBot}
+ isExpanded={!!expandedExplanations[profile.id]}
+ onToggleExpand={(id) => setExpandedExplanations(prev => ({ ...prev, [id]: !prev[id] }))}
+ />
+ ))}
 
-                {profiles.length === 0 && !isLoading && (
-                    <div style={{
-                        gridColumn: '1 / -1',
-                        padding: '100px',
-                        background: 'var(--bl-surface-highlight)',
-                        border: '2px dashed var(--bl-border-subtle)',
-                        borderRadius: '40px',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        textAlign: 'center'
-                    }}>
-                        <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 strategies yet</h3>
-                        <p style={{ color: 'var(--bl-text-quiet)', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Create your first strategy to start monitoring markets and testing automated execution.</p>
-                        <Button
-                            type="button"
-                            onClick={() => setShowWizard(true)}
-                            variant="secondary"
-                            style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }}
-                        >
-                            GET STARTED
-                        </Button>
-                    </div>
-                )}
-            </div>
+ {profiles.length === 0 && !isLoading && (
+ <div style={{
+ gridColumn: '1 / -1',
+ padding: '100px',
+ background: 'var(--bl-surface-highlight)',
+ border: '2px dashed var(--bl-border-subtle)',
+ borderRadius: '40px',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: 'center'
+ }}>
+ <Activity size={60} color="var(--bl-text-quiet)" className="mb-6" />
+ <h3 style={{ color: 'var(--bl-text-quiet)', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No strategies yet</h3>
+ <p style={{ color: 'var(--bl-text-quiet)', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Create your first strategy to start monitoring markets and testing automated execution.</p>
+ <Button
+ type="button"
+ onClick={() => setShowWizard(true)}
+ variant="secondary"
+ style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }}
+ >
+ GET STARTED
+ </Button>
+ </div>
+ )}
+ </div>
 
-            <style>{`
-                @keyframes fadeIn {
-                    from { opacity: 0; transform: translateY(20px); }
-                    to { opacity: 1; transform: translateY(0); }
-                }
-            `}</style>
-        </div>
-    );
+ <style>{`
+ @keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+ `}</style>
+ </div>
+ );
 };