diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,1269 +1,1396 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CodeGalaxy Kids - Learn to Code!</title>
-    <script src="https://cdn.jsdelivr.net/npm/blockly@10.0.0/blockly.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/blockly@10.0.0/msg/en.js"></script>
-    <link href="https://cdn.jsdelivr.net/npm/blockly@10.0.0/media/blockly.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary: #6c5ce7;
-            --secondary: #a29bfe;
-            --accent: #ff7675;
-            --success: #00b894;
-            --warning: #fdcb6e;
-            --dark: #2d3436;
-            --light: #dfe6e9;
-            --space-bg: #0f1b33;
-            --robot-bg: #e8f4f8;
-            --animal-bg: #e8f5e9;
-            --galaxy-gradient: linear-gradient(135deg, #1a237e 0%, #4a148c 100%);
-            --robot-gradient: linear-gradient(135deg, #00838f 0%, #006064 100%);
-            --animal-gradient: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
-        }
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+
+// --- Enhanced Icon Components with Modern Styling ---
+const IconNova = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 2L2 7l10 5 10-5-10-5z" />
+    <path d="M2 17l10 5 10-5" />
+    <path d="M2 12l10 5 10-5" />
+  </svg>
+);
+
+const IconHome = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    <polyline points="9 22 9 12 15 12 15 22" />
+  </svg>
+);
+
+const IconTabs = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M21 12H3" />
+    <path d="M12 3v18" />
+  </svg>
+);
+
+const IconSparkles = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m12 3-1.9 4.8-4.8 1.9 4.8 1.9L12 16l1.9-4.8 4.8-1.9-4.8-1.9L12 3z" />
+    <path d="M5 21v-3.8" />
+    <path d="M19 21v-3.8" />
+    <path d="M3 12H7.8" />
+    <path d="M16.2 12H21" />
+  </svg>
+);
+
+const IconSettings = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l-.15-.09a2 2 0 0 0 .73 2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+
+const IconPlus = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  </svg>
+);
+
+const IconX = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+);
+
+const IconSearch = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+);
+
+const IconMic = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <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" />
+    <line x1="12" x2="12" y1="19" y2="22" />
+  </svg>
+);
+
+const IconSend = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m22 2-7 20-4-9-9-4Z" />
+    <path d="m22 2-11 11" />
+  </svg>
+);
+
+const IconGrid = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect width="7" height="7" x="3" y="3" rx="1" />
+    <rect width="7" height="7" x="14" y="3" rx="1" />
+    <rect width="7" height="7" x="14" y="14" rx="1" />
+    <rect width="7" height="7" x="3" y="14" rx="1" />
+  </svg>
+);
+
+const IconLayers = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="12 2 2 7 12 12 22 7 12 2" />
+    <polyline points="2 17 12 22 22 17" />
+    <polyline points="2 12 12 17 22 12" />
+  </svg>
+);
+
+const IconCheckSquare = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="9 11 12 14 22 4" />
+    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+  </svg>
+);
+
+const IconCalendar = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+    <line x1="16" x2="16" y1="2" y2="6" />
+    <line x1="8" x2="8" y1="2" y2="6" />
+    <line x1="3" x2="21" y1="10" y2="10" />
+  </svg>
+);
+
+const IconCloud = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" />
+  </svg>
+);
+
+const IconSun = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" x2="12" y1="1" y2="3" />
+    <line x1="12" x2="12" y1="21" y2="23" />
+    <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
+    <line x1="18.36" x2="19.78" y1="18.36" y2="19.78" />
+    <line x1="1" x2="3" y1="12" y2="12" />
+    <line x1="21" x2="23" y1="12" y2="12" />
+    <line x1="4.22" x2="5.64" y1="19.78" y2="18.36" />
+    <line x1="18.36" x2="19.78" y1="5.64" y2="4.22" />
+  </svg>
+);
+
+const IconMoon = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+);
+
+const IconCode = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="16 18 22 12 16 6" />
+    <polyline points="8 6 2 12 8 18" />
+  </svg>
+);
+
+const IconBrain = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 2.5 2.5 0 0 1-.34-5.99 2.5 2.5 0 0 1 5.76-1.24Z"/>
+    <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 2.5 2.5 0 0 0 .34-5.99 2.5 2.5 0 0 0-5.76-1.24Z"/>
+  </svg>
+);
+
+const IconZap = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+  </svg>
+);
+
+const IconShield = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+  </svg>
+);
+
+const IconDownload = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+    <polyline points="7 10 12 15 17 10"/>
+    <line x1="12" y1="15" x2="12" y2="3"/>
+  </svg>
+);
+
+// --- Search Engines Configuration ---
+const SEARCH_ENGINES = {
+  google: {
+    name: "Google",
+    url: "https://www.google.com/search?q=",
+    icon: "🔍",
+    suggestionUrl: "https://suggestqueries.google.com/complete/search?client=firefox&q="
+  },
+  bing: {
+    name: "Bing",
+    url: "https://www.bing.com/search?q=",
+    icon: "🔎",
+    suggestionUrl: "https://api.bing.com/osjson.aspx?query="
+  },
+  duckduckgo: {
+    name: "DuckDuckGo",
+    url: "https://duckduckgo.com/?q=",
+    icon: "🦆",
+    suggestionUrl: "https://duckduckgo.com/ac/?q="
+  },
+  brave: {
+    name: "Brave",
+    url: "https://search.brave.com/search?q=",
+    icon: "🦁",
+    suggestionUrl: "https://search.brave.com/api/suggest?q="
+  },
+  youtube: {
+    name: "YouTube",
+    url: "https://www.youtube.com/results?search_query=",
+    icon: "📺",
+    suggestionUrl: "https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&q="
+  }
+};
+
+// --- Enhanced Mock Data ---
+const initialTabs = [
+  { 
+    id: 1, 
+    title: "NovaBrowse AI Dashboard", 
+    url: "nova://dashboard",
+    topic: "home", 
+    favicon: "🚀", 
+    lastActive: "now",
+    isProtected: true
+  },
+  { 
+    id: 2, 
+    title: "Google", 
+    url: "https://www.google.com",
+    topic: "search", 
+    favicon: "🔍", 
+    lastActive: "5m ago",
+    searchEngine: "google"
+  }
+];
+
+const topicColorsMap = {
+  home: { border: "border-blue-500", text: "text-blue-400", bg: "bg-blue-500", gradient: "from-blue-500 to-cyan-500" },
+  research: { border: "border-purple-500", text: "text-purple-400", bg: "bg-purple-500", gradient: "from-purple-500 to-pink-500" },
+  work: { border: "border-green-500", text: "text-green-400", bg: "bg-green-500", gradient: "from-green-500 to-emerald-500" },
+  entertainment: { border: "border-red-500", text: "text-red-400", bg: "bg-red-500", gradient: "from-red-500 to-orange-500" },
+  search: { border: "border-yellow-500", text: "text-yellow-400", bg: "bg-yellow-500", gradient: "from-yellow-500 to-orange-500" },
+  default: { border: "border-gray-500", text: "text-gray-400", bg: "bg-gray-500", gradient: "from-gray-500 to-slate-500" },
+};
+
+const mockWidgets = [
+  { id: 1, icon: <IconCalendar className="w-6 h-6" />, title: "Calendar", content: "3 Meetings Today", metric: "+2 from yesterday", trend: "up" },
+  { id: 2, icon: <IconCheckSquare className="w-6 h-6" />, title: "To-Do", content: "Finish browser prototype.", metric: "75% completed", trend: "up" },
+  { id: 3, icon: <IconCloud className="w-6 h-6" />, title: "Weather", content: "24°C, Clear", metric: "Perfect for focus", trend: "stable" },
+  { id: 4, icon: <IconSparkles className="w-6 h-6" />, title: "AI Tip", content: "Try 'Summarize this' on any article.", metric: "Saves 5min avg", trend: "up" },
+];
+
+const aiCommands = [
+  { command: "Summarize this page", icon: "📄", description: "Get key points from current tab" },
+  { command: "Organize my tabs", icon: "🗂️", description: "AI-powered tab grouping" },
+  { command: "Find research papers", icon: "🔍", description: "Academic search optimization" },
+  { command: "Translate to Spanish", icon: "🌎", description: "Real-time page translation" },
+];
+
+// --- Main Component ---
+export default function AdvancedBrowser() {
+  const [tabs, setTabs] = useState(initialTabs);
+  const [activeTabId, setActiveTabId] = useState(1);
+  const [activePage, setActivePage] = useState('dashboard');
+  const [isCopilotOpen, setIsCopilotOpen] = useState(false);
+  const [copilotMessages, setCopilotMessages] = useState([
+    { from: "ai", text: "Hello! I am Nova, your AI assistant. How can I help you browse today?" }
+  ]);
+  const [copilotInput, setCopilotInput] = useState("");
+  const [isAiThinking, setIsAiThinking] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [theme, setTheme] = useState('dark');
+  const [isListening, setIsListening] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [showCommandPalette, setShowCommandPalette] = useState(false);
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    memory: "1.2GB", cpu: "15%", network: "45ms", tabs: "2 open"
+  });
+  const [currentUrl, setCurrentUrl] = useState("nova://dashboard");
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchSuggestions, setSearchSuggestions] = useState([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [currentSearchEngine, setCurrentSearchEngine] = useState("google");
+  const [downloads, setDownloads] = useState([]);
+  const [securityStatus, setSecurityStatus] = useState("secure");
+  const [bookmarks, setBookmarks] = useState([]);
+  const [history, setHistory] = useState([]);
+
+  const copilotMessagesEndRef = useRef(null);
+  const speechRecognitionRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const iframeRef = useRef(null);
+
+  const activeTab = tabs.find(t => t.id === activeTabId);
+
+  // Enhanced theme simulation
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    setTheme(mediaQuery.matches ? 'dark' : 'light');
+    
+    const handler = (e) => setTheme(e.matches ? 'dark' : 'light');
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, []);
+
+  // Enhanced scroll effect
+  useEffect(() => {
+    copilotMessagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [copilotMessages]);
+
+  // Enhanced speech recognition
+  useEffect(() => {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (SpeechRecognition) {
+      const recognition = new SpeechRecognition();
+      recognition.continuous = false;
+      recognition.interimResults = false;
+      recognition.lang = 'en-US';
+
+      recognition.onstart = () => setIsListening(true);
+      recognition.onend = () => setIsListening(false);
+      recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        setSearchTerm(transcript);
+        handleSearch(transcript);
+      };
+      recognition.onerror = (event) => {
+        console.error("Speech recognition error:", event.error);
+        setIsListening(false);
+      };
+
+      speechRecognitionRef.current = recognition;
+    }
+  }, []);
+
+  // Command palette shortcut
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setShowCommandPalette(true);
+        setTimeout(() => searchInputRef.current?.focus(), 100);
+      }
+      if (e.key === 'Escape') {
+        setShowCommandPalette(false);
+        setShowSuggestions(false);
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === 't') {
+        e.preventDefault();
+        handleNewTab();
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === 'w') {
+        e.preventDefault();
+        if (tabs.length > 1) {
+          handleCloseTab(null, activeTabId);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [tabs, activeTabId]);
+
+  // Search suggestions
+  useEffect(() => {
+    if (searchTerm.length > 2) {
+      fetchSearchSuggestions(searchTerm);
+    } else {
+      setSearchSuggestions([]);
+    }
+  }, [searchTerm]);
+
+  const fetchSearchSuggestions = async (query) => {
+    try {
+      const engine = SEARCH_ENGINES[currentSearchEngine];
+      const response = await fetch(`${engine.suggestionUrl}${encodeURIComponent(query)}`);
+      const data = await response.json();
+      setSearchSuggestions(data[1] || []);
+      setShowSuggestions(true);
+    } catch (error) {
+      console.error("Failed to fetch suggestions:", error);
+    }
+  };
+
+  const toggleTheme = () => {
+    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+  };
+
+  const getTopicColor = useCallback((topic, type = 'border') => {
+    const colors = topicColorsMap[topic] || topicColorsMap.default;
+    return colors[type];
+  }, []);
+
+  const handleTabClick = (id) => {
+    setActiveTabId(id);
+    const tab = tabs.find(t => t.id === id);
+    setCurrentUrl(tab.url);
+    setActivePage(tab.url === "nova://dashboard" ? 'dashboard' : 'web');
+  };
+
+  const handleNewTab = (url = "nova://dashboard", title = "New Tab") => {
+    const newId = Math.max(0, ...tabs.map(t => t.id)) + 1;
+    const newTab = { 
+      id: newId, 
+      title: title,
+      url: url,
+      topic: url === "nova://dashboard" ? "home" : "default", 
+      favicon: "🌐",
+      lastActive: "now"
+    };
+    setTabs([...tabs, newTab]);
+    setActiveTabId(newId);
+    setCurrentUrl(url);
+    setActivePage(url === "nova://dashboard" ? 'dashboard' : 'web');
+  };
+
+  const handleCloseTab = (e, id) => {
+    e?.stopPropagation();
+    
+    if (tabs.length === 1) {
+      handleNewTab();
+      setTabs(tabs.filter(t => t.id !== id));
+      return;
+    }
+    
+    const newTabs = tabs.filter(t => t.id !== id);
+    setTabs(newTabs);
+
+    if (activeTabId === id) {
+      const newActiveId = newTabs[newTabs.length - 1].id;
+      setActiveTabId(newActiveId);
+      const newActiveTab = newTabs.find(t => t.id === newActiveId);
+      setCurrentUrl(newActiveTab.url);
+      setActivePage(newActiveTab.url === "nova://dashboard" ? 'dashboard' : 'web');
+    }
+  };
+
+  const organizeTabsByAi = () => {
+    const sortedTabs = [...tabs].sort((a, b) => a.topic.localeCompare(b.topic));
+    setTabs(sortedTabs);
+  };
+
+  const handleSearch = (query, engine = currentSearchEngine) => {
+    if (!query?.trim()) return;
+    
+    setIsLoading(true);
+    setSearchTerm(query);
+    
+    const searchUrl = SEARCH_ENGINES[engine].url + encodeURIComponent(query);
+    const searchTab = tabs.find(t => t.url.includes(SEARCH_ENGINES[engine].url));
+    
+    if (searchTab) {
+      const updatedTabs = tabs.map(t => 
+        t.id === searchTab.id ? { ...t, url: searchUrl, title: `${SEARCH_ENGINES[engine].name} Search` } : t
+      );
+      setTabs(updatedTabs);
+      setActiveTabId(searchTab.id);
+    } else {
+      handleNewTab(searchUrl, `${SEARCH_ENGINES[engine].name} Search`);
+    }
+    
+    setCurrentUrl(searchUrl);
+    setActivePage('web');
+    setShowSuggestions(false);
+    
+    // Add to history
+    setHistory(prev => [...prev, {
+      url: searchUrl,
+      title: `${query} - ${SEARCH_ENGINES[engine].name} Search`,
+      timestamp: new Date().toISOString()
+    }]);
+  };
+
+  const handleUrlNavigation = (url) => {
+    if (!url) return;
+    
+    let finalUrl = url;
+    if (!url.startsWith('http') && !url.startsWith('nova://')) {
+      finalUrl = SEARCH_ENGINES[currentSearchEngine].url + encodeURIComponent(url);
+    }
+    
+    setIsLoading(true);
+    setCurrentUrl(finalUrl);
+    
+    const updatedTabs = tabs.map(t => 
+      t.id === activeTabId ? { ...t, url: finalUrl, title: "Loading..." } : t
+    );
+    setTabs(updatedTabs);
+    
+    if (finalUrl.startsWith('nova://')) {
+      setActivePage('dashboard');
+    } else {
+      setActivePage('web');
+    }
+  };
+
+  const handleVoiceSearch = () => {
+    if (speechRecognitionRef.current && !isListening) {
+      speechRecognitionRef.current.start();
+    } else if (isListening) {
+      speechRecognitionRef.current.stop();
+    }
+  };
+
+  const handleDownload = (url, filename) => {
+    const downloadId = Date.now();
+    const newDownload = {
+      id: downloadId,
+      url,
+      filename: filename || `download-${downloadId}`,
+      progress: 0,
+      status: 'downloading'
+    };
+    
+    setDownloads(prev => [...prev, newDownload]);
+    
+    // Simulate download progress
+    const interval = setInterval(() => {
+      setDownloads(prev => prev.map(d => 
+        d.id === downloadId 
+          ? { ...d, progress: Math.min(d.progress + 10, 100) }
+          : d
+      ));
+    }, 200);
+    
+    setTimeout(() => {
+      clearInterval(interval);
+      setDownloads(prev => prev.map(d => 
+        d.id === downloadId 
+          ? { ...d, progress: 100, status: 'completed' }
+          : d
+      ));
+    }, 2000);
+  };
+
+  const addBookmark = (url, title) => {
+    const newBookmark = {
+      id: Date.now(),
+      url,
+      title,
+      favicon: "🔖",
+      dateAdded: new Date().toISOString()
+    };
+    setBookmarks(prev => [...prev, newBookmark]);
+  };
+
+  const removeBookmark = (id) => {
+    setBookmarks(prev => prev.filter(b => b.id !== id));
+  };
+
+  const handleIframeLoad = () => {
+    setIsLoading(false);
+    const updatedTabs = tabs.map(t => 
+      t.id === activeTabId ? { ...t, title: iframeRef.current?.contentDocument?.title || t.title } : t
+    );
+    setTabs(updatedTabs);
+    
+    // Update security status based on URL
+    const isSecure = currentUrl.startsWith('https://');
+    setSecurityStatus(isSecure ? 'secure' : 'insecure');
+  };
+
+  const Sidebar = () => (
+    <nav className={`flex flex-col h-full py-4 glass-ui transition-all duration-300 ${
+      sidebarCollapsed ? 'w-16' : 'w-20'
+    } ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} flex-shrink-0`}>
+      <div className={`p-2 mb-6 transition-all duration-300 ${
+        theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
+      } hover:opacity-80 hover:scale-110 cursor-pointer`}>
+        <IconNova className="w-8 h-8" />
+      </div>
+      
+      <div className="flex flex-col items-center space-y-4 flex-1">
+        {[
+          { icon: <IconHome />, page: 'dashboard', label: 'Home' },
+          { icon: <IconGrid />, page: 'tabs', label: 'Tabs' },
+          { icon: <IconLayers />, page: 'bookmarks', label: 'Bookmarks' },
+          { icon: <IconDownload />, page: 'downloads', label: 'Downloads' },
+          { icon: <IconCode />, page: 'developer', label: 'Dev Tools' },
+          { icon: <IconBrain />, page: 'ai', label: 'AI Studio' },
+        ].map((item) => (
+          <button
+            key={item.page}
+            onClick={() => {
+              setActivePage(item.page);
+              if (item.page === 'dashboard') {
+                handleNewTab("nova://dashboard", "NovaBrowse Dashboard");
+              }
+            }}
+            className={`p-3 rounded-xl transition-all duration-300 group relative ${
+              activePage === item.page 
+                ? 'bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg' 
+                : 'hover:bg-gray-500/20'
+            }`}
+            title={item.label}
+          >
+            {React.cloneElement(item.icon, { className: "w-6 h-6" })}
+            {!sidebarCollapsed && (
+              <span className="absolute left-14 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+                {item.label}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      <div className="space-y-4">
+        <button
+          onClick={toggleTheme}
+          className="p-3 rounded-xl transition-all duration-300 hover:bg-gray-500/20 group relative"
+          title="Toggle Theme"
+        >
+          {theme === 'dark' ? <IconSun className="w-6 h-6" /> : <IconMoon className="w-6 h-6" />}
+          {!sidebarCollapsed && (
+            <span className="absolute left-14 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+              Toggle Theme
+            </span>
+          )}
+        </button>
+        
+        <button
+          className="p-3 rounded-xl transition-all duration-300 hover:bg-gray-500/20 group relative"
+          title="Settings"
+        >
+          <IconSettings className="w-6 h-6" />
+          {!sidebarCollapsed && (
+            <span className="absolute left-14 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+              Settings
+            </span>
+          )}
+        </button>
+      </div>
+    </nav>
+  );
+
+  const TabStrip = () => (
+    <div className={`flex items-center w-full h-14 overflow-x-auto glass-ui-top border-b ${
+      theme === 'dark' ? 'border-gray-500/20' : 'border-gray-300/30'
+    }`}>
+      <div className="flex h-full">
+        {tabs.map(tab => (
+          <div
+            key={tab.id}
+            onClick={() => handleTabClick(tab.id)}
+            className={`group relative flex items-center justify-between px-4 h-full min-w-[180px] max-w-[240px] cursor-pointer transition-all duration-300 border-r ${
+              activeTabId === tab.id 
+                ? 'bg-gradient-to-r from-blue-500/20 to-purple-500/10' 
+                : (theme === 'dark' ? 'bg-gray-800/10 hover:bg-gray-500/20' : 'bg-white/10 hover:bg-gray-200/20')
+            } ${theme === 'dark' ? 'border-gray-700/30' : 'border-gray-300/30'}`}
+          >
+            <div className={`absolute inset-0 rounded-t-lg ${
+              activeTabId === tab.id ? getTopicColor(tab.topic, 'border') : 'border-transparent'
+            } border-t-2`}></div>
+            
+            <div className="flex items-center space-x-3 flex-1 min-w-0">
+              <span className="text-lg">{tab.favicon}</span>
+              <span className={`text-sm truncate font-medium ${
+                theme === 'dark' ? 'text-gray-200' : 'text-gray-800'
+              }`}>{tab.title}</span>
+            </div>
+            
+            <button
+              onClick={(e) => handleCloseTab(e, tab.id)}
+              className={`ml-2 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-all ${
+                theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
+              } hover:bg-red-500/50 hover:text-white`}
+            >
+              <IconX className="w-3 h-3" />
+            </button>
+          </div>
+        ))}
+      </div>
+      
+      <button
+        onClick={() => handleNewTab()}
+        className={`px-4 h-full transition-all duration-300 ${
+          theme === 'dark' 
+            ? 'bg-gray-800/20 text-gray-400 hover:bg-blue-500/20 hover:text-white' 
+            : 'bg-gray-100/20 text-gray-600 hover:bg-blue-500/20 hover:text-white'
+        }`}
+      >
+        <IconPlus className="w-5 h-5" />
+      </button>
+    </div>
+  );
+
+  const AddressBar = () => (
+    <div className="flex items-center w-full h-16 p-3 glass-ui-top">
+      <div className="flex items-center space-x-2 mr-4">
+        <button
+          onClick={() => activeTabId && handleCloseTab(null, activeTabId)}
+          className={`p-2 rounded-xl transition-all ${
+            theme === 'dark' ? 'hover:bg-gray-700/50 text-gray-400' : 'hover:bg-gray-300/50 text-gray-600'
+          }`}
+          title="Close Tab (Ctrl+W)"
+        >
+          <IconX className="w-4 h-4" />
+        </button>
+        
+        <button
+          onClick={() => handleNewTab()}
+          className={`p-2 rounded-xl transition-all ${
+            theme === 'dark' ? 'hover:bg-gray-700/50 text-gray-400' : 'hover:bg-gray-300/50 text-gray-600'
+          }`}
+          title="New Tab (Ctrl+T)"
+        >
+          <IconPlus className="w-4 h-4" />
+        </button>
+      </div>
+
+      <div className={`flex items-center w-full max-w-4xl rounded-2xl glass-ui-inset p-1 ${
+        theme === 'dark' ? 'shadow-inner-dark' : 'shadow-inner'
+      } relative`}>
+        {/* Search Engine Selector */}
+        <div className="relative group">
+          <button className="flex items-center px-3 py-2 rounded-xl mr-2 transition-all bg-gray-500/20 hover:bg-gray-500/30">
+            <span className="text-lg mr-2">{SEARCH_ENGINES[currentSearchEngine].icon}</span>
+            <span className="text-sm font-medium">{SEARCH_ENGINES[currentSearchEngine].name}</span>
+          </button>
+          
+          <div className="absolute top-full left-0 mt-2 w-48 rounded-2xl glass-ui-copilot border border-gray-500/30 shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
+            {Object.entries(SEARCH_ENGINES).map(([key, engine]) => (
+              <button
+                key={key}
+                onClick={() => setCurrentSearchEngine(key)}
+                className={`w-full text-left p-3 flex items-center space-x-3 transition-all ${
+                  currentSearchEngine === key 
+                    ? 'bg-blue-500/20 text-blue-300' 
+                    : 'hover:bg-gray-500/20 text-gray-300'
+                }`}
+              >
+                <span className="text-lg">{engine.icon}</span>
+                <span>{engine.name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
         
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+        <input
+          ref={searchInputRef}
+          type="text"
+          placeholder={`Search with ${SEARCH_ENGINES[currentSearchEngine].name} or enter address...`}
+          className={`flex-1 py-3 bg-transparent ${
+            theme === 'dark' ? 'text-white placeholder-gray-400' : 'text-black placeholder-gray-500'
+          } focus:outline-none font-body text-lg`}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && handleSearch(searchTerm)}
+          onFocus={() => searchTerm.length > 2 && setShowSuggestions(true)}
+        />
+        
+        {isLoading && (
+          <div className="absolute right-16 top-1/2 transform -translate-y-1/2">
+            <div className="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+          </div>
+        )}
+        
+        <button
+          onClick={handleVoiceSearch}
+          className={`p-3 mx-1 rounded-xl transition-all ${
+            theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+          } hover:bg-blue-500/30 hover:text-white ${isListening ? 'animate-pulse-glow bg-red-500/20' : ''}`}
+          title="Voice Command"
+        >
+          <IconMic className="w-5 h-5" />
+        </button>
+
+        {/* Security Indicator */}
+        <div className={`px-3 py-1 rounded-lg mr-2 ${
+          securityStatus === 'secure' 
+            ? 'bg-green-500/20 text-green-400' 
+            : 'bg-red-500/20 text-red-400'
+        }`}>
+          <IconShield className="w-4 h-4" />
+        </div>
+      </div>
+      
+      {/* Search Suggestions */}
+      {showSuggestions && searchSuggestions.length > 0 && (
+        <div className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 w-full max-w-2xl rounded-2xl glass-ui-copilot border border-gray-500/30 shadow-2xl z-40">
+          {searchSuggestions.slice(0, 8).map((suggestion, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                setSearchTerm(suggestion);
+                handleSearch(suggestion);
+              }}
+              className="w-full text-left p-4 hover:bg-gray-500/20 transition-all border-b border-gray-500/10 last:border-b-0"
+            >
+              <div className="flex items-center space-x-3">
+                <IconSearch className="w-4 h-4 text-gray-400" />
+                <span className="text-gray-200">{suggestion}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+      
+      <div className="flex items-center space-x-2 ml-4">
+        <button
+          onClick={() => currentUrl && addBookmark(currentUrl, activeTab?.title)}
+          className={`p-3 rounded-xl transition-all duration-300 ${
+            theme === 'dark' ? 'text-yellow-400 hover:bg-yellow-500/20' : 'text-yellow-600 hover:bg-yellow-500/10'
+          }`}
+          title="Bookmark this page"
+        >
+          🔖
+        </button>
+        
+        <button
+          onClick={() => setIsCopilotOpen(true)}
+          className="relative p-3 text-blue-300 rounded-xl transition-all duration-300 hover:bg-blue-500/30 hover:text-blue-100 neon-button-glow group"
+          title="AI Copilot"
+        >
+          <IconSparkles className="w-6 h-6" />
+          <span className="absolute -top-1 -right-1 w-3 h-3 bg-blue-400 rounded-full animate-pulse"></span>
+          <span className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+            AI Assistant
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+
+  const WebView = () => (
+    <div className="w-full h-full relative">
+      {isLoading && (
+        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-purple-500 z-10">
+          <div className="h-full bg-blue-400 animate-pulse" style={{ width: '80%' }}></div>
+        </div>
+      )}
+      
+      {currentUrl.startsWith('nova://') ? (
+        <EnhancedDashboard />
+      ) : (
+        <iframe
+          ref={iframeRef}
+          src={currentUrl}
+          className="w-full h-full border-0"
+          onLoad={handleIframeLoad}
+          title="Web Content"
+          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+        />
+      )}
+    </div>
+  );
+
+  const EnhancedDashboard = () => (
+    <div className="h-full overflow-y-auto">
+      <div className="absolute inset-0 -z-10">
+        <div className={`absolute inset-0 opacity-20 ${
+          theme === 'dark' 
+            ? 'bg-gradient-to-br from-blue-900/30 via-purple-900/20 to-cyan-900/30' 
+            : 'bg-gradient-to-br from-blue-100/50 via-purple-100/30 to-cyan-100/50'
+        }`}></div>
+      </div>
+
+      <div className="container mx-auto px-8 py-12">
+        <div className="text-center mb-16">
+          <h1 className="text-7xl font-black bg-gradient-to-r from-blue-400 via-purple-500 to-cyan-400 bg-clip-text text-transparent mb-6 animate-gradient">
+            NovaBrowse AI
+          </h1>
+          <p className={`text-2xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'} font-light mb-8`}>
+            The Future of Intelligent Browsing
+          </p>
+          
+          <div className="w-full max-w-3xl mx-auto mb-16">
+            <div className={`relative rounded-3xl glass-ui p-2 shadow-2xl neon-focus-glow ${
+              theme === 'light' ? 'border-gray-300/50' : ''
+            }`}>
+              <IconSearch className={`absolute left-6 top-1/2 transform -translate-y-1/2 w-6 h-6 ${
+                theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+              }`} />
+              <input
+                type="text"
+                placeholder="Ask Nova anything or search the web..."
+                className={`w-full p-4 pl-16 text-xl bg-transparent ${
+                  theme === 'dark' ? 'text-white placeholder-gray-400' : 'text-black placeholder-gray-500'
+                } focus:outline-none font-body`}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSearch(searchTerm)}
+              />
+              <button
+                onClick={handleVoiceSearch}
+                className={`absolute right-4 top-1/2 transform -translate-y-1/2 p-3 rounded-2xl transition-all ${
+                  theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+                } hover:bg-blue-500/30 hover:text-white ${isListening ? 'animate-pulse-glow bg-red-500/20' : ''}`}
+              >
+                <IconMic className="w-6 h-6" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+          {mockWidgets.map((widget, i) => (
+            <div 
+              key={widget.id} 
+              className="group p-6 rounded-2xl glass-ui hover-3d-tilt transition-all duration-500 animate-fade-in-up cursor-pointer border border-gray-500/10 hover:border-blue-500/30"
+              style={{ animationDelay: `${i * 100}ms` }}
+            >
+              <div className="flex items-center justify-between mb-4">
+                <div className={`p-3 rounded-xl bg-gradient-to-br ${getTopicColor('home', 'gradient')}`}>
+                  {widget.icon}
+                </div>
+                <div className={`text-sm px-2 py-1 rounded-lg ${
+                  widget.trend === 'up' ? 'bg-green-500/20 text-green-400' :
+                  widget.trend === 'down' ? 'bg-red-500/20 text-red-400' :
+                  'bg-blue-500/20 text-blue-400'
+                }`}>
+                  {widget.metric}
+                </div>
+              </div>
+              
+              <h3 className={`text-lg font-bold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                {widget.title}
+              </h3>
+              <p className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'} mb-4`}>
+                {widget.content}
+              </p>
+              
+              <div className="w-full bg-gray-500/20 rounded-full h-1">
+                <div className={`h-1 rounded-full bg-gradient-to-r ${getTopicColor('home', 'gradient')} ${
+                  widget.trend === 'up' ? 'w-3/4' : 'w-1/2'
+                }`}></div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {aiCommands.slice(0, 4).map((cmd, i) => (
+            <button
+              key={i}
+              onClick={() => {
+                setCopilotInput(cmd.command);
+                setIsCopilotOpen(true);
+              }}
+              className={`p-4 rounded-2xl glass-ui transition-all duration-300 hover:scale-105 group ${
+                theme === 'dark' ? 'hover:bg-blue-500/20' : 'hover:bg-blue-500/10'
+              }`}
+            >
+              <div className="text-2xl mb-2">{cmd.icon}</div>
+              <div className={`text-sm font-medium text-left ${
+                theme === 'dark' ? 'text-gray-200' : 'text-gray-800'
+              }`}>{cmd.command}</div>
+              <div className={`text-xs text-left ${
+                theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
+              }`}>{cmd.description}</div>
+            </button>
+          ))}
+        </div>
+
+        {/* Quick Access Sites */}
+        <div className="mt-16">
+          <h2 className={`text-3xl font-bold mb-8 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+            Quick Access
+          </h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+            {Object.entries(SEARCH_ENGINES).map(([key, engine]) => (
+              <button
+                key={key}
+                onClick={() => handleNewTab(engine.url, `${engine.name} Home`)}
+                className="p-6 rounded-2xl glass-ui transition-all duration-300 hover:scale-105 group text-center"
+              >
+                <div className="text-3xl mb-3">{engine.icon}</div>
+                <div className={`text-sm font-medium ${
+                  theme === 'dark' ? 'text-gray-200' : 'text-gray-800'
+                }`}>{engine.name}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const BookmarksView = () => (
+    <div className="p-8">
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-5xl font-black bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
+          Bookmarks
+        </h1>
+        <button
+          onClick={() => currentUrl && addBookmark(currentUrl, activeTab?.title)}
+          className="px-6 py-3 rounded-2xl bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-semibold hover:scale-105 transition-transform shadow-lg"
+        >
+          + Add Current Page
+        </button>
+      </div>
+
+      {bookmarks.length === 0 ? (
+        <div className="text-center py-16">
+          <div className="text-6xl mb-4">🔖</div>
+          <h3 className={`text-2xl font-bold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+            No bookmarks yet
+          </h3>
+          <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+            Bookmark your favorite sites for quick access
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {bookmarks.map(bookmark => (
+            <div
+              key={bookmark.id}
+              className="group p-6 rounded-2xl glass-ui h-32 flex flex-col justify-between cursor-pointer transition-all duration-300 hover-3d-tilt border-2 border-transparent hover:border-yellow-500/50"
+              onClick={() => handleNewTab(bookmark.url, bookmark.title)}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <div className="text-2xl mb-2">{bookmark.favicon}</div>
+                  <p className={`font-semibold text-lg truncate ${
+                    theme === 'dark' ? 'text-white' : 'text-gray-900'
+                  }`}>{bookmark.title}</p>
+                  <p className={`text-sm mt-1 truncate ${
+                    theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
+                  }`}>{new URL(bookmark.url).hostname}</p>
+                </div>
+                
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeBookmark(bookmark.id);
+                  }}
+                  className={`p-2 rounded-xl opacity-0 group-hover:opacity-100 transition-all ${
+                    theme === 'dark' ? 'bg-gray-700 text-gray-400' : 'bg-gray-300 text-gray-600'
+                  } hover:bg-red-500 hover:text-white`}
+                >
+                  <IconX className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  const DownloadsView = () => (
+    <div className="p-8">
+      <h1 className="text-5xl font-black bg-gradient-to-r from-green-400 to-cyan-400 bg-clip-text text-transparent mb-8">
+        Downloads
+      </h1>
+
+      {downloads.length === 0 ? (
+        <div className="text-center py-16">
+          <IconDownload className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+          <h3 className={`text-2xl font-bold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+            No downloads yet
+          </h3>
+          <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+            Your downloaded files will appear here
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {downloads.map(download => (
+            <div key={download.id} className="p-6 rounded-2xl glass-ui">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                  <IconDownload className="w-8 h-8 text-green-400" />
+                  <div>
+                    <h3 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      {download.filename}
+                    </h3>
+                    <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                      {download.status === 'completed' ? 'Completed' : 'Downloading...'}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center space-x-4">
+                  <div className="w-32 bg-gray-500/20 rounded-full h-2">
+                    <div 
+                      className="h-2 rounded-full bg-gradient-to-r from-green-500 to-cyan-500 transition-all duration-300"
+                      style={{ width: `${download.progress}%` }}
+                    ></div>
+                  </div>
+                  <span className={`text-sm font-mono ${
+                    theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
+                  }`}>
+                    {download.progress}%
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  const MainContent = () => (
+    <div className="flex-1 w-full h-full overflow-y-auto">
+      {activePage === 'dashboard' && <EnhancedDashboard />}
+      {activePage === 'web' && <WebView />}
+      {activePage === 'tabs' && <EnhancedTabGridView />}
+      {activePage === 'bookmarks' && <BookmarksView />}
+      {activePage === 'downloads' && <DownloadsView />}
+      {activePage === 'developer' && <EnhancedDeveloperView />}
+      {activePage === 'ai' && <AIStudioView />}
+    </div>
+  );
+
+  // ... (Other view components like EnhancedTabGridView, EnhancedDeveloperView, AIStudioView remain similar but updated)
+
+  const Copilot = () => (
+    <div
+      className={`fixed top-0 right-0 h-full w-full max-w-md z-50 transform transition-all duration-500 ease-out ${
+        isCopilotOpen ? 'translate-x-0' : 'translate-x-full'
+      }`}
+    >
+      <div className="flex flex-col h-full glass-ui-copilot border-l border-blue-500/30 shadow-2xl shadow-black/50 backdrop-blur-xl">
+        <div className={`flex items-center justify-between p-6 border-b ${
+          theme === 'dark' ? 'border-gray-500/20' : 'border-gray-300/30'
+        } flex-shrink-0`}>
+          <div className="flex items-center space-x-3">
+            <div className="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500">
+              <IconSparkles className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h2 className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Nova Copilot
+              </h2>
+              <p className={`text-sm ${theme === 'dark' ? 'text-blue-300' : 'text-blue-600'}`}>
+                {isAiThinking ? 'Thinking...' : 'Always learning'}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={() => setIsCopilotOpen(false)}
+            className={`p-2 rounded-xl transition-all ${
+              theme === 'dark' 
+                ? 'text-gray-400 hover:bg-gray-700/50 hover:text-white' 
+                : 'text-gray-600 hover:bg-gray-300/50 hover:text-gray-900'
+            }`}
+          >
+            <IconX className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 p-6 space-y-6 overflow-y-auto">
+          {copilotMessages.map((msg, i) => (
+            <div key={i} className={`flex ${msg.from === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div
+                className={`max-w-xs px-6 py-4 rounded-3xl transition-all duration-300 ${
+                  msg.from === 'user'
+                    ? 'bg-gradient-to-br from-blue-500 to-cyan-500 text-white rounded-br-lg shadow-lg'
+                    : (theme === 'dark' 
+                        ? 'bg-gray-700/70 text-gray-200 rounded-bl-lg border border-gray-600/50' 
+                        : 'bg-gray-200/70 text-gray-800 rounded-bl-lg border border-gray-300/50')
+                } group hover:scale-105 cursor-pointer`}
+              >
+                <div className="flex items-center space-x-2 mb-2">
+                  {msg.from === 'ai' && (
+                    <div className="w-6 h-6 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
+                      <IconSparkles className="w-3 h-3 text-white" />
+                    </div>
+                  )}
+                  <span className={`text-xs font-semibold ${
+                    msg.from === 'user' ? 'text-blue-100' : (theme === 'dark' ? 'text-purple-300' : 'text-purple-600')
+                  }`}>
+                    {msg.from === 'user' ? 'You' : 'Nova AI'}
+                  </span>
+                </div>
+                <p className="text-sm leading-relaxed whitespace-pre-wrap">{msg.text}</p>
+              </div>
+            </div>
+          ))}
+          
+          {isAiThinking && (
+            <div className="flex justify-start">
+              <div className={`max-w-xs px-6 py-4 rounded-3xl rounded-bl-lg ${
+                theme === 'dark' ? 'bg-gray-700/70' : 'bg-gray-200/70'
+              } border ${theme === 'dark' ? 'border-gray-600/50' : 'border-gray-300/50'}`}>
+                <div className="flex items-center space-x-2">
+                  <div className="flex space-x-1">
+                    <div className="w-2 h-2 bg-blue-400 rounded-full animate-bounce"></div>
+                    <div className="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                    <div className="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                  </div>
+                  <span className="text-sm text-blue-400">Nova is thinking...</span>
+                </div>
+              </div>
+            </div>
+          )}
+          <div ref={copilotMessagesEndRef} />
+        </div>
+
+        <form onSubmit={(e) => {
+          e.preventDefault();
+          if (copilotInput.trim()) {
+            setCopilotMessages(prev => [...prev, { from: 'user', text: copilotInput }]);
+            setCopilotInput('');
+            setIsAiThinking(true);
+            setTimeout(() => {
+              setCopilotMessages(prev => [...prev, { 
+                from: 'ai', 
+                text: "I'm an AI assistant in NovaBrowse. In a real implementation, I would connect to services like Gemini API to provide intelligent responses to your queries about browsing, searching, and productivity." 
+              }]);
+              setIsAiThinking(false);
+            }, 2000);
+          }
+        }} className={`p-6 border-t ${
+          theme === 'dark' ? 'border-gray-500/20' : 'border-gray-300/30'
+        } flex-shrink-0`}>
+          <div className="flex items-center space-x-3">
+            <div className="flex-1 rounded-2xl glass-ui-inset p-1">
+              <input
+                type="text"
+                value={copilotInput}
+                onChange={(e) => setCopilotInput(e.target.value)}
+                placeholder="Ask Nova anything..."
+                className={`w-full px-4 py-3 bg-transparent ${
+                  theme === 'dark' ? 'text-white placeholder-gray-400' : 'text-black placeholder-gray-500'
+                } focus:outline-none text-lg`}
+                disabled={isAiThinking}
+              />
+            </div>
+            <button
+              type="submit"
+              className={`p-4 rounded-2xl transition-all duration-300 ${
+                isAiThinking || !copilotInput.trim()
+                  ? 'bg-gray-500/20 text-gray-500 cursor-not-allowed'
+                  : 'bg-gradient-to-br from-blue-500 to-purple-500 text-white hover:scale-105 shadow-lg'
+              }`}
+              disabled={isAiThinking || !copilotInput.trim()}
+            >
+              <IconSend className="w-5 h-5" />
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Nunito+Sans:wght@400;700&family=Orbitron:wght@500;700;900&family=Poppins:wght@500;700;900&display=swap');
         
         body {
-            font-family: 'Nunito', sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            color: var(--dark);
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        
-        .app-container {
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-        
-        /* Header Styles */
-        .header {
-            background: var(--galaxy-gradient);
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            position: relative;
-            z-index: 100;
-        }
-        
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-        
-        .logo h1 {
-            font-family: 'Fredoka', sans-serif;
-            font-size: 2.2rem;
-            color: white;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-        }
-        
-        .logo-icon {
-            width: 50px;
-            height: 50px;
-            background: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            color: var(--primary);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
-        
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-        }
-        
-        .avatar {
-            width: 45px;
-            height: 45px;
-            border-radius: 50%;
-            background: var(--accent);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: bold;
-            font-size: 18px;
-            cursor: pointer;
-            border: 3px solid var(--warning);
-        }
-        
-        .points-badge {
-            background: white;
-            padding: 8px 15px;
-            border-radius: 25px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-        
-        .points-badge span {
-            color: var(--primary);
-            font-weight: bold;
-            font-size: 1.1rem;
-        }
-        
-        /* Main Content */
-        .main-content {
-            display: flex;
-            flex: 1;
-        }
-        
-        /* Sidebar */
-        .sidebar {
-            width: 250px;
-            background: white;
-            padding: 1.5rem 1rem;
-            box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 50;
-        }
-        
-        .nav-item {
-            padding: 14px 16px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 600;
-            color: var(--dark);
-        }
-        
-        .nav-item:hover, .nav-item.active {
-            background: var(--secondary);
-            color: white;
-        }
-        
-        .nav-item i {
-            font-size: 1.2rem;
-        }
-        
-        .divider {
-            height: 1px;
-            background: var(--light);
-            margin: 15px 0;
-        }
-        
-        /* Content Area */
-        .content-area {
-            flex: 1;
-            padding: 2rem;
-            overflow-y: auto;
-            background: rgba(255, 255, 255, 0.8);
-        }
-        
-        .section-title {
-            font-family: 'Fredoka', sans-serif;
-            font-size: 2rem;
-            margin-bottom: 1.5rem;
-            color: var(--primary);
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        
-        /* Dashboard */
-        .welcome-banner {
-            background: var(--galaxy-gradient);
-            border-radius: 20px;
-            padding: 2rem;
-            color: white;
-            margin-bottom: 2rem;
-            position: relative;
-            overflow: hidden;
+          font-family: 'Inter', sans-serif;
+          margin: 0;
+          padding: 0;
+          overflow: hidden;
         }
         
-        .banner-robot {
-            position: absolute;
-            right: 30px;
-            bottom: -10px;
-            width: 150px;
-            height: 150px;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="10" fill="white"/><rect x="30" y="40" width="40" height="40" rx="5" fill="white"/><rect x="20" y="45" width="10" height="20" rx="3" fill="white"/><rect x="70" y="45" width="10" height="20" rx="3" fill="white"/></svg>') no-repeat;
+        .font-heading {
+          font-family: 'Orbitron', sans-serif;
         }
         
-        .learning-paths {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 2rem;
+        .font-body {
+          font-family: 'Nunito Sans', sans-serif;
         }
-        
-        .path-card {
-            background: white;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease;
-            cursor: pointer;
-        }
-        
-        .path-card:hover {
-            transform: translateY(-5px);
-        }
-        
-        .path-header {
-            padding: 1.5rem;
-            color: white;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        
-        .space-theme {
-            background: var(--galaxy-gradient);
-        }
-        
-        .robot-theme {
-            background: var(--robot-gradient);
-        }
-        
-        .animal-theme {
-            background: var(--animal-gradient);
-        }
-        
-        .path-content {
-            padding: 1.5rem;
-        }
-        
-        .path-title {
-            font-size: 1.4rem;
-            margin-bottom: 10px;
-        }
-        
-        .progress-bar {
-            height: 10px;
-            background: var(--light);
-            border-radius: 5px;
-            margin: 15px 0;
-            overflow: hidden;
-        }
-        
-        .progress-fill {
-            height: 100%;
-            background: var(--success);
-            border-radius: 5px;
-        }
-        
-        .badges-container {
-            margin-top: 2rem;
-        }
-        
-        .badges-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-            gap: 1rem;
-        }
-        
-        .badge {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--warning) 0%, var(--accent) 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.8rem;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            position: relative;
-        }
-        
-        .badge.locked {
-            background: var(--light);
-            color: #b0b0b0;
-        }
-        
-        .badge-title {
-            position: absolute;
-            bottom: -25px;
-            font-size: 0.7rem;
-            text-align: center;
-            width: 100%;
-            color: var(--dark);
-        }
-        
-        /* Blockly Workspace */
-        .workspace-container {
-            display: flex;
-            height: 70vh;
-            gap: 20px;
-            margin-top: 1.5rem;
-        }
-        
-        .blockly-area {
-            flex: 3;
-            background: white;
-            border-radius: 16px;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-        }
-        
-        .code-area {
-            flex: 2;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-        
-        .code-panel {
-            background: #1e1e1e;
-            color: #dcdcdc;
-            border-radius: 16px;
-            padding: 1.5rem;
-            flex: 1;
-            font-family: monospace;
-            overflow: auto;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-        }
-        
-        .code-header {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 1rem;
-        }
-        
-        .language-selector {
-            background: #3c3c3c;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 5px;
-        }
-        
-        .stage-container {
-            background: white;
-            border-radius: 16px;
-            padding: 1.5rem;
-            flex: 1;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-            position: relative;
-            background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
-        }
-        
-        #stage {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            overflow: hidden;
-            border-radius: 8px;
-            background: #f0f8ff;
-        }
-        
-        .sprite {
-            position: absolute;
-            width: 60px;
-            height: 60px;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-        
-        .sprite img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-        
-        .stage-controls {
-            position: absolute;
-            bottom: 15px;
-            left: 15px;
-            display: flex;
-            gap: 10px;
-        }
-        
-        .stage-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: var(--primary);
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-        }
-        
-        .toolbar {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 1.5rem;
-        }
-        
-        .btn {
-            padding: 10px 20px;
-            border-radius: 50px;
-            border: none;
-            font-weight: bold;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            transition: all 0.2s ease;
-        }
-        
-        .btn-primary {
-            background: var(--primary);
-            color: white;
-        }
-        
-        .btn-secondary {
-            background: var(--secondary);
-            color: white;
+
+        .font-mono {
+          font-family: 'Orbitron', sans-serif;
         }
-        
-        .btn-warning {
-            background: var(--warning);
-            color: var(--dark);
+
+        /* Enhanced Glassmorphism */
+        .glass-ui {
+          background: ${theme === 'dark' ? 'rgba(30, 30, 40, 0.4)' : 'rgba(255, 255, 255, 0.3)'};
+          backdrop-filter: blur(20px) saturate(180%);
+          -webkit-backdrop-filter: blur(20px) saturate(180%);
+          border: 1px solid ${theme === 'dark' ? 'rgba(255, 255, 255, 0.125)' : 'rgba(255, 255, 255, 0.3)'};
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
         }
         
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        .glass-ui-light {
+           background: ${theme === 'dark' ? 'rgba(40, 40, 50, 0.3)' : 'rgba(255, 255, 255, 0.4)'};
+           backdrop-filter: blur(12px) saturate(160%);
+          -webkit-backdrop-filter: blur(12px) saturate(160%);
+          border: 1px solid ${theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.2)'};
         }
         
-        /* Project Gallery */
-        .projects-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 1.5rem;
+        .glass-ui-top {
+          background: ${theme === 'dark' ? 'rgba(23, 23, 33, 0.6)' : 'rgba(240, 240, 255, 0.5)'};
+          backdrop-filter: blur(24px) saturate(200%);
+          -webkit-backdrop-filter: blur(24px) saturate(200%);
         }
-        
-        .project-card {
-            background: white;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease;
-            cursor: pointer;
+
+        .glass-ui-copilot {
+          background: ${theme === 'dark' ? 'rgba(15, 15, 25, 0.85)' : 'rgba(230, 230, 245, 0.9)'};
+          backdrop-filter: blur(32px) saturate(200%);
+          -webkit-backdrop-filter: blur(32px) saturate(200%);
         }
-        
-        .project-card:hover {
-            transform: translateY(-5px);
+
+        .glass-ui-inset {
+           background: ${theme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
+           box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
         }
-        
-        .project-image {
-            height: 150px;
-            background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 3rem;
+
+        /* Enhanced Animations */
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
         }
-        
-        .project-info {
-            padding: 1.2rem;
+
+        .animate-fade-in-up {
+          animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+          opacity: 0;
         }
-        
-        /* Age Groups */
-        .age-groups {
-            display: flex;
-            gap: 15px;
-            margin: 2rem 0;
-            flex-wrap: wrap;
+
+        @keyframes gradient {
+          0% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+          100% { background-position: 0% 50%; }
         }
-        
-        .age-card {
-            background: white;
-            border-radius: 16px;
-            padding: 1.5rem;
-            flex: 1;
-            min-width: 250px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+        .animate-gradient {
+          background-size: 200% 200%;
+          animation: gradient 6s ease infinite;
         }
-        
-        .age-header {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 15px;
+
+        @keyframes pulseGlow {
+          0%, 100% {
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
+          }
+          50% {
+            box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
+          }
         }
-        
-        .age-icon {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            background: var(--secondary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.5rem;
+
+        .animate-pulse-glow {
+          animation: pulseGlow 2s infinite;
         }
-        
-        .concepts-list {
-            padding-left: 20px;
+
+        .hover-3d-tilt {
+          transform-style: preserve-3d;
+          transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
-        
-        .concepts-list li {
-            margin-bottom: 8px;
+        .hover-3d-tilt:hover {
+          transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
         }
-        
-        /* Footer */
-        .footer {
-            background: var(--dark);
-            color: white;
-            padding: 1.5rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+
+        .neon-button-glow {
+          box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3);
         }
         
-        .footer-links {
-            display: flex;
-            gap: 20px;
+        .neon-focus-glow:focus-within {
+           box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.4);
+           border-color: rgba(59, 130, 246, 0.8);
         }
-        
-        .footer-link {
-            color: var(--light);
-            text-decoration: none;
+
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+          width: 8px;
         }
-        
-        /* Animations */
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
+        ::-webkit-scrollbar-track {
+          background: ${theme === 'dark' ? '#1a1a2e' : '#f1f1f1'};
+          border-radius: 4px;
         }
-        
-        .floating {
-            animation: float 3s ease-in-out infinite;
+        ::-webkit-scrollbar-thumb {
+          background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
+          border-radius: 4px;
         }
-        
-        /* Responsive */
-        @media (max-width: 900px) {
-            .workspace-container {
-                flex-direction: column;
-                height: auto;
-            }
-            
-            .main-content {
-                flex-direction: column;
-            }
-            
-            .sidebar {
-                width: 100%;
-                flex-direction: row;
-                overflow-x: auto;
-                padding: 1rem;
-            }
-            
-            .divider {
-                display: none;
-            }
-            
-            .age-groups {
-                flex-direction: column;
-            }
+        ::-webkit-scrollbar-thumb:hover {
+          background: linear-gradient(to bottom, #2563eb, #7c3aed);
         }
-    </style>
-</head>
-<body>
-    <div class="app-container">
-        <!-- Header -->
-        <header class="header">
-            <div class="logo">
-                <div class="logo-icon">🚀</div>
-                <h1>CodeGalaxy Kids</h1>
-            </div>
-            <div class="user-actions">
-                <div class="points-badge">
-                    <span>⭐ 1,250</span>
-                </div>
-                <div class="avatar">MK</div>
-            </div>
-        </header>
-        
-        <!-- Main Content -->
-        <div class="main-content">
-            <!-- Sidebar Navigation -->
-            <nav class="sidebar">
-                <div class="nav-item active">
-                    <i class="fas fa-home"></i> Dashboard
-                </div>
-                <div class="nav-item">
-                    <i class="fas fa-road"></i> Learning Path
-                </div>
-                <div class="nav-item">
-                    <i class="fas fa-puzzle-piece"></i> Block Coding
-                </div>
-                <div class="nav-item">
-                    <i class="fas fa-gamepad"></i> Projects
-                </div>
-                <div class="nav-item">
-                    <i class="fas fa-trophy"></i> Rewards
-                </div>
-                
-                <div class="divider"></div>
-                
-                <div class="nav-item">
-                    <i class="fas fa-users"></i> Parent Zone
-                </div>
-                <div class="nav-item">
-                    <i class="fas fa-cog"></i> Settings
-                </div>
-            </nav>
-            
-            <!-- Content Area -->
-            <main class="content-area">
-                <h2 class="section-title"><i class="fas fa-rocket"></i> Welcome to CodeGalaxy, Maya!</h2>
-                
-                <!-- Dashboard Banner -->
-                <div class="welcome-banner">
-                    <h3><i class="fas fa-robot"></i> Continue Your Adventure!</h3>
-                    <p>Complete your current mission to earn 50 stars and unlock new coding powers!</p>
-                    <div class="banner-robot floating"></div>
-                </div>
-                
-                <!-- Learning Paths -->
-                <h3 class="section-title"><i class="fas fa-star"></i> Learning Paths</h3>
-                <div class="learning-paths">
-                    <!-- Space Explorer -->
-                    <div class="path-card">
-                        <div class="path-header space-theme">
-                            <i class="fas fa-rocket"></i>
-                            <h3>Space Explorer</h3>
-                        </div>
-                        <div class="path-content">
-                            <h4 class="path-title">Mission: Navigate Asteroid Field</h4>
-                            <p>Use loops to navigate through space obstacles!</p>
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: 65%"></div>
-                            </div>
-                            <p>65% Complete • 3/5 Missions</p>
-                        </div>
-                    </div>
-                    
-                    <!-- Robot Village -->
-                    <div class="path-card">
-                        <div class="path-header robot-theme">
-                            <i class="fas fa-robot"></i>
-                            <h3>Robot Village</h3>
-                        </div>
-                        <div class="path-content">
-                            <h4 class="path-title">Mission: Help Robots Dance</h4>
-                            <p>Create sequences to choreograph robot dances!</p>
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: 30%"></div>
-                            </div>
-                            <p>30% Complete • 1/5 Missions</p>
-                        </div>
-                    </div>
-                    
-                    <!-- Animal Adventures -->
-                    <div class="path-card">
-                        <div class="path-header animal-theme">
-                            <i class="fas fa-paw"></i>
-                            <h3>Animal Adventures</h3>
-                        </div>
-                        <div class="path-content">
-                            <h4 class="path-title">Mission: Feed the Animals</h4>
-                            <p>Use conditionals to feed animals the right food!</p>
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: 10%"></div>
-                            </div>
-                            <p>10% Complete • 0/5 Missions</p>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Age Groups -->
-                <h3 class="section-title"><i class="fas fa-child"></i> Learning Path by Age</h3>
-                <div class="age-groups">
-                    <div class="age-card">
-                        <div class="age-header">
-                            <div class="age-icon">5-7</div>
-                            <h3>Beginner</h3>
-                        </div>
-                        <ul class="concepts-list">
-                            <li>Shapes and colors</li>
-                            <li>Basic movement</li>
-                            <li>Simple sequences</li>
-                            <li>Pattern recognition</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="age-card">
-                        <div class="age-header">
-                            <div class="age-icon">8-10</div>
-                            <h3>Intermediate</h3>
-                        </div>
-                        <ul class="concepts-list">
-                            <li>Loops and repetition</li>
-                            <li>Conditional logic</li>
-                            <li>Variables</li>
-                            <li>Problem solving</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="age-card">
-                        <div class="age-header">
-                            <div class="age-icon">11-13</div>
-                            <h3>Advanced</h3>
-                        </div>
-                        <ul class="concepts-list">
-                            <li>Functions and events</li>
-                            <li>Debugging techniques</li>
-                            <li>Game mechanics</li>
-                            <li>Real-world problems</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="age-card">
-                        <div class="age-header">
-                            <div class="age-icon">13+</div>
-                            <h3>Expert</h3>
-                        </div>
-                        <ul class="concepts-list">
-                            <li>Text-based coding</li>
-                            <li>Python and JavaScript</li>
-                            <li>Web development</li>
-                            <li>AI concepts</li>
-                        </ul>
-                    </div>
-                </div>
-                
-                <!-- Blockly Workspace -->
-                <h3 class="section-title"><i class="fas fa-puzzle-piece"></i> Block Coding Playground</h3>
-                <div class="toolbar">
-                    <button class="btn btn-primary" id="runCode">
-                        <i class="fas fa-play"></i> Run Code
-                    </button>
-                    <button class="btn btn-secondary" id="saveProject">
-                        <i class="fas fa-save"></i> Save Project
-                    </button>
-                    <button class="btn btn-warning" id="getHelp">
-                        <i class="fas fa-question-circle"></i> Get Help
-                    </button>
-                    <button class="btn" id="resetStage" style="background: #ff7675; color: white;">
-                        <i class="fas fa-redo"></i> Reset
-                    </button>
-                </div>
-                <div class="workspace-container">
-                    <div class="blockly-area" id="blocklyDiv"></div>
-                    <div class="code-area">
-                        <div class="code-panel">
-                            <div class="code-header">
-                                <h4>Generated Code</h4>
-                                <select class="language-selector" id="languageSelector">
-                                    <option>JavaScript</option>
-                                    <option>Python</option>
-                                </select>
-                            </div>
-                            <pre id="generatedCode"># Welcome to CodeGalaxy!
-
-# Your generated code will appear here
-# Drag blocks to the workspace to start coding!
-
-def main():
-    # Example: Move the robot forward
-    robot.move_forward(3)
-    
-    # Example: Turn right
-    robot.turn_right()
-    
-    # Example: Loop to collect stars
-    for i in range(5):
-        collect_star()
-        
-if __name__ == "__main__":
-    main()</pre>
-                        </div>
-                        <div class="stage-container">
-                            <h4>Stage Preview</h4>
-                            <div id="stage">
-                                <div class="sprite" id="robotSprite" style="top: 100px; left: 100px;">
-                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='10' fill='%236c5ce7'/%3E%3Crect x='30' y='40' width='40' height='40' rx='5' fill='%236c5ce7'/%3E%3Crect x='20' y='45' width='10' height='20' rx='3' fill='%236c5ce7'/%3E%3Crect x='70' y='45' width='10' height='20' rx='3' fill='%236c5ce7'/%3E%3C/svg%3E" alt="Robot">
-                                </div>
-                                <div class="sprite" id="star1" style="top: 50px; left: 200px;">
-                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 61,35 88,35 65,55 71,80 50,65 29,80 35,55 12,35 39,35' fill='%23fdcb6e'/%3E%3C/svg%3E" alt="Star">
-                                </div>
-                                <div class="sprite" id="star2" style="top: 180px; left: 300px;">
-                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 61,35 88,35 65,55 71,80 50,65 29,80 35,55 12,35 39,35' fill='%23fdcb6e'/%3E%3C/svg%3E" alt="Star">
-                                </div>
-                                <div class="sprite" id="rocket" style="top: 250px; left: 50px;">
-                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,10 L70,40 L60,40 L65,90 L35,90 L40,40 L30,40 Z' fill='%23ff7675'/%3E%3Ccircle cx='50' cy='30' r='10' fill='%23a29bfe'/%3E%3C/svg%3E" alt="Rocket">
-                                </div>
-                            </div>
-                            <div class="stage-controls">
-                                <div class="stage-btn" id="greenFlag">
-                                    <i class="fas fa-flag" style="color: #00b894;"></i>
-                                </div>
-                                <div class="stage-btn" id="stopBtn">
-                                    <i class="fas fa-stop"></i>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Badges Section -->
-                <h3 class="section-title"><i class="fas fa-trophy"></i> Your Achievements</h3>
-                <div class="badges-container">
-                    <div class="badges-grid">
-                        <div class="badge">
-                            <i class="fas fa-star"></i>
-                            <div class="badge-title">Starter</div>
-                        </div>
-                        <div class="badge">
-                            <i class="fas fa-redo"></i>
-                            <div class="badge-title">Loops Master</div>
-                        </div>
-                        <div class="badge">
-                            <i class="fas fa-brain"></i>
-                            <div class="badge-title">Logic Wizard</div>
-                        </div>
-                        <div class="badge locked">
-                            <i class="fas fa-lock"></i>
-                            <div class="badge-title">Variables Pro</div>
-                        </div>
-                        <div class="badge locked">
-                            <i class="fas fa-lock"></i>
-                            <div class="badge-title">Game Designer</div>
-                        </div>
-                        <div class="badge locked">
-                            <i class="fas fa-lock"></i>
-                            <div class="badge-title">Python Expert</div>
-                        </div>
-                    </div>
-                </div>
-            </main>
+
+        ::selection {
+          background: rgba(59, 130, 246, 0.3);
+        }
+      `}</style>
+      
+      <div className={`flex w-full h-screen overflow-hidden transition-colors duration-500 ${
+        theme === 'dark' ? 'text-white bg-gray-900' : 'text-gray-900 bg-gray-100'
+      }`}>
+        
+        <div className="fixed inset-0 -z-10">
+          <div className={`absolute inset-0 transition-all duration-1000 ${
+            theme === 'dark' 
+              ? 'bg-gradient-to-br from-gray-900 via-[#0a0a2a] to-[#1a0033]' 
+              : 'bg-gradient-to-br from-blue-50 via-purple-50 to-cyan-50'
+          }`}></div>
+          <div className={`absolute inset-0 opacity-30 ${
+            theme === 'dark' 
+              ? 'bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent' 
+              : 'bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-200/30 via-transparent to-transparent'
+          }`}></div>
         </div>
         
-        <!-- Footer -->
-        <footer class="footer">
-            <div class="copyright">
-                © 2023 CodeGalaxy Kids. All rights reserved.
-            </div>
-            <div class="footer-links">
-                <a href="#" class="footer-link">Privacy Policy</a>
-                <a href="#" class="footer-link">Terms of Service</a>
-                <a href="#" class="footer-link">Help Center</a>
-            </div>
-        </footer>
-    </div>
-
-    <script>
-        // Initialize Blockly
-        document.addEventListener('DOMContentLoaded', function() {
-            // Custom Blockly blocks
-            Blockly.Blocks['motion_move'] = {
-                init: function() {
-                    this.appendDummyInput()
-                        .appendField("move")
-                        .appendField(new Blockly.FieldDropdown([
-                            ["forward", "FORWARD"],
-                            ["backward", "BACKWARD"]
-                        ]), "DIRECTION")
-                        .appendField(new Blockly.FieldNumber(10, 1), "STEPS")
-                        .appendField("steps");
-                    this.setPreviousStatement(true);
-                    this.setNextStatement(true);
-                    this.setColour(160);
-                    this.setTooltip("Move the robot");
-                }
-            };
-            
-            Blockly.Blocks['motion_turn'] = {
-                init: function() {
-                    this.appendDummyInput()
-                        .appendField("turn")
-                        .appendField(new Blockly.FieldDropdown([
-                            ["left", "LEFT"],
-                            ["right", "RIGHT"]
-                        ]), "DIRECTION")
-                        .appendField(new Blockly.FieldNumber(15, 1), "DEGREES")
-                        .appendField("degrees");
-                    this.setPreviousStatement(true);
-                    this.setNextStatement(true);
-                    this.setColour(160);
-                    this.setTooltip("Turn the robot");
-                }
-            };
-            
-            Blockly.Blocks['event_whenflagclicked'] = {
-                init: function() {
-                    this.appendDummyInput()
-                        .appendField("when green flag clicked");
-                    this.setNextStatement(true);
-                    this.setColour(120);
-                    this.setTooltip("Trigger when the green flag is clicked");
-                }
-            };
-            
-            Blockly.Blocks['controls_repeat'] = {
-                init: function() {
-                    this.appendDummyInput()
-                        .appendField("repeat")
-                        .appendField(new Blockly.FieldNumber(5, 1), "TIMES")
-                        .appendField("times");
-                    this.appendStatementInput("DO")
-                        .setCheck(null);
-                    this.setPreviousStatement(true);
-                    this.setNextStatement(true);
-                    this.setColour(65);
-                    this.setTooltip("Repeat the enclosed blocks");
-                }
-            };
-            
-            Blockly.Blocks['controls_wait'] = {
-                init: function() {
-                    this.appendDummyInput()
-                        .appendField("wait")
-                        .appendField(new Blockly.FieldNumber(1, 0.1, 10, 0.1), "SECONDS")
-                        .appendField("seconds");
-                    this.setPreviousStatement(true);
-                    this.setNextStatement(true);
-                    this.setColour(65);
-                    this.setTooltip("Wait for some seconds");
-                }
-            };
-            
-            Blockly.Blocks['looks_say'] = {
-                init: function() {
-                    this.appendDummyInput()
-                        .appendField("say")
-                        .appendField(new Blockly.FieldTextInput("Hello!"), "MESSAGE")
-                        .appendField("for")
-                        .appendField(new Blockly.FieldNumber(2, 0.1), "SECONDS")
-                        .appendField("seconds");
-                    this.setPreviousStatement(true);
-                    this.setNextStatement(true);
-                    this.setColour(210);
-                    this.setTooltip("Show a message bubble");
-                }
-            };
-
-            // Blockly workspace
-            const workspace = Blockly.inject('blocklyDiv', {
-                toolbox: document.getElementById('toolbox'),
-                grid: {
-                    spacing: 20,
-                    length: 3,
-                    colour: '#ccc',
-                    snap: true
-                },
-                zoom: {
-                    controls: true,
-                    wheel: true,
-                    startScale: 1.0,
-                    maxScale: 3,
-                    minScale: 0.3,
-                    scaleSpeed: 1.2
-                },
-                move: {
-                    scrollbars: true,
-                    drag: true,
-                    wheel: true
-                }
-            });
-            
-            // Initial blocks
-            const initialXml = `
-                <xml xmlns="https://developers.google.com/blockly/xml">
-                    <block type="event_whenflagclicked" id="start_block" x="20" y="20">
-                        <next>
-                            <block type="looks_say">
-                                <field name="MESSAGE">Let's code!</field>
-                                <field name="SECONDS">1</field>
-                                <next>
-                                    <block type="motion_move">
-                                        <field name="DIRECTION">FORWARD</field>
-                                        <field name="STEPS">50</field>
-                                        <next>
-                                            <block type="motion_turn">
-                                                <field name="DIRECTION">RIGHT</field>
-                                                <field name="DEGREES">90</field>
-                                                <next>
-                                                    <block type="controls_repeat">
-                                                        <field name="TIMES">4</field>
-                                                        <statement name="DO">
-                                                            <block type="motion_move">
-                                                                <field name="DIRECTION">FORWARD</field>
-                                                                <field name="STEPS">30</field>
-                                                                <next>
-                                                                    <block type="motion_turn">
-                                                                        <field name="DIRECTION">RIGHT</field>
-                                                                        <field name="DEGREES">90</field>
-                                                                    </block>
-                                                                </next>
-                                                            </block>
-                                                        </statement>
-                                                    </block>
-                                                </next>
-                                            </block>
-                                        </next>
-                                    </block>
-                                </next>
-                            </block>
-                        </next>
-                    </block>
-                </xml>
-            `;
-            
-            // Load initial blocks
-            Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), workspace);
-            
-            // Update code preview
-            function updateCodePreview() {
-                const codeElement = document.getElementById('generatedCode');
-                const language = document.getElementById('languageSelector').value;
-                
-                // In a real implementation, this would use Blockly generators
-                if (language === 'JavaScript') {
-                    codeElement.textContent = `// JavaScript code\n\nfunction main() {\n  // Say message\n  say("Let's code!", 1);\n  \n  // Move forward\n  move("forward", 50);\n  \n  // Turn right\n  turn("right", 90);\n  \n  // Loop to draw a square\n  for (let i = 0; i < 4; i++) {\n    move("forward", 30);\n    turn("right", 90);\n  }\n}\n\n// Start the program\nmain();`;
-                } else {
-                    codeElement.textContent = `# Python code\n\ndef main():\n    # Say message\n    say("Let's code!", 1)\n    \n    # Move forward\n    move("forward", 50)\n    \n    # Turn right\n    turn("right", 90)\n    \n    # Loop to draw a square\n    for i in range(4):\n        move("forward", 30)\n        turn("right", 90)\n        \nif __name__ == "__main__":\n    main()`;
-                }
-            }
-            
-            // Sprite movement functions
-            function moveSprite(direction, steps) {
-                const robot = document.getElementById('robotSprite');
-                const currentLeft = parseInt(robot.style.left) || 100;
-                const currentTop = parseInt(robot.style.top) || 100;
-                
-                if (direction === 'FORWARD') {
-                    robot.style.top = (currentTop - steps) + 'px';
-                } else {
-                    robot.style.top = (currentTop + steps) + 'px';
-                }
-                
-                // Check for star collection
-                checkStarCollection();
-            }
-            
-            function turnSprite(direction, degrees) {
-                const robot = document.getElementById('robotSprite');
-                const currentRotation = parseInt(robot.dataset.rotation) || 0;
-                let newRotation;
-                
-                if (direction === 'RIGHT') {
-                    newRotation = currentRotation + degrees;
-                } else {
-                    newRotation = currentRotation - degrees;
-                }
-                
-                robot.dataset.rotation = newRotation;
-                robot.style.transform = `rotate(${newRotation}deg)`;
-            }
-            
-            function sayMessage(message, seconds) {
-                const output = document.getElementById('output');
-                output.innerHTML = `<div class="speech-bubble">${message}</div>`;
-                
-                setTimeout(() => {
-                    output.innerHTML = '';
-                }, seconds * 1000);
-            }
-            
-            function checkStarCollection() {
-                const robot = document.getElementById('robotSprite');
-                const stars = document.querySelectorAll('.sprite:not(#robotSprite)');
-                const robotRect = robot.getBoundingClientRect();
-                
-                stars.forEach(star => {
-                    const starRect = star.getBoundingClientRect();
-                    
-                    // Check for collision
-                    if (!star.classList.contains('collected') && 
-                        robotRect.left < starRect.right &&
-                        robotRect.right > starRect.left &&
-                        robotRect.top < starRect.bottom &&
-                        robotRect.bottom > starRect.top) {
-                        
-                        // Collect the star
-                        star.classList.add('collected');
-                        star.style.opacity = '0.3';
-                        
-                        // Update points
-                        const pointsBadge = document.querySelector('.points-badge span');
-                        const currentPoints = parseInt(pointsBadge.textContent.replace('⭐ ', '')) || 0;
-                        pointsBadge.textContent = `⭐ ${currentPoints + 50}`;
-                        
-                        // Show message
-                        const output = document.getElementById('output');
-                        output.innerHTML = `<div class="speech-bubble">⭐ Collected a star! +50 points</div>`;
-                        
-                        setTimeout(() => {
-                            output.innerHTML = '';
-                        }, 2000);
-                    }
-                });
-            }
-            
-            // Execute the block program
-            function executeProgram() {
-                // Reset collected stars
-                document.querySelectorAll('.sprite').forEach(sprite => {
-                    if (sprite !== document.getElementById('robotSprite')) {
-                        sprite.classList.remove('collected');
-                        sprite.style.opacity = '1';
-                    }
-                });
-                
-                // Reset robot position
-                const robot = document.getElementById('robotSprite');
-                robot.style.top = '100px';
-                robot.style.left = '100px';
-                robot.style.transform = 'rotate(0deg)';
-                robot.dataset.rotation = '0';
-                
-                // Execute blocks in sequence
-                const blocks = {
-                    'looks_say': (block) => {
-                        const message = block.getFieldValue('MESSAGE');
-                        const seconds = parseFloat(block.getFieldValue('SECONDS'));
-                        sayMessage(message, seconds);
-                        return new Promise(resolve => setTimeout(resolve, seconds * 1000));
-                    },
-                    'motion_move': (block) => {
-                        const direction = block.getFieldValue('DIRECTION');
-                        const steps = parseInt(block.getFieldValue('STEPS'));
-                        moveSprite(direction, steps);
-                        return new Promise(resolve => setTimeout(resolve, 800));
-                    },
-                    'motion_turn': (block) => {
-                        const direction = block.getFieldValue('DIRECTION');
-                        const degrees = parseInt(block.getFieldValue('DEGREES'));
-                        turnSprite(direction, degrees);
-                        return new Promise(resolve => setTimeout(resolve, 800));
-                    },
-                    'controls_repeat': async (block) => {
-                        const times = parseInt(block.getFieldValue('TIMES'));
-                        const doBlock = block.getInputTargetBlock('DO');
-                        
-                        for (let i = 0; i < times; i++) {
-                            let currentBlock = doBlock;
-                            while (currentBlock) {
-                                await executeBlock(currentBlock);
-                                currentBlock = currentBlock.nextConnection && currentBlock.nextConnection.targetBlock();
-                            }
-                        }
-                        return Promise.resolve();
-                    },
-                    'controls_wait': (block) => {
-                        const seconds = parseFloat(block.getFieldValue('SECONDS'));
-                        return new Promise(resolve => setTimeout(resolve, seconds * 1000));
-                    }
-                };
-                
-                // Start from the green flag block
-                const startBlock = workspace.getBlockById('start_block');
-                let currentBlock = startBlock.nextConnection && startBlock.nextConnection.targetBlock();
-                
-                async function executeBlock(block) {
-                    const blockType = block.type;
-                    if (blocks[blockType]) {
-                        await blocks[blockType](block);
-                    }
-                    return Promise.resolve();
-                }
-                
-                async function runBlocks() {
-                    while (currentBlock) {
-                        await executeBlock(currentBlock);
-                        currentBlock = currentBlock.nextConnection && currentBlock.nextConnection.targetBlock();
-                    }
-                }
-                
-                runBlocks();
-            }
-            
-            // Event listeners
-            document.getElementById('runCode').addEventListener('click', executeProgram);
-            document.getElementById('greenFlag').addEventListener('click', executeProgram);
-            
-            document.getElementById('stopBtn').addEventListener('click', function() {
-                // In a real implementation, this would stop all execution
-                document.getElementById('output').innerHTML = '<p>⏹️ Program stopped</p>';
-            });
-            
-            document.getElementById('resetStage').addEventListener('click', function() {
-                const robot = document.getElementById('robotSprite');
-                robot.style.top = '100px';
-                robot.style.left = '100px';
-                robot.style.transform = 'rotate(0deg)';
-                robot.dataset.rotation = '0';
-                
-                document.querySelectorAll('.sprite').forEach(sprite => {
-                    if (sprite !== robot) {
-                        sprite.classList.remove('collected');
-                        sprite.style.opacity = '1';
-                    }
-                });
-                
-                document.getElementById('output').innerHTML = '<p>🔄 Stage has been reset</p>';
-            });
-            
-            document.getElementById('getHelp').addEventListener('click', function() {
-                const output = document.getElementById('output');
-                output.innerHTML = '<p>🤖 Robo Helper: Try using a loop to repeat actions!</p>';
-                output.innerHTML += '<p>🔁 Drag a "repeat" block to make the robot move multiple times</p>';
-                output.innerHTML += '<p>💡 Remember: Each step in the loop will be repeated</p>';
-            });
-            
-            document.getElementById('languageSelector').addEventListener('change', updateCodePreview);
-            
-            // Navigation functionality
-            document.querySelectorAll('.nav-item').forEach(item => {
-                item.addEventListener('click', function() {
-                    document.querySelectorAll('.nav-item').forEach(nav => {
-                        nav.classList.remove('active');
-                    });
-                    this.classList.add('active');
-                });
-            });
-            
-            // Initialize code preview
-            updateCodePreview();
-        });
-    </script>
-    
-    <!-- Blockly Toolbox -->
-    <xml id="toolbox" style="display: none">
-        <category name="Motion" colour="#4A6CD4">
-            <block type="motion_move"></block>
-            <block type="motion_turn"></block>
-        </category>
-        <category name="Events" colour="#FFAB19">
-            <block type="event_whenflagclicked"></block>
-        </category>
-        <category name="Control" colour="#5CB711">
-            <block type="controls_repeat"></block>
-            <block type="controls_wait"></block>
-        </category>
-        <category name="Looks" colour="#FF6680">
-            <block type="looks_say"></block>
-        </category>
-        <category name="Operators" colour="#0FBD8C">
-            <block type="math_number"></block>
-            <block type="math_arithmetic"></block>
-        </category>
-    </xml>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PrinceShadow003/codegalaxy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>
\ No newline at end of file
+        <Sidebar />
+        
+        <main className="relative flex flex-col flex-1 h-full overflow-hidden">
+          <TabStrip />
+          <AddressBar />
+          <div className="relative flex-1 w-full h-full overflow-hidden">
+            <MainContent />
+          </div>
+          <Copilot />
+        </main>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
