Fix CSS loading issues: resolve AnalyticsDashboard theme variables and blueprint shadow styling

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/styles/AnalyticsDashboard.css

@@ -94,7 +94,7 @@
 }
 
 .status-connected {
-  color: var(--success-color);
+  color: var(--accent-color);
 }
 
 .status-disconnected {
@@ -135,10 +135,9 @@
 
 /* Overview Panel */
 .overview-panel {
-  background: var(--card-bg);
-  border: 2px solid var(--border-color);
+  background: var(--secondary-bg);
+  border: 2px solid var(--text-primary);
   padding: var(--spacing-3);
-  box-shadow: var(--shadow);
 }
 
 .panel-header {
@@ -168,13 +167,13 @@
 .live-dot {
   width: 8px;
   height: 8px;
-  background: var(--success-color);
+  background: var(--text-primary);
   animation: blink 2s infinite;
 }
 
 .live-text {
   font-size: 0.75rem;
-  color: var(--success-color);
+  color: var(--accent-color);
   font-weight: bold;
   font-family: var(--font-family);
   text-transform: uppercase;
@@ -197,15 +196,13 @@
   align-items: center;
   gap: var(--spacing-2);
   padding: var(--spacing-2);
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   border: 1px solid var(--border-color);
   transition: all 0.1s ease;
-  box-shadow: var(--shadow);
 }
 
 .kpi-card:hover {
   background: var(--card-bg);
-  box-shadow: var(--shadow-hover);
 }
 
 .kpi-icon {
@@ -283,7 +280,7 @@
 
 /* Volume Chart */
 .volume-chart {
-  background: var(--card-bg);
+  background: var(--secondary-bg);
   border: 2px solid var(--text-primary);
   padding: var(--spacing-3);
 }
@@ -344,7 +341,7 @@
 
 /* ASCII Chart Styles */
 .ascii-chart-container {
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   border: 1px solid var(--border-color);
   padding: var(--spacing-2);
   position: relative;
@@ -415,7 +412,7 @@
 }
 
 .chart-point:hover {
-  background: var(--primary-bg);
+  background: var(--card-bg);
   color: var(--text-primary);
 }
 
@@ -451,7 +448,7 @@
   position: absolute;
   top: var(--spacing-2);
   right: var(--spacing-2);
-  background: var(--card-bg);
+  background: var(--secondary-bg);
   border: 1px solid var(--text-primary);
   padding: var(--spacing-2);
   font-family: var(--font-family);
@@ -478,7 +475,7 @@
 .chart-container {
   height: 300px;
   position: relative;
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   border: 1px solid var(--border-color);
 }
 
@@ -522,7 +519,7 @@
 
 /* Top Traders Component */
 .top-traders {
-  background: var(--card-bg);
+  background: var(--secondary-bg);
   border: 2px solid var(--text-primary);
   padding: var(--spacing-3);
 }
@@ -555,7 +552,7 @@
 
 .view-mode-selector {
   display: flex;
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   border: 1px solid var(--border-color);
   padding: 0;
 }
@@ -586,7 +583,7 @@
 .count-selector {
   padding: var(--spacing-1) var(--spacing-2);
   border: 1px solid var(--border-color);
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   color: var(--text-primary);
   font-size: 0.625rem;
   cursor: pointer;
@@ -627,13 +624,13 @@
   gap: var(--spacing-2);
   align-items: center;
   padding: var(--spacing-1);
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   transition: all 0.1s ease;
   font-family: var(--font-family);
 }
 
 .trader-row:hover {
-  background: var(--primary-bg);
+  background: var(--card-bg);
 }
 
 .rank-badge {
@@ -730,7 +727,7 @@
 
 /* Recent Trades */
 .recent-trades {
-  background: var(--card-bg);
+  background: var(--secondary-bg);
   border: 2px solid var(--text-primary);
   padding: var(--spacing-3);
   height: 100%;
@@ -783,7 +780,7 @@
 .filter-button {
   padding: var(--spacing-1) var(--spacing-2);
   border: none;
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   color: var(--text-muted);
   font-size: 0.625rem;
   font-weight: bold;
@@ -802,7 +799,7 @@
   width: 100%;
   padding: var(--spacing-1) var(--spacing-2);
   border: 2px solid var(--border-color);
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   color: var(--text-primary);
   font-size: 0.75rem;
   font-family: var(--font-family);
@@ -830,13 +827,13 @@
   align-items: flex-start;
   gap: var(--spacing-2);
   padding: var(--spacing-2);
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   border-left: 4px solid transparent;
   transition: all 0.1s ease;
 }
 
 .trade-item:hover {
-  background: var(--primary-bg);
+  background: var(--card-bg);
 }
 
 .trade-item.completed {
@@ -1026,7 +1023,7 @@
 .load-more-button {
   padding: var(--spacing-1) var(--spacing-2);
   border: 1px solid var(--border-color);
-  background: var(--secondary-bg);
+  background: var(--primary-bg);
   color: var(--text-muted);
   cursor: pointer;
   font-size: 0.75rem;
@@ -1037,7 +1034,7 @@
 }
 
 .load-more-button:hover {
-  background: var(--primary-bg);
+  background: var(--card-bg);
   color: var(--text-primary);
 }
 
@@ -1153,7 +1150,7 @@
   }
 
   .trade-item:hover {
-    background: var(--primary-bg);
+    background: var(--card-bg);
   }
 
   /* Better mobile scrolling */