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}