Fixed the styling

STYLE_GUIDE.md

@@ -0,0 +1,156 @@
+
+# Polymarket Macro Dashboard — Style Guide
+
+This document captures the visual, interaction, and layout conventions used in the Polymarket **Macro Dashboard**. It is intended as a reference for replicating or extending the Polymarket dashboard aesthetic in product, design, or engineering work.
+
+---
+
+## 1. Design Philosophy
+
+- Data-first, probability-centric interface
+- Minimal visual noise; strong information hierarchy
+- Neutral, institutional tone suitable for finance and macro markets
+- Fast scannability over decorative elements
+
+---
+
+## 2. Color System
+
+### Base Colors
+- **Background:** White / very light gray
+- **Primary Text:** Near-black
+- **Secondary Text:** Muted gray
+- **Accent:** Subtle blue for links, interactive states, and focus
+
+### Usage Principles
+- Percentages and odds are visually dominant
+- Color is used sparingly; emphasis comes from weight and spacing
+- No aggressive gradients or saturated backgrounds
+
+---
+
+## 3. Typography
+
+- **Font family:** Modern sans-serif
+- **Headings:** Medium to bold weight
+- **Body text:** Regular weight, high legibility
+- **Numerical values:** Bold or semibold to anchor attention
+
+### Hierarchy
+1. Dashboard title
+2. Section headers
+3. Market question text
+4. Metadata / category labels
+
+---
+
+## 4. Layout Structure
+
+### Global Layout
+- Fixed top navigation bar
+- Vertical scrolling content area
+- Card-based market listing
+
+### Page Structure
+```
+[Top Navigation]
+[Dashboard Selector]
+[Dashboard Title]
+[Market Sections]
+  ├─ Market Card
+  ├─ Market Card
+[Footer / Persistent Nav]
+```
+
+Spacing is consistent and generous, prioritizing clarity.
+
+---
+
+## 5. Navigation
+
+### Top Navigation
+- Browse entry point
+- Horizontal category filters (Politics, Macro, Crypto, etc.)
+- Persistent search icon
+
+### Dashboard Selector
+- Inline tab-like controls (Macro, Elections, Fed Rates, etc.)
+- Minimal styling; relies on text weight and underline/contrast
+
+---
+
+## 6. Market Cards
+
+Each market card contains:
+- Market question (headline)
+- Probability / chance percentage
+- Optional thumbnail or preview image
+- Category or context label
+
+### Card Characteristics
+- Uniform width
+- Light border or subtle shadow
+- Rounded corners
+- Clickable entire surface
+
+---
+
+## 7. Information Hierarchy
+
+Priority order:
+1. Probability / odds
+2. Market question
+3. Category or context
+4. Supporting metadata
+
+The user should be able to scan probabilities without reading full text.
+
+---
+
+## 8. Interaction Design
+
+- Hover states are subtle (slight background or border change)
+- Click targets are large and forgiving
+- No modal-heavy flows on the dashboard level
+- Transitions are fast and understated
+
+---
+
+## 9. Motion & Feedback
+
+- Minimal animation
+- Instant feedback on navigation
+- No distracting micro-interactions
+- Emphasis on speed and responsiveness
+
+---
+
+## 10. Accessibility & Readability
+
+- High contrast between text and background
+- Large tap targets for mobile
+- Clear separation between interactive and static elements
+
+---
+
+## 11. Inferred Design Tokens (Example)
+
+```css
+:root {
+  --bg-primary: #ffffff;
+  --text-primary: #0a0a0a;
+  --text-secondary: #6b6b6b;
+  --accent: #1f6feb;
+
+  --radius-card: 8px;
+  --spacing-unit: 16px;
+
+  --font-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+```
+
+---
+
+## 12. Summary
+
+The Polymarket Macro Dashboard prioritizes **trust, speed, and signal clarity**. Its design avoids ornamentation in favor of clean structure, strong typography, and probability-forward presentation. Any replication should preserve this restraint and information density.

static/index.html

@@ -29,7 +29,7 @@
         <section class="controls-section">
             <div class="controls-header">
                 <h2>Simulation Configuration</h2>
-                <p>Configure your prediction market trading simulation parameters</p>
+                <p>Configure trading simulation parameters</p>
             </div>
 
             <div class="controls-grid">
@@ -54,38 +54,38 @@
 
                 <!-- Base Parameters -->
                 <div class="control-group">
-                    <label class="control-label">Starting Capital ($)</label>
+                    <label class="control-label">Starting Capital</label>
                     <input type="number" id="startingCapital" class="control-input" value="10000" min="1000" max="100000" step="1000">
-                    <div class="control-subtitle">Total initial investment amount</div>
+                    <div class="control-subtitle">Initial investment amount</div>
                 </div>
 
                 <div class="control-group">
                     <label class="control-label">Number of Simulations</label>
                     <input type="number" id="numSimulations" class="control-input" value="100" min="10" max="100" step="10">
-                    <div class="control-subtitle">Monte Carlo simulation runs (max 100)</div>
+                    <div class="control-subtitle">Monte Carlo runs (max 100)</div>
                 </div>
 
                 <div class="control-group">
                     <label class="control-label">Start Date</label>
                     <input type="date" id="startDate" class="control-input" value="2025-01-01" min="2025-01-01">
-                    <div class="control-subtitle">Simulation start date (2025+ only)</div>
+                    <div class="control-subtitle">Simulation start date</div>
                 </div>
 
                 <div class="control-group">
-                    <label class="control-label">Max Duration (Days)</label>
+                    <label class="control-label">Max Duration</label>
                     <input type="number" id="maxDuration" class="control-input" value="365" min="30" max="730" step="30">
-                    <div class="control-subtitle">Maximum simulation length</div>
+                    <div class="control-subtitle">Maximum days</div>
                 </div>
 
                 <!-- Probability Thresholds -->
                 <div class="control-group">
-                    <label class="control-label">Min Probability 7d (%)</label>
+                    <label class="control-label">Min Probability 7d</label>
                     <input type="number" id="minProb7d" class="control-input" value="90" min="50" max="99" step="1">
-                    <div class="control-subtitle">Minimum market probability 7 days before</div>
+                    <div class="control-subtitle">Minimum probability 7 days before</div>
                 </div>
 
                 <div class="control-group">
-                    <label class="control-label">Min Probability Current (%)</label>
+                    <label class="control-label">Min Probability Current</label>
                     <input type="number" id="minProbCurrent" class="control-input" value="90" min="50" max="99" step="1">
                     <div class="control-subtitle">Minimum probability at investment</div>
                 </div>
@@ -93,7 +93,7 @@
                 <div class="control-group">
                     <label class="control-label">Days Before Resolution</label>
                     <input type="number" id="daysBefore" class="control-input" value="1" min="1" max="7" step="1">
-                    <div class="control-subtitle">When to invest before market closes</div>
+                    <div class="control-subtitle">Investment timing before market closes</div>
                 </div>
 
                 <div class="control-group">
@@ -104,21 +104,21 @@
 
                 <!-- Threshold-specific controls -->
                 <div class="control-group threshold-only" style="display: none;">
-                    <label class="control-label">Target Return (%)</label>
+                    <label class="control-label">Target Return</label>
                     <select id="targetReturn" class="control-input">
                         <option value="4.14">4.14% (Treasury Rate)</option>
                         <option value="10.56">10.56% (NASDAQ Average)</option>
                         <option value="custom">Custom</option>
                     </select>
                     <input type="number" id="customTarget" class="control-input" style="display: none; margin-top: 8px;" min="1" max="50" step="0.1">
-                    <div class="control-subtitle">Stop trading when target is reached</div>
+                    <div class="control-subtitle">Stop when target reached</div>
                 </div>
 
                 <!-- Multi-fund specific controls -->
                 <div class="control-group multi-only" style="display: none;">
                     <label class="control-label">Number of Funds</label>
                     <input type="number" id="numFunds" class="control-input" value="5" min="2" max="10" step="1">
-                    <div class="control-subtitle">Split capital into N independent funds (max 10)</div>
+                    <div class="control-subtitle">Independent funds (max 10)</div>
                 </div>
             </div>
 
@@ -129,7 +129,7 @@
                     <div class="run-spinner" style="display: none;"></div>
                 </button>
                 <div class="run-info">
-                    <span id="estimatedTime">Estimated time: ~5-10 seconds</span>
+                    <span id="estimatedTime">Estimated: ~5-10 seconds</span>
                 </div>
             </div>
         </section>
@@ -150,8 +150,8 @@
         <!-- Results Section -->
         <section class="results-section" id="resultsSection" style="display: none;">
             <div class="results-header">
-                <h2>Simulation Results</h2>
-                <button class="export-button" onclick="exportResults()" id="exportBtn">Export Data</button>
+                <h2>Results</h2>
+                <button class="export-button" onclick="exportResults()" id="exportBtn">Export</button>
             </div>
 
             <!-- Summary Statistics -->

static/script.js

@@ -501,8 +501,8 @@ function createReturnDistributionChart(runs) {
             datasets: [{
                 label: 'Frequency',
                 data: histogram.data,
-                backgroundColor: 'rgba(59, 130, 246, 0.7)',
-                borderColor: 'rgba(59, 130, 246, 1)',
+                backgroundColor: 'rgba(31, 111, 235, 0.15)',
+                borderColor: '#1f6feb',
                 borderWidth: 1
             }]
         },
@@ -516,13 +516,33 @@ function createReturnDistributionChart(runs) {
                 x: {
                     title: {
                         display: true,
-                        text: 'Return (%)'
+                        text: 'Return (%)',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 },
                 y: {
                     title: {
                         display: true,
-                        text: 'Frequency'
+                        text: 'Frequency',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 }
             }
@@ -534,12 +554,21 @@ function createReturnDistributionChart(runs) {
 function createCapitalEvolutionChart(sampleRuns) {
     const ctx = document.getElementById('capitalChart').getContext('2d');
     
+    // Subtle color palette matching Polymarket style
+    const colors = [
+        { border: '#1f6feb', bg: 'rgba(31, 111, 235, 0.1)' },
+        { border: '#6b6b6b', bg: 'rgba(107, 107, 107, 0.1)' },
+        { border: '#0a0a0a', bg: 'rgba(10, 10, 10, 0.1)' },
+        { border: '#1f6feb', bg: 'rgba(31, 111, 235, 0.05)' },
+        { border: '#6b6b6b', bg: 'rgba(107, 107, 107, 0.05)' }
+    ];
+    
     const datasets = sampleRuns.slice(0, 5).map((run, i) => ({
         label: `Run ${i + 1}`,
         data: run.capitalHistory || [run.finalCapital],
-        borderColor: `hsla(${i * 60}, 70%, 50%, 0.8)`,
-        backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.1)`,
-        borderWidth: 2,
+        borderColor: colors[i % colors.length].border,
+        backgroundColor: colors[i % colors.length].bg,
+        borderWidth: 1.5,
         fill: false
     }));
     
@@ -550,19 +579,47 @@ function createCapitalEvolutionChart(sampleRuns) {
             responsive: true,
             maintainAspectRatio: false,
             plugins: {
-                legend: { display: true }
+                legend: { 
+                    display: true,
+                    labels: {
+                        color: '#6b6b6b',
+                        font: { size: 11 },
+                        usePointStyle: true,
+                        padding: 12
+                    }
+                }
             },
             scales: {
                 x: {
                     title: {
                         display: true,
-                        text: 'Trade Number'
+                        text: 'Trade Number',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 },
                 y: {
                     title: {
                         display: true,
-                        text: 'Capital ($)'
+                        text: 'Capital ($)',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 }
             }
@@ -584,8 +641,8 @@ function createCapitalDistributionChart(runs) {
             datasets: [{
                 label: 'Frequency',
                 data: histogram.data,
-                backgroundColor: 'rgba(16, 185, 129, 0.7)',
-                borderColor: 'rgba(16, 185, 129, 1)',
+                backgroundColor: 'rgba(31, 111, 235, 0.15)',
+                borderColor: '#1f6feb',
                 borderWidth: 1
             }]
         },
@@ -599,13 +656,33 @@ function createCapitalDistributionChart(runs) {
                 x: {
                     title: {
                         display: true,
-                        text: 'Final Capital ($)'
+                        text: 'Final Capital ($)',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 },
                 y: {
                     title: {
                         display: true,
-                        text: 'Frequency'
+                        text: 'Frequency',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 }
             }
@@ -630,8 +707,8 @@ function createSurvivorshipChart(runs, numFunds) {
             datasets: [{
                 label: 'Frequency',
                 data: Object.values(histogram),
-                backgroundColor: 'rgba(245, 158, 11, 0.7)',
-                borderColor: 'rgba(245, 158, 11, 1)',
+                backgroundColor: 'rgba(31, 111, 235, 0.15)',
+                borderColor: '#1f6feb',
                 borderWidth: 1
             }]
         },
@@ -645,13 +722,33 @@ function createSurvivorshipChart(runs, numFunds) {
                 x: {
                     title: {
                         display: true,
-                        text: 'Surviving Funds'
+                        text: 'Surviving Funds',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 },
                 y: {
                     title: {
                         display: true,
-                        text: 'Frequency'
+                        text: 'Frequency',
+                        color: '#6b6b6b',
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: '#6b6b6b',
+                        font: { size: 11 }
                     }
                 }
             }

static/styles.css

@@ -1,20 +1,31 @@
-/* CSS Variables for Polymarket-inspired design */
+/* Polymarket Macro Dashboard Style Guide Implementation */
+
 :root {
-    --polymarket-blue: #3B82F6;
-    --polymarket-blue-dark: #2563EB;
-    --polymarket-blue-light: #DBEAFE;
-    --light-gray: #F8FAFC;
-    --medium-gray: #E2E8F0;
-    --dark-gray: #64748B;
-    --text-primary: #1E293B;
-    --text-secondary: #475569;
-    --white: #FFFFFF;
-    --success: #10B981;
-    --warning: #F59E0B;
-    --error: #EF4444;
-    --shadow-sm: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
-    --shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-    --shadow-lg: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+    /* Base Colors - Matching Style Guide */
+    --bg-primary: #ffffff;
+    --text-primary: #0a0a0a;
+    --text-secondary: #6b6b6b;
+    --accent: #1f6feb;
+    
+    /* Supporting Colors */
+    --border-color: #e5e5e5;
+    --bg-secondary: #fafafa;
+    --accent-hover: #1a5fd9;
+    --accent-light: #e8f0fe;
+    
+    /* Status Colors (minimal use) */
+    --success: #10b981;
+    --error: #ef4444;
+    --warning: #f59e0b;
+    
+    /* Design Tokens */
+    --radius-card: 8px;
+    --spacing-unit: 16px;
+    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    
+    /* Shadows - Very Subtle */
+    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+    --shadow-hover: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
 }
 
 /* Reset and base styles */
@@ -25,18 +36,19 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-    background-color: var(--light-gray);
+    font-family: var(--font-body);
+    background-color: var(--bg-primary);
     color: var(--text-primary);
-    line-height: 1.5;
+    line-height: 1.6;
     min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 /* Top Navigation Bar */
 .top-bar {
-    background-color: var(--white);
-    border-bottom: 1px solid var(--medium-gray);
-    box-shadow: var(--shadow-sm);
+    background-color: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
     z-index: 100;
@@ -45,11 +57,11 @@ body {
 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 0 32px;
+    padding: 0 calc(var(--spacing-unit) * 2);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 72px;
+    height: 64px;
 }
 
 .logo-section {
@@ -59,18 +71,19 @@ body {
 }
 
 .logo {
-    height: 32px;
+    height: 28px;
     width: auto;
 }
 
 .app-title {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
-    color: var(--polymarket-blue);
+    color: var(--text-primary);
+    letter-spacing: -0.01em;
 }
 
 .subtitle {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--text-secondary);
     font-weight: 400;
 }
@@ -81,53 +94,55 @@ body {
 }
 
 .dataset-info {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--text-secondary);
-    background: var(--light-gray);
+    background: var(--bg-secondary);
     padding: 6px 12px;
-    border-radius: 20px;
+    border-radius: 6px;
 }
 
 /* Main Container */
 .main-container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 32px;
+    padding: calc(var(--spacing-unit) * 2);
     display: flex;
     flex-direction: column;
-    gap: 32px;
+    gap: calc(var(--spacing-unit) * 2);
 }
 
 /* Controls Section */
 .controls-section {
-    background: var(--white);
-    border-radius: 12px;
-    padding: 32px;
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--medium-gray);
+    background: var(--bg-primary);
+    border-radius: var(--radius-card);
+    padding: calc(var(--spacing-unit) * 2);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-card);
 }
 
 .controls-header {
-    margin-bottom: 32px;
+    margin-bottom: calc(var(--spacing-unit) * 2);
 }
 
 .controls-header h2 {
-    font-size: 24px;
+    font-size: 22px;
     font-weight: 600;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
     color: var(--text-primary);
+    letter-spacing: -0.01em;
 }
 
 .controls-header p {
-    font-size: 16px;
+    font-size: 14px;
     color: var(--text-secondary);
+    font-weight: 400;
 }
 
 .controls-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 24px;
-    margin-bottom: 32px;
+    gap: calc(var(--spacing-unit) * 1.5);
+    margin-bottom: calc(var(--spacing-unit) * 2);
 }
 
 .control-group {
@@ -140,71 +155,76 @@ body {
 }
 
 .control-label {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     color: var(--text-primary);
-    margin-bottom: 10px;
+    margin-bottom: 8px;
 }
 
 .control-input {
-    padding: 12px 16px;
-    border: 1px solid var(--medium-gray);
-    border-radius: 8px;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
     font-size: 14px;
-    background: var(--white);
-    transition: all 0.2s;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    transition: border-color 0.15s ease;
     outline: none;
+    font-family: var(--font-body);
 }
 
 .control-input:focus {
-    border-color: var(--polymarket-blue);
-    box-shadow: 0 0 0 3px var(--polymarket-blue-light);
+    border-color: var(--accent);
+    outline: 2px solid var(--accent-light);
+    outline-offset: 0;
 }
 
 .control-subtitle {
     font-size: 12px;
     color: var(--text-secondary);
     margin-top: 6px;
+    font-weight: 400;
 }
 
 /* Simulation Tabs */
 .simulation-tabs {
     display: flex;
-    gap: 16px;
-    margin-top: 12px;
+    gap: var(--spacing-unit);
+    margin-top: 8px;
 }
 
 .sim-tab {
     flex: 1;
-    padding: 20px;
-    border: 1px solid var(--medium-gray);
-    border-radius: 8px;
-    background: var(--white);
+    padding: calc(var(--spacing-unit) * 1.25);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-card);
+    background: var(--bg-primary);
     cursor: pointer;
-    transition: all 0.2s;
+    transition: border-color 0.15s ease, background-color 0.15s ease;
     text-align: left;
 }
 
 .sim-tab:hover {
-    border-color: var(--polymarket-blue-light);
-    background: var(--polymarket-blue-light);
+    border-color: var(--accent);
+    background: var(--bg-secondary);
 }
 
 .sim-tab.active {
-    border-color: var(--polymarket-blue);
-    background: var(--polymarket-blue-light);
+    border-color: var(--accent);
+    background: var(--accent-light);
 }
 
 .tab-title {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 4px;
+    margin-bottom: 3px;
 }
 
 .tab-subtitle {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--text-secondary);
+    font-weight: 400;
 }
 
 /* Run Section */
@@ -212,43 +232,45 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 16px;
-    padding-top: 32px;
-    border-top: 1px solid var(--medium-gray);
-    margin-top: 8px;
+    gap: var(--spacing-unit);
+    padding-top: calc(var(--spacing-unit) * 2);
+    border-top: 1px solid var(--border-color);
+    margin-top: calc(var(--spacing-unit) * 0.5);
 }
 
 .run-button {
-    background: var(--polymarket-blue);
-    color: var(--white);
+    background: var(--accent);
+    color: var(--bg-primary);
     border: none;
-    padding: 14px 32px;
-    border-radius: 8px;
-    font-size: 16px;
+    padding: 12px 28px;
+    border-radius: 6px;
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
-    transition: all 0.2s;
+    transition: background-color 0.15s ease;
     display: flex;
     align-items: center;
     gap: 8px;
+    font-family: var(--font-body);
 }
 
 .run-button:hover:not(:disabled) {
-    background: var(--polymarket-blue-dark);
+    background: var(--accent-hover);
 }
 
 .run-button:disabled {
-    background: var(--dark-gray);
+    background: var(--text-secondary);
     cursor: not-allowed;
+    opacity: 0.6;
 }
 
 .run-spinner {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     border: 2px solid transparent;
-    border-top: 2px solid var(--white);
+    border-top: 2px solid var(--bg-primary);
     border-radius: 50%;
-    animation: spin 1s linear infinite;
+    animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
@@ -257,17 +279,17 @@ body {
 }
 
 .run-info {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--text-secondary);
 }
 
 /* Progress Section */
 .progress-section {
-    background: var(--white);
-    border-radius: 12px;
-    padding: 32px;
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--medium-gray);
+    background: var(--bg-primary);
+    border-radius: var(--radius-card);
+    padding: calc(var(--spacing-unit) * 2);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-card);
 }
 
 .progress-container {
@@ -279,22 +301,24 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 12px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: var(--text-primary);
 }
 
 .progress-bar {
     width: 100%;
-    height: 8px;
-    background: var(--medium-gray);
-    border-radius: 4px;
+    height: 6px;
+    background: var(--bg-secondary);
+    border-radius: 3px;
     overflow: hidden;
 }
 
 .progress-fill {
     height: 100%;
-    background: var(--polymarket-blue);
-    border-radius: 4px;
-    transition: width 0.3s ease;
+    background: var(--accent);
+    border-radius: 3px;
+    transition: width 0.2s ease;
     width: 0%;
 }
 
@@ -302,72 +326,75 @@ body {
 .results-section {
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: calc(var(--spacing-unit) * 1.5);
 }
 
 .results-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: var(--white);
-    padding: 28px 32px;
-    border-radius: 12px;
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--medium-gray);
+    background: var(--bg-primary);
+    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2);
+    border-radius: var(--radius-card);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-card);
 }
 
 .results-header h2 {
-    font-size: 24px;
+    font-size: 22px;
     font-weight: 600;
     color: var(--text-primary);
+    letter-spacing: -0.01em;
 }
 
 .export-button {
-    background: var(--white);
-    color: var(--polymarket-blue);
-    border: 1px solid var(--polymarket-blue);
-    padding: 10px 20px;
+    background: var(--bg-primary);
+    color: var(--accent);
+    border: 1px solid var(--border-color);
+    padding: 8px 16px;
     border-radius: 6px;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.2s;
+    transition: all 0.15s ease;
+    font-family: var(--font-body);
 }
 
 .export-button:hover {
-    background: var(--polymarket-blue);
-    color: var(--white);
+    background: var(--bg-secondary);
+    border-color: var(--accent);
 }
 
 /* Statistics Grid */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 24px;
+    gap: calc(var(--spacing-unit) * 1.5);
 }
 
 .stat-card {
-    background: var(--white);
-    border-radius: 12px;
-    padding: 28px;
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--medium-gray);
+    background: var(--bg-primary);
+    border-radius: var(--radius-card);
+    padding: calc(var(--spacing-unit) * 1.75);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-card);
 }
 
 .stat-header {
-    margin-bottom: 20px;
+    margin-bottom: calc(var(--spacing-unit) * 1.25);
 }
 
 .stat-header h3 {
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
+    letter-spacing: -0.01em;
 }
 
 .stat-content {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: calc(var(--spacing-unit) * 1.25);
 }
 
 .stat-item {
@@ -377,14 +404,16 @@ body {
 }
 
 .stat-label {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--text-secondary);
+    font-weight: 400;
 }
 
 .stat-value {
     font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
+    letter-spacing: -0.01em;
 }
 
 .stat-value.positive {
@@ -403,25 +432,26 @@ body {
 .charts-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    gap: 24px;
+    gap: calc(var(--spacing-unit) * 1.5);
 }
 
 .chart-card {
-    background: var(--white);
-    border-radius: 12px;
-    padding: 28px;
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--medium-gray);
+    background: var(--bg-primary);
+    border-radius: var(--radius-card);
+    padding: calc(var(--spacing-unit) * 1.75);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-card);
 }
 
 .chart-header {
-    margin-bottom: 20px;
+    margin-bottom: calc(var(--spacing-unit) * 1.25);
 }
 
 .chart-header h3 {
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
+    letter-spacing: -0.01em;
 }
 
 .chart-container {
@@ -434,44 +464,52 @@ body {
 /* Responsive Design */
 @media (max-width: 768px) {
     .nav-container {
-        padding: 0 20px;
-        height: 64px;
+        padding: 0 var(--spacing-unit);
+        height: 56px;
+    }
+    
+    .app-title {
+        font-size: 16px;
+    }
+    
+    .subtitle {
+        font-size: 12px;
     }
     
     .main-container {
-        padding: 20px;
-        gap: 24px;
+        padding: var(--spacing-unit);
+        gap: var(--spacing-unit);
     }
     
     .controls-section {
-        padding: 24px;
+        padding: calc(var(--spacing-unit) * 1.5);
     }
     
     .controls-grid {
         grid-template-columns: 1fr;
-        gap: 20px;
+        gap: var(--spacing-unit);
     }
     
     .simulation-tabs {
         flex-direction: column;
-        gap: 12px;
+        gap: var(--spacing-unit);
     }
     
     .charts-grid {
         grid-template-columns: 1fr;
-        gap: 20px;
+        gap: var(--spacing-unit);
     }
     
     .chart-card,
     .stat-card {
-        padding: 20px;
+        padding: calc(var(--spacing-unit) * 1.5);
     }
     
     .results-header {
         flex-direction: column;
-        gap: 16px;
+        gap: var(--spacing-unit);
         align-items: stretch;
-        padding: 24px;
+        padding: calc(var(--spacing-unit) * 1.5);
     }
 }
 
@@ -487,9 +525,9 @@ body {
 
 /* Conditional visibility classes */
 .single-only, .threshold-only, .multi-only {
-    transition: all 0.3s ease;
+    transition: opacity 0.2s ease;
 }
 
 .multi-stats, .threshold-stats, .multi-chart {
-    transition: all 0.3s ease;
-}
+    transition: opacity 0.2s ease;
+}