Redesign: phosphor-terminal identity and simplified 4-page structure

Information architecture (6 nav destinations -> 4):
- New Overview home: metric strip (live setups, high confidence,
  hit rate, expectancy), top-5 setups, watchlist pulse
- Market = Watchlist + Rankings merged as tabs; scoring weights
  moved into a collapsible disclosure
- Signals = Scanner + Performance merged as tabs (Setups | Track
  Record) with actions inside the panels
- Legacy routes redirect (/watchlist, /rankings, /scanner,
  /performance)

Visual identity:
- Warm ash-green dark palette replaces cold navy; citron lime
  accent replaces blue (Tailwind gray/blue remapped at config
  level so all components reskin)
- Primary buttons: lime with ink text; long/short stays
  emerald/red
- Typography: Bricolage Grotesque display, Instrument Sans body,
  IBM Plex Mono for all numerals incl. chart canvas labels
- Atmosphere: graph-paper grid + citron glow + film grain;
  pulsing brand dot; mono-numbered nav

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/charts/CandlestickChart.tsx

@@ -100,7 +100,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
     ctx.strokeStyle = 'rgba(255,255,255,0.04)';
     ctx.lineWidth = 1;
     ctx.fillStyle = '#6b7280';
-    ctx.font = '11px Inter, system-ui, sans-serif';
+    ctx.font = '11px "IBM Plex Mono", ui-monospace, monospace';
     ctx.textAlign = 'right';
     for (let i = 0; i <= nTicks; i++) {
       const v = lo + ((hi - lo) * i) / nTicks;
@@ -141,7 +141,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
 
         // Label
         ctx.fillStyle = color;
-        ctx.font = '10px Inter, system-ui, sans-serif';
+        ctx.font = '10px "IBM Plex Mono", ui-monospace, monospace';
         ctx.textAlign = 'left';
         ctx.fillText(
           `${level.type[0].toUpperCase()} ${formatPrice(level.price_level)}`,
@@ -182,7 +182,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
       // Label with midpoint price and strength score
       const yMid = yTop + rectHeight / 2;
       ctx.fillStyle = labelColor;
-      ctx.font = '10px Inter, system-ui, sans-serif';
+      ctx.font = '10px "IBM Plex Mono", ui-monospace, monospace';
       ctx.textAlign = 'left';
       ctx.fillText(
         `${zone.type[0].toUpperCase()} ${formatPrice(zone.midpoint)} (${zone.strength})`,
@@ -238,7 +238,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
       ctx.setLineDash([]);
 
       // Labels on right side
-      ctx.font = '10px Inter, system-ui, sans-serif';
+      ctx.font = '10px "IBM Plex Mono", ui-monospace, monospace';
       ctx.textAlign = 'left';
       ctx.fillStyle = 'rgba(96, 165, 250, 0.9)';
       ctx.fillText(`Entry ${formatPrice(tradeSetup.entry_price)}`, ml + cw + 4, entryY + 3);
@@ -334,7 +334,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
     // Price label on y-axis (right side)
     const price = hi - ((cy - mt) / ch) * (hi - lo);
     const priceText = formatPrice(price);
-    ctx.font = '11px Inter, system-ui, sans-serif';
+    ctx.font = '11px "IBM Plex Mono", ui-monospace, monospace';
     const priceMetrics = ctx.measureText(priceText);
     const labelPadX = 5;
     const labelPadY = 3;