🎨 Complete Coinbase design system rebuild: white canvas, single blue accent, pill CTAs, editorial spacing, hairline borders, dark hero bands, asset rows, mono numbers, 96px section rhythm

src/renderer/App.tsx

@@ -18,148 +18,77 @@ type AppState = 'loading' | 'onboarding' | 'locked' | 'unlocked';
 function AppContent() {
   const [appState, setAppState] = useState<AppState>('loading');
   const [currentPage, setCurrentPage] = useState<Page>('dashboard');
-  const [prevPage, setPrevPage] = useState<Page>('dashboard');
   const [publicKey, setPublicKey] = useState<string | null>(null);
   const [balance, setBalance] = useState({ sol: 0, usdt: 0 });
   const [aiStatus, setAiStatus] = useState<any>(null);
   const { addToast } = useToast();
 
-  useEffect(() => { checkWalletState(); }, []);
+  useEffect(() => { init(); }, []);
+  useEffect(() => { if (window.solvox) return window.solvox.on.locked(() => setAppState('locked')); }, []);
 
-  useEffect(() => {
-    if (!window.solvox) return;
-    return window.solvox.on.locked(() => { setAppState('locked'); });
-  }, []);
-
-  const checkWalletState = async () => {
+  const init = async () => {
     try {
       if (!window.solvox) { setAppState('unlocked'); return; }
       const exists = await window.solvox.wallet.exists();
       if (!exists) { setAppState('onboarding'); return; }
       const unlocked = await window.solvox.wallet.isUnlocked();
       setAppState(unlocked ? 'unlocked' : 'locked');
-      if (unlocked) {
-        setPublicKey(await window.solvox.wallet.getPublicKey());
-        refreshBalance();
-      }
+      if (unlocked) { setPublicKey(await window.solvox.wallet.getPublicKey()); refreshBalance(); }
     } catch { setAppState('onboarding'); }
   };
 
   const refreshBalance = async () => {
-    try {
-      if (!window.solvox) return;
-      const r = await window.solvox.wallet.getBalance();
-      if (r.success) setBalance({ sol: r.sol || 0, usdt: r.usdt || 0 });
-    } catch {}
-  };
-
-  const handleUnlock = async (pk: string) => {
-    setPublicKey(pk);
-    setAppState('unlocked');
-    refreshBalance();
-    addToast({ type: 'success', title: 'Wallet Unlocked', message: 'Welcome back to SolVox' });
-    if (window.solvox) {
-      window.solvox.ai.initialize().then(r => {
-        if (r.success) {
-          window.solvox.ai.getStatus().then(setAiStatus);
-          addToast({ type: 'info', title: 'AI Engine Ready', message: '6 QVAC modules loaded locally' });
-        }
-      });
-    }
+    try { if (!window.solvox) return; const r = await window.solvox.wallet.getBalance(); if (r.success) setBalance({ sol: r.sol || 0, usdt: r.usdt || 0 }); } catch {}
   };
 
-  const handleOnboardingComplete = (pk: string) => {
-    setPublicKey(pk);
-    setAppState('unlocked');
-    refreshBalance();
-    addToast({ type: 'success', title: 'Wallet Created!', message: 'Your keys are encrypted and stored locally' });
+  const handleUnlock = (pk: string) => {
+    setPublicKey(pk); setAppState('unlocked'); refreshBalance();
+    addToast({ type: 'success', title: 'Wallet unlocked' });
+    if (window.solvox) window.solvox.ai.initialize().then(r => { if (r.success) window.solvox.ai.getStatus().then(setAiStatus); });
   };
 
-  const handleLock = async () => {
-    if (window.solvox) await window.solvox.wallet.lock();
-    setAppState('locked');
-  };
-
-  const navigate = (page: Page) => {
-    setPrevPage(currentPage);
-    setCurrentPage(page);
-  };
+  const handleLock = async () => { if (window.solvox) await window.solvox.wallet.lock(); setAppState('locked'); };
 
-  if (appState === 'loading') return <LoadingScreen />;
-  if (appState === 'onboarding') return <OnboardingScreen onComplete={handleOnboardingComplete} />;
+  if (appState === 'loading') return <Loading />;
+  if (appState === 'onboarding') return <OnboardingScreen onComplete={pk => { setPublicKey(pk); setAppState('unlocked'); refreshBalance(); }} />;
   if (appState === 'locked') return <LockScreen onUnlock={handleUnlock} />;
 
-  const renderPage = () => {
-    const props = { key: currentPage };
-    switch (currentPage) {
-      case 'dashboard': return <Dashboard {...props} balance={balance} publicKey={publicKey} onRefresh={refreshBalance} onNavigate={navigate} />;
-      case 'send':      return <SendPage {...props} balance={balance} onSent={refreshBalance} />;
-      case 'history':   return <HistoryPage {...props} />;
-      case 'voice':     return <VoicePage {...props} aiStatus={aiStatus} />;
-      case 'security':  return <SecurityPage {...props} />;
-      case 'settings':  return <SettingsPage {...props} onLock={handleLock} />;
-      default:          return <Dashboard balance={balance} publicKey={publicKey} onRefresh={refreshBalance} onNavigate={navigate} />;
-    }
+  const pages: Record<Page, JSX.Element> = {
+    dashboard: <Dashboard balance={balance} publicKey={publicKey} onRefresh={refreshBalance} onNavigate={setCurrentPage} />,
+    send: <SendPage balance={balance} onSent={refreshBalance} />,
+    history: <HistoryPage />,
+    voice: <VoicePage aiStatus={aiStatus} />,
+    security: <SecurityPage />,
+    settings: <SettingsPage onLock={handleLock} />,
   };
 
   return (
-    <div className="flex h-screen mesh-bg">
-      <Sidebar currentPage={currentPage} onNavigate={navigate} />
+    <div className="flex h-screen bg-canvas">
+      <Sidebar currentPage={currentPage} onNavigate={setCurrentPage} />
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopBar publicKey={publicKey} balance={balance} aiStatus={aiStatus} onLock={handleLock} />
-        <main className="flex-1 overflow-y-auto p-5">
-          <div className="page-enter">{renderPage()}</div>
+        <main className="flex-1 overflow-y-auto">
+          <div className="page-enter" key={currentPage}>{pages[currentPage]}</div>
         </main>
       </div>
     </div>
   );
 }
 
-export default function App() {
-  return (
-    <ToastProvider>
-      <AppContent />
-    </ToastProvider>
-  );
-}
+export default function App() { return <ToastProvider><AppContent /></ToastProvider>; }
 
-function LoadingScreen() {
+function Loading() {
   return (
-    <div className="h-screen flex flex-col items-center justify-center mesh-bg relative">
-      {/* Background particles */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        {Array.from({ length: 12 }, (_, i) => (
-          <div key={i} className="particle" style={{
-            width: 2 + Math.random() * 3, height: 2 + Math.random() * 3,
-            left: `${10 + Math.random() * 80}%`, top: `${10 + Math.random() * 80}%`,
-            background: i % 2 === 0 ? '#9945FF' : '#14F195',
-            '--dur': `${5 + Math.random() * 5}s`, '--opacity': 0.1 + Math.random() * 0.15,
-            '--x1': `${-20 + Math.random() * 40}px`, '--y1': `${-30 + Math.random() * 60}px`,
-            '--x2': `${-20 + Math.random() * 40}px`, '--y2': `${-40 + Math.random() * 80}px`,
-            '--x3': `${-20 + Math.random() * 40}px`, '--y3': `${-20 + Math.random() * 40}px`,
-          } as any} />
-        ))}
+    <div className="h-screen flex flex-col items-center justify-center bg-canvas">
+      <div className="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-6">
+        <span className="text-on-primary font-bold text-title-md">SV</span>
       </div>
-
-      {/* Logo */}
-      <div className="relative z-10 flex flex-col items-center">
-        <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-sol-purple to-sol-green flex items-center justify-center mb-6 shadow-glow-lg animate-float">
-          <span className="text-white text-2xl font-black">SV</span>
-        </div>
-        <div className="text-4xl font-extrabold gradient-text mb-2">SolVox</div>
-        <div className="text-sol-muted text-sm mb-8">Initializing local AI engine...</div>
-
-        {/* Orbit rings */}
-        <div className="relative w-16 h-16">
-          <div className="orbit-ring absolute inset-0" />
-          <div className="orbit-ring orbit-ring-2 absolute inset-2" />
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="w-2 h-2 rounded-full bg-sol-purple animate-pulse" />
-          </div>
-        </div>
-
-        <div className="mt-6 text-[11px] text-sol-muted/60">Powered by QVAC SDK • 100% Local AI</div>
+      <div className="display-text text-display-sm text-ink mb-2">SolVox</div>
+      <div className="text-body-md text-body">Initializing local AI engine…</div>
+      <div className="mt-8 w-48 h-1 bg-surface-strong rounded-pill overflow-hidden">
+        <div className="h-full bg-primary rounded-pill" style={{ width: '60%', animation: 'shimmer 1.5s infinite', background: 'linear-gradient(90deg, #0052ff 0%, #003ecc 50%, #0052ff 100%)', backgroundSize: '200% 100%' }} />
       </div>
+      <div className="text-caption text-muted mt-4">Powered by QVAC SDK · 100% Local AI</div>
     </div>
   );
 }

src/renderer/components/Sidebar.tsx

@@ -1,118 +1,57 @@
-import React, { useState } from 'react';
+import React from 'react';
 
-interface SidebarProps {
-  currentPage: string;
-  onNavigate: (page: any) => void;
-  collapsed?: boolean;
-}
+interface SidebarProps { currentPage: string; onNavigate: (page: any) => void; }
 
-const navItems = [
-  { id: 'dashboard', label: 'Dashboard', icon: '◉', activeIcon: '◉' },
-  { id: 'voice',     label: 'Voice AI',  icon: '◎', activeIcon: '◎' },
-  { id: 'send',      label: 'Send',      icon: '↗', activeIcon: '↗' },
-  { id: 'history',   label: 'History',    icon: '☰', activeIcon: '☰' },
-  { id: 'security',  label: 'Security',  icon: '◈', activeIcon: '◈' },
-  { id: 'settings',  label: 'Settings',  icon: '⚙', activeIcon: '⚙' },
+const nav = [
+  { id: 'dashboard', label: 'Home' },
+  { id: 'voice',     label: 'Voice AI' },
+  { id: 'send',      label: 'Send' },
+  { id: 'history',   label: 'Transactions' },
+  { id: 'security',  label: 'Security' },
+  { id: 'settings',  label: 'Settings' },
 ];
 
 export default function Sidebar({ currentPage, onNavigate }: SidebarProps) {
-  const [hovered, setHovered] = useState<string | null>(null);
-
   return (
-    <aside className="w-[220px] flex flex-col bg-sol-darker/50 border-r border-sol-border/40">
-      {/* Logo */}
-      <div className="px-5 pt-7 pb-5">
-        <div className="flex items-center gap-2.5">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-sol-purple to-sol-green flex items-center justify-center shadow-glow-sm">
-            <span className="text-white text-sm font-black">SV</span>
-          </div>
-          <div>
-            <div className="text-base font-extrabold tracking-tight gradient-text-static">SolVox</div>
-            <div className="text-[10px] text-sol-muted font-medium -mt-0.5">Voice AI Wallet</div>
+    <aside className="w-[200px] flex flex-col bg-canvas border-r border-hairline">
+      {/* Wordmark */}
+      <div className="px-5 pt-6 pb-5">
+        <div className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-full bg-primary flex items-center justify-center">
+            <span className="text-on-primary text-caption-strong font-bold">SV</span>
           </div>
+          <span className="text-title-md text-ink">SolVox</span>
         </div>
       </div>
 
-      <div className="divider mx-5" />
+      <div className="hairline-soft mx-5" />
 
-      {/* Navigation */}
+      {/* Nav Links */}
       <nav className="flex-1 px-3 py-4 space-y-0.5">
-        {navItems.map(item => {
-          const isActive = currentPage === item.id;
-          const isHovered = hovered === item.id;
-          return (
-            <button
-              key={item.id}
-              onClick={() => onNavigate(item.id)}
-              onMouseEnter={() => setHovered(item.id)}
-              onMouseLeave={() => setHovered(null)}
-              className={`relative w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-all duration-300 group ${
-                isActive
-                  ? 'bg-sol-purple/12 text-sol-text'
-                  : 'text-sol-muted hover:text-sol-text hover:bg-white/[0.03]'
-              }`}
-            >
-              {/* Active indicator bar */}
-              {isActive && <div className="nav-active-bar" />}
-
-              {/* Icon */}
-              <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold transition-all duration-300 ${
-                isActive
-                  ? 'bg-sol-purple/20 text-sol-purple'
-                  : 'bg-transparent text-sol-muted group-hover:bg-sol-purple/8 group-hover:text-sol-purple'
-              }`}>
-                {item.icon}
-              </div>
-
-              {/* Label */}
-              <span className={`text-[13px] font-medium transition-colors ${
-                isActive ? 'text-sol-text' : ''
-              }`}>
-                {item.label}
-              </span>
-
-              {/* Hover glow */}
-              {(isActive || isHovered) && (
-                <div className="absolute inset-0 rounded-xl bg-sol-purple/[0.04] pointer-events-none" />
-              )}
-            </button>
-          );
-        })}
+        {nav.map(item => (
+          <button key={item.id} onClick={() => onNavigate(item.id)}
+            className={`w-full text-left px-3 py-2.5 rounded-lg text-nav-link transition-colors ${
+              currentPage === item.id
+                ? 'text-primary bg-primary/[0.06] font-semibold'
+                : 'text-body hover:text-ink hover:bg-surface-soft'
+            }`}>
+            {item.label}
+          </button>
+        ))}
       </nav>
 
-      {/* QVAC Engine Badge */}
-      <div className="px-3 pb-4">
-        <div className="relative overflow-hidden rounded-2xl border border-sol-border/40 p-4">
-          {/* Subtle background gradient */}
-          <div className="absolute inset-0 bg-gradient-to-br from-tether-green/5 to-sol-purple/5" />
-
-          <div className="relative">
-            <div className="flex items-center gap-2 mb-2.5">
-              <div className="w-6 h-6 rounded-md bg-tether-green/15 flex items-center justify-center">
-                <span className="text-tether-green text-xs font-bold">Q</span>
-              </div>
-              <div>
-                <div className="text-[11px] font-bold text-tether-green">QVAC Engine</div>
-                <div className="text-[9px] text-sol-muted">6 AI modules active</div>
-              </div>
-            </div>
-
-            {/* Module dots */}
-            <div className="flex items-center gap-1">
-              {['LLM', 'STT', 'TTS', 'EMB', 'NMT', 'OCR'].map((m, i) => (
-                <div key={m} className="flex flex-col items-center">
-                  <div className="w-1.5 h-1.5 rounded-full bg-sol-green animate-pulse" style={{ animationDelay: `${i * 200}ms` }} />
-                  <span className="text-[7px] text-sol-muted mt-0.5">{m}</span>
-                </div>
-              ))}
-            </div>
-
-            <div className="mt-2.5 pt-2 border-t border-sol-border/30">
-              <div className="flex items-center gap-1.5">
-                <div className="w-1.5 h-1.5 rounded-full bg-sol-green" />
-                <span className="text-[9px] text-sol-muted">100% local • Vulkan GPU</span>
-              </div>
-            </div>
+      {/* QVAC Status */}
+      <div className="px-4 pb-4">
+        <div className="bg-surface-soft rounded-xl p-3">
+          <div className="text-caption-strong text-muted uppercase tracking-wider mb-1.5">QVAC Engine</div>
+          <div className="flex items-center gap-1.5 flex-wrap">
+            {['LLM', 'STT', 'TTS', 'EMB', 'NMT', 'OCR'].map(m => (
+              <span key={m} className="badge-pill text-[10px] py-0">{m}</span>
+            ))}
+          </div>
+          <div className="flex items-center gap-1.5 mt-2">
+            <div className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
+            <span className="text-caption text-muted">100% local</span>
           </div>
         </div>
       </div>

src/renderer/components/TopBar.tsx

@@ -1,98 +1,45 @@
 import React, { useState } from 'react';
-import { AnimatedNumber } from './ui/index';
+import { Num } from './ui/index';
 
-interface TopBarProps {
-  publicKey: string | null;
-  balance: { sol: number; usdt: number };
-  aiStatus: any;
-  onLock: () => void;
-}
+interface TopBarProps { publicKey: string | null; balance: { sol: number; usdt: number }; aiStatus: any; onLock: () => void; }
 
 export default function TopBar({ publicKey, balance, aiStatus, onLock }: TopBarProps) {
   const [copied, setCopied] = useState(false);
-  const shortAddress = publicKey ? `${publicKey.slice(0, 4)}...${publicKey.slice(-4)}` : '—';
-
-  const copyAddress = () => {
-    if (publicKey) {
-      navigator.clipboard.writeText(publicKey);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
-  const activeModules = aiStatus
-    ? [aiStatus.llm, aiStatus.transcription, aiStatus.tts, aiStatus.embed, aiStatus.translation, aiStatus.ocr].filter(Boolean).length
-    : 0;
+  const short = publicKey ? `${publicKey.slice(0, 4)}…${publicKey.slice(-4)}` : '—';
+  const copy = () => { if (publicKey) { navigator.clipboard.writeText(publicKey); setCopied(true); setTimeout(() => setCopied(false), 1500); } };
+  const mods = aiStatus ? [aiStatus.llm, aiStatus.transcription, aiStatus.tts, aiStatus.embed, aiStatus.translation, aiStatus.ocr].filter(Boolean).length : 0;
 
   return (
-    <header className="h-14 border-b border-sol-border/30 flex items-center justify-between px-5 bg-sol-darker/30 backdrop-blur-sm">
-      {/* Left: Address + Network */}
+    <header className="h-[56px] border-b border-hairline flex items-center justify-between px-5 bg-canvas">
+      {/* Left */}
       <div className="flex items-center gap-3">
-        <button
-          onClick={copyAddress}
-          className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-sol-card/50 border border-sol-border/40 hover:border-sol-purple/30 transition-all group"
-          title="Copy full address"
-        >
-          <div className="w-1.5 h-1.5 rounded-full bg-sol-green" />
-          <span className="text-xs font-mono text-sol-muted group-hover:text-sol-text transition-colors">{shortAddress}</span>
-          <span className="text-[10px] text-sol-muted">{copied ? '✓' : '⊕'}</span>
+        <button onClick={copy} className="flex items-center gap-2 px-3 py-1.5 rounded-pill bg-surface-strong text-body-sm text-muted hover:text-ink transition-colors">
+          <span className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
+          <span className="font-mono text-caption">{short}</span>
+          <span className="text-caption text-muted-soft">{copied ? '✓' : '⊕'}</span>
         </button>
-
-        <div className="badge badge-warn">
-          <div className="w-1 h-1 rounded-full bg-warning" />
-          Devnet
-        </div>
+        <span className="badge-pill text-[10px]">DEVNET</span>
       </div>
 
-      {/* Center: Balances */}
-      <div className="flex items-center gap-5">
-        <div className="flex items-center gap-2">
-          <div className="w-6 h-6 rounded-full bg-gradient-to-br from-sol-purple to-sol-purple-light flex items-center justify-center">
-            <span className="text-white text-[10px] font-bold">◎</span>
-          </div>
-          <div>
-            <div className="text-[10px] text-sol-muted leading-none">SOL</div>
-            <div className="text-sm font-bold text-sol-text leading-tight">
-              <AnimatedNumber value={balance.sol} decimals={4} />
-            </div>
-          </div>
+      {/* Center — Balances */}
+      <div className="flex items-center gap-6">
+        <div className="text-center">
+          <div className="text-caption text-muted">SOL</div>
+          <div className="text-title-sm text-ink"><Num value={balance.sol} decimals={4} /></div>
         </div>
-
-        <div className="w-px h-7 bg-sol-border/40" />
-
-        <div className="flex items-center gap-2">
-          <div className="w-6 h-6 rounded-full bg-gradient-to-br from-tether-green to-tether-dark flex items-center justify-center">
-            <span className="text-white text-[10px] font-bold">₮</span>
-          </div>
-          <div>
-            <div className="text-[10px] text-sol-muted leading-none">USDT</div>
-            <div className="text-sm font-bold text-sol-text leading-tight">
-              <AnimatedNumber value={balance.usdt} decimals={2} />
-            </div>
-          </div>
+        <div className="w-px h-6 bg-hairline" />
+        <div className="text-center">
+          <div className="text-caption text-muted">USDT</div>
+          <div className="text-title-sm text-ink"><Num value={balance.usdt} decimals={2} /></div>
         </div>
       </div>
 
-      {/* Right: AI Status + Lock */}
+      {/* Right */}
       <div className="flex items-center gap-3">
-        {/* AI Status */}
-        <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-sol-card/30 border border-sol-border/30">
-          <div className={`w-1.5 h-1.5 rounded-full ${activeModules > 0 ? 'bg-sol-green animate-pulse' : 'bg-sol-muted/30'}`} />
-          <span className="text-[10px] font-medium text-sol-muted">
-            {activeModules > 0 ? `${activeModules}/6 AI` : 'AI Loading'}
-          </span>
-        </div>
-
-        {/* Lock Button */}
-        <button
-          onClick={onLock}
-          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-sol-border/40 text-sol-muted hover:text-danger hover:border-danger/30 hover:bg-danger/5 transition-all"
-        >
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-          </svg>
-          <span className="text-[11px] font-medium">Lock</span>
-        </button>
+        <span className={`badge-pill text-[10px] ${mods > 0 ? 'badge-pill-blue' : ''}`}>
+          {mods > 0 ? `${mods}/6 AI` : 'Loading…'}
+        </span>
+        <button onClick={onLock} className="btn-secondary text-body-sm py-2 px-3">Lock</button>
       </div>
     </header>
   );

src/renderer/components/ui/index.tsx

@@ -1,43 +1,29 @@
 import React, { useState, useEffect, useCallback, createContext, useContext } from 'react';
 
-/* ═══════════════════════════════════════════════════════════════════════
-   TOAST SYSTEM
-   ═══════════════════════════════════════════════════════════════════════ */
-
-type ToastType = 'success' | 'error' | 'warning' | 'info';
-interface Toast { id: string; type: ToastType; title: string; message?: string; duration?: number; }
-interface ToastCtx { addToast: (t: Omit<Toast, 'id'>) => void; }
-
-const ToastContext = createContext<ToastCtx>({ addToast: () => {} });
+/* ═══ TOAST SYSTEM ═══════════════════════════════════════════════════ */
+type ToastType = 'success' | 'error' | 'info';
+interface Toast { id: string; type: ToastType; title: string; message?: string; }
+const ToastContext = createContext<{ addToast: (t: Omit<Toast, 'id'>) => void }>({ addToast: () => {} });
 export const useToast = () => useContext(ToastContext);
 
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const [toasts, setToasts] = useState<Toast[]>([]);
-
   const addToast = useCallback((t: Omit<Toast, 'id'>) => {
-    const id = Date.now().toString(36) + Math.random().toString(36).slice(2);
-    setToasts(prev => [...prev, { ...t, id }]);
-    setTimeout(() => setToasts(prev => prev.filter(x => x.id !== id)), t.duration ?? 4000);
+    const id = Date.now().toString(36);
+    setToasts(p => [...p, { ...t, id }]);
+    setTimeout(() => setToasts(p => p.filter(x => x.id !== id)), 4000);
   }, []);
-
   return (
     <ToastContext.Provider value={{ addToast }}>
       {children}
-      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
         {toasts.map(t => (
-          <div key={t.id} className="toast-enter pointer-events-auto" onClick={() => setToasts(prev => prev.filter(x => x.id !== t.id))}>
-            <div className={`glass-strong rounded-xl px-4 py-3 min-w-[280px] max-w-[380px] shadow-card flex items-start gap-3 cursor-pointer hover:opacity-90 transition-opacity ${
-              t.type === 'success' ? 'border-l-2 border-l-sol-green' :
-              t.type === 'error' ? 'border-l-2 border-l-danger' :
-              t.type === 'warning' ? 'border-l-2 border-l-warning' :
-              'border-l-2 border-l-info'
-            }`}>
-              <span className="text-lg mt-0.5">
-                {t.type === 'success' ? '✅' : t.type === 'error' ? '❌' : t.type === 'warning' ? '⚠️' : 'ℹ️'}
-              </span>
-              <div className="flex-1 min-w-0">
-                <div className="text-sm font-semibold text-sol-text">{t.title}</div>
-                {t.message && <div className="text-xs text-sol-muted mt-0.5 truncate">{t.message}</div>}
+          <div key={t.id} className="bg-canvas rounded-xl p-4 shadow-soft border border-hairline min-w-[300px] page-enter cursor-pointer" onClick={() => setToasts(p => p.filter(x => x.id !== t.id))}>
+            <div className="flex items-center gap-3">
+              <div className={`w-2 h-2 rounded-full ${t.type === 'success' ? 'bg-semantic-up' : t.type === 'error' ? 'bg-semantic-down' : 'bg-primary'}`} />
+              <div>
+                <div className="text-title-sm text-ink">{t.title}</div>
+                {t.message && <div className="text-body-sm text-body mt-0.5">{t.message}</div>}
               </div>
             </div>
           </div>
@@ -47,187 +33,69 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
-/* ═══════════════════════════════════════════════════════════════════════
-   MODAL
-   ═══════════════════════════════════════════════════════════════════════ */
-
-interface ModalProps {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export function Modal({ open, onClose, title, children, size = 'md' }: ModalProps) {
-  if (!open) return null;
-  const widths = { sm: 'max-w-sm', md: 'max-w-lg', lg: 'max-w-2xl' };
-  return (
-    <div className="fixed inset-0 z-40 flex items-center justify-center fade-in" onClick={onClose}>
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
-      <div
-        className={`relative ${widths[size]} w-full mx-4 glass-strong rounded-3xl p-6 shadow-card scale-in`}
-        onClick={e => e.stopPropagation()}
-      >
-        {title && (
-          <div className="flex items-center justify-between mb-5">
-            <h3 className="text-lg font-bold text-sol-text">{title}</h3>
-            <button onClick={onClose} className="w-8 h-8 rounded-lg flex items-center justify-center text-sol-muted hover:text-sol-text hover:bg-sol-border/30 transition-all">✕</button>
-          </div>
-        )}
-        {children}
-      </div>
-    </div>
-  );
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   SHIMMER SKELETON
-   ═══════════════════════════════════════════════════════════════════════ */
-
-export function Shimmer({ className = '', height = 'h-4' }: { className?: string; height?: string }) {
-  return <div className={`shimmer rounded-lg ${height} ${className}`} />;
-}
-
-export function ShimmerCard() {
-  return (
-    <div className="glass rounded-2xl p-6 space-y-3">
-      <Shimmer height="h-3" className="w-24" />
-      <Shimmer height="h-8" className="w-40" />
-      <Shimmer height="h-3" className="w-32" />
-    </div>
-  );
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   ANIMATED COUNTER (for balance display)
-   ═══════════════════════════════════════════════════════════════════════ */
-
-export function AnimatedNumber({ value, decimals = 2, prefix = '', suffix = '', className = '' }: {
-  value: number; decimals?: number; prefix?: string; suffix?: string; className?: string;
-}) {
+/* ═══ ANIMATED NUMBER (CoinbaseMono) ═════════════════════════════════ */
+export function Num({ value, decimals = 2, prefix = '', suffix = '' }: { value: number; decimals?: number; prefix?: string; suffix?: string }) {
   const [display, setDisplay] = useState(value);
-
   useEffect(() => {
     const diff = value - display;
-    if (Math.abs(diff) < 0.001) { setDisplay(value); return; }
-    const steps = 20;
+    if (Math.abs(diff) < 0.0001) { setDisplay(value); return; }
     let step = 0;
     const interval = setInterval(() => {
       step++;
-      const progress = step / steps;
-      const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
-      setDisplay(display + diff * eased);
-      if (step >= steps) { setDisplay(value); clearInterval(interval); }
-    }, 25);
+      setDisplay(display + diff * (1 - Math.pow(1 - step / 16, 3)));
+      if (step >= 16) { setDisplay(value); clearInterval(interval); }
+    }, 30);
     return () => clearInterval(interval);
   }, [value]);
-
-  return (
-    <span className={`ticker ${className}`}>
-      {prefix}{display.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}{suffix}
-    </span>
-  );
+  return <span className="number-mono">{prefix}{display.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}{suffix}</span>;
 }
 
-/* ═══════════════════════════════════════════════════════════════════════
-   CIRCULAR PROGRESS (for security score)
-   ═══════════════════════════════════════════════════════════════════════ */
-
-export function CircularProgress({ value, size = 80, strokeWidth = 6, color = '#9945FF', children }: {
-  value: number; size?: number; strokeWidth?: number; color?: string; children?: React.ReactNode;
+/* ═══ ASSET ROW ══════════════════════════════════════════════════════ */
+export function AssetRow({ icon, name, ticker, price, change, onClick }: {
+  icon: string; name: string; ticker: string; price: number; change?: number; onClick?: () => void;
 }) {
-  const r = (size - strokeWidth) / 2;
-  const circ = 2 * Math.PI * r;
-  const offset = circ - (value / 100) * circ;
-  return (
-    <div className="relative inline-flex items-center justify-center" style={{ width: size, height: size }}>
-      <svg width={size} height={size} className="-rotate-90">
-        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(45,45,94,0.4)" strokeWidth={strokeWidth} />
-        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={strokeWidth}
-          strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round"
-          className="transition-all duration-1000 ease-out" />
-      </svg>
-      <div className="absolute inset-0 flex items-center justify-center">{children}</div>
-    </div>
-  );
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   PARTICLES BACKGROUND (for lock/onboarding screens)
-   ═══════════════════════════════════════════════════════════════════════ */
-
-export function ParticlesBackground() {
-  const particles = Array.from({ length: 20 }, (_, i) => ({
-    id: i,
-    size: 2 + Math.random() * 4,
-    x: Math.random() * 100,
-    y: Math.random() * 100,
-    dur: 4 + Math.random() * 8,
-    opacity: 0.05 + Math.random() * 0.15,
-    color: i % 3 === 0 ? '#9945FF' : i % 3 === 1 ? '#14F195' : '#26A17B',
-    x1: -30 + Math.random() * 60, y1: -40 + Math.random() * 80,
-    x2: -30 + Math.random() * 60, y2: -60 + Math.random() * 120,
-    x3: -30 + Math.random() * 60, y3: -30 + Math.random() * 60,
-  }));
-
-  return (
-    <div className="absolute inset-0 overflow-hidden pointer-events-none">
-      {particles.map(p => (
-        <div key={p.id} className="particle" style={{
-          width: p.size, height: p.size,
-          left: `${p.x}%`, top: `${p.y}%`,
-          background: p.color,
-          '--dur': `${p.dur}s`, '--opacity': p.opacity,
-          '--x1': `${p.x1}px`, '--y1': `${p.y1}px`,
-          '--x2': `${p.x2}px`, '--y2': `${p.y2}px`,
-          '--x3': `${p.x3}px`, '--y3': `${p.y3}px`,
-        } as any} />
-      ))}
-    </div>
-  );
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   ORBIT LOADER (for AI loading states)
-   ═══════════════════════════════════════════════════════════════════════ */
-
-export function OrbitLoader({ size = 64 }: { size?: number }) {
   return (
-    <div className="relative" style={{ width: size, height: size }}>
-      <div className="orbit-ring absolute inset-0" />
-      <div className="orbit-ring orbit-ring-2 absolute" style={{ inset: size * 0.15 }} />
-      <div className="orbit-ring orbit-ring-3 absolute" style={{ inset: size * 0.3 }} />
-      <div className="absolute inset-0 flex items-center justify-center">
-        <div className="w-2 h-2 rounded-full bg-sol-purple animate-pulse" />
+    <div className="asset-row px-4 cursor-pointer" onClick={onClick}>
+      <div className="asset-icon mr-3 text-sm font-bold text-ink">{icon}</div>
+      <div className="flex-1">
+        <div className="text-title-sm text-ink">{name}</div>
+        <div className="text-caption text-muted">{ticker}</div>
+      </div>
+      <div className="text-right">
+        <div className="number-mono text-number-display text-ink">${price.toLocaleString(undefined, { minimumFractionDigits: 2 })}</div>
+        {change !== undefined && (
+          <div className={`number-mono text-caption ${change >= 0 ? 'text-semantic-up' : 'text-semantic-down'}`}>
+            {change >= 0 ? '+' : ''}{change.toFixed(2)}%
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
-/* ═══════════════════════════════════════════════════════════════════════
-   STEP INDICATOR (for onboarding)
-   ═══════════════════════════════════════════════════════════════════════ */
+/* ═══ PRODUCT UI CARD (Dark) ═════════════════════════════════════════ */
+export function ProductCard({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return <div className={`card-dark ${className}`}>{children}</div>;
+}
 
+/* ═══ STEP INDICATOR ═════════════════════════════════════════════════ */
 export function StepIndicator({ steps, current }: { steps: string[]; current: number }) {
   return (
-    <div className="flex items-center justify-center gap-2 mb-8">
+    <div className="flex items-center justify-center gap-3 mb-12">
       {steps.map((label, i) => (
         <React.Fragment key={i}>
-          <div className="flex flex-col items-center gap-1">
-            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-500 ${
-              i < current ? 'bg-sol-green text-sol-dark' :
-              i === current ? 'bg-sol-purple text-white glow-purple' :
-              'bg-sol-border text-sol-muted'
+          <div className="flex flex-col items-center gap-1.5">
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-caption-strong transition-colors ${
+              i < current ? 'bg-primary text-on-primary' :
+              i === current ? 'bg-primary text-on-primary' :
+              'bg-surface-strong text-muted'
             }`}>
               {i < current ? '✓' : i + 1}
             </div>
-            <span className={`text-[10px] ${i <= current ? 'text-sol-text' : 'text-sol-muted'}`}>{label}</span>
+            <span className={`text-caption ${i <= current ? 'text-ink' : 'text-muted'}`}>{label}</span>
           </div>
           {i < steps.length - 1 && (
-            <div className={`w-12 h-0.5 rounded-full transition-all duration-500 -mt-4 ${
-              i < current ? 'bg-sol-green' : 'bg-sol-border'
-            }`} />
+            <div className={`w-10 h-0.5 -mt-5 rounded-full ${i < current ? 'bg-primary' : 'bg-surface-strong'}`} />
           )}
         </React.Fragment>
       ))}
@@ -235,28 +103,31 @@ export function StepIndicator({ steps, current }: { steps: string[]; current: nu
   );
 }
 
-/* ═══════════════════════════════════════════════════════════════════════
-   ICON BUTTON
-   ═══════════════════════════════════════════════════════════════════════ */
-
-export function IconButton({ icon, label, onClick, active, color = 'purple', size = 'md' }: {
-  icon: string; label: string; onClick?: () => void; active?: boolean; color?: 'purple' | 'green' | 'tether' | 'danger' | 'warning';
-  size?: 'sm' | 'md' | 'lg';
-}) {
-  const sizes = { sm: 'w-10 h-10 text-lg', md: 'w-14 h-14 text-xl', lg: 'w-20 h-20 text-3xl' };
-  const colors = {
-    purple: active ? 'bg-sol-purple/20 text-sol-purple border-sol-purple/30' : 'bg-sol-card text-sol-muted border-sol-border hover:border-sol-purple/30 hover:text-sol-purple',
-    green: active ? 'bg-sol-green/20 text-sol-green border-sol-green/30' : 'bg-sol-card text-sol-muted border-sol-border hover:border-sol-green/30 hover:text-sol-green',
-    tether: active ? 'bg-tether-green/20 text-tether-green border-tether-green/30' : 'bg-sol-card text-sol-muted border-sol-border hover:border-tether-green/30 hover:text-tether-green',
-    danger: 'bg-sol-card text-sol-muted border-sol-border hover:border-danger/30 hover:text-danger',
-    warning: 'bg-sol-card text-sol-muted border-sol-border hover:border-warning/30 hover:text-warning',
-  };
+/* ═══ PIPELINE TRACE (shows which QVAC module did what) ══════════════ */
+export function PipelineTrace({ steps }: { steps: Array<{ module: string; operation: string; input: string; output: string; durationMs: number }> }) {
+  if (!steps || steps.length === 0) return null;
   return (
-    <button onClick={onClick} className="flex flex-col items-center gap-1.5 group">
-      <div className={`${sizes[size]} rounded-2xl border flex items-center justify-center transition-all duration-300 ${colors[color]} group-hover:scale-105`}>
-        {icon}
+    <div className="bg-surface-soft rounded-xl p-4 mt-3">
+      <div className="text-caption-strong text-muted uppercase tracking-wider mb-2">QVAC Pipeline Trace</div>
+      <div className="space-y-1.5">
+        {steps.map((s, i) => (
+          <div key={i} className="flex items-start gap-2 text-caption">
+            <div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 shrink-0" />
+            <div className="flex-1 min-w-0">
+              <span className="font-mono text-primary text-caption-strong">{s.module}</span>
+              <span className="text-muted mx-1">→</span>
+              <span className="text-body">{s.operation}</span>
+              <span className="text-muted-soft ml-1 number-mono">{s.durationMs}ms</span>
+            </div>
+          </div>
+        ))}
       </div>
-      <span className="text-[11px] font-medium text-sol-muted group-hover:text-sol-text transition-colors">{label}</span>
-    </button>
+    </div>
   );
 }
+
+/* ═══ RISK BADGE ═════════════════════════════════════════════════════ */
+export function RiskBadge({ level, score }: { level: string; score: number }) {
+  const colors: Record<string, string> = { safe: 'badge-pill-green', caution: 'badge-pill', warning: 'badge-pill-red', danger: 'badge-pill-red' };
+  return <span className={`badge-pill ${colors[level] || 'badge-pill'}`}>{level.toUpperCase()} · {score}</span>;
+}

src/renderer/index.css

@@ -2,256 +2,193 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ─── Reset & Base ───────────────────────────────────────────────────── */
+/* ─── Reset ──────────────────────────────────────────────────────────── */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  background: #0A0A1E;
-  color: #E0E0FF;
+  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background: #ffffff;
+  color: #0a0b0d;
   overflow: hidden;
   height: 100vh;
   -webkit-app-region: drag;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 button, input, select, textarea, a, label { -webkit-app-region: no-drag; }
 
 /* ─── Scrollbar ──────────────────────────────────────────────────────── */
-::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #2D2D5E; border-radius: 10px; }
-::-webkit-scrollbar-thumb:hover { background: #9945FF; }
-
-/* ─── Gradient Mesh Background ───────────────────────────────────────── */
-.mesh-bg {
-  background:
-    radial-gradient(ellipse at 20% 50%, rgba(153, 69, 255, 0.08) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 20%, rgba(20, 241, 149, 0.05) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 80%, rgba(38, 161, 123, 0.06) 0%, transparent 50%),
-    #0A0A1E;
-}
+::-webkit-scrollbar-thumb { background: #dee1e6; border-radius: 100px; }
+::-webkit-scrollbar-thumb:hover { background: #7c828a; }
 
-/* ─── Glassmorphism ──────────────────────────────────────────────────── */
-.glass {
-  background: rgba(22, 22, 52, 0.65);
-  backdrop-filter: blur(24px) saturate(1.4);
-  -webkit-backdrop-filter: blur(24px) saturate(1.4);
-  border: 1px solid rgba(153, 69, 255, 0.08);
-}
-.glass-strong {
-  background: rgba(26, 26, 62, 0.85);
-  backdrop-filter: blur(32px) saturate(1.6);
-  -webkit-backdrop-filter: blur(32px) saturate(1.6);
-  border: 1px solid rgba(153, 69, 255, 0.12);
-}
-.glass-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
-.glass-hover:hover {
-  background: rgba(30, 30, 68, 0.8);
-  border-color: rgba(153, 69, 255, 0.2);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 32px rgba(153, 69, 255, 0.1);
+/* ─── Display Type (Inter as CoinbaseDisplay substitute) ─────────────── */
+.display-text {
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  letter-spacing: -0.02em;
 }
 
-/* ─── Gradient Text ──────────────────────────────────────────────────── */
-.gradient-text {
-  background: linear-gradient(135deg, #9945FF 0%, #14F195 50%, #26A17B 100%);
-  background-size: 200% 200%;
-  animation: gradient-shift 6s ease infinite;
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-.gradient-text-static {
-  background: linear-gradient(135deg, #9945FF, #14F195);
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-@keyframes gradient-shift {
-  0%,100% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
+/* ─── Mono Numbers ───────────────────────────────────────────────────── */
+.number-mono {
+  font-family: 'JetBrains Mono', 'Geist Mono', monospace;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
 }
 
-/* ─── Glow FX ────────────────────────────────────────────────────────── */
-.glow-purple { box-shadow: 0 0 24px rgba(153, 69, 255, 0.25), 0 0 48px rgba(153, 69, 255, 0.08); }
-.glow-green  { box-shadow: 0 0 24px rgba(20, 241, 149, 0.25), 0 0 48px rgba(20, 241, 149, 0.08); }
-.glow-tether { box-shadow: 0 0 24px rgba(38, 161, 123, 0.25), 0 0 48px rgba(38, 161, 123, 0.08); }
-.glow-danger { box-shadow: 0 0 24px rgba(255, 68, 102, 0.3); }
-
-/* ─── Page Transitions ───────────────────────────────────────────────── */
-.page-enter { animation: page-in 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
-@keyframes page-in {
-  from { opacity: 0; transform: translateY(16px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-.slide-enter { animation: slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
-@keyframes slide-up {
-  from { transform: translateY(24px); opacity: 0; }
-  to   { transform: translateY(0); opacity: 1; }
-}
-.fade-in { animation: fadein 0.3s ease-out; }
-@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
-.scale-in { animation: scalein 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
-@keyframes scalein {
-  from { opacity: 0; transform: scale(0.9); }
-  to   { opacity: 1; transform: scale(1); }
-}
+/* ═══ COINBASE BUTTON SYSTEM ═════════════════════════════════════════ */
 
-/* ─── Waveform Animation ─────────────────────────────────────────────── */
-.waveform-bar { animation: waveform var(--delay, 0.5s) ease-in-out infinite alternate; }
-@keyframes waveform { 0% { height: 3px; } 100% { height: var(--max-height, 28px); } }
+.btn-primary {
+  @apply inline-flex items-center justify-center px-5 py-3 text-button font-semibold text-on-primary rounded-pill transition-colors;
+  background-color: #0052ff;
+}
+.btn-primary:hover { background-color: #003ecc; }
+.btn-primary:active { background-color: #003ecc; }
+.btn-primary:disabled { background-color: #a8b8cc; cursor: not-allowed; }
 
-/* ─── Shimmer Loader ─────────────────────────────────────────────────── */
-.shimmer {
-  background: linear-gradient(90deg, rgba(26,26,62,0.4) 25%, rgba(45,45,94,0.6) 50%, rgba(26,26,62,0.4) 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
+.btn-primary-lg {
+  @apply inline-flex items-center justify-center px-8 py-4 text-button font-semibold text-on-primary rounded-pill transition-colors;
+  background-color: #0052ff;
+  height: 56px;
 }
-@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+.btn-primary-lg:hover { background-color: #003ecc; }
 
-/* ─── Recording Pulse ────────────────────────────────────────────────── */
-@keyframes rec-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 68, 102, 0.4); }
-  50% { opacity: 0.85; transform: scale(1.08); box-shadow: 0 0 0 16px rgba(255, 68, 102, 0); }
+.btn-secondary {
+  @apply inline-flex items-center justify-center px-5 py-3 text-button font-semibold text-ink bg-surface-strong rounded-pill transition-colors;
 }
-.recording-pulse { animation: rec-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-
-/* ─── Orbit Rings (loading / voice) ──────────────────────────────────── */
-.orbit-ring {
-  border: 2px solid transparent;
-  border-top-color: #9945FF;
-  border-radius: 50%;
-  animation: orbit 2s linear infinite;
+.btn-secondary:hover { background-color: #dee1e6; }
+
+.btn-secondary-dark {
+  @apply inline-flex items-center justify-center px-5 py-3 text-button font-semibold text-on-dark rounded-pill transition-colors;
+  background-color: #16181c;
 }
-.orbit-ring-2 { border-top-color: #14F195; animation-duration: 3s; animation-direction: reverse; }
-.orbit-ring-3 { border-top-color: #26A17B; animation-duration: 4s; }
-@keyframes orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-
-/* ─── Floating Particles ─────────────────────────────────────────────── */
-.particle {
-  position: absolute;
-  border-radius: 50%;
-  animation: float var(--dur, 6s) ease-in-out infinite;
-  opacity: var(--opacity, 0.15);
+.btn-secondary-dark:hover { background-color: #1e2025; }
+
+.btn-outline-dark {
+  @apply inline-flex items-center justify-center px-5 py-3 text-button font-semibold text-on-dark rounded-pill transition-colors border border-white/30 bg-transparent;
 }
-@keyframes float {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  25% { transform: translate(var(--x1, 20px), var(--y1, -30px)) scale(1.1); }
-  50% { transform: translate(var(--x2, -15px), var(--y2, -50px)) scale(0.9); }
-  75% { transform: translate(var(--x3, 25px), var(--y3, -20px)) scale(1.05); }
+.btn-outline-dark:hover { border-color: #ffffff; }
+
+.btn-text {
+  @apply inline-flex items-center justify-center px-2 py-1 font-semibold rounded-pill transition-colors bg-transparent;
+  color: #0052ff;
+  font-size: 16px;
 }
+.btn-text:hover { background-color: rgba(0, 82, 255, 0.06); }
 
-/* ─── Animated Counter ───────────────────────────────────────────────── */
-.num-scroll { display: inline-block; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
+/* ═══ COINBASE CARDS ═════════════════════════════════════════════════ */
 
-/* ─── Button Hover FX ────────────────────────────────────────────────── */
-.btn-primary {
-  @apply relative overflow-hidden rounded-xl font-semibold transition-all duration-300;
-  background: linear-gradient(135deg, #9945FF, #7B3FE4);
-}
-.btn-primary::before {
-  content: '';
-  @apply absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300;
-  background: linear-gradient(135deg, #B06CFF, #9945FF);
+.card {
+  @apply bg-canvas rounded-xl p-xl;
+  border: 1px solid #dee1e6;
 }
-.btn-primary:hover::before { @apply opacity-100; }
-.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(153, 69, 255, 0.3); }
-.btn-primary:active { transform: translateY(0); }
-.btn-primary > * { @apply relative z-10; }
-
-.btn-ghost {
-  @apply rounded-xl font-medium transition-all duration-300 border border-sol-border text-sol-muted;
+.card-flat {
+  @apply bg-canvas rounded-xl p-xl;
 }
-.btn-ghost:hover {
-  @apply text-sol-text border-sol-purple/40;
-  background: rgba(153, 69, 255, 0.06);
+.card-dark {
+  @apply rounded-xl p-xl;
+  background: #16181c;
+  color: #ffffff;
 }
 
-/* ─── Input Focus Ring ───────────────────────────────────────────────── */
+/* ═══ COINBASE FORMS ═════════════════════════════════════════════════ */
+
 .input-field {
-  @apply w-full px-4 py-3 bg-sol-dark/80 border border-sol-border rounded-xl text-sm transition-all duration-200;
+  @apply w-full px-4 py-3.5 text-body-md bg-canvas text-ink rounded-md transition-all;
+  border: 1px solid #dee1e6;
+  height: 48px;
 }
 .input-field:focus {
-  @apply outline-none border-sol-purple/60;
-  box-shadow: 0 0 0 3px rgba(153, 69, 255, 0.1);
+  outline: none;
+  border-color: #0052ff;
+  border-width: 2px;
+  padding-left: 15px; /* compensate for 2px border */
 }
+.input-field::placeholder { color: #7c828a; }
 
-/* ─── Badge ──────────────────────────────────────────────────────────── */
-.badge { @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium; }
-.badge-green  { @apply bg-sol-green/15 text-sol-green; }
-.badge-purple { @apply bg-sol-purple/15 text-sol-purple; }
-.badge-tether { @apply bg-tether-green/15 text-tether-green; }
-.badge-danger { @apply bg-danger/15 text-danger; }
-.badge-warn   { @apply bg-warning/15 text-warning; }
-.badge-muted  { @apply bg-sol-muted/10 text-sol-muted; }
-
-/* ─── Toast / Notification ───────────────────────────────────────────── */
-.toast-enter { animation: toast-slide 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
-@keyframes toast-slide {
-  from { opacity: 0; transform: translateX(100%) scale(0.9); }
-  to   { opacity: 1; transform: translateX(0) scale(1); }
-}
-.toast-exit { animation: toast-out 0.25s ease-in forwards; }
-@keyframes toast-out {
-  to { opacity: 0; transform: translateX(100%) scale(0.9); }
+.search-pill {
+  @apply w-full px-5 py-3 text-body-sm bg-surface-strong text-ink rounded-pill transition-all;
+  height: 44px;
+  border: none;
 }
+.search-pill:focus { outline: none; box-shadow: 0 0 0 2px #0052ff; }
+
+/* ═══ BADGE PILLS ════════════════════════════════════════════════════ */
 
-/* ─── Progress Bar ───────────────────────────────────────────────────── */
-.progress-bar {
-  @apply h-1.5 rounded-full overflow-hidden bg-sol-border/30;
+.badge-pill {
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-pill text-caption-strong uppercase tracking-wider;
+  background: #eef0f3;
+  color: #0a0b0d;
 }
-.progress-fill {
-  @apply h-full rounded-full transition-all duration-700 ease-out;
-  background: linear-gradient(90deg, #9945FF, #14F195);
+.badge-pill-blue {
+  background: rgba(0, 82, 255, 0.08);
+  color: #0052ff;
+}
+.badge-pill-green {
+  background: rgba(5, 177, 105, 0.08);
+  color: #05b169;
+}
+.badge-pill-red {
+  background: rgba(207, 32, 47, 0.08);
+  color: #cf202f;
 }
 
-/* ─── Divider ────────────────────────────────────────────────────────── */
-.divider {
-  @apply w-full h-px;
-  background: linear-gradient(90deg, transparent, rgba(153, 69, 255, 0.15), transparent);
+/* ═══ DARK HERO BAND ═════════════════════════════════════════════════ */
+
+.hero-band-dark {
+  background: #0a0b0d;
+  color: #ffffff;
+  padding: 96px 0;
 }
 
-/* ─── Sidebar Active Indicator ───────────────────────────────────────── */
-.nav-active-bar {
-  @apply absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-8 rounded-r-full;
-  background: linear-gradient(180deg, #9945FF, #14F195);
+/* ═══ ASSET ROW ══════════════════════════════════════════════════════ */
+
+.asset-row {
+  @apply flex items-center py-4 transition-colors;
+  border-bottom: 1px solid #eef0f3;
 }
+.asset-row:hover { background: #f7f7f7; }
+.asset-row:last-child { border-bottom: none; }
 
-/* ─── Scrollbar for chat ─────────────────────────────────────────────── */
-.chat-scroll::-webkit-scrollbar { width: 4px; }
-.chat-scroll::-webkit-scrollbar-thumb { background: rgba(153, 69, 255, 0.2); border-radius: 10px; }
-
-/* ─── Circular Voice Button Glow ─────────────────────────────────────── */
-.voice-btn-idle {
-  box-shadow:
-    0 0 0 0 rgba(153, 69, 255, 0.4),
-    0 0 20px rgba(153, 69, 255, 0.2),
-    inset 0 0 20px rgba(153, 69, 255, 0.1);
-  animation: voice-idle 3s ease-in-out infinite;
+.asset-icon {
+  @apply flex items-center justify-center rounded-full;
+  width: 32px; height: 32px;
+  background: #eef0f3;
 }
-@keyframes voice-idle {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(153, 69, 255, 0.4), 0 0 20px rgba(153, 69, 255, 0.2); }
-  50% { box-shadow: 0 0 0 12px rgba(153, 69, 255, 0), 0 0 40px rgba(153, 69, 255, 0.3); }
+
+/* ═══ HAIRLINE DIVIDER ═══════════════════════════════════════════════ */
+
+.hairline { @apply w-full; height: 1px; background: #dee1e6; }
+.hairline-soft { @apply w-full; height: 1px; background: #eef0f3; }
+
+/* ═══ PAGE TRANSITIONS ═══════════════════════════════════════════════ */
+
+.page-enter { animation: page-fade 0.25s ease-out; }
+@keyframes page-fade {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.voice-btn-active {
-  box-shadow:
-    0 0 0 0 rgba(255, 68, 102, 0.5),
-    0 0 30px rgba(255, 68, 102, 0.3);
-  animation: voice-active 1s ease-in-out infinite;
+/* ═══ TOGGLE SWITCH ══════════════════════════════════════════════════ */
+
+.toggle {
+  @apply relative inline-flex items-center cursor-pointer;
+  width: 44px; height: 24px;
+}
+.toggle-track {
+  @apply w-full h-full rounded-full transition-colors;
+  background: #dee1e6;
 }
-@keyframes voice-active {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 102, 0.5), 0 0 30px rgba(255, 68, 102, 0.3); }
-  50% { box-shadow: 0 0 0 20px rgba(255, 68, 102, 0), 0 0 50px rgba(255, 68, 102, 0.4); }
+.toggle-track.active { background: #0052ff; }
+.toggle-thumb {
+  @apply absolute w-5 h-5 rounded-full bg-white shadow-soft transition-all;
+  top: 2px; left: 2px;
 }
+.toggle-thumb.active { left: 22px; }
+
+/* ═══ SECTION RHYTHM ═════════════════════════════════════════════════ */
 
-/* ─── Staggered Children ─────────────────────────────────────────────── */
-.stagger > * { animation: slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
-.stagger > *:nth-child(1) { animation-delay: 0ms; }
-.stagger > *:nth-child(2) { animation-delay: 60ms; }
-.stagger > *:nth-child(3) { animation-delay: 120ms; }
-.stagger > *:nth-child(4) { animation-delay: 180ms; }
-.stagger > *:nth-child(5) { animation-delay: 240ms; }
-.stagger > *:nth-child(6) { animation-delay: 300ms; }
-.stagger > *:nth-child(7) { animation-delay: 360ms; }
-.stagger > *:nth-child(8) { animation-delay: 420ms; }
-
-/* ─── Number Ticker ──────────────────────────────────────────────────── */
-.ticker { font-variant-numeric: tabular-nums; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
+.section-light { @apply bg-canvas; padding: 96px 0; }
+.section-soft { @apply bg-surface-soft; padding: 96px 0; }
+.section-dark { background: #0a0b0d; color: #ffffff; padding: 96px 0; }

src/renderer/index.html

@@ -1,15 +1,16 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta http-equiv="Content-Security-Policy" 
-    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.mainnet-beta.solana.com https://api.devnet.solana.com; object-src 'none'; base-uri 'self';">
-  <title>SolVox — Voice-First AI Wallet</title>
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.mainnet-beta.solana.com https://api.devnet.solana.com; font-src 'self' https://fonts.gstatic.com; object-src 'none'; base-uri 'self';">
+  <title>SolVox</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 </head>
-<body class="bg-sol-dark text-sol-text">
+<body>
   <div id="root"></div>
   <script type="module" src="./main.tsx"></script>
 </body>

src/renderer/pages/Dashboard.tsx

@@ -1,209 +1,118 @@
 import React, { useEffect, useState } from 'react';
-import { AnimatedNumber, IconButton, ShimmerCard, CircularProgress } from '../components/ui/index';
+import { Num, AssetRow, PipelineTrace } from '../components/ui/index';
 
-interface DashboardProps {
-  balance: { sol: number; usdt: number };
-  publicKey: string | null;
-  onRefresh: () => void;
-  onNavigate: (page: any) => void;
-}
+interface Props { balance: { sol: number; usdt: number }; publicKey: string | null; onRefresh: () => void; onNavigate: (p: any) => void; }
 
-export default function Dashboard({ balance, publicKey, onRefresh, onNavigate }: DashboardProps) {
-  const [recentTxs, setRecentTxs] = useState<any[]>([]);
+export default function Dashboard({ balance, publicKey, onRefresh, onNavigate }: Props) {
+  const [txs, setTxs] = useState<any[]>([]);
   const [aiStatus, setAiStatus] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => { loadData(); }, []);
 
-  const loadData = async () => {
-    if (!window.solvox) { setLoading(false); return; }
-    try {
-      const [h, s] = await Promise.all([window.solvox.wallet.getHistory(5), window.solvox.ai.getStatus()]);
-      if (h.success) setRecentTxs(h.history || []);
-      setAiStatus(s);
-    } catch {}
-    setLoading(false);
-  };
+  useEffect(() => {
+    if (!window.solvox) return;
+    Promise.all([window.solvox.wallet.getHistory(5), window.solvox.ai.getStatus()])
+      .then(([h, s]) => { if (h.success) setTxs(h.history || []); setAiStatus(s); }).catch(() => {});
+  }, []);
 
-  const totalUSD = balance.sol * 170 + balance.usdt;
-  const activeModules = aiStatus ? [aiStatus.llm, aiStatus.transcription, aiStatus.tts, aiStatus.embed, aiStatus.translation, aiStatus.ocr].filter(Boolean).length : 0;
+  const total = balance.sol * 170 + balance.usdt;
+  const mods = aiStatus ? [
+    { k: 'llm', n: 'LLM', p: '@qvac/llm-llamacpp' }, { k: 'transcription', n: 'Speech-to-Text', p: '@qvac/transcription-whispercpp' },
+    { k: 'tts', n: 'Text-to-Speech', p: '@qvac/tts-onnx' }, { k: 'embed', n: 'Embeddings', p: '@qvac/embed-llamacpp' },
+    { k: 'translation', n: 'Translation', p: '@qvac/translation-nmtcpp' }, { k: 'ocr', n: 'OCR', p: '@qvac/ocr-onnx' },
+  ] : [];
 
   return (
-    <div className="space-y-5 stagger">
-      {/* ── Hero Balance Card ─────────────────────────────────────────── */}
-      <div className="relative overflow-hidden rounded-3xl p-6 bg-gradient-to-br from-sol-purple/10 via-sol-card to-tether-green/5 border border-sol-purple/10">
-        <div className="absolute -right-16 -top-16 w-48 h-48 rounded-full bg-sol-purple/8 blur-3xl" />
-        <div className="absolute -left-8 -bottom-8 w-32 h-32 rounded-full bg-sol-green/6 blur-2xl" />
+    <div className="max-w-content mx-auto px-8 py-section">
+      {/* ── Hero Band ──────────────────────────────────────────────── */}
+      <section className="bg-surface-dark rounded-xl p-xl mb-12 relative overflow-hidden">
         <div className="relative z-10">
-          <div className="flex items-start justify-between">
-            <div>
-              <div className="text-sm text-sol-muted mb-1 font-medium">Total Portfolio Value</div>
-              <div className="text-4xl font-extrabold gradient-text-static mb-1">
-                <AnimatedNumber value={totalUSD} decimals={2} prefix="$" />
-              </div>
-              <div className="flex items-center gap-3 mt-2">
-                <div className="badge badge-green">
-                  <div className="w-1 h-1 rounded-full bg-sol-green" />
-                  Devnet
-                </div>
-                <button onClick={onRefresh} className="text-xs text-sol-muted hover:text-sol-purple transition-colors flex items-center gap-1">
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
-                  Refresh
-                </button>
-              </div>
-            </div>
-            <CircularProgress value={activeModules / 6 * 100} size={72} strokeWidth={5} color="#14F195">
-              <div className="text-center">
-                <div className="text-sm font-bold text-sol-green">{activeModules}</div>
-                <div className="text-[8px] text-sol-muted">/6 AI</div>
-              </div>
-            </CircularProgress>
+          <div className="text-on-dark-soft text-body-sm mb-1">Total portfolio value</div>
+          <div className="text-on-dark display-text text-display-lg mb-2"><Num value={total} decimals={2} prefix="$" /></div>
+          <div className="flex items-center gap-3 mt-4">
+            <button onClick={() => onNavigate('send')} className="btn-primary">Send</button>
+            <button onClick={() => onNavigate('voice')} className="btn-secondary-dark">Voice AI</button>
+            <button onClick={onRefresh} className="btn-outline-dark">Refresh</button>
           </div>
         </div>
-      </div>
-
-      {/* ── Token Cards ───────────────────────────────────────────────── */}
-      <div className="grid grid-cols-2 gap-4">
-        <div className="glass glass-hover rounded-2xl p-5">
-          <div className="flex items-center gap-3 mb-3">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sol-purple to-sol-purple-light flex items-center justify-center shadow-glow-sm">
-              <span className="text-white font-bold text-sm">◎</span>
-            </div>
-            <div>
-              <div className="text-xs text-sol-muted font-medium">Solana</div>
-              <div className="text-lg font-bold"><AnimatedNumber value={balance.sol} decimals={4} /></div>
-            </div>
+        {/* Floating product-UI card — Coinbase signature */}
+        <div className="absolute right-8 top-6 w-[260px]">
+          <div className="card-dark p-4 mb-2 shadow-soft">
+            <div className="text-on-dark-soft text-caption mb-1">SOL Balance</div>
+            <div className="text-on-dark number-mono text-number-display"><Num value={balance.sol} decimals={4} /></div>
+            <div className="text-on-dark-soft text-caption mt-1">≈ $<Num value={balance.sol * 170} decimals={2} /></div>
           </div>
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-sol-muted">≈ <AnimatedNumber value={balance.sol * 170} decimals={2} prefix="$" /></span>
-            <div className="progress-bar w-20"><div className="progress-fill" style={{ width: `${Math.min(100, balance.sol * 10)}%` }} /></div>
+          <div className="card-dark p-4 shadow-soft ml-4">
+            <div className="text-on-dark-soft text-caption mb-1">USDT Balance</div>
+            <div className="text-on-dark number-mono text-number-display"><Num value={balance.usdt} decimals={2} /></div>
           </div>
         </div>
+      </section>
 
-        <div className="glass glass-hover rounded-2xl p-5">
-          <div className="flex items-center gap-3 mb-3">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-tether-green to-tether-dark flex items-center justify-center shadow-glow-sm">
-              <span className="text-white font-bold text-sm">₮</span>
-            </div>
-            <div>
-              <div className="text-xs text-sol-muted font-medium">Tether USDT</div>
-              <div className="text-lg font-bold"><AnimatedNumber value={balance.usdt} decimals={2} /></div>
-            </div>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-sol-muted">≈ <AnimatedNumber value={balance.usdt} decimals={2} prefix="$" /></span>
-            <div className="progress-bar w-20"><div className="progress-fill" style={{ width: `${Math.min(100, balance.usdt / 10)}%`, background: 'linear-gradient(90deg, #26A17B, #14F195)' }} /></div>
-          </div>
+      {/* ── Assets ─────────────────────────────────────────────────── */}
+      <section className="mb-12">
+        <div className="text-title-lg display-text text-ink mb-6">Assets</div>
+        <div className="card">
+          <AssetRow icon="◎" name="Solana" ticker="SOL" price={balance.sol * 170} change={2.34} />
+          <AssetRow icon="₮" name="Tether" ticker="USDT" price={balance.usdt} change={0.01} />
         </div>
-      </div>
-
-      {/* ── Quick Actions ─────────────────────────────────────────────── */}
-      <div className="glass rounded-2xl p-5">
-        <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider mb-4">Quick Actions</div>
-        <div className="flex items-center justify-around">
-          <IconButton icon="↗" label="Send" color="purple" onClick={() => onNavigate('send')} />
-          <IconButton icon="↙" label="Receive" color="green" />
-          <IconButton icon="◎" label="Voice AI" color="tether" onClick={() => onNavigate('voice')} />
-          <IconButton icon="⊞" label="Scan QR" color="warning" />
-          <IconButton icon="☰" label="History" color="purple" onClick={() => onNavigate('history')} />
-        </div>
-      </div>
+      </section>
 
-      {/* ── AI Status + Recent Activity ───────────────────────────────── */}
-      <div className="grid grid-cols-5 gap-4">
-        {/* AI Engine — 3 cols */}
-        <div className="col-span-3 glass rounded-2xl p-5">
-          <div className="flex items-center justify-between mb-4">
-            <div className="text-sm font-bold text-sol-text">QVAC AI Engine</div>
-            <div className="badge badge-tether">
-              <div className="w-1 h-1 rounded-full bg-tether-green animate-pulse" />
-              Local
-            </div>
-          </div>
-          <div className="space-y-2.5 stagger">
-            {[
-              { name: 'LLM — Llama 3.2 3B',       active: aiStatus?.llm,           pkg: 'llm-llamacpp',            color: '#9945FF' },
-              { name: 'Speech-to-Text — Whisper',   active: aiStatus?.transcription, pkg: 'transcription-whispercpp', color: '#14F195' },
-              { name: 'Text-to-Speech — Piper',     active: aiStatus?.tts,           pkg: 'tts-onnx',                color: '#26A17B' },
-              { name: 'Embeddings — Nomic',          active: aiStatus?.embed,         pkg: 'embed-llamacpp',           color: '#B06CFF' },
-              { name: 'Translation — MarianMT',      active: aiStatus?.translation,   pkg: 'translation-nmtcpp',       color: '#FFB830' },
-              { name: 'OCR — PaddleOCR',             active: aiStatus?.ocr,           pkg: 'ocr-onnx',                 color: '#3B82F6' },
-            ].map(m => (
-              <div key={m.name} className="flex items-center gap-3 py-1.5">
-                <div className="w-1 h-8 rounded-full" style={{ background: m.active ? m.color : 'rgba(45,45,94,0.5)' }} />
-                <div className="flex-1 min-w-0">
-                  <div className="text-xs font-semibold text-sol-text truncate">{m.name}</div>
-                  <div className="text-[10px] text-sol-muted font-mono">@qvac/{m.pkg}</div>
-                </div>
-                <div className={`badge ${m.active ? 'badge-green' : 'badge-muted'}`}>
-                  {m.active ? '● Active' : '○ Loading'}
+      {/* ── AI Engine + Transactions ──────────────────────────────── */}
+      <div className="grid grid-cols-5 gap-6">
+        <section className="col-span-3">
+          <div className="text-title-lg display-text text-ink mb-6">QVAC AI Engine</div>
+          <div className="card">
+            {mods.map(m => (
+              <div key={m.k} className="flex items-center justify-between py-3 border-b border-hairline-soft last:border-0">
+                <div>
+                  <div className="text-title-sm text-ink">{m.n}</div>
+                  <div className="text-caption text-muted font-mono">{m.p}</div>
                 </div>
+                <span className={`badge-pill text-[10px] ${(aiStatus as any)?.[m.k] ? 'badge-pill-green' : ''}`}>
+                  {(aiStatus as any)?.[m.k] ? 'ACTIVE' : 'LOADING'}
+                </span>
               </div>
             ))}
+            <div className="pt-3 mt-1 text-caption text-muted flex items-center gap-1.5">
+              <div className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
+              All inference runs 100% locally via QVAC Fabric (Vulkan GPU)
+            </div>
           </div>
-          <div className="divider mt-4 mb-3" />
-          <div className="flex items-center gap-2 text-[10px] text-sol-muted">
-            <span className="w-1.5 h-1.5 rounded-full bg-tether-green" />
-            All inference runs 100% locally via QVAC Fabric (Vulkan GPU)
-          </div>
-        </div>
+        </section>
 
-        {/* Recent Activity — 2 cols */}
-        <div className="col-span-2 glass rounded-2xl p-5">
-          <div className="text-sm font-bold text-sol-text mb-4">Recent Activity</div>
-          {loading ? (
-            <div className="space-y-3">
-              {[1,2,3].map(i => <div key={i} className="shimmer rounded-lg h-12" />)}
-            </div>
-          ) : recentTxs.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <div className="w-14 h-14 rounded-2xl bg-sol-card flex items-center justify-center mb-3">
-                <span className="text-2xl opacity-40">📭</span>
+        <section className="col-span-2">
+          <div className="text-title-lg display-text text-ink mb-6">Recent activity</div>
+          <div className="card">
+            {txs.length === 0 ? (
+              <div className="text-center py-8">
+                <div className="text-body text-muted">No transactions yet</div>
+                <div className="text-caption text-muted-soft mt-1">Try "Send 1 SOL to…"</div>
               </div>
-              <div className="text-xs text-sol-muted">No transactions yet</div>
-              <div className="text-[10px] text-sol-muted/60 mt-1">Try "Send 1 SOL to..."</div>
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {recentTxs.map((tx, i) => (
-                <div key={i} className="flex items-center gap-3 p-2.5 rounded-xl bg-sol-dark/40 hover:bg-sol-dark/60 transition-colors">
-                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-xs ${
-                    tx.status === 'success' ? 'bg-sol-green/10 text-sol-green' : 'bg-danger/10 text-danger'
-                  }`}>
-                    {tx.status === 'success' ? '✓' : '✗'}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="text-xs font-mono text-sol-muted truncate">{tx.signature?.slice(0, 16)}...</div>
-                    <div className="text-[10px] text-sol-muted/60">{tx.timestamp ? new Date(tx.timestamp).toLocaleDateString() : 'Pending'}</div>
-                  </div>
-                  <div className={`badge text-[10px] ${tx.status === 'success' ? 'badge-green' : 'badge-danger'}`}>
-                    {tx.status}
-                  </div>
+            ) : txs.map((tx, i) => (
+              <div key={i} className="flex items-center gap-3 py-3 border-b border-hairline-soft last:border-0">
+                <div className={`w-7 h-7 rounded-full flex items-center justify-center text-caption-strong ${tx.status === 'success' ? 'bg-semantic-up/10 text-semantic-up' : 'bg-semantic-down/10 text-semantic-down'}`}>
+                  {tx.status === 'success' ? '✓' : '✗'}
                 </div>
-              ))}
-            </div>
-          )}
-        </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-caption font-mono text-muted truncate">{tx.signature?.slice(0, 16)}…</div>
+                  <div className="text-caption text-muted-soft">{tx.timestamp ? new Date(tx.timestamp).toLocaleDateString() : '—'}</div>
+                </div>
+                <span className={`badge-pill text-[10px] ${tx.status === 'success' ? 'badge-pill-green' : 'badge-pill-red'}`}>{tx.status}</span>
+              </div>
+            ))}
+          </div>
+        </section>
       </div>
 
-      {/* ── Wallet Address ────────────────────────────────────────────── */}
-      <div className="glass rounded-2xl p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-sol-purple/10 flex items-center justify-center">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9945FF" strokeWidth="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
-            </div>
-            <div>
-              <div className="text-[10px] text-sol-muted uppercase tracking-wider font-semibold">Wallet Address</div>
-              <div className="text-xs font-mono text-sol-muted/80">{publicKey || '—'}</div>
-            </div>
+      {/* ── Wallet Address ────────────────────────────────────────── */}
+      <section className="mt-12">
+        <div className="bg-surface-soft rounded-xl p-5 flex items-center justify-between">
+          <div>
+            <div className="text-caption-strong text-muted uppercase tracking-wider">Wallet address</div>
+            <div className="text-body-sm font-mono text-muted mt-1">{publicKey || '—'}</div>
           </div>
-          <button onClick={() => publicKey && navigator.clipboard.writeText(publicKey)}
-            className="btn-ghost px-3 py-1.5 text-xs">
-            Copy
-          </button>
+          <button onClick={() => publicKey && navigator.clipboard.writeText(publicKey)} className="btn-secondary text-body-sm py-2 px-4">Copy</button>
         </div>
-      </div>
+      </section>
     </div>
   );
 }

src/renderer/pages/HistoryPage.tsx

@@ -4,97 +4,66 @@ export default function HistoryPage() {
   const [txs, setTxs] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [query, setQuery] = useState('');
-  const [ragResults, setRagResults] = useState<any[]>([]);
+  const [rag, setRag] = useState<any[]>([]);
   const [searching, setSearching] = useState(false);
 
   useEffect(() => { load(); }, []);
-
-  const load = async () => {
-    setLoading(true);
-    try { if (window.solvox) { const r = await window.solvox.wallet.getHistory(20); if (r.success) setTxs(r.history || []); } } catch {}
-    setLoading(false);
-  };
-
-  const search = async () => {
-    if (!query.trim()) return;
-    setSearching(true);
-    try { if (window.solvox) { const r = await window.solvox.rag.search(query); if (r.success) setRagResults(r.results || []); } } catch {}
-    setSearching(false);
-  };
+  const load = async () => { setLoading(true); try { if (window.solvox) { const r = await window.solvox.wallet.getHistory(20); if (r.success) setTxs(r.history || []); } } catch {} setLoading(false); };
+  const search = async () => { if (!query.trim()) return; setSearching(true); try { if (window.solvox) { const r = await window.solvox.rag.search(query, 'transaction'); if (r.success) setRag(r.results || []); } } catch {} setSearching(false); };
 
   return (
-    <div className="space-y-5 page-enter">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-bold">Transaction History</h2>
-        <button onClick={load} className="btn-ghost px-3 py-1.5 text-xs flex items-center gap-1.5">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
-          Refresh
-        </button>
+    <div className="max-w-content mx-auto px-8 py-section">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="display-text text-title-lg text-ink">Transactions</h2>
+        <button onClick={load} className="btn-secondary text-body-sm py-2 px-3">Refresh</button>
       </div>
 
       {/* AI Search */}
-      <div className="glass rounded-2xl p-4">
+      <div className="bg-surface-soft rounded-xl p-4 mb-8">
         <div className="flex gap-2">
-          <div className="flex-1 relative">
-            <input value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => e.key === 'Enter' && search()}
-              placeholder='Search with AI — "last payment to Alice"' className="input-field text-xs pl-9" />
-            <svg className="absolute left-3 top-1/2 -translate-y-1/2 text-sol-muted" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-          </div>
-          <button onClick={search} disabled={searching} className="btn-primary px-4 py-2 text-white text-xs disabled:opacity-50">
-            <span>{searching ? '...' : 'Search'}</span>
-          </button>
+          <input value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => e.key === 'Enter' && search()}
+            placeholder='Search with AI — "last payment to Alice"' className="search-pill flex-1 text-body-sm" />
+          <button onClick={search} disabled={searching} className="btn-primary text-body-sm py-2 px-4 disabled:opacity-50">{searching ? '…' : 'Search'}</button>
         </div>
-        <div className="flex items-center gap-1.5 mt-2">
-          <div className="w-1 h-1 rounded-full bg-tether-green" />
-          <span className="text-[10px] text-sol-muted">Powered by @qvac/embed-llamacpp — 100% local semantic search</span>
+        <div className="text-caption text-muted mt-2 flex items-center gap-1.5">
+          <div className="w-1 h-1 rounded-full bg-primary" />
+          Semantic search via @qvac/embed-llamacpp — 100% local
         </div>
-
-        {ragResults.length > 0 && (
-          <div className="mt-3 space-y-2 stagger">
-            <div className="text-xs font-semibold text-sol-purple">AI Results</div>
-            {ragResults.map((r, i) => (
-              <div key={i} className="bg-sol-dark/50 rounded-xl p-3 text-xs border border-sol-border/30">
-                <div className="text-sol-text">{r.text}</div>
-                <div className="mt-1 flex items-center gap-2">
-                  <div className="progress-bar w-16"><div className="progress-fill" style={{ width: `${r.score * 100}%` }} /></div>
-                  <span className="text-[10px] text-sol-muted">{(r.score * 100).toFixed(0)}% match</span>
-                </div>
+        {rag.length > 0 && (
+          <div className="mt-3 space-y-2">
+            <div className="text-caption-strong text-primary uppercase tracking-wider">AI Results</div>
+            {rag.map((r, i) => (
+              <div key={i} className="bg-canvas rounded-lg p-3 border border-hairline">
+                <div className="text-body-sm text-ink">{r.text}</div>
+                <div className="text-caption text-muted mt-1 number-mono">{(r.score * 100).toFixed(0)}% match</div>
               </div>
             ))}
           </div>
         )}
       </div>
 
-      {/* Transaction Table */}
-      <div className="glass rounded-2xl overflow-hidden">
+      {/* Table */}
+      <div className="card" style={{ padding: 0 }}>
         {loading ? (
-          <div className="p-8 space-y-3">
-            {[1,2,3,4].map(i => <div key={i} className="shimmer rounded-lg h-14" />)}
-          </div>
+          <div className="p-12 text-center text-body text-muted">Loading…</div>
         ) : txs.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 text-center">
-            <div className="w-16 h-16 rounded-2xl bg-sol-card flex items-center justify-center mb-4">
-              <span className="text-3xl opacity-30">📭</span>
-            </div>
-            <div className="text-sm font-semibold mb-1">No Transactions Yet</div>
-            <div className="text-xs text-sol-muted max-w-xs">Send or receive tokens and your history will appear here.</div>
+          <div className="p-12 text-center">
+            <div className="text-title-md text-ink mb-1">No transactions yet</div>
+            <div className="text-body-sm text-muted">Send or receive tokens to see history.</div>
           </div>
         ) : (
-          <div className="divide-y divide-sol-border/20">
+          <div>
             {txs.map((tx, i) => (
-              <div key={i} className="flex items-center gap-4 px-5 py-3.5 hover:bg-sol-dark/30 transition-colors">
-                <div className={`w-9 h-9 rounded-xl flex items-center justify-center text-xs font-bold ${
-                  tx.status === 'success' ? 'bg-sol-green/10 text-sol-green' : 'bg-danger/10 text-danger'
-                }`}>
+              <div key={i} className="asset-row px-5">
+                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-caption-strong mr-3 ${tx.status === 'success' ? 'bg-semantic-up/10 text-semantic-up' : 'bg-semantic-down/10 text-semantic-down'}`}>
                   {tx.status === 'success' ? '✓' : '✗'}
                 </div>
                 <div className="flex-1 min-w-0">
-                  <div className="text-xs font-mono text-sol-muted truncate">{tx.signature?.slice(0, 24)}...</div>
-                  <div className="text-[10px] text-sol-muted/60">{tx.timestamp ? new Date(tx.timestamp).toLocaleString() : 'Pending'}</div>
+                  <div className="text-body-sm font-mono text-ink truncate">{tx.signature?.slice(0, 20)}…</div>
+                  <div className="text-caption text-muted">{tx.timestamp ? new Date(tx.timestamp).toLocaleString() : 'Pending'}</div>
                 </div>
-                <div className={`badge ${tx.status === 'success' ? 'badge-green' : 'badge-danger'}`}>{tx.status}</div>
-                <a href={`https://solscan.io/tx/${tx.signature}`} target="_blank" rel="noopener noreferrer"
-                  className="text-sol-purple text-[10px] hover:underline">View ↗</a>
+                <span className={`badge-pill text-[10px] mr-3 ${tx.status === 'success' ? 'badge-pill-green' : 'badge-pill-red'}`}>{tx.status}</span>
+                <a href={`https://solscan.io/tx/${tx.signature}`} target="_blank" rel="noopener noreferrer" className="btn-text text-body-sm py-0 px-1">View →</a>
               </div>
             ))}
           </div>

src/renderer/pages/LockScreen.tsx

@@ -1,132 +1,78 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { ParticlesBackground } from '../components/ui/index';
 
-interface LockScreenProps { onUnlock: (publicKey: string) => void; }
+interface Props { onUnlock: (pk: string) => void; }
 
-export default function LockScreen({ onUnlock }: LockScreenProps) {
+export default function LockScreen({ onUnlock }: Props) {
   const [pin, setPin] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const [biometricAvailable, setBiometricAvailable] = useState(false);
-  const [shake, setShake] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [bio, setBio] = useState(false);
+  const ref = useRef<HTMLInputElement>(null);
 
-  useEffect(() => { inputRef.current?.focus(); checkBiometric(); }, []);
+  useEffect(() => { ref.current?.focus(); if (window.solvox) window.solvox.auth.biometricAvailable().then(b => { setBio(b); if (b) doBio(); }); }, []);
 
-  const checkBiometric = async () => {
-    if (!window.solvox) return;
-    const available = await window.solvox.auth.biometricAvailable();
-    setBiometricAvailable(available);
-    if (available) handleBiometric();
-  };
-
-  const handleBiometric = async () => {
-    if (!window.solvox) return;
-    setLoading(true);
+  const doBio = async () => {
+    if (!window.solvox) return; setLoading(true);
     const r = await window.solvox.auth.biometric('Unlock SolVox');
     if (r.success) { const pk = await window.solvox.wallet.getPublicKey(); if (pk) onUnlock(pk); }
-    else { setError(r.error || 'Biometric failed'); }
+    else setError(r.error || 'Failed');
     setLoading(false);
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const submit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (pin.length < 6) { triggerShake('PIN must be at least 6 digits'); return; }
+    if (pin.length < 6) return setError('PIN must be at least 6 digits');
     setLoading(true); setError('');
     try {
       if (window.solvox) {
         const r = await window.solvox.auth.unlock(pin);
         if (r.success) { const pk = await window.solvox.wallet.getPublicKey(); if (pk) onUnlock(pk); }
-        else { triggerShake(r.remainingAttempts !== undefined ? `${r.error} (${r.remainingAttempts} left)` : r.error || 'Unlock failed'); }
-      } else { onUnlock('DevMode' + Date.now()); }
-    } catch (err: any) { triggerShake(err.message); }
+        else setError(r.remainingAttempts !== undefined ? `${r.error} (${r.remainingAttempts} left)` : r.error || 'Failed');
+      } else onUnlock('Dev' + Date.now());
+    } catch (e: any) { setError(e.message); }
     setLoading(false); setPin('');
   };
 
-  const triggerShake = (msg: string) => { setError(msg); setShake(true); setTimeout(() => setShake(false), 500); };
-
-  // PIN dots visualization
   const dots = Array.from({ length: 8 }, (_, i) => i < pin.length);
 
   return (
-    <div className="h-screen flex flex-col items-center justify-center mesh-bg relative">
-      <ParticlesBackground />
-
-      <div className="w-full max-w-xs relative z-10">
+    <div className="h-screen flex flex-col items-center justify-center bg-canvas">
+      <div className="w-full max-w-xs">
         {/* Logo */}
-        <div className="text-center mb-10 fade-in">
-          <div className="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-sol-purple to-sol-green flex items-center justify-center mb-4 shadow-glow-lg animate-float">
-            <span className="text-white text-xl font-black">SV</span>
-          </div>
-          <h1 className="text-3xl font-extrabold gradient-text mb-1">SolVox</h1>
-          <p className="text-xs text-sol-muted">Voice-First AI Wallet</p>
-        </div>
-
-        {/* Lock Visual */}
-        <div className="flex justify-center mb-8">
-          <div className="relative">
-            <div className="w-14 h-14 rounded-full bg-sol-card border-2 border-sol-border/50 flex items-center justify-center">
-              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9945FF" strokeWidth="2" strokeLinecap="round">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-              </svg>
-            </div>
-            <div className="absolute -inset-3 rounded-full border border-sol-purple/10 animate-pulse" />
+        <div className="text-center mb-12">
+          <div className="w-12 h-12 mx-auto rounded-full bg-primary flex items-center justify-center mb-4">
+            <span className="text-on-primary font-bold text-title-md">SV</span>
           </div>
+          <h1 className="display-text text-display-sm text-ink mb-1">SolVox</h1>
+          <p className="text-body-sm text-muted">Voice-First AI Wallet</p>
         </div>
 
         {/* PIN Dots */}
-        <div className={`flex justify-center gap-3 mb-6 transition-transform ${shake ? 'animate-[shake_0.5s_ease-in-out]' : ''}`}
-          style={shake ? { animation: 'shake 0.4s ease-in-out' } : {}}>
-          {dots.map((filled, i) => (
-            <div key={i} className={`w-3 h-3 rounded-full transition-all duration-200 ${
-              filled ? 'bg-sol-purple scale-110 shadow-glow-sm' : 'bg-sol-border/40'
-            }`} />
+        <div className="flex justify-center gap-3 mb-6">
+          {dots.map((f, i) => (
+            <div key={i} className={`w-3 h-3 rounded-full transition-all duration-200 ${f ? 'bg-primary' : 'bg-surface-strong'}`} />
           ))}
         </div>
 
-        {/* Hidden PIN Input */}
-        <form onSubmit={handleSubmit}>
-          <input ref={inputRef} type="password" inputMode="numeric" pattern="[0-9]*" value={pin}
-            onChange={e => setPin(e.target.value.replace(/\D/g, ''))} maxLength={8}
-            className="sr-only" autoFocus disabled={loading} />
-
-          {/* Tap to focus area */}
-          <div onClick={() => inputRef.current?.focus()}
-            className="glass-strong rounded-2xl p-4 text-center cursor-text mb-4 hover:border-sol-purple/20 transition-all">
-            <div className="text-2xl tracking-[0.6em] font-mono text-sol-text h-8 flex items-center justify-center">
-              {pin ? '●'.repeat(pin.length) : <span className="text-sm text-sol-muted tracking-normal">Tap to enter PIN</span>}
+        <form onSubmit={submit}>
+          <input ref={ref} type="password" inputMode="numeric" value={pin} onChange={e => setPin(e.target.value.replace(/\D/g, ''))}
+            maxLength={8} className="sr-only" disabled={loading} />
+          <div onClick={() => ref.current?.focus()} className="bg-surface-soft rounded-xl p-4 text-center cursor-text mb-4 border border-hairline hover:border-primary/30 transition-colors">
+            <div className="text-title-lg font-mono text-ink h-8 flex items-center justify-center tracking-[0.5em]">
+              {pin ? '●'.repeat(pin.length) : <span className="text-body-sm text-muted tracking-normal">Tap to enter PIN</span>}
             </div>
           </div>
-
-          {error && (
-            <div className="text-danger text-xs text-center bg-danger/8 border border-danger/15 rounded-xl p-2.5 mb-4 fade-in">
-              {error}
-            </div>
-          )}
-
-          <button type="submit" disabled={loading || pin.length < 6}
-            className="btn-primary w-full py-3.5 text-white disabled:opacity-40 disabled:shadow-none">
-            <span>{loading ? 'Unlocking...' : 'Unlock'}</span>
-          </button>
+          {error && <div className="text-body-sm text-semantic-down text-center mb-4 bg-semantic-down/5 rounded-md p-2">{error}</div>}
+          <button type="submit" disabled={loading || pin.length < 6} className="btn-primary w-full disabled:opacity-40">{loading ? 'Unlocking…' : 'Unlock'}</button>
         </form>
 
-        {biometricAvailable && (
-          <button onClick={handleBiometric}
-            className="btn-ghost w-full mt-3 py-3 text-sm flex items-center justify-center gap-2">
-            <span>🫰</span> Use Touch ID
-          </button>
-        )}
+        {bio && <button onClick={doBio} className="btn-secondary w-full mt-3">Use Touch ID</button>}
 
-        <div className="mt-8 text-center">
-          <div className="inline-flex items-center gap-2 text-[10px] text-sol-muted/60">
-            <div className="w-1.5 h-1.5 rounded-full bg-sol-green/60" />
-            Encrypted locally • No cloud • QVAC AI on-device
-          </div>
+        <div className="mt-8 text-center text-caption text-muted-soft flex items-center justify-center gap-1.5">
+          <div className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
+          Encrypted locally · No cloud · QVAC on-device
         </div>
       </div>
-
-      {/* Shake keyframes */}
-      <style>{`@keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }`}</style>
     </div>
   );
 }

src/renderer/pages/OnboardingScreen.tsx

@@ -1,168 +1,122 @@
 import React, { useState } from 'react';
-import { ParticlesBackground, StepIndicator } from '../components/ui/index';
+import { StepIndicator } from '../components/ui/index';
 
-interface OnboardingScreenProps { onComplete: (publicKey: string) => void; }
-type Step = 'welcome' | 'create_or_import' | 'import' | 'pin' | 'done';
+interface Props { onComplete: (pk: string) => void; }
+type Step = 'welcome' | 'choose' | 'import' | 'pin' | 'done';
+const LABELS = ['Welcome', 'Wallet', 'Secure', 'Done'];
+const idx = (s: Step) => s === 'welcome' ? 0 : s === 'choose' || s === 'import' ? 1 : s === 'pin' ? 2 : 3;
 
-const STEP_LABELS = ['Welcome', 'Wallet', 'Secure', 'Done'];
-const stepIndex = (s: Step) => s === 'welcome' ? 0 : s === 'create_or_import' ? 1 : s === 'import' ? 1 : s === 'pin' ? 2 : 3;
-
-export default function OnboardingScreen({ onComplete }: OnboardingScreenProps) {
+export default function OnboardingScreen({ onComplete }: Props) {
   const [step, setStep] = useState<Step>('welcome');
   const [mnemonic, setMnemonic] = useState('');
-  const [pin, setPin] = useState('');
-  const [pinConfirm, setPinConfirm] = useState('');
-  const [publicKey, setPublicKey] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [pin, setPin] = useState(''); const [pinC, setPinC] = useState('');
+  const [pk, setPk] = useState('');
+  const [err, setErr] = useState('');
+  const [busy, setBusy] = useState(false);
 
-  const createWallet = async () => {
-    setLoading(true); setError('');
+  const create = async () => {
+    setBusy(true); setErr('');
     try {
-      if (window.solvox) {
-        const r = await window.solvox.wallet.create();
-        if (r.success && r.publicKey) { setPublicKey(r.publicKey); setStep('pin'); }
-        else setError(r.error || 'Failed');
-      } else { setPublicKey('DevMode' + Date.now()); setStep('pin'); }
-    } catch (e: any) { setError(e.message); }
-    setLoading(false);
+      if (window.solvox) { const r = await window.solvox.wallet.create(); if (r.success && r.publicKey) { setPk(r.publicKey); setStep('pin'); } else setErr(r.error || 'Failed'); }
+      else { setPk('Dev' + Date.now()); setStep('pin'); }
+    } catch (e: any) { setErr(e.message); }
+    setBusy(false);
   };
 
-  const importWallet = async () => {
-    if (!mnemonic.trim()) return setError('Enter your recovery phrase');
-    const w = mnemonic.trim().split(/\s+/);
-    if (w.length !== 12 && w.length !== 24) return setError('Must be 12 or 24 words');
-    setLoading(true); setError('');
+  const imp = async () => {
+    if (!mnemonic.trim()) return setErr('Enter recovery phrase');
+    const w = mnemonic.trim().split(/\s+/); if (w.length !== 12 && w.length !== 24) return setErr('Must be 12 or 24 words');
+    setBusy(true); setErr('');
     try {
-      if (window.solvox) {
-        const r = await window.solvox.wallet.import(mnemonic.trim());
-        if (r.success && r.publicKey) { setPublicKey(r.publicKey); setStep('pin'); }
-        else setError(r.error || 'Invalid phrase');
-      } else { setPublicKey('DevImport' + Date.now()); setStep('pin'); }
-    } catch (e: any) { setError(e.message); }
-    setLoading(false);
+      if (window.solvox) { const r = await window.solvox.wallet.import(mnemonic.trim()); if (r.success && r.publicKey) { setPk(r.publicKey); setStep('pin'); } else setErr(r.error || 'Invalid'); }
+      else { setPk('DevImp' + Date.now()); setStep('pin'); }
+    } catch (e: any) { setErr(e.message); }
+    setBusy(false);
   };
 
-  const setWalletPin = async () => {
-    if (pin.length < 6) return setError('PIN must be at least 6 digits');
-    if (pin !== pinConfirm) return setError('PINs do not match');
-    setLoading(true); setError('');
-    try {
-      if (window.solvox) { const r = await window.solvox.auth.setPin(pin); if (!r.success) { setError(r.error || 'Failed'); setLoading(false); return; } }
-      setStep('done');
-    } catch (e: any) { setError(e.message); }
-    setLoading(false);
+  const setP = async () => {
+    if (pin.length < 6) return setErr('Min 6 digits');
+    if (pin !== pinC) return setErr('PINs don\'t match');
+    setBusy(true); setErr('');
+    try { if (window.solvox) { const r = await window.solvox.auth.setPin(pin); if (!r.success) { setErr(r.error || 'Failed'); setBusy(false); return; } } setStep('done'); }
+    catch (e: any) { setErr(e.message); }
+    setBusy(false);
   };
 
   return (
-    <div className="h-screen flex items-center justify-center mesh-bg relative overflow-hidden">
-      <ParticlesBackground />
-      <div className="w-full max-w-md p-6 relative z-10">
-        {step !== 'welcome' && <StepIndicator steps={STEP_LABELS} current={stepIndex(step)} />}
+    <div className="h-screen flex items-center justify-center bg-canvas">
+      <div className="w-full max-w-md px-6">
+        {step !== 'welcome' && <StepIndicator steps={LABELS} current={idx(step)} />}
 
         {step === 'welcome' && (
-          <div className="text-center slide-enter">
-            <div className="w-20 h-20 mx-auto rounded-3xl bg-gradient-to-br from-sol-purple to-sol-green flex items-center justify-center mb-6 shadow-glow-lg animate-float">
-              <span className="text-white text-2xl font-black">SV</span>
+          <div className="text-center page-enter">
+            <div className="w-14 h-14 mx-auto rounded-full bg-primary flex items-center justify-center mb-6">
+              <span className="text-on-primary font-bold text-title-lg">SV</span>
             </div>
-            <h1 className="text-5xl font-extrabold gradient-text mb-3">SolVox</h1>
-            <p className="text-lg text-sol-muted mb-1">Voice-First Private AI Wallet</p>
-            <p className="text-xs text-sol-muted/60 mb-10">Powered by QVAC • 100% Local AI • Zero Cloud</p>
-
-            <div className="grid grid-cols-3 gap-3 mb-10 stagger">
-              {[
-                { icon: '🎤', label: 'Voice Control', desc: 'Talk to your wallet' },
-                { icon: '🧠', label: 'Local AI', desc: '6 QVAC modules' },
-                { icon: '🔒', label: 'Self-Custody', desc: 'Your keys only' },
-              ].map(f => (
-                <div key={f.label} className="glass glass-hover rounded-2xl p-4 text-center">
-                  <div className="text-2xl mb-2">{f.icon}</div>
-                  <div className="text-xs font-semibold text-sol-text">{f.label}</div>
-                  <div className="text-[10px] text-sol-muted mt-0.5">{f.desc}</div>
+            <h1 className="display-text text-display-lg text-ink mb-3">SolVox</h1>
+            <p className="text-body-md text-body mb-2">Voice-First Private AI Wallet</p>
+            <p className="text-body-sm text-muted mb-10">Powered by QVAC SDK · 100% Local AI · Zero Cloud</p>
+            <div className="grid grid-cols-3 gap-3 mb-10">
+              {[{ t: 'Voice Control', d: 'Talk to your wallet' }, { t: 'Local AI', d: '6 QVAC modules' }, { t: 'Self-Custody', d: 'Your keys only' }].map(f => (
+                <div key={f.t} className="card text-center" style={{ padding: '20px' }}>
+                  <div className="text-title-sm text-ink">{f.t}</div>
+                  <div className="text-caption text-muted mt-1">{f.d}</div>
                 </div>
               ))}
             </div>
-
-            <button onClick={() => setStep('create_or_import')} className="btn-primary px-10 py-4 text-white text-lg">
-              <span>Get Started</span>
-            </button>
+            <button onClick={() => setStep('choose')} className="btn-primary-lg">Get started</button>
           </div>
         )}
 
-        {step === 'create_or_import' && (
-          <div className="space-y-4 slide-enter">
-            <h2 className="text-2xl font-bold text-center mb-6">Create Your Wallet</h2>
-            <button onClick={createWallet} disabled={loading}
-              className="w-full glass glass-hover rounded-2xl p-5 text-left group border-2 border-transparent hover:border-sol-purple/20 transition-all">
-              <div className="flex items-center gap-4">
-                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-sol-purple to-sol-purple-light flex items-center justify-center shadow-glow-sm group-hover:scale-105 transition-transform">
-                  <span className="text-white text-xl">✦</span>
-                </div>
-                <div>
-                  <div className="text-base font-bold group-hover:text-sol-purple transition-colors">Create New Wallet</div>
-                  <div className="text-xs text-sol-muted">Generate a fresh 24-word recovery phrase</div>
-                </div>
-              </div>
+        {step === 'choose' && (
+          <div className="space-y-4 page-enter">
+            <h2 className="display-text text-display-sm text-ink text-center mb-6">Set up your wallet</h2>
+            <button onClick={create} disabled={busy} className="w-full card text-left hover:border-primary/30 hover:shadow-soft transition-all">
+              <div className="text-title-md text-ink">Create new wallet</div>
+              <div className="text-body-sm text-body mt-1">Generate a fresh 24-word recovery phrase</div>
             </button>
-            <button onClick={() => setStep('import')}
-              className="w-full glass glass-hover rounded-2xl p-5 text-left group border-2 border-transparent hover:border-tether-green/20 transition-all">
-              <div className="flex items-center gap-4">
-                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-tether-green to-tether-dark flex items-center justify-center shadow-glow-sm group-hover:scale-105 transition-transform">
-                  <span className="text-white text-xl">↓</span>
-                </div>
-                <div>
-                  <div className="text-base font-bold group-hover:text-tether-green transition-colors">Import Existing</div>
-                  <div className="text-xs text-sol-muted">Use a 12 or 24 word recovery phrase</div>
-                </div>
-              </div>
+            <button onClick={() => setStep('import')} className="w-full card text-left hover:border-primary/30 hover:shadow-soft transition-all">
+              <div className="text-title-md text-ink">Import existing wallet</div>
+              <div className="text-body-sm text-body mt-1">Use a 12 or 24 word recovery phrase</div>
             </button>
-            {error && <div className="text-danger text-xs text-center">{error}</div>}
+            {err && <div className="text-body-sm text-semantic-down text-center">{err}</div>}
           </div>
         )}
 
         {step === 'import' && (
-          <div className="space-y-5 slide-enter">
-            <h2 className="text-xl font-bold text-center">Import Recovery Phrase</h2>
-            <p className="text-xs text-sol-muted text-center">Stays on your device — never sent anywhere.</p>
-            <textarea value={mnemonic} onChange={e => setMnemonic(e.target.value)} placeholder="word1 word2 word3 ..." rows={4}
-              className="input-field font-mono text-xs resize-none" />
-            {error && <div className="text-danger text-xs">{error}</div>}
+          <div className="space-y-5 page-enter">
+            <h2 className="display-text text-display-sm text-ink text-center">Import recovery phrase</h2>
+            <p className="text-body-sm text-muted text-center">Stays on your device — never sent anywhere.</p>
+            <textarea value={mnemonic} onChange={e => setMnemonic(e.target.value)} placeholder="word1 word2 word3 …" rows={4} className="input-field font-mono text-body-sm resize-none" style={{ height: 'auto' }} />
+            {err && <div className="text-body-sm text-semantic-down">{err}</div>}
             <div className="flex gap-3">
-              <button onClick={() => { setStep('create_or_import'); setError(''); }} className="btn-ghost flex-1 py-3">Back</button>
-              <button onClick={importWallet} disabled={loading} className="btn-primary flex-1 py-3 text-white disabled:opacity-50">
-                <span>{loading ? 'Importing...' : 'Import'}</span>
-              </button>
+              <button onClick={() => { setStep('choose'); setErr(''); }} className="btn-secondary flex-1">Back</button>
+              <button onClick={imp} disabled={busy} className="btn-primary flex-1 disabled:opacity-50">{busy ? 'Importing…' : 'Import'}</button>
             </div>
           </div>
         )}
 
         {step === 'pin' && (
-          <div className="space-y-5 slide-enter">
-            <h2 className="text-xl font-bold text-center">Set Your PIN</h2>
-            <p className="text-xs text-sol-muted text-center">This encrypts your wallet with AES-256-GCM + PBKDF2.</p>
-            <input type="password" inputMode="numeric" value={pin} onChange={e => setPin(e.target.value.replace(/\D/g, ''))}
-              placeholder="Enter PIN (min 6 digits)" maxLength={12} className="input-field text-center text-xl tracking-[0.5em] font-mono" />
-            <input type="password" inputMode="numeric" value={pinConfirm} onChange={e => setPinConfirm(e.target.value.replace(/\D/g, ''))}
-              placeholder="Confirm PIN" maxLength={12} className="input-field text-center text-xl tracking-[0.5em] font-mono" />
-            {pin.length >= 6 && pin === pinConfirm && <div className="badge badge-green mx-auto">✓ PINs match</div>}
-            {error && <div className="text-danger text-xs text-center">{error}</div>}
-            <button onClick={setWalletPin} disabled={loading || pin.length < 6} className="btn-primary w-full py-3.5 text-white disabled:opacity-40">
-              <span>{loading ? 'Encrypting...' : 'Continue'}</span>
-            </button>
+          <div className="space-y-5 page-enter">
+            <h2 className="display-text text-display-sm text-ink text-center">Set your PIN</h2>
+            <p className="text-body-sm text-muted text-center">Encrypts your wallet with AES-256-GCM.</p>
+            <input type="password" inputMode="numeric" value={pin} onChange={e => setPin(e.target.value.replace(/\D/g, ''))} placeholder="Enter PIN (min 6)" maxLength={12} className="input-field text-center text-title-lg tracking-[0.5em] font-mono" />
+            <input type="password" inputMode="numeric" value={pinC} onChange={e => setPinC(e.target.value.replace(/\D/g, ''))} placeholder="Confirm PIN" maxLength={12} className="input-field text-center text-title-lg tracking-[0.5em] font-mono" />
+            {pin.length >= 6 && pin === pinC && <div className="text-center"><span className="badge-pill-green badge-pill">PINs match</span></div>}
+            {err && <div className="text-body-sm text-semantic-down text-center">{err}</div>}
+            <button onClick={setP} disabled={busy || pin.length < 6} className="btn-primary w-full disabled:opacity-40">{busy ? 'Encrypting…' : 'Continue'}</button>
           </div>
         )}
 
         {step === 'done' && (
-          <div className="text-center space-y-6 scale-in">
-            <div className="w-16 h-16 mx-auto rounded-full bg-sol-green/15 flex items-center justify-center">
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#14F195" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <div className="text-center page-enter">
+            <div className="w-14 h-14 mx-auto rounded-full bg-semantic-up/10 flex items-center justify-center mb-6">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#05b169" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
             </div>
-            <h2 className="text-3xl font-bold gradient-text-static">You're All Set!</h2>
-            <p className="text-sm text-sol-muted">Wallet encrypted & secured. Your AI assistant runs 100% locally.</p>
-            <div className="glass rounded-xl p-3 font-mono text-[10px] text-sol-muted break-all">{publicKey}</div>
-            <button onClick={() => onComplete(publicKey)} className="btn-primary px-10 py-4 text-white text-lg">
-              <span>Open SolVox</span>
-            </button>
+            <h2 className="display-text text-display-sm text-ink mb-2">You're all set</h2>
+            <p className="text-body-md text-body mb-4">Wallet encrypted & secured. AI runs 100% locally.</p>
+            <div className="bg-surface-soft rounded-xl p-3 font-mono text-caption text-muted break-all mb-6">{pk}</div>
+            <button onClick={() => onComplete(pk)} className="btn-primary-lg">Open SolVox</button>
           </div>
         )}
       </div>

src/renderer/pages/SecurityPage.tsx

@@ -1,164 +1,105 @@
 import React, { useState, useEffect } from 'react';
-import { CircularProgress, useToast } from '../components/ui/index';
+import { useToast } from '../components/ui/index';
 
 export default function SecurityPage() {
-  const [settings, setSettings] = useState<any>({});
-  const [whitelist, setWhitelist] = useState<any[]>([]);
+  const [s, setS] = useState<any>({});
+  const [wl, setWl] = useState<any[]>([]);
   const [anomalies, setAnomalies] = useState<any[]>([]);
-  const [newAddr, setNewAddr] = useState('');
-  const [newLabel, setNewLabel] = useState('');
-  const [error, setError] = useState('');
+  const [addr, setAddr] = useState(''); const [label, setLabel] = useState('');
+  const [err, setErr] = useState('');
   const { addToast } = useToast();
 
   useEffect(() => { load(); }, []);
+  const load = async () => { if (!window.solvox) return; try { const [a, b, c] = await Promise.all([window.solvox.security.getSettings(), window.solvox.security.getWhitelist(), window.solvox.security.getAnomalies()]); setS(a); setWl(b); setAnomalies(c); } catch {} };
+  const upd = async (k: string, v: any) => { const n = { ...s, [k]: v }; setS(n); if (window.solvox) { await window.solvox.security.updateSettings(n); addToast({ type: 'success', title: 'Saved' }); } };
+  const addWl = async () => { if (!addr.trim() || !label.trim()) return setErr('Both required'); if (window.solvox) { const r = await window.solvox.security.addWhitelist(addr.trim(), label.trim()); if (r.success) { setAddr(''); setLabel(''); setErr(''); load(); } else setErr(r.error || 'Failed'); } };
+  const rmWl = async (a: string) => { if (window.solvox) { await window.solvox.security.removeWhitelist(a); load(); } };
 
-  const load = async () => {
-    if (!window.solvox) return;
-    try {
-      const [s, w, a] = await Promise.all([window.solvox.security.getSettings(), window.solvox.security.getWhitelist(), window.solvox.security.getAnomalies()]);
-      setSettings(s); setWhitelist(w); setAnomalies(a);
-    } catch {}
-  };
-
-  const update = async (k: string, v: any) => {
-    const u = { ...settings, [k]: v };
-    setSettings(u);
-    if (window.solvox) { await window.solvox.security.updateSettings(u); addToast({ type: 'success', title: 'Saved', duration: 1500 }); }
-  };
-
-  const addWL = async () => {
-    if (!newAddr.trim() || !newLabel.trim()) return setError('Both required');
-    if (window.solvox) {
-      const r = await window.solvox.security.addWhitelist(newAddr.trim(), newLabel.trim());
-      if (r.success) { setNewAddr(''); setNewLabel(''); setError(''); load(); addToast({ type: 'success', title: 'Address whitelisted' }); }
-      else setError(r.error || 'Failed');
-    }
-  };
-
-  const removeWL = async (addr: string) => { if (window.solvox) { await window.solvox.security.removeWhitelist(addr); load(); } };
-
-  // Security score
-  const features = [settings.whitelistEnabled, settings.anomalyDetection, settings.requireConfirmation, (settings.maxSingleTx || 0) < 5000, (settings.velocityLimit || 0) <= 10];
-  const score = Math.round((features.filter(Boolean).length / features.length) * 100);
-  const scoreColor = score >= 80 ? '#14F195' : score >= 50 ? '#FFB830' : '#FF4466';
+  const Toggle = ({ k, label, desc }: { k: string; label: string; desc: string }) => (
+    <div className="flex items-center justify-between py-3 border-b border-hairline-soft last:border-0">
+      <div><div className="text-title-sm text-ink">{label}</div><div className="text-caption text-muted">{desc}</div></div>
+      <button onClick={() => upd(k, !s[k])} className="toggle">
+        <div className={`toggle-track ${s[k] ? 'active' : ''}`} />
+        <div className={`toggle-thumb ${s[k] ? 'active' : ''}`} />
+      </button>
+    </div>
+  );
 
   return (
-    <div className="space-y-5 max-w-3xl page-enter">
-      <h2 className="text-xl font-bold">Security Center</h2>
+    <div className="max-w-3xl mx-auto px-8 py-section">
+      <h2 className="display-text text-title-lg text-ink mb-8">Security</h2>
 
-      {/* Security Score + Limits */}
-      <div className="grid grid-cols-3 gap-4">
-        <div className="glass rounded-2xl p-5 flex flex-col items-center justify-center">
-          <CircularProgress value={score} size={90} strokeWidth={6} color={scoreColor}>
-            <div className="text-center">
-              <div className="text-lg font-extrabold" style={{ color: scoreColor }}>{score}</div>
-              <div className="text-[8px] text-sol-muted">/ 100</div>
-            </div>
-          </CircularProgress>
-          <div className="text-xs font-semibold text-sol-text mt-3">Security Score</div>
-        </div>
-
-        <div className="col-span-2 glass rounded-2xl p-5">
-          <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider mb-3">Transaction Limits</div>
-          <div className="grid grid-cols-2 gap-3">
-            {[
-              { key: 'maxSingleTx', label: 'Max per TX', suffix: 'tokens', val: settings.maxSingleTx || 1000 },
-              { key: 'maxDailyVolume', label: 'Daily limit', suffix: '/day', val: settings.maxDailyVolume || 5000 },
-              { key: 'velocityLimit', label: 'Max TX/hour', suffix: '', val: settings.velocityLimit || 10 },
-              { key: 'cooldownMinutes', label: 'Cooldown', suffix: 'min', val: settings.cooldownMinutes || 1 },
-            ].map(f => (
-              <div key={f.key}>
-                <label className="text-[10px] text-sol-muted block mb-1">{f.label}</label>
-                <div className="flex items-center gap-1.5">
-                  <input type="number" value={f.val} onChange={e => update(f.key, Number(e.target.value))}
-                    className="input-field text-xs py-1.5 w-full" />
-                  {f.suffix && <span className="text-[10px] text-sol-muted whitespace-nowrap">{f.suffix}</span>}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Toggles */}
-      <div className="glass rounded-2xl p-5">
-        <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider mb-4">Security Features</div>
-        <div className="space-y-3 stagger">
+      {/* Limits */}
+      <div className="card mb-6">
+        <div className="text-caption-strong text-muted uppercase tracking-wider mb-4">Transaction limits</div>
+        <div className="grid grid-cols-2 gap-4">
           {[
-            { key: 'whitelistEnabled', label: 'Address Whitelisting', desc: 'Only allow sends to approved addresses', icon: '📋' },
-            { key: 'anomalyDetection', label: 'AI Anomaly Detection', desc: 'Local AI flags unusual patterns', icon: '🧠' },
-            { key: 'requireConfirmation', label: 'Transaction Confirmation', desc: 'Always require explicit approval', icon: '✅' },
-          ].map(t => (
-            <div key={t.key} className="flex items-center justify-between py-2 px-3 rounded-xl hover:bg-sol-dark/30 transition-colors">
-              <div className="flex items-center gap-3">
-                <div className="w-9 h-9 rounded-lg bg-sol-card flex items-center justify-center text-lg">{t.icon}</div>
-                <div>
-                  <div className="text-xs font-semibold text-sol-text">{t.label}</div>
-                  <div className="text-[10px] text-sol-muted">{t.desc}</div>
-                </div>
+            { k: 'maxSingleTx', l: 'Max per transaction', u: 'tokens', v: s.maxSingleTx || 1000 },
+            { k: 'maxDailyVolume', l: 'Daily limit', u: '/day', v: s.maxDailyVolume || 5000 },
+            { k: 'velocityLimit', l: 'Max TX/hour', u: '', v: s.velocityLimit || 10 },
+            { k: 'cooldownMinutes', l: 'Cooldown', u: 'min', v: s.cooldownMinutes || 1 },
+          ].map(f => (
+            <div key={f.k}>
+              <label className="text-caption text-muted block mb-1">{f.l}</label>
+              <div className="flex items-center gap-2">
+                <input type="number" value={f.v} onChange={e => upd(f.k, Number(e.target.value))} className="input-field text-body-sm" />
+                {f.u && <span className="text-caption text-muted whitespace-nowrap">{f.u}</span>}
               </div>
-              <button onClick={() => update(t.key, !settings[t.key])}
-                className={`relative w-11 h-6 rounded-full transition-all duration-300 ${settings[t.key] ? 'bg-sol-green' : 'bg-sol-border/60'}`}>
-                <span className={`absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-all duration-300 ${settings[t.key] ? 'left-[22px]' : 'left-0.5'}`} />
-              </button>
             </div>
           ))}
         </div>
       </div>
 
+      {/* Toggles */}
+      <div className="card mb-6">
+        <div className="text-caption-strong text-muted uppercase tracking-wider mb-4">Features</div>
+        <Toggle k="whitelistEnabled" label="Address whitelisting" desc="Only allow sends to approved addresses" />
+        <Toggle k="anomalyDetection" label="AI anomaly detection" desc="LLM analyzes spending patterns locally" />
+        <Toggle k="requireConfirmation" label="Transaction confirmation" desc="Always require explicit approval" />
+      </div>
+
       {/* Whitelist */}
-      <div className="glass rounded-2xl p-5">
-        <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider mb-3">Address Whitelist</div>
+      <div className="card mb-6">
+        <div className="text-caption-strong text-muted uppercase tracking-wider mb-3">Address whitelist</div>
         <div className="flex gap-2 mb-3">
-          <input value={newLabel} onChange={e => setNewLabel(e.target.value)} placeholder="Label" className="input-field text-xs w-28 py-1.5" />
-          <input value={newAddr} onChange={e => setNewAddr(e.target.value)} placeholder="Solana address" className="input-field text-xs flex-1 py-1.5 font-mono" />
-          <button onClick={addWL} className="btn-primary px-3 py-1.5 text-white text-xs"><span>Add</span></button>
+          <input value={label} onChange={e => setLabel(e.target.value)} placeholder="Label" className="input-field text-body-sm w-28" />
+          <input value={addr} onChange={e => setAddr(e.target.value)} placeholder="Solana address" className="input-field text-body-sm flex-1 font-mono" />
+          <button onClick={addWl} className="btn-primary text-body-sm py-2 px-4">Add</button>
         </div>
-        {error && <div className="text-danger text-[10px] mb-2">{error}</div>}
-        {whitelist.length === 0 ? (
-          <div className="text-center py-6 text-xs text-sol-muted/60">No addresses whitelisted</div>
-        ) : (
+        {err && <div className="text-caption text-semantic-down mb-2">{err}</div>}
+        {wl.length === 0 ? <div className="text-body-sm text-muted text-center py-4">No addresses whitelisted</div> : (
           <div className="space-y-2">
-            {whitelist.map((e, i) => (
-              <div key={i} className="flex items-center justify-between bg-sol-dark/40 rounded-xl p-3">
-                <div>
-                  <div className="text-xs font-semibold">{e.label}</div>
-                  <div className="text-[10px] font-mono text-sol-muted">{e.address.slice(0, 10)}...{e.address.slice(-6)}</div>
-                </div>
-                <button onClick={() => removeWL(e.address)} className="text-danger text-[10px] hover:underline">Remove</button>
+            {wl.map((e, i) => (
+              <div key={i} className="flex items-center justify-between bg-surface-soft rounded-lg p-3">
+                <div><div className="text-title-sm text-ink">{e.label}</div><div className="text-caption font-mono text-muted">{e.address.slice(0, 10)}…{e.address.slice(-6)}</div></div>
+                <button onClick={() => rmWl(e.address)} className="btn-text text-semantic-down text-body-sm">Remove</button>
               </div>
             ))}
           </div>
         )}
       </div>
 
-      {/* Anomaly Log */}
-      <div className="glass rounded-2xl p-5">
+      {/* Anomalies */}
+      <div className="card">
         <div className="flex items-center justify-between mb-3">
-          <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider">Anomaly Detection Log</div>
-          <div className="badge badge-tether text-[10px]">AI-Powered • Local</div>
+          <div className="text-caption-strong text-muted uppercase tracking-wider">Anomaly log</div>
+          <span className="badge-pill-blue badge-pill text-[10px]">AI-POWERED</span>
         </div>
         {anomalies.length === 0 ? (
-          <div className="text-center py-8">
-            <div className="w-12 h-12 mx-auto rounded-xl bg-sol-green/10 flex items-center justify-center mb-2">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14F195" strokeWidth="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
-            </div>
-            <div className="text-xs text-sol-muted">All clear — no anomalies detected</div>
+          <div className="text-center py-6">
+            <div className="text-body-sm text-semantic-up">All clear — no anomalies detected ✓</div>
+            <div className="text-caption text-muted mt-1">Analyzed by @qvac/llm-llamacpp + @qvac/embed-llamacpp</div>
           </div>
         ) : (
-          <div className="space-y-2 stagger">
+          <div className="space-y-2">
             {anomalies.map((a, i) => (
-              <div key={i} className={`rounded-xl p-3 border ${
-                a.severity === 'high' ? 'bg-danger/5 border-danger/15' : a.severity === 'medium' ? 'bg-warning/5 border-warning/15' : 'bg-sol-dark/30 border-sol-border/30'
-              }`}>
+              <div key={i} className={`rounded-lg p-3 border ${a.severity === 'high' ? 'bg-semantic-down/5 border-semantic-down/15' : a.severity === 'medium' ? 'bg-accent-yellow/5 border-accent-yellow/15' : 'bg-surface-soft border-hairline'}`}>
                 <div className="flex items-center gap-2 mb-1">
-                  <div className={`badge text-[10px] ${a.severity === 'high' ? 'badge-danger' : a.severity === 'medium' ? 'badge-warn' : 'badge-muted'}`}>
-                    {a.severity.toUpperCase()}
-                  </div>
-                  <span className="text-[10px] text-sol-muted">{a.type}</span>
+                  <span className={`badge-pill text-[10px] ${a.severity === 'high' ? 'badge-pill-red' : ''}`}>{a.severity.toUpperCase()}</span>
+                  <span className="text-caption text-muted">{a.type}</span>
                 </div>
-                <div className="text-xs text-sol-text">{a.description}</div>
-                <div className="text-[10px] text-sol-muted/60 mt-1">{new Date(a.timestamp).toLocaleString()}</div>
+                <div className="text-body-sm text-ink">{a.description}</div>
+                <div className="text-caption text-muted-soft mt-1">{new Date(a.timestamp).toLocaleString()}</div>
               </div>
             ))}
           </div>

src/renderer/pages/SendPage.tsx

@@ -1,28 +1,35 @@
 import React, { useState } from 'react';
-import { AnimatedNumber, useToast } from '../components/ui/index';
+import { Num, useToast } from '../components/ui/index';
 
-interface SendPageProps { balance: { sol: number; usdt: number }; onSent: () => void; }
+interface Props { balance: { sol: number; usdt: number }; onSent: () => void; }
 
-export default function SendPage({ balance, onSent }: SendPageProps) {
+export default function SendPage({ balance, onSent }: Props) {
   const [token, setToken] = useState<'SOL' | 'USDT'>('SOL');
   const [to, setTo] = useState('');
   const [amount, setAmount] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
-  const [success, setSuccess] = useState<{ signature: string; explorer: string } | null>(null);
-  const [step, setStep] = useState<'form' | 'confirm' | 'result'>('form');
+  const [success, setSuccess] = useState<any>(null);
+  const [step, setStep] = useState<'form' | 'confirm' | 'done'>('form');
+  const [risk, setRisk] = useState<any>(null);
   const { addToast } = useToast();
 
   const max = token === 'SOL' ? balance.sol : balance.usdt;
-  const amtNum = parseFloat(amount) || 0;
-  const pct = max > 0 ? Math.min(100, (amtNum / max) * 100) : 0;
+  const amt = parseFloat(amount) || 0;
 
-  const review = () => {
+  const review = async () => {
     setError('');
-    if (!to.trim()) return setError('Recipient address is required');
+    if (!to.trim()) return setError('Recipient address required');
     if (!/^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(to.trim())) return setError('Invalid Solana address');
-    if (!amtNum || amtNum <= 0) return setError('Enter a valid amount');
-    if (amtNum > max) return setError(`Insufficient balance. Max: ${max.toFixed(token === 'SOL' ? 4 : 2)} ${token}`);
+    if (!amt || amt <= 0) return setError('Enter a valid amount');
+    if (amt > max) return setError(`Insufficient balance. Max: ${max.toFixed(token === 'SOL' ? 4 : 2)} ${token}`);
+    // AI risk assessment before showing confirmation
+    if (window.solvox) {
+      try {
+        const r = await window.solvox.ai.assessRisk({ amount: amt, token, to: to.trim() });
+        if (r.success) setRisk(r.risk);
+      } catch {}
+    }
     setStep('confirm');
   };
 
@@ -30,139 +37,101 @@ export default function SendPage({ balance, onSent }: SendPageProps) {
     setLoading(true); setError('');
     try {
       const r = window.solvox
-        ? token === 'SOL' ? await window.solvox.wallet.sendSOL(to.trim(), amtNum) : await window.solvox.wallet.sendUSDT(to.trim(), amtNum)
-        : { success: true, signature: 'dev_sig_' + Date.now(), explorer: '#' };
+        ? await window.solvox.ai.executeConfirmed({ token, amount: amt, to: to.trim() })
+        : { success: true, signature: 'dev_' + Date.now(), explorer: '#' };
       if (r.success) {
-        setSuccess({ signature: r.signature!, explorer: r.explorer! });
-        setStep('result');
-        onSent();
-        addToast({ type: 'success', title: 'Transaction Sent', message: `${amount} ${token} sent successfully` });
+        setSuccess(r); setStep('done'); onSent();
+        addToast({ type: 'success', title: `${amount} ${token} sent` });
       } else { setError(r.error || 'Transaction failed'); setStep('form'); }
     } catch (e: any) { setError(e.message); setStep('form'); }
     setLoading(false);
   };
 
-  const reset = () => { setTo(''); setAmount(''); setError(''); setSuccess(null); setStep('form'); };
+  const reset = () => { setTo(''); setAmount(''); setError(''); setSuccess(null); setRisk(null); setStep('form'); };
 
   return (
-    <div className="max-w-md mx-auto page-enter">
-      {/* Header */}
-      <div className="flex items-center gap-3 mb-6">
-        <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${token === 'SOL' ? 'bg-gradient-to-br from-sol-purple to-sol-purple-light' : 'bg-gradient-to-br from-tether-green to-tether-dark'}`}>
-          <span className="text-white font-bold">{token === 'SOL' ? '◎' : '₮'}</span>
-        </div>
-        <div>
-          <h2 className="text-xl font-bold">Send {token}</h2>
-          <div className="text-xs text-sol-muted">Balance: <AnimatedNumber value={max} decimals={token === 'SOL' ? 4 : 2} /> {token}</div>
-        </div>
-      </div>
+    <div className="max-w-md mx-auto px-8 py-section">
+      <h2 className="text-title-lg display-text text-ink mb-2">Send {token}</h2>
+      <p className="text-body-sm text-body mb-8">Balance: <span className="number-mono"><Num value={max} decimals={token === 'SOL' ? 4 : 2} /></span> {token}</p>
 
       {step === 'form' && (
-        <div className="glass rounded-3xl p-6 space-y-5 slide-enter">
-          {/* Token Selector */}
-          <div className="flex gap-2 p-1 bg-sol-dark/60 rounded-xl">
+        <div className="card space-y-5">
+          {/* Token */}
+          <div className="flex gap-2 p-1 bg-surface-soft rounded-pill">
             {(['SOL', 'USDT'] as const).map(t => (
-              <button key={t} onClick={() => setToken(t)}
-                className={`flex-1 py-2.5 rounded-lg text-sm font-semibold transition-all duration-300 ${
-                  token === t ? (t === 'SOL' ? 'bg-gradient-to-r from-sol-purple to-sol-purple-light text-white shadow-glow-sm' : 'bg-gradient-to-r from-tether-green to-tether-dark text-white shadow-glow-sm')
-                  : 'text-sol-muted hover:text-sol-text'
-                }`}>
+              <button key={t} onClick={() => setToken(t)} className={`flex-1 py-2 rounded-pill text-button transition-colors ${token === t ? 'bg-primary text-on-primary' : 'text-body hover:text-ink'}`}>
                 {t === 'SOL' ? '◎' : '₮'} {t}
               </button>
             ))}
           </div>
-
           {/* Recipient */}
           <div>
-            <label className="text-xs text-sol-muted font-semibold uppercase tracking-wider block mb-2">Recipient</label>
-            <input value={to} onChange={e => setTo(e.target.value)} placeholder="Enter Solana address"
-              className="input-field font-mono text-xs" />
+            <label className="text-caption-strong text-muted uppercase tracking-wider block mb-1.5">Recipient</label>
+            <input value={to} onChange={e => setTo(e.target.value)} placeholder="Solana address" className="input-field font-mono text-body-sm" />
           </div>
-
           {/* Amount */}
           <div>
-            <div className="flex justify-between items-center mb-2">
-              <label className="text-xs text-sol-muted font-semibold uppercase tracking-wider">Amount</label>
-              <button onClick={() => setAmount(max.toString())} className="text-[11px] text-sol-purple hover:underline font-medium">
-                MAX {max.toFixed(token === 'SOL' ? 4 : 2)}
-              </button>
-            </div>
-            <div className="relative">
-              <input type="number" value={amount} onChange={e => setAmount(e.target.value)}
-                placeholder="0.00" step="any" min="0" className="input-field text-xl font-bold pr-16 text-center" />
-              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-sol-muted font-semibold text-sm">{token}</span>
+            <div className="flex justify-between items-center mb-1.5">
+              <label className="text-caption-strong text-muted uppercase tracking-wider">Amount</label>
+              <button onClick={() => setAmount(max.toString())} className="btn-text text-body-sm py-0 px-1">Max</button>
             </div>
-            {/* Percentage bar */}
-            <div className="mt-2 flex items-center gap-2">
-              <div className="progress-bar flex-1"><div className="progress-fill" style={{ width: `${pct}%` }} /></div>
-              <span className="text-[10px] text-sol-muted w-10 text-right">{pct.toFixed(0)}%</span>
-            </div>
-            {/* Quick amounts */}
+            <input type="number" value={amount} onChange={e => setAmount(e.target.value)} placeholder="0.00" step="any" className="input-field number-mono text-title-lg text-center" />
             <div className="flex gap-2 mt-2">
               {[25, 50, 75, 100].map(p => (
-                <button key={p} onClick={() => setAmount((max * p / 100).toFixed(token === 'SOL' ? 4 : 2))}
-                  className="flex-1 py-1 rounded-lg text-[10px] font-medium text-sol-muted bg-sol-dark/40 border border-sol-border/30 hover:border-sol-purple/30 hover:text-sol-purple transition-all">
-                  {p}%
-                </button>
+                <button key={p} onClick={() => setAmount((max * p / 100).toFixed(token === 'SOL' ? 4 : 2))} className="flex-1 py-1.5 rounded-pill text-caption-strong text-muted bg-surface-soft hover:bg-surface-strong transition-colors">{p}%</button>
               ))}
             </div>
           </div>
-
-          {error && <div className="badge-danger bg-danger/8 border border-danger/20 rounded-xl p-3 text-xs">{error}</div>}
-
-          <button onClick={review} className="btn-primary w-full py-3.5 text-white">
-            <span>Review Transaction</span>
-          </button>
+          {error && <div className="text-body-sm text-semantic-down bg-semantic-down/5 rounded-md p-3">{error}</div>}
+          <button onClick={review} className="btn-primary w-full">Review transaction</button>
         </div>
       )}
 
       {step === 'confirm' && (
-        <div className="glass rounded-3xl p-6 space-y-5 scale-in">
+        <div className="card space-y-5 page-enter">
           <div className="text-center mb-2">
-            <div className="text-sm text-sol-muted font-medium">Confirm Transaction</div>
-            <div className="text-3xl font-extrabold mt-1">{amount} <span className={token === 'SOL' ? 'text-sol-purple' : 'text-tether-green'}>{token}</span></div>
+            <div className="text-body text-muted">Confirm transaction</div>
+            <div className="display-text text-display-sm text-ink mt-1">{amount} {token}</div>
           </div>
-
-          <div className="bg-sol-dark/50 rounded-xl p-4 space-y-3 text-sm">
-            <div className="flex justify-between"><span className="text-sol-muted">To</span><span className="font-mono text-xs">{to.slice(0, 10)}...{to.slice(-6)}</span></div>
-            <div className="divider" />
-            <div className="flex justify-between"><span className="text-sol-muted">Network Fee</span><span className="text-xs">~0.000005 SOL</span></div>
-            <div className="flex justify-between"><span className="text-sol-muted">Network</span><span className="badge badge-warn text-[10px]">Devnet</span></div>
+          <div className="bg-surface-soft rounded-xl p-4 space-y-3 text-body-sm">
+            <div className="flex justify-between"><span className="text-muted">To</span><span className="font-mono text-caption">{to.slice(0, 10)}…{to.slice(-6)}</span></div>
+            <div className="hairline-soft" />
+            <div className="flex justify-between"><span className="text-muted">Fee</span><span className="number-mono text-caption">~0.000005 SOL</span></div>
+            <div className="flex justify-between"><span className="text-muted">Network</span><span className="badge-pill text-[10px]">DEVNET</span></div>
           </div>
-
-          <div className="bg-warning/6 border border-warning/15 rounded-xl p-3 flex items-start gap-2.5">
-            <span className="text-warning text-sm mt-0.5">⚠</span>
-            <div>
-              <div className="text-xs font-semibold text-warning">Verify carefully</div>
-              <div className="text-[11px] text-sol-muted mt-0.5">Blockchain transactions are irreversible. Double-check the address.</div>
+          {/* AI Risk Assessment */}
+          {risk && (
+            <div className={`rounded-xl p-4 text-body-sm ${risk.level === 'safe' ? 'bg-semantic-up/5' : risk.level === 'danger' ? 'bg-semantic-down/5' : 'bg-accent-yellow/5'}`}>
+              <div className="flex items-center gap-2 mb-1">
+                <span className={`badge-pill text-[10px] ${risk.level === 'safe' ? 'badge-pill-green' : 'badge-pill-red'}`}>AI RISK: {risk.level.toUpperCase()}</span>
+                <span className="number-mono text-caption text-muted">{risk.score}/100</span>
+              </div>
+              {risk.factors?.length > 0 && <ul className="text-caption text-body mt-1 space-y-0.5">{risk.factors.map((f: string, i: number) => <li key={i}>· {f}</li>)}</ul>}
+              {risk.recommendation && <div className="text-caption text-muted mt-1">{risk.recommendation}</div>}
+              <div className="text-caption text-muted-soft mt-1 flex items-center gap-1">
+                <div className="w-1 h-1 rounded-full bg-primary" />
+                Analyzed by @qvac/llm-llamacpp + @qvac/embed-llamacpp
+              </div>
             </div>
-          </div>
-
-          {error && <div className="text-danger text-xs text-center">{error}</div>}
-
+          )}
+          {error && <div className="text-body-sm text-semantic-down">{error}</div>}
           <div className="flex gap-3">
-            <button onClick={() => setStep('form')} className="btn-ghost flex-1 py-3">Cancel</button>
-            <button onClick={send} disabled={loading} className="btn-primary flex-1 py-3 text-white disabled:opacity-50">
-              <span>{loading ? 'Sending...' : `Send ${token}`}</span>
-            </button>
+            <button onClick={() => setStep('form')} className="btn-secondary flex-1">Cancel</button>
+            <button onClick={send} disabled={loading} className="btn-primary flex-1 disabled:opacity-50">{loading ? 'Sending…' : `Send ${token}`}</button>
           </div>
         </div>
       )}
 
-      {step === 'result' && success && (
-        <div className="glass rounded-3xl p-8 text-center space-y-5 scale-in">
-          <div className="w-16 h-16 mx-auto rounded-full bg-sol-green/15 flex items-center justify-center">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#14F195" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
-          </div>
-          <div>
-            <h3 className="text-2xl font-bold">Sent!</h3>
-            <p className="text-sol-muted text-sm mt-1">{amount} {token} sent successfully</p>
+      {step === 'done' && success && (
+        <div className="card text-center space-y-5 page-enter">
+          <div className="w-14 h-14 mx-auto rounded-full bg-semantic-up/10 flex items-center justify-center">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#05b169" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
           </div>
-          <div className="bg-sol-dark/50 rounded-xl p-3 font-mono text-[11px] text-sol-muted break-all">{success.signature}</div>
-          <a href={success.explorer} target="_blank" rel="noopener noreferrer" className="text-sol-purple text-xs hover:underline inline-flex items-center gap-1">
-            View on Solscan <span>↗</span>
-          </a>
-          <button onClick={reset} className="btn-primary w-full py-3 text-white"><span>Send Another</span></button>
+          <div className="display-text text-display-sm text-ink">Sent</div>
+          <p className="text-body text-muted">{amount} {token} sent successfully</p>
+          <div className="bg-surface-soft rounded-xl p-3 font-mono text-caption text-muted break-all">{success.signature}</div>
+          <a href={success.explorer} target="_blank" rel="noopener noreferrer" className="btn-text text-body-sm">View on Solscan →</a>
+          <button onClick={reset} className="btn-primary w-full">Send another</button>
         </div>
       )}
     </div>

src/renderer/pages/SettingsPage.tsx

@@ -1,104 +1,87 @@
 import React, { useState } from 'react';
 
-interface SettingsPageProps { onLock: () => void; }
+interface Props { onLock: () => void; }
 
-export default function SettingsPage({ onLock }: SettingsPageProps) {
-  const [network, setNetwork] = useState('devnet');
+const models = [
+  { name: 'LLM', model: 'Llama 3.2 3B Instruct', q: 'Q4_K_M', size: '2.0 GB', pkg: 'llm-llamacpp' },
+  { name: 'Embeddings', model: 'Nomic Embed Text v1.5', q: 'Q4_K_M', size: '260 MB', pkg: 'embed-llamacpp' },
+  { name: 'Speech-to-Text', model: 'Whisper Base.en', q: 'GGML', size: '150 MB', pkg: 'transcription-whispercpp' },
+  { name: 'Text-to-Speech', model: 'Piper Amy', q: 'ONNX', size: '75 MB', pkg: 'tts-onnx' },
+  { name: 'Translation', model: 'OPUS MT (EN↔ES)', q: 'NMT', size: '50 MB', pkg: 'translation-nmtcpp' },
+  { name: 'OCR', model: 'PaddleOCR v4', q: 'ONNX', size: '30 MB', pkg: 'ocr-onnx' },
+];
 
-  const models = [
-    { name: 'LLM', model: 'Llama 3.2 3B Instruct', quant: 'Q4_K_M', size: '2.0 GB', pkg: 'llm-llamacpp', color: '#9945FF' },
-    { name: 'Embeddings', model: 'Nomic Embed Text v1.5', quant: 'Q4_K_M', size: '260 MB', pkg: 'embed-llamacpp', color: '#B06CFF' },
-    { name: 'Speech-to-Text', model: 'Whisper Base.en', quant: 'GGML', size: '150 MB', pkg: 'transcription-whispercpp', color: '#14F195' },
-    { name: 'Text-to-Speech', model: 'Piper Amy (en_US)', quant: 'ONNX', size: '75 MB', pkg: 'tts-onnx', color: '#26A17B' },
-    { name: 'Translation', model: 'OPUS MT (EN↔ES)', quant: 'NMT', size: '50 MB', pkg: 'translation-nmtcpp', color: '#FFB830' },
-    { name: 'OCR', model: 'PaddleOCR v4', quant: 'ONNX', size: '30 MB', pkg: 'ocr-onnx', color: '#3B82F6' },
-  ];
+export default function SettingsPage({ onLock }: Props) {
+  const [network, setNetwork] = useState('devnet');
 
   return (
-    <div className="space-y-5 max-w-2xl page-enter">
-      <h2 className="text-xl font-bold">Settings</h2>
+    <div className="max-w-2xl mx-auto px-8 py-section">
+      <h2 className="display-text text-title-lg text-ink mb-8">Settings</h2>
 
       {/* Network */}
-      <div className="glass rounded-2xl p-5">
-        <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider mb-3">Network</div>
-        <div className="flex gap-2 p-1 bg-sol-dark/60 rounded-xl">
-          {[
-            { id: 'devnet', label: 'Devnet', color: 'warning' },
-            { id: 'mainnet-beta', label: 'Mainnet', color: 'danger' },
-            { id: 'testnet', label: 'Testnet', color: 'muted' },
-          ].map(n => (
-            <button key={n.id} onClick={() => setNetwork(n.id)}
-              className={`flex-1 py-2 rounded-lg text-xs font-semibold transition-all ${
-                network === n.id ? 'bg-sol-card text-sol-text shadow' : 'text-sol-muted hover:text-sol-text'
-              }`}>
-              {network === n.id && <span className={`inline-block w-1.5 h-1.5 rounded-full mr-1.5 ${n.color === 'danger' ? 'bg-danger' : n.color === 'warning' ? 'bg-warning' : 'bg-sol-muted'}`} />}
-              {n.label}
-            </button>
+      <div className="card mb-6">
+        <div className="text-caption-strong text-muted uppercase tracking-wider mb-3">Network</div>
+        <div className="flex gap-2 p-1 bg-surface-soft rounded-pill">
+          {[{ id: 'devnet', l: 'Devnet' }, { id: 'mainnet-beta', l: 'Mainnet' }, { id: 'testnet', l: 'Testnet' }].map(n => (
+            <button key={n.id} onClick={() => setNetwork(n.id)} className={`flex-1 py-2 rounded-pill text-button transition-colors ${network === n.id ? 'bg-primary text-on-primary' : 'text-body hover:text-ink'}`}>{n.l}</button>
           ))}
         </div>
-        <p className="text-[10px] text-sol-muted mt-2">
-          {network === 'devnet' && '⚠ Devnet — test tokens only'}
-          {network === 'mainnet-beta' && '🔴 Mainnet — real tokens, irreversible'}
-          {network === 'testnet' && '⚠ Testnet — development only'}
+        <p className="text-caption text-muted mt-2">
+          {network === 'devnet' && 'Test tokens only. No real value.'}
+          {network === 'mainnet-beta' && 'Real tokens. Transactions irreversible.'}
+          {network === 'testnet' && 'Development purposes only.'}
         </p>
       </div>
 
-      {/* AI Models */}
-      <div className="glass rounded-2xl p-5">
+      {/* AI Models — Coinbase pricing-tier-card pattern */}
+      <div className="card mb-6">
         <div className="flex items-center justify-between mb-4">
-          <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider">QVAC AI Models</div>
-          <div className="badge badge-tether text-[10px]">6 modules • ~2.6 GB</div>
+          <div className="text-caption-strong text-muted uppercase tracking-wider">QVAC AI Models</div>
+          <span className="badge-pill text-[10px]">6 MODULES · ~2.6 GB</span>
         </div>
-        <div className="space-y-2 stagger">
+        <div className="space-y-0">
           {models.map(m => (
-            <div key={m.name} className="flex items-center gap-3 bg-sol-dark/40 rounded-xl p-3 hover:bg-sol-dark/60 transition-colors">
-              <div className="w-1 h-10 rounded-full" style={{ background: m.color }} />
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-xs font-semibold text-sol-text">{m.name}</span>
-                  <span className="badge badge-muted text-[9px]">{m.quant}</span>
-                </div>
-                <div className="text-[10px] text-sol-muted">{m.model}</div>
-                <div className="text-[9px] text-sol-muted/60 font-mono">@qvac/{m.pkg}</div>
+            <div key={m.name} className="flex items-center justify-between py-3 border-b border-hairline-soft last:border-0">
+              <div>
+                <div className="text-title-sm text-ink">{m.name}</div>
+                <div className="text-caption text-muted">{m.model}</div>
+                <div className="text-caption text-muted-soft font-mono">@qvac/{m.pkg}</div>
+              </div>
+              <div className="text-right">
+                <span className="badge-pill text-[10px] mr-2">{m.q}</span>
+                <span className="number-mono text-caption text-muted">{m.size}</span>
               </div>
-              <div className="text-[10px] text-sol-muted font-medium">{m.size}</div>
             </div>
           ))}
         </div>
-        <div className="divider my-3" />
-        <div className="flex items-center gap-2 text-[10px] text-sol-muted">
-          <div className="w-1.5 h-1.5 rounded-full bg-tether-green" />
+        <div className="hairline-soft mt-3 mb-3" />
+        <div className="text-caption text-muted flex items-center gap-1.5">
+          <div className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
           All models run locally via QVAC Fabric (Vulkan GPU) — no CUDA required
         </div>
       </div>
 
       {/* About */}
-      <div className="glass rounded-2xl p-5">
-        <div className="text-xs text-sol-muted font-semibold uppercase tracking-wider mb-3">About SolVox</div>
-        <div className="space-y-2 text-xs text-sol-muted">
-          <p><strong className="text-sol-text">SolVox</strong> — voice-first, privacy-preserving AI wallet for Solana.</p>
-          <p>Powered by <strong className="text-tether-green">Tether QVAC SDK</strong> — local-first AI that never phones home.</p>
-          <div className="flex flex-wrap gap-1.5 mt-3">
-            {['Electron', 'React', 'TypeScript', 'QVAC SDK', 'Solana', 'Vulkan', 'TailwindCSS'].map(t => (
-              <span key={t} className="badge badge-muted text-[9px]">{t}</span>
-            ))}
-          </div>
+      <div className="card mb-6">
+        <div className="text-caption-strong text-muted uppercase tracking-wider mb-3">About</div>
+        <div className="text-body-sm text-body space-y-2">
+          <p><strong className="text-ink">SolVox</strong> — voice-first, privacy-preserving AI wallet for Solana.</p>
+          <p>Powered by <strong className="text-primary">Tether QVAC SDK</strong> — local AI that never phones home.</p>
         </div>
-        <div className="divider my-3" />
-        <div className="text-[10px] text-sol-muted/60">
-          Built for Colosseum Frontier Hackathon • Tether QVAC Track
+        <div className="flex flex-wrap gap-1.5 mt-3">
+          {['Electron', 'React', 'TypeScript', 'QVAC SDK', 'Solana', 'Vulkan'].map(t => (
+            <span key={t} className="badge-pill text-[10px]">{t}</span>
+          ))}
         </div>
+        <div className="hairline-soft my-3" />
+        <div className="text-caption text-muted-soft">Colosseum Frontier Hackathon · Tether QVAC Track</div>
       </div>
 
-      {/* Danger Zone */}
-      <div className="rounded-2xl border border-danger/20 p-5 bg-danger/[0.02]">
-        <div className="text-xs text-danger font-semibold uppercase tracking-wider mb-3">Danger Zone</div>
-        <button onClick={onLock}
-          className="w-full py-3 rounded-xl border border-danger/30 text-danger text-sm font-medium hover:bg-danger/8 transition-all flex items-center justify-center gap-2">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-          Lock Wallet Now
-        </button>
-        <p className="text-[10px] text-sol-muted/60 text-center mt-2">Zeroes private key from memory. PIN required to unlock.</p>
+      {/* Lock */}
+      <div className="card border-semantic-down/20" style={{ borderColor: 'rgba(207, 32, 47, 0.15)' }}>
+        <div className="text-caption-strong text-semantic-down uppercase tracking-wider mb-3">Danger zone</div>
+        <button onClick={onLock} className="w-full py-3 rounded-pill border border-semantic-down/30 text-semantic-down text-button hover:bg-semantic-down/5 transition-colors">Lock wallet</button>
+        <p className="text-caption text-muted text-center mt-2">Zeroes private key from memory. PIN required to unlock.</p>
       </div>
     </div>
   );

src/renderer/pages/VoicePage.tsx

@@ -1,237 +1,151 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { OrbitLoader } from '../components/ui/index';
+import { PipelineTrace } from '../components/ui/index';
 
-interface VoicePageProps { aiStatus: any; }
-interface Message { id: string; role: 'user' | 'assistant' | 'system'; text: string; intent?: any; timestamp: Date; }
+interface Props { aiStatus: any; }
+interface Msg { id: string; role: 'user' | 'assistant' | 'system'; text: string; pipeline?: any[]; actions?: any[]; ts: Date; }
 
-const SUGGESTIONS = [
-  'What is my balance?',
-  'Send 5 SOL to alice.sol',
-  'Show my recent transactions',
-  'How much USDT do I have?',
-  'Send 100 USDT to bob.sol',
-  'Help me understand gas fees',
-];
+const SUGGESTIONS = ['What is my balance?', 'Send 5 SOL to alice.sol', 'Show recent transactions', 'Help me understand gas fees'];
 
-export default function VoicePage({ aiStatus }: VoicePageProps) {
-  const [messages, setMessages] = useState<Message[]>([
-    { id: '0', role: 'assistant', text: "Hey! I'm your SolVox AI assistant — running 100% locally on your device. I can help you send SOL & USDT, check balances, search transactions, and more.\n\nTry holding the mic button or type a command below.", timestamp: new Date() },
+export default function VoicePage({ aiStatus }: Props) {
+  const [msgs, setMsgs] = useState<Msg[]>([
+    { id: '0', role: 'assistant', text: "I'm your SolVox AI assistant — running 100% locally via 6 QVAC modules. Ask me to send tokens, check balances, search transactions, or explain anything about Solana.", pipeline: [], actions: [], ts: new Date() },
   ]);
   const [input, setInput] = useState('');
-  const [isRecording, setIsRecording] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [waveformData, setWaveformData] = useState<number[]>(new Array(48).fill(2));
-  const [recordingTime, setRecordingTime] = useState(0);
-  const mediaRecorder = useRef<MediaRecorder | null>(null);
-  const audioChunks = useRef<Blob[]>([]);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const analyserRef = useRef<AnalyserNode | null>(null);
-  const animFrameRef = useRef<number | null>(null);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
-
-  const startRecording = async () => {
+  const [recording, setRecording] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const [wave, setWave] = useState<number[]>(new Array(40).fill(1));
+  const recRef = useRef<MediaRecorder | null>(null);
+  const chunks = useRef<Blob[]>([]);
+  const endRef = useRef<HTMLDivElement>(null);
+  const analyser = useRef<AnalyserNode | null>(null);
+  const raf = useRef<number | null>(null);
+
+  useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [msgs]);
+
+  const startRec = async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 16000, channelCount: 1, echoCancellation: true, noiseSuppression: true } });
-      const ctx = new AudioContext();
-      const src = ctx.createMediaStreamSource(stream);
-      const analyser = ctx.createAnalyser();
-      analyser.fftSize = 128;
-      src.connect(analyser);
-      analyserRef.current = analyser;
-
-      const update = () => {
-        if (!analyserRef.current) return;
-        const d = new Uint8Array(analyserRef.current.frequencyBinCount);
-        analyserRef.current.getByteFrequencyData(d);
-        setWaveformData(Array.from(d).slice(0, 48).map(v => Math.max(2, v / 6)));
-        animFrameRef.current = requestAnimationFrame(update);
-      };
-      update();
-
-      const rec = new MediaRecorder(stream, { mimeType: 'audio/webm' });
-      audioChunks.current = [];
-      rec.ondataavailable = e => { if (e.data.size > 0) audioChunks.current.push(e.data); };
-      rec.onstop = async () => {
-        stream.getTracks().forEach(t => t.stop());
-        if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
-        if (timerRef.current) clearInterval(timerRef.current);
-        setWaveformData(new Array(48).fill(2));
-        setRecordingTime(0);
-        const blob = new Blob(audioChunks.current, { type: 'audio/webm' });
-        processVoice(await blob.arrayBuffer());
-      };
-
-      mediaRecorder.current = rec;
-      rec.start();
-      setIsRecording(true);
-      setRecordingTime(0);
-      timerRef.current = setInterval(() => setRecordingTime(p => p + 1), 1000);
-    } catch { addMsg('system', 'Microphone access denied. Please enable mic permissions.'); }
+      const ctx = new AudioContext(); const src = ctx.createMediaStreamSource(stream); const a = ctx.createAnalyser(); a.fftSize = 128; src.connect(a); analyser.current = a;
+      const tick = () => { if (!analyser.current) return; const d = new Uint8Array(analyser.current.frequencyBinCount); analyser.current.getByteFrequencyData(d); setWave(Array.from(d).slice(0, 40).map(v => Math.max(1, v / 8))); raf.current = requestAnimationFrame(tick); }; tick();
+      const rec = new MediaRecorder(stream, { mimeType: 'audio/webm' }); chunks.current = [];
+      rec.ondataavailable = e => { if (e.data.size > 0) chunks.current.push(e.data); };
+      rec.onstop = async () => { stream.getTracks().forEach(t => t.stop()); if (raf.current) cancelAnimationFrame(raf.current); setWave(new Array(40).fill(1)); const b = new Blob(chunks.current, { type: 'audio/webm' }); processVoice(await b.arrayBuffer()); };
+      recRef.current = rec; rec.start(); setRecording(true);
+    } catch { add('system', 'Microphone access denied.'); }
   };
 
-  const stopRecording = () => {
-    if (mediaRecorder.current && isRecording) { mediaRecorder.current.stop(); setIsRecording(false); }
-  };
+  const stopRec = () => { if (recRef.current && recording) { recRef.current.stop(); setRecording(false); } };
 
   const processVoice = async (data: ArrayBuffer) => {
-    setIsProcessing(true);
+    setProcessing(true);
     try {
       if (window.solvox) {
         const r = await window.solvox.ai.processVoice(data);
         if (r.success) {
-          addMsg('user', r.transcription || '[voice]');
-          addMsg('assistant', r.response || 'Done.', r.intent);
-          if (r.audio) playAudio(r.audio);
-        } else { addMsg('system', `Voice processing failed: ${r.error}`); }
-      } else { addMsg('user', '[voice — dev mode]'); addMsg('assistant', 'QVAC models needed for voice. Type commands below.'); }
-    } catch (e: any) { addMsg('system', e.message); }
-    setIsProcessing(false);
+          add('user', r.transcription || '[voice]');
+          add('assistant', r.agentResult?.response || 'Done.', r.pipelineSteps, r.agentResult?.actions);
+          if (r.responseAudio) { const u = URL.createObjectURL(new Blob([r.responseAudio], { type: 'audio/wav' })); new Audio(u).play().catch(() => {}); }
+        } else add('system', r.error || 'Voice processing failed');
+      } else { add('user', '[voice — dev]'); add('assistant', 'QVAC models needed. Type commands instead.'); }
+    } catch (e: any) { add('system', e.message); }
+    setProcessing(false);
   };
 
   const handleSend = async () => {
-    if (!input.trim()) return;
-    const text = input.trim();
-    setInput('');
-    addMsg('user', text);
-    setIsProcessing(true);
+    if (!input.trim()) return; const text = input.trim(); setInput(''); add('user', text); setProcessing(true);
     try {
       if (window.solvox) {
-        const [intentR, chatR] = await Promise.all([window.solvox.ai.parseIntent(text), window.solvox.ai.chat(text)]);
-        addMsg('assistant', chatR.success ? chatR.response! : 'Sorry, could not process that.', intentR.success ? intentR.intent : undefined);
-      } else { addMsg('assistant', `[Dev mode] "${text}" — QVAC models needed.`); }
-    } catch (e: any) { addMsg('system', e.message); }
-    setIsProcessing(false);
-  };
-
-  const addMsg = (role: 'user' | 'assistant' | 'system', text: string, intent?: any) => {
-    setMessages(p => [...p, { id: Date.now().toString(36), role, text, intent, timestamp: new Date() }]);
+        const r = await window.solvox.ai.chat(text);
+        if (r.success) add('assistant', r.response, r.pipelineSteps, r.actions);
+        else add('assistant', r.error || 'Could not process.');
+      } else add('assistant', `[Dev] "${text}" — needs QVAC models.`);
+    } catch (e: any) { add('system', e.message); }
+    setProcessing(false);
   };
 
-  const playAudio = (d: ArrayBuffer) => {
-    try { const u = URL.createObjectURL(new Blob([d], { type: 'audio/wav' })); const a = new Audio(u); a.play().catch(() => {}); a.onended = () => URL.revokeObjectURL(u); } catch {}
+  const add = (role: Msg['role'], text: string, pipeline?: any[], actions?: any[]) => {
+    setMsgs(p => [...p, { id: Date.now().toString(36), role, text, pipeline, actions, ts: new Date() }]);
   };
 
-  const activeModules = aiStatus ? [aiStatus.llm, aiStatus.transcription, aiStatus.tts, aiStatus.embed, aiStatus.translation, aiStatus.ocr].filter(Boolean).length : 0;
+  const mods = aiStatus ? [aiStatus.llm, aiStatus.transcription, aiStatus.tts, aiStatus.embed, aiStatus.translation, aiStatus.ocr].filter(Boolean).length : 0;
 
   return (
-    <div className="flex flex-col h-full page-enter">
+    <div className="flex flex-col h-full max-w-content mx-auto px-8 py-6">
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <div>
-          <h2 className="text-xl font-bold text-sol-text">Voice AI Assistant</h2>
-          <p className="text-[11px] text-sol-muted">Powered by 6 QVAC packages • All local, all private</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className={`badge ${activeModules >= 4 ? 'badge-green' : activeModules > 0 ? 'badge-warn' : 'badge-muted'}`}>
-            <div className={`w-1.5 h-1.5 rounded-full ${activeModules > 0 ? 'bg-current animate-pulse' : 'bg-sol-muted/30'}`} />
-            {activeModules >= 4 ? 'AI Online' : activeModules > 0 ? 'Partial' : 'Loading...'}
-          </div>
+          <h2 className="text-title-lg display-text text-ink">Voice AI Assistant</h2>
+          <p className="text-body-sm text-body">Powered by 6 QVAC packages · All inference local</p>
         </div>
+        <span className={`badge-pill ${mods >= 4 ? 'badge-pill-green' : mods > 0 ? 'badge-pill-blue' : ''}`}>
+          {mods >= 4 ? 'AI ONLINE' : mods > 0 ? 'PARTIAL' : 'LOADING'}
+        </span>
       </div>
 
-      {/* Chat Area */}
-      <div className="flex-1 overflow-y-auto chat-scroll glass rounded-2xl p-4 mb-4 space-y-3">
-        {messages.map(msg => (
-          <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} slide-enter`}>
-            <div className={`max-w-[78%] rounded-2xl px-4 py-3 ${
-              msg.role === 'user' ? 'bg-gradient-to-br from-sol-purple to-sol-purple-light text-white shadow-glow-sm' :
-              msg.role === 'system' ? 'bg-warning/8 text-warning border border-warning/20' :
-              'bg-sol-dark/60 border border-sol-border/40'
+      {/* Chat */}
+      <div className="flex-1 overflow-y-auto card mb-4 space-y-4" style={{ padding: '24px' }}>
+        {msgs.map(m => (
+          <div key={m.id} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'} page-enter`}>
+            <div className={`max-w-[75%] ${
+              m.role === 'user' ? 'bg-primary text-on-primary rounded-xl rounded-br-sm px-4 py-3' :
+              m.role === 'system' ? 'bg-surface-soft text-muted border border-hairline rounded-xl px-4 py-3' :
+              'bg-surface-soft text-ink rounded-xl rounded-bl-sm px-4 py-3'
             }`}>
-              {msg.role === 'assistant' && (
-                <div className="flex items-center gap-1.5 mb-1.5">
-                  <div className="w-4 h-4 rounded bg-tether-green/20 flex items-center justify-center">
-                    <span className="text-[8px] text-tether-green font-bold">Q</span>
-                  </div>
-                  <span className="text-[10px] text-sol-muted font-medium">SolVox AI</span>
-                </div>
-              )}
-              <p className="text-[13px] leading-relaxed whitespace-pre-wrap">{msg.text}</p>
-              {msg.intent && msg.intent.action !== 'unknown' && (
-                <div className="mt-2 pt-2 border-t border-white/10">
-                  <div className="flex flex-wrap gap-1.5">
-                    <span className="badge badge-purple text-[10px]">{msg.intent.action}</span>
-                    {msg.intent.confidence && <span className="badge badge-muted text-[10px]">{(msg.intent.confidence*100).toFixed(0)}%</span>}
-                    {msg.intent.amount && <span className="badge badge-green text-[10px]">{msg.intent.amount} {msg.intent.token || ''}</span>}
-                    {msg.intent.to && <span className="badge badge-tether text-[10px]">→ {msg.intent.to}</span>}
-                  </div>
+              {m.role === 'assistant' && <div className="text-caption-strong text-primary mb-1">SolVox AI</div>}
+              <p className="text-body-sm whitespace-pre-wrap">{m.text}</p>
+              {m.actions && m.actions.length > 0 && (
+                <div className="flex flex-wrap gap-1 mt-2">
+                  {m.actions.map((a: any, i: number) => (
+                    <span key={i} className="badge-pill-blue badge-pill text-[10px]">{a.tool}</span>
+                  ))}
                 </div>
               )}
-              <div className="text-[10px] opacity-40 mt-1.5">{msg.timestamp.toLocaleTimeString()}</div>
+              {m.pipeline && m.pipeline.length > 0 && <PipelineTrace steps={m.pipeline} />}
+              <div className="text-caption text-muted-soft mt-1.5">{m.ts.toLocaleTimeString()}</div>
             </div>
           </div>
         ))}
-        {isProcessing && (
+        {processing && (
           <div className="flex justify-start">
-            <div className="bg-sol-dark/60 border border-sol-border/40 rounded-2xl px-5 py-4 flex items-center gap-3">
-              <OrbitLoader size={24} />
-              <span className="text-xs text-sol-muted">Processing locally...</span>
+            <div className="bg-surface-soft rounded-xl px-4 py-3 flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+              <span className="text-body-sm text-muted">Processing locally…</span>
             </div>
           </div>
         )}
-        <div ref={messagesEndRef} />
+        <div ref={endRef} />
       </div>
 
-      {/* Suggestion Chips */}
-      {messages.length <= 2 && !isRecording && (
-        <div className="flex flex-wrap gap-2 mb-3 fade-in">
-          {SUGGESTIONS.slice(0, 4).map(s => (
-            <button key={s} onClick={() => { setInput(s); }}
-              className="px-3 py-1.5 rounded-full border border-sol-border/40 text-[11px] text-sol-muted hover:text-sol-purple hover:border-sol-purple/30 transition-all">
-              {s}
-            </button>
+      {/* Suggestions */}
+      {msgs.length <= 2 && !recording && (
+        <div className="flex flex-wrap gap-2 mb-3">
+          {SUGGESTIONS.map(s => (
+            <button key={s} onClick={() => setInput(s)} className="btn-secondary text-body-sm py-1.5 px-3">{s}</button>
           ))}
         </div>
       )}
 
-      {/* Waveform (recording) */}
-      {isRecording && (
-        <div className="mb-3 fade-in">
-          <div className="glass rounded-xl p-3">
-            <div className="flex items-center justify-center gap-[2px] h-10">
-              {waveformData.map((h, i) => (
-                <div key={i} className="w-[3px] rounded-full transition-all duration-75"
-                  style={{ height: `${h}px`, background: `linear-gradient(180deg, #9945FF ${100 - h*2}%, #14F195)`, opacity: 0.4 + (h / 40) }} />
-              ))}
-            </div>
-            <div className="flex items-center justify-center gap-2 mt-2">
-              <div className="w-2 h-2 rounded-full bg-danger animate-pulse" />
-              <span className="text-xs text-danger font-medium">Recording — {recordingTime}s</span>
-            </div>
-          </div>
+      {/* Waveform */}
+      {recording && (
+        <div className="bg-surface-soft rounded-xl p-3 mb-3 flex items-center justify-center gap-px h-12">
+          {wave.map((h, i) => (
+            <div key={i} className="w-[3px] rounded-full bg-primary transition-all duration-75" style={{ height: `${h}px`, opacity: 0.3 + h / 40 }} />
+          ))}
         </div>
       )}
 
-      {/* Input Bar */}
+      {/* Input */}
       <div className="flex items-center gap-3">
-        <button
-          onMouseDown={startRecording} onMouseUp={stopRecording} onMouseLeave={stopRecording}
-          onTouchStart={startRecording} onTouchEnd={stopRecording}
-          disabled={isProcessing}
-          className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-300 ${
-            isRecording ? 'bg-danger voice-btn-active' : 'bg-gradient-to-br from-sol-purple to-sol-purple-light voice-btn-idle'
-          } disabled:opacity-40 disabled:shadow-none`}
-          title="Hold to speak"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="white" className={isRecording ? 'animate-pulse' : ''}>
-            {isRecording
-              ? <rect x="6" y="6" width="12" height="12" rx="2" />
-              : <><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"/><line x1="12" y1="19" x2="12" y2="23" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"/></>
-            }
+        <button onMouseDown={startRec} onMouseUp={stopRec} onMouseLeave={stopRec} onTouchStart={startRec} onTouchEnd={stopRec} disabled={processing}
+          className={`w-11 h-11 rounded-pill flex items-center justify-center transition-colors ${recording ? 'bg-semantic-down' : 'bg-primary'} disabled:opacity-40`}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
+            {recording ? <rect x="6" y="6" width="12" height="12" rx="2" /> : <><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"/><line x1="12" y1="19" x2="12" y2="23" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"/></>}
           </svg>
         </button>
-
         <div className="flex-1 relative">
-          <input value={input} onChange={e => setInput(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleSend()}
-            placeholder={isRecording ? 'Listening...' : 'Type a command or hold mic to speak...'}
-            className="input-field pr-20" disabled={isProcessing || isRecording} />
-          <button onClick={handleSend} disabled={!input.trim() || isProcessing}
-            className="absolute right-1.5 top-1/2 -translate-y-1/2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all disabled:opacity-20 bg-sol-purple/20 text-sol-purple hover:bg-sol-purple/30">
-            Send ↵
-          </button>
+          <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleSend()}
+            placeholder={recording ? 'Listening…' : 'Type a command or hold mic…'} className="input-field pr-20" disabled={processing || recording} />
+          <button onClick={handleSend} disabled={!input.trim() || processing} className="absolute right-1.5 top-1/2 -translate-y-1/2 btn-text text-body-sm disabled:opacity-20">Send</button>
         </div>
       </div>
     </div>

tailwind.config.js

@@ -1,87 +1,86 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/renderer/**/*.{ts,tsx,html}'],
-  darkMode: 'class',
   theme: {
     extend: {
       colors: {
-        'sol-purple': '#9945FF',
-        'sol-purple-light': '#B06CFF',
-        'sol-green': '#14F195',
-        'sol-dark': '#0A0A1E',
-        'sol-darker': '#060612',
-        'sol-card': '#141432',
-        'sol-card-hover': '#1A1A3E',
-        'sol-border': '#1E1E48',
-        'sol-text': '#E8E8FF',
-        'sol-muted': '#7878AA',
-        'tether-green': '#26A17B',
-        'tether-dark': '#1D7D5F',
-        'danger': '#FF4466',
-        'danger-dark': '#CC3652',
-        'warning': '#FFB830',
-        'info': '#3B82F6',
+        // Brand & Accent
+        primary: '#0052ff',
+        'primary-active': '#003ecc',
+        'primary-disabled': '#a8b8cc',
+        'accent-yellow': '#f4b000',
+        // Surfaces
+        canvas: '#ffffff',
+        'surface-soft': '#f7f7f7',
+        'surface-strong': '#eef0f3',
+        'surface-dark': '#0a0b0d',
+        'surface-dark-elevated': '#16181c',
+        // Hairlines
+        hairline: '#dee1e6',
+        'hairline-soft': '#eef0f3',
+        // Text
+        ink: '#0a0b0d',
+        body: '#5b616e',
+        'body-strong': '#0a0b0d',
+        muted: '#7c828a',
+        'muted-soft': '#a8acb3',
+        'on-primary': '#ffffff',
+        'on-dark': '#ffffff',
+        'on-dark-soft': '#a8acb3',
+        // Trading
+        'semantic-up': '#05b169',
+        'semantic-down': '#cf202f',
       },
       fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+        display: ['Inter', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
+        sans: ['Inter', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Geist Mono', 'monospace'],
+      },
+      fontSize: {
+        'display-mega': ['80px', { lineHeight: '1.0', letterSpacing: '-2px', fontWeight: '400' }],
+        'display-xl': ['64px', { lineHeight: '1.0', letterSpacing: '-1.6px', fontWeight: '400' }],
+        'display-lg': ['52px', { lineHeight: '1.0', letterSpacing: '-1.3px', fontWeight: '400' }],
+        'display-md': ['44px', { lineHeight: '1.09', letterSpacing: '-1px', fontWeight: '400' }],
+        'display-sm': ['36px', { lineHeight: '1.11', letterSpacing: '-0.5px', fontWeight: '400' }],
+        'title-lg': ['32px', { lineHeight: '1.13', letterSpacing: '-0.4px', fontWeight: '400' }],
+        'title-md': ['18px', { lineHeight: '1.33', letterSpacing: '0', fontWeight: '600' }],
+        'title-sm': ['16px', { lineHeight: '1.25', letterSpacing: '0', fontWeight: '600' }],
+        'body-md': ['16px', { lineHeight: '1.5', letterSpacing: '0', fontWeight: '400' }],
+        'body-strong': ['16px', { lineHeight: '1.5', letterSpacing: '0', fontWeight: '700' }],
+        'body-sm': ['14px', { lineHeight: '1.5', letterSpacing: '0', fontWeight: '400' }],
+        'caption': ['13px', { lineHeight: '1.5', letterSpacing: '0', fontWeight: '400' }],
+        'caption-strong': ['12px', { lineHeight: '1.5', letterSpacing: '0', fontWeight: '600' }],
+        'number-display': ['18px', { lineHeight: '1.4', letterSpacing: '0', fontWeight: '500' }],
+        'button': ['16px', { lineHeight: '1.15', letterSpacing: '0', fontWeight: '600' }],
+        'nav-link': ['14px', { lineHeight: '1.4', letterSpacing: '0', fontWeight: '500' }],
+      },
+      spacing: {
+        'xxs': '4px',
+        'xs': '8px',
+        'sm': '12px',
+        'base': '16px',
+        'md': '20px',
+        'lg': '24px',
+        'xl': '32px',
+        'xxl': '48px',
+        'section': '96px',
       },
       borderRadius: {
-        '2xl': '16px',
-        '3xl': '20px',
-        '4xl': '24px',
+        'none': '0px',
+        'xs': '4px',
+        'sm': '8px',
+        'md': '12px',
+        'lg': '16px',
+        'xl': '24px',
+        'pill': '100px',
+        'full': '9999px',
       },
       boxShadow: {
-        'glow-sm': '0 0 12px rgba(153, 69, 255, 0.15)',
-        'glow-md': '0 0 24px rgba(153, 69, 255, 0.2)',
-        'glow-lg': '0 0 48px rgba(153, 69, 255, 0.25)',
-        'card': '0 4px 24px rgba(0, 0, 0, 0.3)',
-        'card-hover': '0 8px 40px rgba(0, 0, 0, 0.4)',
-      },
-      animation: {
-        'pulse-glow': 'pulse-glow 3s ease-in-out infinite',
-        'waveform': 'waveform 0.5s ease-in-out infinite alternate',
-        'slide-up': 'slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
-        'fade-in': 'fadein 0.3s ease-out',
-        'scale-in': 'scalein 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
-        'spin-slow': 'spin 4s linear infinite',
-        'spin-reverse': 'spin-rev 3s linear infinite',
-        'float': 'float 6s ease-in-out infinite',
-        'gradient': 'gradient-shift 6s ease infinite',
+        'soft': '0 4px 12px rgba(0, 0, 0, 0.04)',
+        'none': 'none',
       },
-      keyframes: {
-        'pulse-glow': {
-          '0%, 100%': { boxShadow: '0 0 20px rgba(153, 69, 255, 0.2)' },
-          '50%': { boxShadow: '0 0 48px rgba(153, 69, 255, 0.5)' },
-        },
-        'waveform': {
-          '0%': { height: '3px' },
-          '100%': { height: '28px' },
-        },
-        'slide-up': {
-          '0%': { transform: 'translateY(24px)', opacity: '0' },
-          '100%': { transform: 'translateY(0)', opacity: '1' },
-        },
-        'fadein': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        'scalein': {
-          '0%': { opacity: '0', transform: 'scale(0.9)' },
-          '100%': { opacity: '1', transform: 'scale(1)' },
-        },
-        'spin-rev': {
-          '0%': { transform: 'rotate(0deg)' },
-          '100%': { transform: 'rotate(-360deg)' },
-        },
-        'float': {
-          '0%, 100%': { transform: 'translateY(0)' },
-          '50%': { transform: 'translateY(-12px)' },
-        },
-        'gradient-shift': {
-          '0%, 100%': { backgroundPosition: '0% 50%' },
-          '50%': { backgroundPosition: '100% 50%' },
-        },
+      maxWidth: {
+        'content': '1200px',
       },
     },
   },