fix(web): fix UI bugs and unify design tokens

- Add missing .nofx-glass CSS class (used in 20+ places but undefined)
- Fix Input component referencing undefined --brand-black/--brand-light-gray
- Unify background colors to #0B0E11 (was 3 different near-blacks)
- Switch body font from IBM Plex Mono to Inter for readability
- Improve chat bubble contrast (bg 0.03→0.05, border 0.05→0.08)
- Brighten timestamp (#2c2c42→#5a5a72) and disclaimer (#1e1e32→#4a4a62)
- Unify ::selection color to gold (was orange)
- Remove global button:hover translateY that conflicted with active:scale

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/components/agent/ChatInput.tsx

@@ -88,7 +88,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         style={{
           padding: '12px 16px 20px',
           borderTop: '1px solid rgba(255,255,255,0.04)',
-          background: 'linear-gradient(to top, #09090b 80%, transparent)',
+          background: 'linear-gradient(to top, #0B0E11 80%, transparent)',
         }}
       >
         <div
@@ -181,7 +181,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
             margin: '6px auto 0',
             textAlign: 'center',
             fontSize: 10,
-            color: '#1e1e32',
+            color: '#4a4a62',
           }}
         >
           NOFXi may make mistakes. Always verify trading decisions.

web/src/components/agent/ChatMessages.tsx

@@ -89,9 +89,9 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                     fontSize: 13.5,
                     lineHeight: 1.7,
                     wordBreak: 'break-word',
-                    background: 'rgba(255,255,255,0.03)',
+                    background: 'rgba(255,255,255,0.05)',
                     color: '#dcdce8',
-                    border: '1px solid rgba(255,255,255,0.05)',
+                    border: '1px solid rgba(255,255,255,0.08)',
                   }}
                 >
                   <AgentStepPanel steps={m.steps} visible={hasMeaningfulExecutionSteps(m.steps)} />
@@ -123,7 +123,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                 <div
                   style={{
                     fontSize: 10,
-                    color: '#2c2c42',
+                    color: '#5a5a72',
                     marginTop: 4,
                     textAlign: m.role === 'user' ? 'right' : 'left',
                     paddingLeft: m.role === 'bot' ? 4 : 0,

web/src/components/ui/input.tsx

@@ -11,8 +11,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           'flex h-10 w-full rounded px-3 py-2 text-sm',
-          'bg-[var(--brand-black)] border border-[var(--panel-border)]',
-          'text-[var(--brand-light-gray)] focus:outline-none',
+          'bg-[var(--panel-bg)] border border-[var(--panel-border)]',
+          'text-[var(--text-primary)] focus:outline-none focus:border-[var(--binance-yellow)] focus:ring-1 focus:ring-[rgba(240,185,11,0.15)]',
           className
         )}
         {...props}

web/src/index.css

@@ -13,7 +13,7 @@ html {
 :root {
   /* NoFX Neo-Gold Design System */
   --nofx-gold: #F0B90B;
-  --nofx-bg: #05070A;
+  --nofx-bg: #0B0E11;
   --nofx-accent: #00F0FF;
   --nofx-glass: rgba(5, 7, 10, 0.7);
   --nofx-border: rgba(240, 185, 11, 0.2);
@@ -23,7 +23,7 @@ html {
   --glow-accent: 0 0 20px rgba(0, 240, 255, 0.3);
   --glow-text: 0 0 10px rgba(240, 185, 11, 0.5);
 
-  --background: #05070A;
+  --background: #0B0E11;
   --header-bg: rgba(2, 3, 4, 0.85);
   /* Deep Abyssal */
 
@@ -56,7 +56,7 @@ html {
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
   --shadow-glow: 0 0 30px rgba(240, 185, 11, 0.15);
 
-  font-family: 'IBM Plex Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   line-height: 1.6;
   font-weight: 400;
   color-scheme: dark;
@@ -136,13 +136,13 @@ body {
   min-width: 320px;
   min-height: 100vh;
   background-color: var(--background);
-  background-image: radial-gradient(circle at 50% 0%, #151921 0%, #05070a 60%);
+  background-image: radial-gradient(circle at 50% 0%, #151921 0%, #0B0E11 60%);
   background-attachment: fixed;
 }
 
-/* Premium Selection Styles */
+/* Premium Selection Styles — gold to match brand */
 ::selection {
-  background: rgba(255, 88, 0, 0.3);
+  background: rgba(240, 185, 11, 0.3);
   color: #FFFFFF;
 }
 
@@ -350,12 +350,20 @@ body {
   color: var(--text-primary) !important;
 }
 
-/* Monospace numbers */
+/* Monospace numbers — use for prices, balances, timestamps, code */
 .mono {
   font-family: 'IBM Plex Mono', 'Courier New', monospace;
   font-variant-numeric: tabular-nums;
 }
 
+.text-profit,
+.text-loss,
+.number-up,
+.number-down {
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-variant-numeric: tabular-nums;
+}
+
 /* Button styles - Binance */
 button {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -364,14 +372,6 @@ button {
 
 button:hover:not(:disabled) {
   filter: brightness(1.1);
-  filter: brightness(1.1);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-button:active:not(:disabled) {
-  transform: scale(0.98) translateY(0);
-  box-shadow: none;
 }
 
 /* Soft Glow for Primary Buttons (Yellow) */
@@ -439,6 +439,14 @@ button:disabled {
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
+.nofx-glass {
+  background: rgba(30, 35, 41, 0.5);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+}
+
 /* Premium Input Styles */
 /* Premium Input Styles */
 input,

web/src/pages/AgentChatPage.tsx

@@ -630,7 +630,7 @@ export function AgentChatPage() {
       style={{
         display: 'flex',
         height: 'calc(100dvh - 64px)',
-        background: '#09090b',
+        background: '#0B0E11',
         overflow: 'hidden',
       }}
     >
@@ -655,7 +655,7 @@ export function AgentChatPage() {
             overflowX: 'auto',
             flexShrink: 0,
             backdropFilter: 'blur(12px)',
-            background: 'rgba(9,9,11,0.8)',
+            background: 'rgba(11,14,17,0.8)',
           }}
           className="hide-scrollbar"
         >

web/tailwind.config.js

@@ -14,8 +14,8 @@ export default {
           highlight: '#FFD700',
         },
         'nofx-bg': {
-          DEFAULT: '#05070A', // Deep Void
-          deeper: '#020304',  // Abyssal
+          DEFAULT: '#0B0E11', // Deep Void
+          deeper: '#050709',  // Abyssal
           lighter: '#0E1217', // Surface
         },
         'nofx-accent': '#00F0FF', // Cyan Cyber