✨ Major frontend enhancement: glassmorphism, animations, toast system, premium component library, orbit loaders, particles, animated counters, security score ring, PIN dot visualization, waveform visualizer, staggered animations, 40+ CSS animations

src/renderer/App.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import './types';
+import { ToastProvider, useToast } from './components/ui/index';
 import LockScreen from './pages/LockScreen';
 import OnboardingScreen from './pages/OnboardingScreen';
 import Dashboard from './pages/Dashboard';
@@ -14,58 +15,41 @@ import TopBar from './components/TopBar';
 type Page = 'dashboard' | 'send' | 'history' | 'voice' | 'security' | 'settings';
 type AppState = 'loading' | 'onboarding' | 'locked' | 'unlocked';
 
-export default function App() {
+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();
 
-  // Check wallet state on mount
-  useEffect(() => {
-    checkWalletState();
-  }, []);
+  useEffect(() => { checkWalletState(); }, []);
 
-  // Listen for lock events
   useEffect(() => {
     if (!window.solvox) return;
-    const cleanup = window.solvox.on.locked(() => {
-      setAppState('locked');
-    });
-    return cleanup;
+    return window.solvox.on.locked(() => { setAppState('locked'); });
   }, []);
 
   const checkWalletState = async () => {
     try {
-      if (!window.solvox) {
-        // Development mode — show dashboard
-        setAppState('unlocked');
-        return;
-      }
+      if (!window.solvox) { setAppState('unlocked'); return; }
       const exists = await window.solvox.wallet.exists();
-      if (!exists) {
-        setAppState('onboarding');
-        return;
-      }
+      if (!exists) { setAppState('onboarding'); return; }
       const unlocked = await window.solvox.wallet.isUnlocked();
       setAppState(unlocked ? 'unlocked' : 'locked');
       if (unlocked) {
-        const pk = await window.solvox.wallet.getPublicKey();
-        setPublicKey(pk);
+        setPublicKey(await window.solvox.wallet.getPublicKey());
         refreshBalance();
       }
-    } catch {
-      setAppState('onboarding');
-    }
+    } catch { setAppState('onboarding'); }
   };
 
   const refreshBalance = async () => {
     try {
       if (!window.solvox) return;
-      const result = await window.solvox.wallet.getBalance();
-      if (result.success) {
-        setBalance({ sol: result.sol || 0, usdt: result.usdt || 0 });
-      }
+      const r = await window.solvox.wallet.getBalance();
+      if (r.success) setBalance({ sol: r.sol || 0, usdt: r.usdt || 0 });
     } catch {}
   };
 
@@ -73,11 +57,12 @@ export default function App() {
     setPublicKey(pk);
     setAppState('unlocked');
     refreshBalance();
-    // Initialize AI in background
+    addToast({ type: 'success', title: 'Wallet Unlocked', message: 'Welcome back to SolVox' });
     if (window.solvox) {
-      window.solvox.ai.initialize().then(result => {
-        if (result.success) {
+      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' });
         }
       });
     }
@@ -87,79 +72,94 @@ export default function App() {
     setPublicKey(pk);
     setAppState('unlocked');
     refreshBalance();
+    addToast({ type: 'success', title: 'Wallet Created!', message: 'Your keys are encrypted and stored locally' });
   };
 
   const handleLock = async () => {
-    if (window.solvox) {
-      await window.solvox.wallet.lock();
-    }
+    if (window.solvox) await window.solvox.wallet.lock();
     setAppState('locked');
   };
 
-  // Render based on app state
-  if (appState === 'loading') {
-    return <LoadingScreen />;
-  }
-
-  if (appState === 'onboarding') {
-    return <OnboardingScreen onComplete={handleOnboardingComplete} />;
-  }
+  const navigate = (page: Page) => {
+    setPrevPage(currentPage);
+    setCurrentPage(page);
+  };
 
-  if (appState === 'locked') {
-    return <LockScreen onUnlock={handleUnlock} />;
-  }
+  if (appState === 'loading') return <LoadingScreen />;
+  if (appState === 'onboarding') return <OnboardingScreen onComplete={handleOnboardingComplete} />;
+  if (appState === 'locked') return <LockScreen onUnlock={handleUnlock} />;
 
   const renderPage = () => {
+    const props = { key: currentPage };
     switch (currentPage) {
-      case 'dashboard':
-        return <Dashboard balance={balance} publicKey={publicKey} onRefresh={refreshBalance} />;
-      case 'send':
-        return <SendPage balance={balance} onSent={refreshBalance} />;
-      case 'history':
-        return <HistoryPage />;
-      case 'voice':
-        return <VoicePage aiStatus={aiStatus} />;
-      case 'security':
-        return <SecurityPage />;
-      case 'settings':
-        return <SettingsPage onLock={handleLock} />;
-      default:
-        return <Dashboard balance={balance} publicKey={publicKey} onRefresh={refreshBalance} />;
+      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} />;
     }
   };
 
   return (
-    <div className="flex h-screen bg-sol-dark">
-      <Sidebar currentPage={currentPage} onNavigate={setCurrentPage} />
+    <div className="flex h-screen mesh-bg">
+      <Sidebar currentPage={currentPage} onNavigate={navigate} />
       <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-6">
-          {renderPage()}
+        <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>
       </div>
     </div>
   );
 }
 
+export default function App() {
+  return (
+    <ToastProvider>
+      <AppContent />
+    </ToastProvider>
+  );
+}
+
 function LoadingScreen() {
   return (
-    <div className="h-screen flex flex-col items-center justify-center bg-sol-dark">
-      <div className="text-6xl font-bold gradient-text mb-4">SolVox</div>
-      <div className="text-sol-muted text-lg">Initializing local AI engine...</div>
-      <div className="mt-8 flex space-x-2">
-        {[0, 1, 2, 3, 4].map(i => (
-          <div
-            key={i}
-            className="w-2 h-8 bg-sol-purple rounded-full waveform-bar"
-            style={{ '--delay': `${0.3 + i * 0.1}s`, '--max-height': '32px' } as any}
-          />
+    <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>
+
+      {/* 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>
     </div>
   );
 }

src/renderer/components/Sidebar.tsx

@@ -1,55 +1,118 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 interface SidebarProps {
   currentPage: string;
   onNavigate: (page: any) => void;
+  collapsed?: boolean;
 }
 
 const navItems = [
-  { id: 'dashboard', label: 'Dashboard', icon: '🏠' },
-  { id: 'voice', label: 'Voice AI', icon: '🎤' },
-  { id: 'send', label: 'Send', icon: '📤' },
-  { id: 'history', label: 'History', icon: '📋' },
-  { id: 'security', label: 'Security', icon: '🛡️' },
-  { id: 'settings', label: 'Settings', icon: '⚙️' },
+  { 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: '⚙' },
 ];
 
 export default function Sidebar({ currentPage, onNavigate }: SidebarProps) {
+  const [hovered, setHovered] = useState<string | null>(null);
+
   return (
-    <aside className="w-64 bg-sol-card border-r border-sol-border flex flex-col">
+    <aside className="w-[220px] flex flex-col bg-sol-darker/50 border-r border-sol-border/40">
       {/* Logo */}
-      <div className="p-6 border-b border-sol-border">
-        <h1 className="text-2xl font-bold gradient-text">SolVox</h1>
-        <p className="text-xs text-sol-muted mt-1">Voice-First AI Wallet</p>
+      <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>
+          </div>
+        </div>
       </div>
 
+      <div className="divider mx-5" />
+
       {/* Navigation */}
-      <nav className="flex-1 p-4 space-y-1">
-        {navItems.map(item => (
-          <button
-            key={item.id}
-            onClick={() => onNavigate(item.id)}
-            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all duration-200 ${
-              currentPage === item.id
-                ? 'bg-sol-purple/20 text-sol-purple border border-sol-purple/30'
-                : 'text-sol-muted hover:bg-sol-border/30 hover:text-sol-text'
-            }`}
-          >
-            <span className="text-lg">{item.icon}</span>
-            <span className="font-medium text-sm">{item.label}</span>
-          </button>
-        ))}
+      <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>
 
-      {/* QVAC Badge */}
-      <div className="p-4 border-t border-sol-border">
-        <div className="glass rounded-xl p-4 text-center">
-          <div className="text-xs text-sol-muted mb-1">Powered by</div>
-          <div className="text-sm font-bold text-tether-green">QVAC SDK</div>
-          <div className="text-xs text-sol-muted mt-1">100% Local AI</div>
-          <div className="flex justify-center gap-1 mt-2">
-            <span className="w-2 h-2 rounded-full bg-sol-green animate-pulse" />
-            <span className="text-xs text-sol-green">All AI runs on-device</span>
+      {/* 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>
           </div>
         </div>
       </div>

src/renderer/components/TopBar.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { AnimatedNumber } from './ui/index';
 
 interface TopBarProps {
   publicKey: string | null;
@@ -8,77 +9,91 @@ interface TopBarProps {
 }
 
 export default function TopBar({ publicKey, balance, aiStatus, onLock }: TopBarProps) {
-  const shortAddress = publicKey
-    ? `${publicKey.slice(0, 6)}...${publicKey.slice(-4)}`
-    : '—';
+  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;
+
   return (
-    <header className="h-16 border-b border-sol-border flex items-center justify-between px-6 bg-sol-card/50">
-      {/* Left: Wallet Address */}
-      <div className="flex items-center gap-4">
+    <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 */}
+      <div className="flex items-center gap-3">
         <button
           onClick={copyAddress}
-          className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-sol-dark/50 border border-sol-border hover:border-sol-purple transition-colors"
-          title="Click to copy address"
+          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"
         >
-          <span className="w-2 h-2 rounded-full bg-sol-green" />
-          <span className="text-sm font-mono text-sol-muted">{shortAddress}</span>
-          <span className="text-xs">📋</span>
+          <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>
-        <div className="text-xs text-sol-muted">Devnet</div>
+
+        <div className="badge badge-warn">
+          <div className="w-1 h-1 rounded-full bg-warning" />
+          Devnet
+        </div>
       </div>
 
-      {/* Center: Balance */}
-      <div className="flex items-center gap-6">
-        <div className="text-center">
-          <div className="text-xs text-sol-muted">SOL</div>
-          <div className="text-sm font-bold text-sol-purple">
-            {balance.sol.toFixed(4)}
+      {/* 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>
         </div>
-        <div className="w-px h-8 bg-sol-border" />
-        <div className="text-center">
-          <div className="text-xs text-sol-muted">USDT</div>
-          <div className="text-sm font-bold text-tether-green">
-            {balance.usdt.toFixed(2)}
+
+        <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>
       </div>
 
       {/* Right: AI Status + Lock */}
       <div className="flex items-center gap-3">
-        {/* AI Status Indicators */}
-        <div className="flex items-center gap-1.5">
-          <StatusDot active={aiStatus?.llm} label="LLM" />
-          <StatusDot active={aiStatus?.transcription} label="STT" />
-          <StatusDot active={aiStatus?.tts} label="TTS" />
-          <StatusDot active={aiStatus?.embed} label="EMB" />
-          <StatusDot active={aiStatus?.translation} label="NMT" />
-          <StatusDot active={aiStatus?.ocr} label="OCR" />
+        {/* 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="px-3 py-1.5 rounded-lg bg-danger/10 text-danger text-sm hover:bg-danger/20 transition-colors"
+          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"
         >
-          🔒 Lock
+          <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>
       </div>
     </header>
   );
 }
-
-function StatusDot({ active, label }: { active: boolean; label: string }) {
-  return (
-    <div className="flex flex-col items-center" title={`${label}: ${active ? 'Active' : 'Offline'}`}>
-      <div className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-sol-green' : 'bg-sol-muted/30'}`} />
-      <span className="text-[8px] text-sol-muted mt-0.5">{label}</span>
-    </div>
-  );
-}

src/renderer/components/ui/index.tsx

@@ -0,0 +1,262 @@
+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: () => {} });
+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);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ addToast }}>
+      {children}
+      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+        {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>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   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;
+}) {
+  const [display, setDisplay] = useState(value);
+
+  useEffect(() => {
+    const diff = value - display;
+    if (Math.abs(diff) < 0.001) { setDisplay(value); return; }
+    const steps = 20;
+    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);
+    return () => clearInterval(interval);
+  }, [value]);
+
+  return (
+    <span className={`ticker ${className}`}>
+      {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;
+}) {
+  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>
+    </div>
+  );
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   STEP INDICATOR (for onboarding)
+   ═══════════════════════════════════════════════════════════════════════ */
+
+export function StepIndicator({ steps, current }: { steps: string[]; current: number }) {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-8">
+      {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'
+            }`}>
+              {i < current ? '✓' : i + 1}
+            </div>
+            <span className={`text-[10px] ${i <= current ? 'text-sol-text' : 'text-sol-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'
+            }`} />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   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',
+  };
+  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>
+      <span className="text-[11px] font-medium text-sol-muted group-hover:text-sol-text transition-colors">{label}</span>
+    </button>
+  );
+}

src/renderer/index.css

@@ -2,91 +2,256 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+/* ─── Reset & Base ───────────────────────────────────────────────────── */
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  background: #0E0E2C;
+  background: #0A0A1E;
   color: #E0E0FF;
   overflow: hidden;
   height: 100vh;
   -webkit-app-region: drag;
 }
+button, input, select, textarea, a, label { -webkit-app-region: no-drag; }
+
+/* ─── Scrollbar ──────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #2D2D5E; border-radius: 10px; }
+::-webkit-scrollbar-thumb:hover { background: #9945FF; }
 
-button, input, select, textarea, a {
-  -webkit-app-region: no-drag;
+/* ─── 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;
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
+/* ─── 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);
 }
-::-webkit-scrollbar-track {
-  background: transparent;
+.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);
 }
-::-webkit-scrollbar-thumb {
-  background: #2D2D5E;
-  border-radius: 3px;
+.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);
 }
-::-webkit-scrollbar-thumb:hover {
-  background: #9945FF;
+
+/* ─── 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%; }
+}
+
+/* ─── 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); }
 
-/* Waveform animation bars */
-.waveform-bar {
-  animation: waveform var(--delay, 0.5s) ease-in-out infinite alternate;
+/* ─── 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); }
+}
+
+/* ─── 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); } }
+
+/* ─── 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;
+}
+@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
-@keyframes waveform {
-  0% { height: 4px; }
-  100% { height: var(--max-height, 24px); }
+/* ─── 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); }
 }
+.recording-pulse { animation: rec-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
 
-/* Glow effects */
-.glow-purple {
-  box-shadow: 0 0 20px rgba(153, 69, 255, 0.3);
+/* ─── Orbit Rings (loading / voice) ──────────────────────────────────── */
+.orbit-ring {
+  border: 2px solid transparent;
+  border-top-color: #9945FF;
+  border-radius: 50%;
+  animation: orbit 2s linear infinite;
 }
-.glow-green {
-  box-shadow: 0 0 20px rgba(20, 241, 149, 0.3);
+.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);
 }
-.glow-tether {
-  box-shadow: 0 0 20px rgba(38, 161, 123, 0.3);
+@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); }
 }
 
-/* Gradient text */
-.gradient-text {
-  background: linear-gradient(135deg, #9945FF, #14F195);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+/* ─── Animated Counter ───────────────────────────────────────────────── */
+.num-scroll { display: inline-block; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* ─── 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);
 }
+.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; }
 
-/* Glass effect */
-.glass {
-  background: rgba(26, 26, 62, 0.6);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(45, 45, 94, 0.5);
+.btn-ghost {
+  @apply rounded-xl font-medium transition-all duration-300 border border-sol-border text-sol-muted;
+}
+.btn-ghost:hover {
+  @apply text-sol-text border-sol-purple/40;
+  background: rgba(153, 69, 255, 0.06);
 }
 
-/* Pulse recording indicator */
-@keyframes recording-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.1); }
+/* ─── Input Focus Ring ───────────────────────────────────────────────── */
+.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;
 }
-.recording-pulse {
-  animation: recording-pulse 1.5s ease-in-out infinite;
+.input-field:focus {
+  @apply outline-none border-sol-purple/60;
+  box-shadow: 0 0 0 3px rgba(153, 69, 255, 0.1);
 }
 
-/* Slide transitions */
-.slide-enter {
-  animation: slide-up 0.3s ease-out;
+/* ─── 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); }
 }
 
-@keyframes slide-up {
-  from { transform: translateY(20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
+/* ─── Progress Bar ───────────────────────────────────────────────────── */
+.progress-bar {
+  @apply h-1.5 rounded-full overflow-hidden bg-sol-border/30;
+}
+.progress-fill {
+  @apply h-full rounded-full transition-all duration-700 ease-out;
+  background: linear-gradient(90deg, #9945FF, #14F195);
 }
+
+/* ─── Divider ────────────────────────────────────────────────────────── */
+.divider {
+  @apply w-full h-px;
+  background: linear-gradient(90deg, transparent, rgba(153, 69, 255, 0.15), transparent);
+}
+
+/* ─── 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);
+}
+
+/* ─── 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;
+}
+@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); }
+}
+
+.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;
+}
+@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); }
+}
+
+/* ─── 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); }

src/renderer/pages/Dashboard.tsx

@@ -1,162 +1,182 @@
 import React, { useEffect, useState } from 'react';
+import { AnimatedNumber, IconButton, ShimmerCard, CircularProgress } from '../components/ui/index';
 
 interface DashboardProps {
   balance: { sol: number; usdt: number };
   publicKey: string | null;
   onRefresh: () => void;
+  onNavigate: (page: any) => void;
 }
 
-export default function Dashboard({ balance, publicKey, onRefresh }: DashboardProps) {
+export default function Dashboard({ balance, publicKey, onRefresh, onNavigate }: DashboardProps) {
   const [recentTxs, setRecentTxs] = useState<any[]>([]);
   const [aiStatus, setAiStatus] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    loadData();
-  }, []);
+  useEffect(() => { loadData(); }, []);
 
   const loadData = async () => {
-    if (!window.solvox) return;
+    if (!window.solvox) { setLoading(false); return; }
     try {
-      const [historyResult, statusResult] = await Promise.all([
-        window.solvox.wallet.getHistory(5),
-        window.solvox.ai.getStatus(),
-      ]);
-      if (historyResult.success) setRecentTxs(historyResult.history || []);
-      setAiStatus(statusResult);
+      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);
   };
 
-  const totalUSD = balance.sol * 170 + balance.usdt; // Rough SOL price estimate
+  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;
 
   return (
-    <div className="space-y-6 slide-enter">
-      {/* Balance Cards */}
-      <div className="grid grid-cols-3 gap-4">
-        <div className="glass rounded-2xl p-6 glow-purple">
-          <div className="text-sm text-sol-muted mb-1">Total Portfolio</div>
-          <div className="text-3xl font-bold gradient-text">
-            ${totalUSD.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+    <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="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>
-          <button
-            onClick={onRefresh}
-            className="mt-3 text-xs text-sol-muted hover:text-sol-purple transition-colors"
-          >
-            ↻ Refresh
-          </button>
         </div>
+      </div>
 
-        <div className="glass rounded-2xl p-6">
-          <div className="flex items-center gap-2 mb-2">
-            <div className="w-8 h-8 rounded-full bg-sol-purple/20 flex items-center justify-center">
-              <span className="text-sol-purple font-bold text-sm">◎</span>
+      {/* ── 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>
-            <div className="text-sm text-sol-muted">SOL</div>
           </div>
-          <div className="text-2xl font-bold">{balance.sol.toFixed(4)}</div>
-          <div className="text-xs text-sol-muted mt-1">
-            ≈ ${(balance.sol * 170).toFixed(2)}
+          <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>
         </div>
 
-        <div className="glass rounded-2xl p-6">
-          <div className="flex items-center gap-2 mb-2">
-            <div className="w-8 h-8 rounded-full bg-tether-green/20 flex items-center justify-center">
-              <span className="text-tether-green font-bold text-sm">₮</span>
+        <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 className="text-sm text-sol-muted">USDT</div>
           </div>
-          <div className="text-2xl font-bold">{balance.usdt.toFixed(2)}</div>
-          <div className="text-xs text-sol-muted mt-1">
-            ≈ ${balance.usdt.toFixed(2)}
+          <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>
         </div>
       </div>
 
-      {/* Quick Actions */}
-      <div className="grid grid-cols-4 gap-3">
-        {[
-          { icon: '📤', label: 'Send', color: 'sol-purple' },
-          { icon: '📥', label: 'Receive', color: 'sol-green' },
-          { icon: '🎤', label: 'Voice AI', color: 'tether-green' },
-          { icon: '🔍', label: 'Scan QR', color: 'warning' },
-        ].map(action => (
-          <button
-            key={action.label}
-            className={`glass rounded-xl p-4 text-center hover:border-${action.color} transition-all group`}
-          >
-            <div className="text-2xl mb-1">{action.icon}</div>
-            <div className="text-xs font-medium text-sol-muted group-hover:text-sol-text">
-              {action.label}
-            </div>
-          </button>
-        ))}
+      {/* ── 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>
 
-      {/* AI Status & Recent Activity */}
-      <div className="grid grid-cols-2 gap-4">
-        {/* AI Engine Status */}
-        <div className="glass rounded-2xl p-6">
-          <h3 className="text-lg font-semibold mb-4">🧠 AI Engine (QVAC)</h3>
-          <div className="space-y-3">
+      {/* ── 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)', active: aiStatus?.llm, pkg: '@qvac/llm-llamacpp' },
-              { name: 'Speech-to-Text', active: aiStatus?.transcription, pkg: '@qvac/transcription-whispercpp' },
-              { name: 'Text-to-Speech', active: aiStatus?.tts, pkg: '@qvac/tts-onnx' },
-              { name: 'Embeddings', active: aiStatus?.embed, pkg: '@qvac/embed-llamacpp' },
-              { name: 'Translation', active: aiStatus?.translation, pkg: '@qvac/translation-nmtcpp' },
-              { name: 'OCR', active: aiStatus?.ocr, pkg: '@qvac/ocr-onnx' },
-            ].map(model => (
-              <div key={model.name} className="flex items-center justify-between">
-                <div>
-                  <div className="text-sm">{model.name}</div>
-                  <div className="text-xs text-sol-muted font-mono">{model.pkg}</div>
+              { 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={`flex items-center gap-1.5 text-xs ${model.active ? 'text-sol-green' : 'text-sol-muted'}`}>
-                  <span className={`w-2 h-2 rounded-full ${model.active ? 'bg-sol-green' : 'bg-sol-muted/30'}`} />
-                  {model.active ? 'Active' : 'Loading...'}
+                <div className={`badge ${m.active ? 'badge-green' : 'badge-muted'}`}>
+                  {m.active ? '● Active' : '○ Loading'}
                 </div>
               </div>
             ))}
           </div>
-          <div className="mt-4 pt-3 border-t border-sol-border">
-            <div className="flex items-center gap-2 text-xs text-sol-muted">
-              <span className="w-2 h-2 rounded-full bg-tether-green" />
-              All inference runs 100% locally via Vulkan GPU
-            </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>
 
-        {/* Recent Transactions */}
-        <div className="glass rounded-2xl p-6">
-          <h3 className="text-lg font-semibold mb-4">📋 Recent Activity</h3>
-          {recentTxs.length === 0 ? (
-            <div className="text-center py-8">
-              <div className="text-4xl mb-2">📭</div>
-              <div className="text-sol-muted text-sm">No transactions yet</div>
-              <div className="text-xs text-sol-muted mt-1">
-                Try saying "Send 1 SOL to..."
+        {/* 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>
               </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-3">
+            <div className="space-y-2">
               {recentTxs.map((tx, i) => (
-                <div key={i} className="flex items-center justify-between py-2 border-b border-sol-border/30 last:border-0">
-                  <div className="flex items-center gap-3">
-                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
-                      tx.status === 'success' ? 'bg-sol-green/20' : 'bg-danger/20'
-                    }`}>
-                      {tx.status === 'success' ? '✓' : '✗'}
-                    </div>
-                    <div>
-                      <div className="text-sm font-mono">
-                        {tx.signature?.slice(0, 12)}...
-                      </div>
-                      <div className="text-xs text-sol-muted">
-                        {tx.timestamp ? new Date(tx.timestamp).toLocaleDateString() : 'Pending'}
-                      </div>
-                    </div>
+                <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={`text-sm ${tx.status === 'success' ? 'text-sol-green' : 'text-danger'}`}>
+                  <div className={`badge text-[10px] ${tx.status === 'success' ? 'badge-green' : 'badge-danger'}`}>
                     {tx.status}
                   </div>
                 </div>
@@ -166,18 +186,21 @@ export default function Dashboard({ balance, publicKey, onRefresh }: DashboardPr
         </div>
       </div>
 
-      {/* Wallet Address */}
+      {/* ── Wallet Address ────────────────────────────────────────────── */}
       <div className="glass rounded-2xl p-4">
         <div className="flex items-center justify-between">
-          <div>
-            <div className="text-xs text-sol-muted mb-1">Your Wallet Address</div>
-            <div className="text-sm font-mono text-sol-muted">{publicKey || '—'}</div>
+          <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>
           </div>
-          <button
-            onClick={() => publicKey && navigator.clipboard.writeText(publicKey)}
-            className="px-4 py-2 rounded-lg bg-sol-purple/20 text-sol-purple text-sm hover:bg-sol-purple/30 transition-colors"
-          >
-            📋 Copy
+          <button onClick={() => publicKey && navigator.clipboard.writeText(publicKey)}
+            className="btn-ghost px-3 py-1.5 text-xs">
+            Copy
           </button>
         </div>
       </div>

src/renderer/pages/HistoryPage.tsx

@@ -1,81 +1,63 @@
 import React, { useState, useEffect } from 'react';
 
 export default function HistoryPage() {
-  const [transactions, setTransactions] = useState<any[]>([]);
+  const [txs, setTxs] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
+  const [query, setQuery] = useState('');
   const [ragResults, setRagResults] = useState<any[]>([]);
+  const [searching, setSearching] = useState(false);
 
-  useEffect(() => {
-    loadHistory();
-  }, []);
+  useEffect(() => { load(); }, []);
 
-  const loadHistory = async () => {
+  const load = async () => {
     setLoading(true);
-    try {
-      if (window.solvox) {
-        const result = await window.solvox.wallet.getHistory(20);
-        if (result.success) {
-          setTransactions(result.history || []);
-        }
-      }
-    } catch {}
+    try { if (window.solvox) { const r = await window.solvox.wallet.getHistory(20); if (r.success) setTxs(r.history || []); } } catch {}
     setLoading(false);
   };
 
-  const handleSearch = async () => {
-    if (!searchQuery.trim()) return;
-    try {
-      if (window.solvox) {
-        const result = await window.solvox.rag.search(searchQuery);
-        if (result.success) {
-          setRagResults(result.results || []);
-        }
-      }
-    } catch {}
+  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);
   };
 
   return (
-    <div className="space-y-6 slide-enter">
+    <div className="space-y-5 page-enter">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">📋 Transaction History</h2>
-        <button
-          onClick={loadHistory}
-          className="px-4 py-2 rounded-lg bg-sol-purple/20 text-sol-purple text-sm hover:bg-sol-purple/30 transition-colors"
-        >
-          ↻ Refresh
+        <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>
 
-      {/* Semantic Search (RAG) */}
-      <div className="glass rounded-xl p-4">
+      {/* AI Search */}
+      <div className="glass rounded-2xl p-4">
         <div className="flex gap-2">
-          <input
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-            placeholder='Search transactions with AI... (e.g. "last payment to Alice")'
-            className="flex-1 px-4 py-2 bg-sol-dark border border-sol-border rounded-lg text-sm focus:border-sol-purple focus:outline-none"
-          />
-          <button
-            onClick={handleSearch}
-            className="px-4 py-2 rounded-lg bg-tether-green text-white text-sm hover:bg-tether-green/90 transition-colors"
-          >
-            🔍 AI Search
+          <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>
         </div>
-        <div className="text-xs text-sol-muted mt-2">
-          Powered by @qvac/embed-llamacpp — semantic search runs 100% locally
+        <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>
 
         {ragResults.length > 0 && (
-          <div className="mt-3 space-y-2">
-            <div className="text-sm font-semibold text-sol-purple">AI Search Results:</div>
+          <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 rounded-lg p-3 text-sm">
-                <div>{r.text}</div>
-                <div className="text-xs text-sol-muted mt-1">
-                  Relevance: {(r.score * 100).toFixed(1)}%
+              <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>
               </div>
             ))}
@@ -83,62 +65,39 @@ export default function HistoryPage() {
         )}
       </div>
 
-      {/* Transaction List */}
+      {/* Transaction Table */}
       <div className="glass rounded-2xl overflow-hidden">
         {loading ? (
-          <div className="p-12 text-center text-sol-muted">Loading transactions...</div>
-        ) : transactions.length === 0 ? (
-          <div className="p-12 text-center">
-            <div className="text-5xl mb-4">📭</div>
-            <div className="text-lg font-semibold mb-1">No Transactions Yet</div>
-            <div className="text-sol-muted text-sm">
-              Your transaction history will appear here once you send or receive tokens.
+          <div className="p-8 space-y-3">
+            {[1,2,3,4].map(i => <div key={i} className="shimmer rounded-lg h-14" />)}
+          </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>
         ) : (
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-sol-border text-sm text-sol-muted">
-                <th className="text-left px-6 py-3">Status</th>
-                <th className="text-left px-6 py-3">Signature</th>
-                <th className="text-left px-6 py-3">Date</th>
-                <th className="text-right px-6 py-3">Details</th>
-              </tr>
-            </thead>
-            <tbody>
-              {transactions.map((tx, i) => (
-                <tr key={i} className="border-b border-sol-border/30 hover:bg-sol-dark/50 transition-colors">
-                  <td className="px-6 py-4">
-                    <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs ${
-                      tx.status === 'success'
-                        ? 'bg-sol-green/20 text-sol-green'
-                        : 'bg-danger/20 text-danger'
-                    }`}>
-                      {tx.status === 'success' ? '✓' : '✗'} {tx.status}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 font-mono text-xs text-sol-muted">
-                    {tx.signature?.slice(0, 20)}...
-                  </td>
-                  <td className="px-6 py-4 text-sm text-sol-muted">
-                    {tx.timestamp
-                      ? new Date(tx.timestamp).toLocaleString()
-                      : 'Pending'}
-                  </td>
-                  <td className="px-6 py-4 text-right">
-                    <a
-                      href={`https://solscan.io/tx/${tx.signature}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sol-purple text-xs hover:underline"
-                    >
-                      View →
-                    </a>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          <div className="divide-y divide-sol-border/20">
+            {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'
+                }`}>
+                  {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>
+                <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>
+              </div>
+            ))}
+          </div>
         )}
       </div>
     </div>

src/renderer/pages/LockScreen.tsx

@@ -1,142 +1,132 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { ParticlesBackground } from '../components/ui/index';
 
-interface LockScreenProps {
-  onUnlock: (publicKey: string) => void;
-}
+interface LockScreenProps { onUnlock: (publicKey: string) => void; }
 
 export default function LockScreen({ onUnlock }: LockScreenProps) {
   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);
 
-  useEffect(() => {
-    inputRef.current?.focus();
-    checkBiometric();
-  }, []);
+  useEffect(() => { inputRef.current?.focus(); checkBiometric(); }, []);
 
   const checkBiometric = async () => {
-    if (window.solvox) {
-      const available = await window.solvox.auth.biometricAvailable();
-      setBiometricAvailable(available);
-      if (available) {
-        handleBiometric();
-      }
-    }
+    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 result = await window.solvox.auth.biometric('Unlock SolVox');
-    if (result.success) {
-      const pk = await window.solvox.wallet.getPublicKey();
-      if (pk) onUnlock(pk);
-    } else {
-      setError(result.error || 'Biometric failed');
-    }
+    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'); }
     setLoading(false);
   };
 
-  const handlePinSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (pin.length < 6) {
-      setError('PIN must be at least 6 digits');
-      return;
-    }
-    setLoading(true);
-    setError('');
-
+    if (pin.length < 6) { triggerShake('PIN must be at least 6 digits'); return; }
+    setLoading(true); setError('');
     try {
       if (window.solvox) {
-        const result = await window.solvox.auth.unlock(pin);
-        if (result.success) {
-          const pk = await window.solvox.wallet.getPublicKey();
-          if (pk) onUnlock(pk);
-        } else {
-          setError(result.error || 'Unlock failed');
-          if (result.remainingAttempts !== undefined) {
-            setError(`${result.error} (${result.remainingAttempts} attempts remaining)`);
-          }
-        }
-      } else {
-        // Dev mode
-        onUnlock('DevModePublicKey123456789');
-      }
-    } catch (err: any) {
-      setError(err.message);
-    }
-    setLoading(false);
-    setPin('');
+        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); }
+    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 bg-sol-dark">
-      <div className="w-full max-w-sm">
+    <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">
         {/* Logo */}
-        <div className="text-center mb-12">
-          <h1 className="text-5xl font-bold gradient-text mb-2">SolVox</h1>
-          <p className="text-sol-muted">Voice-First AI Wallet</p>
+        <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 Icon */}
-        <div className="text-center mb-8">
-          <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-sol-card border-2 border-sol-border">
-            <span className="text-4xl">🔒</span>
+        {/* 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>
         </div>
 
-        {/* PIN Form */}
-        <form onSubmit={handlePinSubmit} className="space-y-4">
-          <div>
-            <input
-              ref={inputRef}
-              type="password"
-              inputMode="numeric"
-              pattern="[0-9]*"
-              value={pin}
-              onChange={(e) => setPin(e.target.value.replace(/\D/g, ''))}
-              placeholder="Enter PIN"
-              maxLength={12}
-              className="w-full px-4 py-3 bg-sol-card border border-sol-border rounded-xl text-center text-2xl tracking-[0.5em] font-mono text-sol-text focus:border-sol-purple focus:outline-none focus:ring-1 focus:ring-sol-purple/50 transition-colors"
-              disabled={loading}
-            />
+        {/* 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>
+
+        {/* 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>}
+            </div>
           </div>
 
           {error && (
-            <div className="text-danger text-sm text-center bg-danger/10 rounded-lg p-2">
+            <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="w-full py-3 rounded-xl bg-sol-purple text-white font-semibold hover:bg-sol-purple/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-          >
-            {loading ? 'Unlocking...' : 'Unlock'}
+          <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>
         </form>
 
-        {/* Biometric */}
         {biometricAvailable && (
-          <button
-            onClick={handleBiometric}
-            className="w-full mt-4 py-3 rounded-xl border border-sol-border text-sol-muted hover:text-sol-text hover:border-sol-purple transition-colors"
-          >
-            🫰 Use Touch ID
+          <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>
         )}
 
-        {/* Security Badge */}
         <div className="mt-8 text-center">
-          <div className="inline-flex items-center gap-2 text-xs text-sol-muted">
-            <span className="w-2 h-2 rounded-full bg-sol-green" />
-            All data encrypted locally • No cloud
+          <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>
       </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,10 +1,11 @@
 import React, { useState } from 'react';
+import { ParticlesBackground, StepIndicator } from '../components/ui/index';
 
-interface OnboardingScreenProps {
-  onComplete: (publicKey: string) => void;
-}
+interface OnboardingScreenProps { onComplete: (publicKey: string) => void; }
+type Step = 'welcome' | 'create_or_import' | 'import' | 'pin' | 'done';
 
-type Step = 'welcome' | 'create_or_import' | 'create' | 'import' | 'pin' | 'done';
+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) {
   const [step, setStep] = useState<Step>('welcome');
@@ -15,240 +16,152 @@ export default function OnboardingScreen({ onComplete }: OnboardingScreenProps)
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const handleCreateWallet = async () => {
-    setLoading(true);
-    setError('');
+  const createWallet = async () => {
+    setLoading(true); setError('');
     try {
       if (window.solvox) {
-        const result = await window.solvox.wallet.create();
-        if (result.success && result.publicKey) {
-          setPublicKey(result.publicKey);
-          setStep('pin');
-        } else {
-          setError(result.error || 'Failed to create wallet');
-        }
-      } else {
-        setPublicKey('DevMode123');
-        setStep('pin');
-      }
-    } catch (err: any) {
-      setError(err.message);
-    }
+        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);
   };
 
-  const handleImportWallet = async () => {
-    if (!mnemonic.trim()) {
-      setError('Please enter your recovery phrase');
-      return;
-    }
-    const words = mnemonic.trim().split(/\s+/);
-    if (words.length !== 12 && words.length !== 24) {
-      setError('Recovery phrase must be 12 or 24 words');
-      return;
-    }
-    setLoading(true);
-    setError('');
+  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('');
     try {
       if (window.solvox) {
-        const result = await window.solvox.wallet.import(mnemonic.trim());
-        if (result.success && result.publicKey) {
-          setPublicKey(result.publicKey);
-          setStep('pin');
-        } else {
-          setError(result.error || 'Invalid recovery phrase');
-        }
-      } else {
-        setPublicKey('DevImported123');
-        setStep('pin');
-      }
-    } catch (err: any) {
-      setError(err.message);
-    }
+        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);
   };
 
-  const handleSetPin = async () => {
-    if (pin.length < 6) {
-      setError('PIN must be at least 6 digits');
-      return;
-    }
-    if (pin !== pinConfirm) {
-      setError('PINs do not match');
-      return;
-    }
-    setLoading(true);
-    setError('');
+  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 result = await window.solvox.auth.setPin(pin);
-        if (!result.success) {
-          setError(result.error || 'Failed to set PIN');
-          setLoading(false);
-          return;
-        }
-      }
+      if (window.solvox) { const r = await window.solvox.auth.setPin(pin); if (!r.success) { setError(r.error || 'Failed'); setLoading(false); return; } }
       setStep('done');
-    } catch (err: any) {
-      setError(err.message);
-    }
+    } catch (e: any) { setError(e.message); }
     setLoading(false);
   };
 
   return (
-    <div className="h-screen flex items-center justify-center bg-sol-dark">
-      <div className="w-full max-w-lg p-8">
+    <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)} />}
+
         {step === 'welcome' && (
           <div className="text-center slide-enter">
-            <h1 className="text-6xl font-bold gradient-text mb-4">SolVox</h1>
-            <p className="text-xl text-sol-muted mb-2">Voice-First Private AI Wallet</p>
-            <p className="text-sm text-sol-muted mb-12">
-              Powered by QVAC • 100% Local AI • Zero Cloud Dependencies
-            </p>
-            <div className="grid grid-cols-3 gap-4 mb-12">
+            <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>
+            <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: 'All AI runs on-device' },
-                { icon: '🔒', label: 'Self-Custody', desc: 'Your keys, your coins' },
+                { icon: '🧠', label: 'Local AI', desc: '6 QVAC modules' },
+                { icon: '🔒', label: 'Self-Custody', desc: 'Your keys only' },
               ].map(f => (
-                <div key={f.label} className="glass rounded-xl p-4 text-center">
-                  <div className="text-3xl mb-2">{f.icon}</div>
-                  <div className="text-sm font-semibold">{f.label}</div>
-                  <div className="text-xs text-sol-muted mt-1">{f.desc}</div>
+                <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>
                 </div>
               ))}
             </div>
-            <button
-              onClick={() => setStep('create_or_import')}
-              className="px-8 py-4 rounded-xl bg-sol-purple text-white font-bold text-lg hover:bg-sol-purple/90 transition-all glow-purple"
-            >
-              Get Started
+
+            <button onClick={() => setStep('create_or_import')} className="btn-primary px-10 py-4 text-white text-lg">
+              <span>Get Started</span>
             </button>
           </div>
         )}
 
         {step === 'create_or_import' && (
-          <div className="space-y-6 slide-enter">
-            <h2 className="text-3xl font-bold text-center mb-8">Set Up Your Wallet</h2>
-            <button
-              onClick={handleCreateWallet}
-              disabled={loading}
-              className="w-full p-6 rounded-xl glass border-2 border-transparent hover:border-sol-purple transition-all text-left group"
-            >
+          <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">
-                <span className="text-4xl">✨</span>
+                <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-lg font-semibold group-hover:text-sol-purple transition-colors">
-                    Create New Wallet
-                  </div>
-                  <div className="text-sm text-sol-muted">
-                    Generate a fresh wallet with a new recovery phrase
-                  </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>
             </button>
-            <button
-              onClick={() => setStep('import')}
-              className="w-full p-6 rounded-xl glass border-2 border-transparent hover:border-tether-green transition-all text-left group"
-            >
+            <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">
-                <span className="text-4xl">📥</span>
+                <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-lg font-semibold group-hover:text-tether-green transition-colors">
-                    Import Existing Wallet
-                  </div>
-                  <div className="text-sm text-sol-muted">
-                    Use a 12 or 24 word recovery phrase
-                  </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>
-            {error && <div className="text-danger text-sm text-center">{error}</div>}
+            {error && <div className="text-danger text-xs text-center">{error}</div>}
           </div>
         )}
 
         {step === 'import' && (
-          <div className="space-y-6 slide-enter">
-            <h2 className="text-2xl font-bold text-center">Import Recovery Phrase</h2>
-            <p className="text-sm text-sol-muted text-center">
-              Enter your 12 or 24 word recovery phrase. This stays on your device — never sent anywhere.
-            </p>
-            <textarea
-              value={mnemonic}
-              onChange={(e) => setMnemonic(e.target.value)}
-              placeholder="word1 word2 word3 ..."
-              rows={4}
-              className="w-full px-4 py-3 bg-sol-card border border-sol-border rounded-xl text-sol-text font-mono text-sm focus:border-sol-purple focus:outline-none resize-none"
-            />
-            {error && <div className="text-danger text-sm">{error}</div>}
+          <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="flex gap-3">
-              <button
-                onClick={() => { setStep('create_or_import'); setError(''); }}
-                className="flex-1 py-3 rounded-xl border border-sol-border text-sol-muted hover:text-sol-text transition-colors"
-              >
-                Back
-              </button>
-              <button
-                onClick={handleImportWallet}
-                disabled={loading}
-                className="flex-1 py-3 rounded-xl bg-tether-green text-white font-semibold hover:bg-tether-green/90 disabled:opacity-50 transition-all"
-              >
-                {loading ? 'Importing...' : 'Import'}
+              <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>
             </div>
           </div>
         )}
 
         {step === 'pin' && (
-          <div className="space-y-6 slide-enter">
-            <h2 className="text-2xl font-bold text-center">Set Your PIN</h2>
-            <p className="text-sm text-sol-muted text-center">
-              This PIN encrypts your wallet. You'll need it every time you open SolVox.
-            </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="w-full px-4 py-3 bg-sol-card border border-sol-border rounded-xl text-center text-2xl tracking-[0.5em] font-mono focus:border-sol-purple focus:outline-none"
-            />
-            <input
-              type="password"
-              inputMode="numeric"
-              value={pinConfirm}
-              onChange={(e) => setPinConfirm(e.target.value.replace(/\D/g, ''))}
-              placeholder="Confirm PIN"
-              maxLength={12}
-              className="w-full px-4 py-3 bg-sol-card border border-sol-border rounded-xl text-center text-2xl tracking-[0.5em] font-mono focus:border-sol-purple focus:outline-none"
-            />
-            {error && <div className="text-danger text-sm text-center">{error}</div>}
-            <button
-              onClick={handleSetPin}
-              disabled={loading || pin.length < 6}
-              className="w-full py-3 rounded-xl bg-sol-purple text-white font-semibold hover:bg-sol-purple/90 disabled:opacity-50 transition-all"
-            >
-              {loading ? 'Setting up...' : 'Continue'}
+          <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>
         )}
 
         {step === 'done' && (
-          <div className="text-center space-y-6 slide-enter">
-            <div className="text-6xl mb-4">🎉</div>
-            <h2 className="text-3xl font-bold">You're All Set!</h2>
-            <p className="text-sol-muted">
-              Your wallet is created and secured. Your AI assistant runs 100% locally — no data ever leaves your device.
-            </p>
-            <div className="glass rounded-xl p-4 font-mono text-xs text-sol-muted break-all">
-              {publicKey}
+          <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>
-            <button
-              onClick={() => onComplete(publicKey)}
-              className="px-8 py-4 rounded-xl bg-sol-purple text-white font-bold text-lg hover:bg-sol-purple/90 transition-all glow-purple"
-            >
-              Open SolVox
+            <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>
           </div>
         )}

src/renderer/pages/SecurityPage.tsx

@@ -1,226 +1,131 @@
 import React, { useState, useEffect } from 'react';
+import { CircularProgress, useToast } from '../components/ui/index';
 
 export default function SecurityPage() {
   const [settings, setSettings] = useState<any>({});
   const [whitelist, setWhitelist] = useState<any[]>([]);
   const [anomalies, setAnomalies] = useState<any[]>([]);
-  const [newAddress, setNewAddress] = useState('');
+  const [newAddr, setNewAddr] = useState('');
   const [newLabel, setNewLabel] = useState('');
   const [error, setError] = useState('');
-  const [saved, setSaved] = useState(false);
+  const { addToast } = useToast();
 
-  useEffect(() => {
-    loadSecurity();
-  }, []);
+  useEffect(() => { load(); }, []);
 
-  const loadSecurity = async () => {
+  const load = async () => {
     if (!window.solvox) return;
     try {
-      const [settingsResult, whitelistResult, anomalyResult] = await Promise.all([
-        window.solvox.security.getSettings(),
-        window.solvox.security.getWhitelist(),
-        window.solvox.security.getAnomalies(),
-      ]);
-      setSettings(settingsResult);
-      setWhitelist(whitelistResult);
-      setAnomalies(anomalyResult);
+      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 handleUpdateSettings = async (key: string, value: any) => {
-    const updated = { ...settings, [key]: value };
-    setSettings(updated);
-    if (window.solvox) {
-      await window.solvox.security.updateSettings(updated);
-      setSaved(true);
-      setTimeout(() => setSaved(false), 2000);
-    }
+  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 handleAddWhitelist = async () => {
-    if (!newAddress.trim() || !newLabel.trim()) {
-      setError('Address and label are required');
-      return;
-    }
+  const addWL = async () => {
+    if (!newAddr.trim() || !newLabel.trim()) return setError('Both required');
     if (window.solvox) {
-      const result = await window.solvox.security.addWhitelist(newAddress.trim(), newLabel.trim());
-      if (result.success) {
-        setNewAddress('');
-        setNewLabel('');
-        setError('');
-        loadSecurity();
-      } else {
-        setError(result.error || 'Failed to add');
-      }
+      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 handleRemoveWhitelist = async (address: string) => {
-    if (window.solvox) {
-      await window.solvox.security.removeWhitelist(address);
-      loadSecurity();
-    }
-  };
+  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';
 
   return (
-    <div className="space-y-6 max-w-3xl slide-enter">
-      <h2 className="text-2xl font-bold">🛡️ Security Center</h2>
+    <div className="space-y-5 max-w-3xl page-enter">
+      <h2 className="text-xl font-bold">Security Center</h2>
 
-      {saved && (
-        <div className="bg-sol-green/20 text-sol-green rounded-xl p-3 text-sm text-center">
-          ✓ Settings saved
+      {/* 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>
-      )}
 
-      {/* Transaction Limits */}
-      <div className="glass rounded-2xl p-6">
-        <h3 className="text-lg font-semibold mb-4">Transaction Limits</h3>
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="text-sm text-sol-muted block mb-1">Max Single Transaction</label>
-            <div className="flex items-center gap-2">
-              <input
-                type="number"
-                value={settings.maxSingleTx || 1000}
-                onChange={(e) => handleUpdateSettings('maxSingleTx', Number(e.target.value))}
-                className="flex-1 px-3 py-2 bg-sol-dark border border-sol-border rounded-lg text-sm focus:border-sol-purple focus:outline-none"
-              />
-              <span className="text-sol-muted text-sm">tokens</span>
-            </div>
-          </div>
-          <div>
-            <label className="text-sm text-sol-muted block mb-1">Max Daily Volume</label>
-            <div className="flex items-center gap-2">
-              <input
-                type="number"
-                value={settings.maxDailyVolume || 5000}
-                onChange={(e) => handleUpdateSettings('maxDailyVolume', Number(e.target.value))}
-                className="flex-1 px-3 py-2 bg-sol-dark border border-sol-border rounded-lg text-sm focus:border-sol-purple focus:outline-none"
-              />
-              <span className="text-sol-muted text-sm">tokens/day</span>
-            </div>
-          </div>
-          <div>
-            <label className="text-sm text-sol-muted block mb-1">Max Transactions/Hour</label>
-            <input
-              type="number"
-              value={settings.velocityLimit || 10}
-              onChange={(e) => handleUpdateSettings('velocityLimit', Number(e.target.value))}
-              className="w-full px-3 py-2 bg-sol-dark border border-sol-border rounded-lg text-sm focus:border-sol-purple focus:outline-none"
-            />
-          </div>
-          <div>
-            <label className="text-sm text-sol-muted block mb-1">Cooldown (minutes)</label>
-            <input
-              type="number"
-              value={settings.cooldownMinutes || 1}
-              onChange={(e) => handleUpdateSettings('cooldownMinutes', Number(e.target.value))}
-              className="w-full px-3 py-2 bg-sol-dark border border-sol-border rounded-lg text-sm focus:border-sol-purple focus:outline-none"
-            />
+        <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>
 
-      {/* Security Toggles */}
-      <div className="glass rounded-2xl p-6">
-        <h3 className="text-lg font-semibold mb-4">Security Features</h3>
-        <div className="space-y-4">
+      {/* 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">
           {[
-            {
-              key: 'whitelistEnabled',
-              label: 'Address Whitelisting',
-              desc: 'Only allow transactions to pre-approved addresses',
-              icon: '📋',
-            },
-            {
-              key: 'anomalyDetection',
-              label: 'AI Anomaly Detection',
-              desc: 'Detect unusual transaction patterns using local AI',
-              icon: '🧠',
-            },
-            {
-              key: 'requireConfirmation',
-              label: 'Transaction Confirmation',
-              desc: 'Always require explicit confirmation before sending',
-              icon: '✅',
-            },
-          ].map(toggle => (
-            <div key={toggle.key} className="flex items-center justify-between py-2">
+            { 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">
-                <span className="text-2xl">{toggle.icon}</span>
+                <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-sm font-semibold">{toggle.label}</div>
-                  <div className="text-xs text-sol-muted">{toggle.desc}</div>
+                  <div className="text-xs font-semibold text-sol-text">{t.label}</div>
+                  <div className="text-[10px] text-sol-muted">{t.desc}</div>
                 </div>
               </div>
-              <button
-                onClick={() => handleUpdateSettings(toggle.key, !settings[toggle.key])}
-                className={`relative w-12 h-6 rounded-full transition-colors ${
-                  settings[toggle.key] ? 'bg-sol-green' : 'bg-sol-border'
-                }`}
-              >
-                <span
-                  className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-transform ${
-                    settings[toggle.key] ? 'translate-x-6' : 'translate-x-0.5'
-                  }`}
-                />
+              <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>
 
-      {/* Address Whitelist */}
-      <div className="glass rounded-2xl p-6">
-        <h3 className="text-lg font-semibold mb-4">📋 Address Whitelist</h3>
-        
-        {/* Add New */}
-        <div className="flex gap-2 mb-4">
-          <input
-            value={newLabel}
-            onChange={(e) => setNewLabel(e.target.value)}
-            placeholder="Label (e.g. Alice)"
-            className="w-32 px-3 py-2 bg-sol-dark border border-sol-border rounded-lg text-sm focus:border-sol-purple focus:outline-none"
-          />
-          <input
-            value={newAddress}
-            onChange={(e) => setNewAddress(e.target.value)}
-            placeholder="Solana address"
-            className="flex-1 px-3 py-2 bg-sol-dark border border-sol-border rounded-lg text-sm font-mono focus:border-sol-purple focus:outline-none"
-          />
-          <button
-            onClick={handleAddWhitelist}
-            className="px-4 py-2 rounded-lg bg-sol-purple text-white text-sm hover:bg-sol-purple/90 transition-colors"
-          >
-            + Add
-          </button>
+      {/* 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="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>
         </div>
-        {error && <div className="text-danger text-xs mb-3">{error}</div>}
-
-        {/* Whitelist Entries */}
+        {error && <div className="text-danger text-[10px] mb-2">{error}</div>}
         {whitelist.length === 0 ? (
-          <div className="text-center py-6 text-sol-muted text-sm">
-            No whitelisted addresses yet
-          </div>
+          <div className="text-center py-6 text-xs text-sol-muted/60">No addresses whitelisted</div>
         ) : (
           <div className="space-y-2">
-            {whitelist.map((entry, i) => (
-              <div key={i} className="flex items-center justify-between bg-sol-dark rounded-lg p-3">
+            {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-sm font-semibold">{entry.label}</div>
-                  <div className="text-xs font-mono text-sol-muted">
-                    {entry.address.slice(0, 12)}...{entry.address.slice(-8)}
-                  </div>
-                  <div className="text-xs text-sol-muted mt-0.5">
-                    Added: {new Date(entry.addedAt).toLocaleDateString()}
-                  </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={() => handleRemoveWhitelist(entry.address)}
-                  className="text-danger text-xs hover:underline"
-                >
-                  Remove
-                </button>
+                <button onClick={() => removeWL(e.address)} className="text-danger text-[10px] hover:underline">Remove</button>
               </div>
             ))}
           </div>
@@ -228,37 +133,32 @@ export default function SecurityPage() {
       </div>
 
       {/* Anomaly Log */}
-      <div className="glass rounded-2xl p-6">
-        <h3 className="text-lg font-semibold mb-4">🔍 Anomaly Detection Log</h3>
-        <p className="text-xs text-sol-muted mb-3">
-          Powered by AI-driven pattern analysis — runs locally via QVAC
-        </p>
+      <div className="glass rounded-2xl p-5">
+        <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>
         {anomalies.length === 0 ? (
-          <div className="text-center py-6 text-sol-muted text-sm">
-            No anomalies detected — all clear ✓
+          <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>
         ) : (
-          <div className="space-y-2">
-            {anomalies.map((anomaly, i) => (
-              <div key={i} className={`rounded-lg p-3 ${
-                anomaly.severity === 'high' ? 'bg-danger/10 border border-danger/30' :
-                anomaly.severity === 'medium' ? 'bg-warning/10 border border-warning/30' :
-                'bg-sol-dark border border-sol-border'
+          <div className="space-y-2 stagger">
+            {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 className="flex items-center gap-2 mb-1">
-                  <span className={`text-xs px-2 py-0.5 rounded-full ${
-                    anomaly.severity === 'high' ? 'bg-danger/20 text-danger' :
-                    anomaly.severity === 'medium' ? 'bg-warning/20 text-warning' :
-                    'bg-sol-muted/20 text-sol-muted'
-                  }`}>
-                    {anomaly.severity.toUpperCase()}
-                  </span>
-                  <span className="text-xs text-sol-muted">{anomaly.type}</span>
-                </div>
-                <div className="text-sm">{anomaly.description}</div>
-                <div className="text-xs text-sol-muted mt-1">
-                  {new Date(anomaly.timestamp).toLocaleString()}
+                  <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>
                 </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>
             ))}
           </div>

src/renderer/pages/SendPage.tsx

@@ -1,101 +1,72 @@
 import React, { useState } from 'react';
+import { AnimatedNumber, useToast } from '../components/ui/index';
 
-interface SendPageProps {
-  balance: { sol: number; usdt: number };
-  onSent: () => void;
-}
+interface SendPageProps { balance: { sol: number; usdt: number }; onSent: () => void; }
 
 export default function SendPage({ balance, onSent }: SendPageProps) {
   const [token, setToken] = useState<'SOL' | 'USDT'>('SOL');
   const [to, setTo] = useState('');
   const [amount, setAmount] = useState('');
-  const [memo, setMemo] = 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 { addToast } = useToast();
 
-  const maxAmount = token === 'SOL' ? balance.sol : balance.usdt;
+  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 handleConfirm = () => {
+  const review = () => {
     setError('');
-    if (!to.trim()) {
-      setError('Recipient address is required');
-      return;
-    }
-    if (!/^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(to.trim())) {
-      setError('Invalid Solana address');
-      return;
-    }
-    const amountNum = parseFloat(amount);
-    if (!amountNum || amountNum <= 0) {
-      setError('Enter a valid amount');
-      return;
-    }
-    if (amountNum > maxAmount) {
-      setError(`Insufficient balance. Max: ${maxAmount.toFixed(token === 'SOL' ? 4 : 2)} ${token}`);
-      return;
-    }
+    if (!to.trim()) return setError('Recipient address is 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}`);
     setStep('confirm');
   };
 
-  const handleSend = async () => {
-    setLoading(true);
-    setError('');
+  const send = async () => {
+    setLoading(true); setError('');
     try {
-      let result;
-      if (window.solvox) {
-        if (token === 'SOL') {
-          result = await window.solvox.wallet.sendSOL(to.trim(), parseFloat(amount));
-        } else {
-          result = await window.solvox.wallet.sendUSDT(to.trim(), parseFloat(amount));
-        }
-      } else {
-        result = { success: true, signature: 'dev_sig_123', explorer: '#' };
-      }
-
-      if (result.success) {
-        setSuccess({ signature: result.signature!, explorer: result.explorer! });
+      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: '#' };
+      if (r.success) {
+        setSuccess({ signature: r.signature!, explorer: r.explorer! });
         setStep('result');
         onSent();
-      } else {
-        setError(result.error || 'Transaction failed');
-        setStep('form');
-      }
-    } catch (err: any) {
-      setError(err.message);
-      setStep('form');
-    }
+        addToast({ type: 'success', title: 'Transaction Sent', message: `${amount} ${token} sent successfully` });
+      } else { setError(r.error || 'Transaction failed'); setStep('form'); }
+    } catch (e: any) { setError(e.message); setStep('form'); }
     setLoading(false);
   };
 
-  const reset = () => {
-    setTo('');
-    setAmount('');
-    setMemo('');
-    setError('');
-    setSuccess(null);
-    setStep('form');
-  };
+  const reset = () => { setTo(''); setAmount(''); setError(''); setSuccess(null); setStep('form'); };
 
   return (
-    <div className="max-w-lg mx-auto slide-enter">
-      <h2 className="text-2xl font-bold mb-6">Send {token}</h2>
+    <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>
 
       {step === 'form' && (
-        <div className="glass rounded-2xl p-6 space-y-5">
+        <div className="glass rounded-3xl p-6 space-y-5 slide-enter">
           {/* Token Selector */}
-          <div className="flex gap-2">
+          <div className="flex gap-2 p-1 bg-sol-dark/60 rounded-xl">
             {(['SOL', 'USDT'] as const).map(t => (
-              <button
-                key={t}
-                onClick={() => setToken(t)}
-                className={`flex-1 py-2 rounded-xl font-semibold transition-all ${
-                  token === t
-                    ? t === 'SOL' ? 'bg-sol-purple text-white' : 'bg-tether-green text-white'
-                    : 'bg-sol-dark text-sol-muted border border-sol-border'
-                }`}
-              >
+              <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'
+                }`}>
                 {t === 'SOL' ? '◎' : '₮'} {t}
               </button>
             ))}
@@ -103,129 +74,95 @@ export default function SendPage({ balance, onSent }: SendPageProps) {
 
           {/* Recipient */}
           <div>
-            <label className="text-sm text-sol-muted block mb-1">Recipient Address</label>
-            <input
-              value={to}
-              onChange={(e) => setTo(e.target.value)}
-              placeholder="Enter Solana address"
-              className="w-full px-4 py-3 bg-sol-dark border border-sol-border rounded-xl font-mono text-sm focus:border-sol-purple focus:outline-none"
-            />
+            <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" />
           </div>
 
           {/* Amount */}
           <div>
-            <div className="flex justify-between items-center mb-1">
-              <label className="text-sm text-sol-muted">Amount</label>
-              <button
-                onClick={() => setAmount(maxAmount.toString())}
-                className="text-xs text-sol-purple hover:underline"
-              >
-                Max: {maxAmount.toFixed(token === 'SOL' ? 4 : 2)} {token}
+            <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="w-full px-4 py-3 bg-sol-dark border border-sol-border rounded-xl text-lg font-bold focus:border-sol-purple focus:outline-none pr-16"
-              />
-              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-sol-muted font-semibold">
-                {token}
-              </span>
+              <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>
+            {/* 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 */}
+            <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>
+              ))}
             </div>
           </div>
 
-          {error && (
-            <div className="text-danger text-sm bg-danger/10 rounded-lg p-3">{error}</div>
-          )}
+          {error && <div className="badge-danger bg-danger/8 border border-danger/20 rounded-xl p-3 text-xs">{error}</div>}
 
-          <button
-            onClick={handleConfirm}
-            className="w-full py-3 rounded-xl bg-sol-purple text-white font-semibold hover:bg-sol-purple/90 transition-all"
-          >
-            Review Transaction
+          <button onClick={review} className="btn-primary w-full py-3.5 text-white">
+            <span>Review Transaction</span>
           </button>
         </div>
       )}
 
       {step === 'confirm' && (
-        <div className="glass rounded-2xl p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-center">Confirm Transaction</h3>
-          <div className="bg-sol-dark rounded-xl p-4 space-y-3">
-            <div className="flex justify-between">
-              <span className="text-sol-muted">Token</span>
-              <span className="font-semibold">{token}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-sol-muted">Amount</span>
-              <span className="font-bold text-lg">{amount} {token}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-sol-muted">To</span>
-              <span className="font-mono text-xs">{to.slice(0, 12)}...{to.slice(-8)}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-sol-muted">Network Fee</span>
-              <span className="text-sm">~0.000005 SOL</span>
-            </div>
+        <div className="glass rounded-3xl p-6 space-y-5 scale-in">
+          <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>
+
+          <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>
 
-          {/* Security Warning */}
-          <div className="bg-warning/10 border border-warning/30 rounded-xl p-3 text-sm">
-            <div className="font-semibold text-warning mb-1">⚠️ Verify Details</div>
-            <div className="text-sol-muted text-xs">
-              Please double-check the recipient address and amount. Blockchain transactions are irreversible.
+          <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>
             </div>
           </div>
 
-          {error && <div className="text-danger text-sm">{error}</div>}
+          {error && <div className="text-danger text-xs text-center">{error}</div>}
 
           <div className="flex gap-3">
-            <button
-              onClick={() => setStep('form')}
-              className="flex-1 py-3 rounded-xl border border-sol-border text-sol-muted hover:text-sol-text transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleSend}
-              disabled={loading}
-              className="flex-1 py-3 rounded-xl bg-sol-purple text-white font-semibold hover:bg-sol-purple/90 disabled:opacity-50 transition-all"
-            >
-              {loading ? 'Sending...' : `Send ${token}`}
+            <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>
           </div>
         </div>
       )}
 
       {step === 'result' && success && (
-        <div className="glass rounded-2xl p-6 text-center space-y-4 slide-enter">
-          <div className="text-6xl mb-2">✅</div>
-          <h3 className="text-2xl font-bold">Transaction Sent!</h3>
-          <p className="text-sol-muted">
-            {amount} {token} sent successfully
-          </p>
-          <div className="bg-sol-dark rounded-xl p-3 font-mono text-xs text-sol-muted break-all">
-            {success.signature}
+        <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>
           </div>
-          <a
-            href={success.explorer}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="block text-sol-purple text-sm hover:underline"
-          >
-            View on Solscan →
+          <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="w-full py-3 rounded-xl bg-sol-purple text-white font-semibold hover:bg-sol-purple/90 transition-all"
-          >
-            Send Another
-          </button>
+          <button onClick={reset} className="btn-primary w-full py-3 text-white"><span>Send Another</span></button>
         </div>
       )}
     </div>

src/renderer/pages/SettingsPage.tsx

@@ -1,113 +1,104 @@
 import React, { useState } from 'react';
 
-interface SettingsPageProps {
-  onLock: () => void;
-}
+interface SettingsPageProps { onLock: () => void; }
 
 export default function SettingsPage({ onLock }: SettingsPageProps) {
   const [network, setNetwork] = useState('devnet');
 
+  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' },
+  ];
+
   return (
-    <div className="space-y-6 max-w-2xl slide-enter">
-      <h2 className="text-2xl font-bold">⚙️ Settings</h2>
+    <div className="space-y-5 max-w-2xl page-enter">
+      <h2 className="text-xl font-bold">Settings</h2>
 
       {/* Network */}
-      <div className="glass rounded-2xl p-6">
-        <h3 className="text-lg font-semibold mb-4">Network</h3>
-        <div className="flex gap-2">
-          {['devnet', 'mainnet-beta', 'testnet'].map(net => (
-            <button
-              key={net}
-              onClick={() => setNetwork(net)}
-              className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
-                network === net
-                  ? 'bg-sol-purple text-white'
-                  : 'bg-sol-dark border border-sol-border text-sol-muted hover:text-sol-text'
-              }`}
-            >
-              {net === 'mainnet-beta' ? 'Mainnet' : net.charAt(0).toUpperCase() + net.slice(1)}
+      <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>
-        <p className="text-xs text-sol-muted mt-2">
-          {network === 'devnet' && '⚠️ Devnet — test tokens only. No real value.'}
-          {network === 'mainnet-beta' && '🔴 Mainnet — real tokens. Transactions are irreversible.'}
-          {network === 'testnet' && '⚠️ Testnet — for development purposes.'}
+        <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>
       </div>
 
       {/* AI Models */}
-      <div className="glass rounded-2xl p-6">
-        <h3 className="text-lg font-semibold mb-4">🧠 AI Models (QVAC)</h3>
-        <p className="text-sm text-sol-muted mb-4">
-          SolVox uses 6 QVAC AI packages, all running locally on your device.
-        </p>
-        <div className="space-y-3">
-          {[
-            { name: 'LLM', model: 'Llama 3.2 3B Instruct (Q4_K_M)', size: '~2.0 GB', pkg: '@qvac/llm-llamacpp' },
-            { name: 'Embeddings', model: 'Nomic Embed Text v1.5', size: '~260 MB', pkg: '@qvac/embed-llamacpp' },
-            { name: 'Speech-to-Text', model: 'Whisper Base.en', size: '~150 MB', pkg: '@qvac/transcription-whispercpp' },
-            { name: 'Text-to-Speech', model: 'Amy (en_US, medium)', size: '~75 MB', pkg: '@qvac/tts-onnx' },
-            { name: 'Translation', model: 'OPUS MT (EN↔ES)', size: '~50 MB', pkg: '@qvac/translation-nmtcpp' },
-            { name: 'OCR', model: 'PaddleOCR v4', size: '~30 MB', pkg: '@qvac/ocr-onnx' },
-          ].map(m => (
-            <div key={m.name} className="flex items-center justify-between bg-sol-dark rounded-xl p-3">
-              <div>
-                <div className="text-sm font-semibold">{m.name}</div>
-                <div className="text-xs text-sol-muted">{m.model}</div>
-                <div className="text-xs text-sol-muted font-mono">{m.pkg}</div>
-              </div>
-              <div className="text-right">
-                <div className="text-xs text-sol-muted">{m.size}</div>
+      <div className="glass rounded-2xl p-5">
+        <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>
+        <div className="space-y-2 stagger">
+          {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>
+              <div className="text-[10px] text-sol-muted font-medium">{m.size}</div>
             </div>
           ))}
         </div>
-        <div className="mt-4 pt-3 border-t border-sol-border">
-          <p className="text-xs text-sol-muted">
-            Total model size: ~2.6 GB | All models are stored locally in the <code className="text-sol-purple">models/</code> directory.
-            Models run on any GPU via Vulkan API — no CUDA required.
-          </p>
+        <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" />
+          All models run locally via QVAC Fabric (Vulkan GPU) — no CUDA required
         </div>
       </div>
 
       {/* About */}
-      <div className="glass rounded-2xl p-6">
-        <h3 className="text-lg font-semibold mb-4">About SolVox</h3>
-        <div className="space-y-2 text-sm text-sol-muted">
-          <p><strong className="text-sol-text">SolVox</strong> is a voice-first, privacy-preserving AI wallet for the Solana blockchain.</p>
-          <p>
-            Powered by <strong className="text-tether-green">Tether's QVAC SDK</strong> — a complete platform for running AI models
-            directly on any device, without routing data through a centralized cloud.
-          </p>
-          <div className="flex flex-wrap gap-2 mt-3">
-            <span className="px-2 py-0.5 bg-sol-dark rounded text-xs">Electron</span>
-            <span className="px-2 py-0.5 bg-sol-dark rounded text-xs">React</span>
-            <span className="px-2 py-0.5 bg-sol-dark rounded text-xs">TypeScript</span>
-            <span className="px-2 py-0.5 bg-sol-dark rounded text-xs">QVAC SDK</span>
-            <span className="px-2 py-0.5 bg-sol-dark rounded text-xs">Solana</span>
-            <span className="px-2 py-0.5 bg-sol-dark rounded text-xs">Vulkan</span>
+      <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>
-        <div className="mt-4 pt-3 border-t border-sol-border text-xs text-sol-muted">
-          Built for the Colosseum Frontier Hackathon • Tether QVAC Track
+        <div className="divider my-3" />
+        <div className="text-[10px] text-sol-muted/60">
+          Built for Colosseum Frontier Hackathon • Tether QVAC Track
         </div>
       </div>
 
       {/* Danger Zone */}
-      <div className="rounded-2xl border-2 border-danger/30 p-6">
-        <h3 className="text-lg font-semibold text-danger mb-4">⚠️ Danger Zone</h3>
-        <div className="space-y-3">
-          <button
-            onClick={onLock}
-            className="w-full py-3 rounded-xl border border-danger text-danger hover:bg-danger/10 transition-colors font-medium"
-          >
-            🔒 Lock Wallet Now
-          </button>
-          <p className="text-xs text-sol-muted text-center">
-            Locking zeroes your private key from memory. You'll need your PIN to unlock.
-          </p>
-        </div>
+      <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>
       </div>
     </div>
   );

src/renderer/pages/VoicePage.tsx

@@ -1,298 +1,236 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { OrbitLoader } from '../components/ui/index';
 
-interface VoicePageProps {
-  aiStatus: any;
-}
+interface VoicePageProps { aiStatus: any; }
+interface Message { id: string; role: 'user' | 'assistant' | 'system'; text: string; intent?: any; timestamp: Date; }
 
-interface Message {
-  id: string;
-  role: 'user' | 'assistant' | 'system';
-  text: string;
-  intent?: any;
-  timestamp: 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',
+];
 
 export default function VoicePage({ aiStatus }: VoicePageProps) {
   const [messages, setMessages] = useState<Message[]>([
-    {
-      id: '0',
-      role: 'assistant',
-      text: 'Hello! I\'m your SolVox AI assistant. I can help you send SOL and USDT, check your balance, view transactions, and more. Try saying "What is my balance?" or type a command below.',
-      timestamp: new Date(),
-    },
+    { 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() },
   ]);
   const [input, setInput] = useState('');
   const [isRecording, setIsRecording] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
-  const [waveformData, setWaveformData] = useState<number[]>(new Array(32).fill(4));
+  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]);
+  useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
 
-  // ── Voice Recording ──
   const startRecording = async () => {
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          sampleRate: 16000,
-          channelCount: 1,
-          echoCancellation: true,
-          noiseSuppression: true,
-        },
-      });
-
-      // Waveform visualization
-      const audioContext = new AudioContext();
-      const source = audioContext.createMediaStreamSource(stream);
-      const analyser = audioContext.createAnalyser();
-      analyser.fftSize = 64;
-      source.connect(analyser);
+      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 updateWaveform = () => {
+      const update = () => {
         if (!analyserRef.current) return;
-        const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
-        analyserRef.current.getByteFrequencyData(dataArray);
-        const normalized = Array.from(dataArray).slice(0, 32).map(v => Math.max(4, v / 8));
-        setWaveformData(normalized);
-        animFrameRef.current = requestAnimationFrame(updateWaveform);
+        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);
       };
-      updateWaveform();
+      update();
 
-      const recorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
+      const rec = new MediaRecorder(stream, { mimeType: 'audio/webm' });
       audioChunks.current = [];
-
-      recorder.ondataavailable = (e) => {
-        if (e.data.size > 0) audioChunks.current.push(e.data);
-      };
-
-      recorder.onstop = async () => {
+      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);
-        setWaveformData(new Array(32).fill(4));
-
+        if (timerRef.current) clearInterval(timerRef.current);
+        setWaveformData(new Array(48).fill(2));
+        setRecordingTime(0);
         const blob = new Blob(audioChunks.current, { type: 'audio/webm' });
-        const buffer = await blob.arrayBuffer();
-        processVoice(buffer);
+        processVoice(await blob.arrayBuffer());
       };
 
-      mediaRecorder.current = recorder;
-      recorder.start();
+      mediaRecorder.current = rec;
+      rec.start();
       setIsRecording(true);
-    } catch (err) {
-      addMessage('system', 'Microphone access denied. Please enable microphone permissions.');
-    }
+      setRecordingTime(0);
+      timerRef.current = setInterval(() => setRecordingTime(p => p + 1), 1000);
+    } catch { addMsg('system', 'Microphone access denied. Please enable mic permissions.'); }
   };
 
   const stopRecording = () => {
-    if (mediaRecorder.current && isRecording) {
-      mediaRecorder.current.stop();
-      setIsRecording(false);
-    }
+    if (mediaRecorder.current && isRecording) { mediaRecorder.current.stop(); setIsRecording(false); }
   };
 
-  // ── Process Voice Command ──
-  const processVoice = async (audioData: ArrayBuffer) => {
+  const processVoice = async (data: ArrayBuffer) => {
     setIsProcessing(true);
     try {
       if (window.solvox) {
-        const result = await window.solvox.ai.processVoice(audioData);
-        if (result.success) {
-          addMessage('user', result.transcription || '[voice input]');
-          addMessage('assistant', result.response || 'Done.', result.intent);
-
-          // Play audio response if available
-          if (result.audio) {
-            playAudio(result.audio);
-          }
-        } else {
-          addMessage('system', `Voice processing failed: ${result.error}`);
-        }
-      } else {
-        addMessage('user', '[voice input - dev mode]');
-        addMessage('assistant', 'Voice processing requires QVAC models. In dev mode, use text commands.');
-      }
-    } catch (err: any) {
-      addMessage('system', `Error: ${err.message}`);
-    }
+        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);
   };
 
-  // ── Text Chat ──
-  const handleSendMessage = async () => {
+  const handleSend = async () => {
     if (!input.trim()) return;
     const text = input.trim();
     setInput('');
-
-    addMessage('user', text);
+    addMsg('user', text);
     setIsProcessing(true);
-
     try {
       if (window.solvox) {
-        // First parse intent
-        const intentResult = await window.solvox.ai.parseIntent(text);
-        const intent = intentResult.success ? intentResult.intent : null;
-
-        // Then get AI response
-        const chatResult = await window.solvox.ai.chat(text);
-        if (chatResult.success) {
-          addMessage('assistant', chatResult.response!, intent);
-        } else {
-          addMessage('assistant', chatResult.error || 'Sorry, I could not process that.');
-        }
-      } else {
-        // Dev mode fallback
-        addMessage('assistant', `[Dev mode] You said: "${text}". QVAC models needed for AI responses.`);
-      }
-    } catch (err: any) {
-      addMessage('system', `Error: ${err.message}`);
-    }
+        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);
   };
 
-  // ── Helpers ──
-  const addMessage = (role: 'user' | 'assistant' | 'system', text: string, intent?: any) => {
-    setMessages(prev => [...prev, {
-      id: Date.now().toString(),
-      role,
-      text,
-      intent,
-      timestamp: new Date(),
-    }]);
+  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 playAudio = (audioData: ArrayBuffer) => {
-    try {
-      const blob = new Blob([audioData], { type: 'audio/wav' });
-      const url = URL.createObjectURL(blob);
-      const audio = new Audio(url);
-      audio.play().catch(() => {});
-      audio.onended = () => URL.revokeObjectURL(url);
-    } catch {}
+  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 activeModules = 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 slide-enter">
+    <div className="flex flex-col h-full page-enter">
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <div>
-          <h2 className="text-2xl font-bold">🎤 Voice AI Assistant</h2>
-          <p className="text-sm text-sol-muted">
-            Powered by 6 QVAC packages • All local, all private
-          </p>
+          <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">
-          {aiStatus?.llm ? (
-            <span className="px-3 py-1 rounded-full bg-sol-green/20 text-sol-green text-xs">
-              AI Online
-            </span>
-          ) : (
-            <span className="px-3 py-1 rounded-full bg-warning/20 text-warning text-xs">
-              Loading Models...
-            </span>
-          )}
+          <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>
         </div>
       </div>
 
-      {/* Chat Messages */}
-      <div className="flex-1 overflow-y-auto glass rounded-2xl p-4 mb-4 space-y-4">
+      {/* 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'}`}
-          >
-            <div className={`max-w-[80%] rounded-2xl px-4 py-3 ${
-              msg.role === 'user'
-                ? 'bg-sol-purple text-white'
-                : msg.role === 'system'
-                ? 'bg-warning/10 text-warning border border-warning/30'
-                : 'bg-sol-dark border border-sol-border'
+          <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'
             }`}>
-              <p className="text-sm whitespace-pre-wrap">{msg.text}</p>
-              {msg.intent && (
-                <div className="mt-2 pt-2 border-t border-sol-border/30">
-                  <div className="text-xs font-mono text-sol-muted">
-                    Intent: {msg.intent.action} | Confidence: {(msg.intent.confidence * 100).toFixed(0)}%
-                    {msg.intent.amount && ` | Amount: ${msg.intent.amount} ${msg.intent.token || ''}`}
-                    {msg.intent.to && ` | To: ${msg.intent.to}`}
+              {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>
                 </div>
               )}
-              <div className="text-xs text-sol-muted/50 mt-1">
-                {msg.timestamp.toLocaleTimeString()}
-              </div>
+              <div className="text-[10px] opacity-40 mt-1.5">{msg.timestamp.toLocaleTimeString()}</div>
             </div>
           </div>
         ))}
         {isProcessing && (
           <div className="flex justify-start">
-            <div className="bg-sol-dark border border-sol-border rounded-2xl px-4 py-3">
-              <div className="flex space-x-1.5">
-                <div className="w-2 h-2 bg-sol-purple rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-                <div className="w-2 h-2 bg-sol-purple rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-                <div className="w-2 h-2 bg-sol-purple rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-              </div>
+            <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>
           </div>
         )}
         <div ref={messagesEndRef} />
       </div>
 
-      {/* Waveform Visualizer (visible during recording) */}
-      {isRecording && (
-        <div className="flex items-center justify-center gap-0.5 h-12 mb-4">
-          {waveformData.map((h, i) => (
-            <div
-              key={i}
-              className="w-1.5 bg-sol-purple rounded-full transition-all duration-75"
-              style={{ height: `${h}px` }}
-            />
+      {/* 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>
           ))}
         </div>
       )}
 
-      {/* Input Area */}
+      {/* 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>
+        </div>
+      )}
+
+      {/* Input Bar */}
       <div className="flex items-center gap-3">
-        {/* Voice Button */}
         <button
-          onMouseDown={startRecording}
-          onMouseUp={stopRecording}
-          onMouseLeave={stopRecording}
-          onTouchStart={startRecording}
-          onTouchEnd={stopRecording}
+          onMouseDown={startRecording} onMouseUp={stopRecording} onMouseLeave={stopRecording}
+          onTouchStart={startRecording} onTouchEnd={stopRecording}
           disabled={isProcessing}
-          className={`w-14 h-14 rounded-full flex items-center justify-center transition-all ${
-            isRecording
-              ? 'bg-danger recording-pulse scale-110'
-              : 'bg-sol-purple hover:bg-sol-purple/80 glow-purple'
-          } disabled:opacity-50`}
+          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"
         >
-          <span className="text-2xl">{isRecording ? '⏹' : '🎤'}</span>
+          <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"/></>
+            }
+          </svg>
         </button>
 
-        {/* Text Input */}
         <div className="flex-1 relative">
-          <input
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
-            placeholder="Type a command or hold 🎤 to speak..."
-            className="w-full px-4 py-3 bg-sol-card border border-sol-border rounded-xl text-sm focus:border-sol-purple focus:outline-none pr-16"
-            disabled={isProcessing}
-          />
-          <button
-            onClick={handleSendMessage}
-            disabled={!input.trim() || isProcessing}
-            className="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 rounded-lg bg-sol-purple text-white text-sm disabled:opacity-30 hover:bg-sol-purple/80 transition-all"
-          >
-            Send
+          <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>
         </div>
       </div>

tailwind.config.js

@@ -6,43 +6,82 @@ module.exports = {
     extend: {
       colors: {
         'sol-purple': '#9945FF',
+        'sol-purple-light': '#B06CFF',
         'sol-green': '#14F195',
-        'sol-dark': '#0E0E2C',
-        'sol-card': '#1A1A3E',
-        'sol-border': '#2D2D5E',
-        'sol-text': '#E0E0FF',
-        'sol-muted': '#8888AA',
+        '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',
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
         mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
       },
+      borderRadius: {
+        '2xl': '16px',
+        '3xl': '20px',
+        '4xl': '24px',
+      },
+      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 2s ease-in-out infinite',
+        'pulse-glow': 'pulse-glow 3s ease-in-out infinite',
         'waveform': 'waveform 0.5s ease-in-out infinite alternate',
-        'slide-up': 'slide-up 0.3s ease-out',
-        'fade-in': 'fade-in 0.2s ease-out',
+        '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',
       },
       keyframes: {
         'pulse-glow': {
-          '0%, 100%': { boxShadow: '0 0 20px rgba(153, 69, 255, 0.3)' },
-          '50%': { boxShadow: '0 0 40px rgba(153, 69, 255, 0.6)' },
+          '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: '4px' },
-          '100%': { height: '24px' },
+          '0%': { height: '3px' },
+          '100%': { height: '28px' },
         },
         'slide-up': {
-          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '0%': { transform: 'translateY(24px)', opacity: '0' },
           '100%': { transform: 'translateY(0)', opacity: '1' },
         },
-        'fade-in': {
+        '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%' },
+        },
       },
     },
   },