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/layout/MobileNav.tsx

@@ -3,10 +3,9 @@ import { NavLink } from 'react-router-dom';
 import { useAuthStore } from '../../stores/authStore';
 
 const navItems = [
-  { to: '/watchlist', label: 'Watchlist' },
-  { to: '/scanner', label: 'Scanner' },
-  { to: '/rankings', label: 'Rankings' },
-  { to: '/performance', label: 'Performance' },
+  { to: '/', label: 'Overview', end: true },
+  { to: '/market', label: 'Market', end: false },
+  { to: '/signals', label: 'Signals', end: false },
 ];
 
 export default function MobileNav() {
@@ -16,7 +15,13 @@ export default function MobileNav() {
   return (
     <div className="lg:hidden">
       <div className="flex items-center justify-between px-4 py-3 glass rounded-none border-x-0 border-t-0">
-        <h1 className="text-lg font-semibold text-gradient">Signal Dashboard</h1>
+        <div className="flex items-center gap-2">
+          <span className="relative flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 animate-signal-pulse" />
+            <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-400/60" />
+          </span>
+          <h1 className="font-display text-lg font-bold tracking-tight text-gradient">Signal</h1>
+        </div>
         <button
           onClick={() => setOpen((v) => !v)}
           className="p-2 text-gray-400 hover:text-gray-200 transition-colors duration-200"
@@ -40,15 +45,16 @@ export default function MobileNav() {
         }`}
       >
         <nav className="px-3 py-2 space-y-1">
-          {navItems.map(({ to, label }) => (
+          {navItems.map(({ to, label, end }) => (
             <NavLink
               key={to}
               to={to}
+              end={end}
               onClick={() => setOpen(false)}
               className={({ isActive }) =>
                 `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
                   isActive
-                    ? 'bg-white/[0.08] text-white'
+                    ? 'bg-blue-400/[0.08] text-blue-300'
                     : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
                 }`
               }
@@ -63,7 +69,7 @@ export default function MobileNav() {
               className={({ isActive }) =>
                 `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
                   isActive
-                    ? 'bg-white/[0.08] text-white'
+                    ? 'bg-blue-400/[0.08] text-blue-300'
                     : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
                 }`
               }

frontend/src/components/layout/Sidebar.tsx

@@ -4,12 +4,18 @@ import { useAuthStore } from '../../stores/authStore';
 import { check as healthCheck } from '../../api/health';
 
 const navItems = [
-  { to: '/watchlist', label: 'Watchlist', icon: '◈' },
-  { to: '/scanner', label: 'Scanner', icon: '⬡' },
-  { to: '/rankings', label: 'Rankings', icon: '△' },
-  { to: '/performance', label: 'Performance', icon: '◎' },
+  { to: '/', label: 'Overview', index: '01', end: true },
+  { to: '/market', label: 'Market', index: '02', end: false },
+  { to: '/signals', label: 'Signals', index: '03', end: false },
 ];
 
+const linkClasses = (isActive: boolean) =>
+  `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+    isActive
+      ? 'bg-blue-400/[0.08] text-blue-300 border border-blue-400/20'
+      : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
+  }`;
+
 export default function Sidebar() {
   const { role, username, logout } = useAuthStore();
 
@@ -24,41 +30,28 @@ export default function Sidebar() {
 
   return (
     <aside className="hidden lg:flex lg:flex-col lg:w-64 h-screen sticky top-0 glass border-r border-white/[0.06] rounded-none border-l-0 border-t-0 border-b-0">
-      {/* Logo area */}
+      {/* Brand */}
       <div className="px-6 py-6 border-b border-white/[0.06]">
-        <h1 className="text-lg font-semibold text-gradient">Signal Dashboard</h1>
-        <p className="text-[11px] text-gray-500 mt-0.5 tracking-wide">TRADING INTELLIGENCE</p>
+        <div className="flex items-center gap-2">
+          <span className="relative flex h-2.5 w-2.5">
+            <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 animate-signal-pulse" />
+            <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-400/60" />
+          </span>
+          <h1 className="font-display text-xl font-bold tracking-tight text-gradient">Signal</h1>
+        </div>
+        <p className="text-[10px] text-gray-500 mt-1.5 font-mono uppercase tracking-[0.22em]">Trading Intelligence</p>
       </div>
 
       <nav className="flex-1 px-3 py-5 space-y-1">
-        {navItems.map(({ to, label, icon }) => (
-          <NavLink
-            key={to}
-            to={to}
-            className={({ isActive }) =>
-              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
-                isActive
-                  ? 'bg-white/[0.08] text-white shadow-lg shadow-blue-500/5 border border-white/[0.08]'
-                  : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
-              }`
-            }
-          >
-            <span className="text-base opacity-60">{icon}</span>
+        {navItems.map(({ to, label, index, end }) => (
+          <NavLink key={to} to={to} end={end} className={({ isActive }) => linkClasses(isActive)}>
+            <span className="font-mono text-[10px] tracking-widest opacity-50">{index}</span>
             {label}
           </NavLink>
         ))}
         {role === 'admin' && (
-          <NavLink
-            to="/admin"
-            className={({ isActive }) =>
-              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
-                isActive
-                  ? 'bg-white/[0.08] text-white shadow-lg shadow-blue-500/5 border border-white/[0.08]'
-                  : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
-              }`
-            }
-          >
-            <span className="text-base opacity-60">⚙</span>
+          <NavLink to="/admin" className={({ isActive }) => linkClasses(isActive)}>
+            <span className="font-mono text-[10px] tracking-widest opacity-50">04</span>
             Admin
           </NavLink>
         )}
@@ -81,7 +74,7 @@ export default function Sidebar() {
         )}
         <button
           onClick={logout}
-          className="w-full px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-white/[0.04] rounded-lg transition-all duration-200"
+          className="w-full px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-white/[0.04] rounded-lg transition-all duration-200 text-left"
         >
           Logout
         </button>