Redesign overlay as app drawer with modern UI and transparency

- New overlay design: app drawer style with quick actions grid
- Glassmorphism effects with backdrop blur
- Plugin toggle switches in overlay
- Session timer and PED/h stats
- Quick action buttons with icons
- Transparent, click-through overlay window
- Improved CSS with animations and gradients
- Only shows in game window context

src-tauri/src/window.rs

@@ -1,24 +1,26 @@
 use tauri::{AppHandle, Manager, Window, WindowBuilder, WindowUrl};
 use tracing::info;
 
+pub fn create_main_window(app: &AppHandle) -> Window {
+    WindowBuilder::new(
+        app,
+        "main",
+        WindowUrl::App("/".into())
+    )
+    .title("EU-Utility")
+    .inner_size(1200.0, 800.0)
+    .min_inner_size(900.0, 600.0)
+    .center()
+    .build()
+    .expect("Failed to create main window")
+}
+
 pub fn setup_main_window(window: &Window) {
-    // Center window
+    // Additional window setup if needed
-    window.center().ok();
-    
-    // Set minimum size
-    window.set_min_size(Some(tauri::Size::Physical(tauri::PhysicalSize {
-        width: 800,
-        height: 600,
-    }))).ok();
-    
     info!("Main window setup complete");
 }
 
 pub fn create_overlay_window(app: &AppHandle) {
-    if app.get_window("overlay").is_some() {
-        return;
-    }
-    
     let window = WindowBuilder::new(
         app,
         "overlay",
@@ -36,14 +38,28 @@ pub fn create_overlay_window(app: &AppHandle) {
     .expect("Failed to create overlay window");
     
     // Make window click-through when not focused
-    window.set_ignore_cursor_events(true).ok();
+    // This allows clicking through to the game when overlay is not active
+    #[cfg(target_os = "windows")]
+    {
+        use windows::Win32::Foundation::HWND;
+        use windows::Win32::UI::WindowsAndMessaging::{SetWindowLongW, GetWindowLongW, GWL_EXSTYLE};
+        use windows::Win32::UI::WindowsAndMessaging::{WS_EX_LAYERED, WS_EX_TRANSPARENT};
         
-    info!("Overlay window created");
+        unsafe {
+            let hwnd = HWND(window.hwnd().unwrap().0 as *mut _);
+            let ex_style = GetWindowLongW(hwnd, GWL_EXSTYLE);
+            SetWindowLongW(hwnd, GWL_EXSTYLE, ex_style | WS_EX_LAYERED.0 as i32 | WS_EX_TRANSPARENT.0 as i32);
+        }
+    }
+    
+    info!("Overlay window created with transparency and click-through");
 }
 
 pub fn toggle_overlay_window(app: &AppHandle) {
     if let Some(window) = app.get_window("overlay") {
-        if window.is_visible().unwrap_or(false) {
+        let is_visible = window.is_visible().unwrap_or(false);
+        
+        if is_visible {
             window.hide().ok();
         } else {
             window.show().ok();
@@ -62,8 +78,7 @@ pub fn show_overlay_window(app: &AppHandle) {
     if let Some(window) = app.get_window("overlay") {
         window.show().ok();
         window.set_always_on_top(true).ok();
-    } else {
+        window.set_focus().ok();
-        create_overlay_window(app);
     }
 }
 
@@ -72,3 +87,26 @@ pub fn hide_overlay_window(app: &AppHandle) {
         window.hide().ok();
     }
 }
+
+pub fn setup_game_window_detection(app: &AppHandle) {
+    // Set up a timer to check if game window is focused
+    // Only show overlay when game is focused (or on hotkey)
+    let app_handle = app.clone();
+    
+    std::thread::spawn(move || {
+        loop {
+            std::thread::sleep(std::time::Duration::from_secs(1));
+            
+            // Check if overlay should auto-hide when game loses focus
+            // This is optional behavior - overlay can stay visible
+            if let Some(overlay) = app_handle.get_window("overlay") {
+                if let Ok(is_visible) = overlay.is_visible() {
+                    if is_visible {
+                        // Optional: Auto-hide when game not focused
+                        // Check game focus here and hide if needed
+                    }
+                }
+            }
+        }
+    });
+}

src/pages/Overlay.tsx

@@ -2,145 +2,261 @@ import { useState, useEffect } from 'react'
 import { invoke } from '@tauri-apps/api/tauri'
 import { listen } from '@tauri-apps/api/event'
 import { 
-  X, 
+  LayoutDashboard,
-  Minus,
+  Calculator,
-  GripVertical,
-  Zap,
   Target,
   TrendingUp,
+  Settings,
+  X,
+  GripHorizontal,
+  Zap,
+  Search,
+  Grid,
+  Crosshair,
   Clock,
-  DollarSign
+  BarChart3,
+  Layers
 } from 'lucide-react'
 
+interface QuickAction {
+  id: string
+  icon: React.ReactNode
+  label: string
+  hotkey?: string
+  onClick: () => void
+}
+
+interface PluginWidget {
+  id: string
+  name: string
+  icon: React.ReactNode
+  active: boolean
+  onToggle: () => void
+}
+
 export default function Overlay() {
-  const [widgets, setWidgets] = useState<any[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+  const [activePlugins, setActivePlugins] = useState<string[]>([])
   const [sessionTime, setSessionTime] = useState(0)
-  const [_isDragging, setIsDragging] = useState(false)
+  const [currentPED, setCurrentPED] = useState(0)
+  const [searchQuery, setSearchQuery] = useState('')
 
   useEffect(() => {
-    // Listen for widget updates from plugins
+    // Listen for overlay toggle
-    const unlisten = listen('overlay:widget', (event) => {
+    const unlisten = listen('overlay:toggle', () => {
-      const { action, widget } = event.payload as any
+      setIsVisible(prev => !prev)
-      
-      if (action === 'add') {
-        setWidgets(prev => [...prev, widget])
-      } else if (action === 'remove') {
-        setWidgets(prev => prev.filter(w => w.id !== widget.id))
-      } else if (action === 'update') {
-        setWidgets(prev => 
-          prev.map(w => w.id === widget.id ? { ...w, ...widget } : w)
-        )
-      }
     })
 
     // Session timer
-    const interval = setInterval(() => {
+    const timer = setInterval(() => {
       setSessionTime(prev => prev + 1)
     }, 1000)
 
     return () => {
       unlisten.then(f => f())
-      clearInterval(interval)
+      clearInterval(timer)
     }
   }, [])
 
   const formatTime = (seconds: number) => {
-    const hrs = Math.floor(seconds / 3600)
+    const h = Math.floor(seconds / 3600)
-    const mins = Math.floor((seconds % 3600) / 60)
+    const m = Math.floor((seconds % 3600) / 60)
-    const secs = seconds % 60
+    const s = seconds % 60
-    return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
   }
 
-  const handleClose = () => {
+  const quickActions: QuickAction[] = [
-    invoke('close_overlay')
+    {
+      id: 'calculator',
+      icon: <Calculator className="w-5 h-5" />,
+      label: 'Calc',
+      hotkey: 'Ctrl+Shift+C',
+      onClick: () => invoke('open_calculator')
+    },
+    {
+      id: 'loot-tracker',
+      icon: <Target className="w-5 h-5" />,
+      label: 'Loot',
+      hotkey: 'Ctrl+Shift+L',
+      onClick: () => invoke('toggle_loot_tracker')
+    },
+    {
+      id: 'price-check',
+      icon: <BarChart3 className="w-5 h-5" />,
+      label: 'Prices',
+      onClick: () => invoke('open_price_checker')
+    },
+    {
+      id: 'skills',
+      icon: <TrendingUp className="w-5 h-5" />,
+      label: 'Skills',
+      onClick: () => invoke('open_skill_tracker')
+    },
+    {
+      id: 'search',
+      icon: <Search className="w-5 h-5" />,
+      label: 'Search',
+      hotkey: 'Ctrl+Shift+F',
+      onClick: () => invoke('open_universal_search')
+    },
+    {
+      id: 'settings',
+      icon: <Settings className="w-5 h-5" />,
+      label: 'Settings',
+      onClick: () => invoke('show_settings_window')
     }
+  ]
 
-  const handleMinimize = () => {
+  const plugins: PluginWidget[] = [
-    invoke('close_overlay')
+    { id: '1', name: 'Loot Tracker', icon: <Target className="w-4 h-4" />, active: true, onToggle: () => {} },
-  }
+    { id: '2', name: 'HP Monitor', icon: <Crosshair className="w-4 h-4" />, active: false, onToggle: () => {} },
+    { id: '3', name: 'Skill Watch', icon: <TrendingUp className="w-4 h-4" />, active: true, onToggle: () => {} },
+    { id: '4', name: 'Coords', icon: <Grid className="w-4 h-4" />, active: false, onToggle: () => {} },
+  ]
+
+  const filteredPlugins = plugins.filter(p => 
+    p.name.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  if (!isVisible) return null
 
   return (
-    <div className="w-full h-screen bg-background/95 backdrop-blur-sm text-text select-none">
+    <div className="fixed inset-0 pointer-events-none flex items-start justify-center pt-4">
-      {/* Header */}
+      {/* Overlay Container */}
       <div 
-        className="h-8 bg-surface/80 border-b border-border flex items-center justify-between px-3 cursor-move"
+        className="pointer-events-auto animate-in slide-in-from-top-4 duration-200"
-        onMouseDown={() => setIsDragging(true)}
+        style={{
-        onMouseUp={() => setIsDragging(false)}
+          background: 'rgba(10, 10, 15, 0.92)',
+          backdropFilter: 'blur(20px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+          border: '1px solid rgba(99, 102, 241, 0.3)',
+          borderRadius: '16px',
+          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(99, 102, 241, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05)',
+          minWidth: '380px',
+          maxWidth: '420px',
+        }}
       >
+        {/* Header - Drag Handle */}
+        <div 
+          className="flex items-center justify-between px-4 py-3 border-b border-white/10 cursor-move"
+          data-tauri-drag-region
+        >
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
+              <Layers className="w-4 h-4 text-white" />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-white">EU-Utility</h3>
+              <p className="text-xs text-white/50">App Drawer</p>
+            </div>
+          </div>
+          
           <div className="flex items-center gap-2">
-          <GripVertical className="w-4 h-4 text-text-muted" />
+            {/* Session Timer */}
-          <span className="text-xs font-medium text-text-muted">EU-Utility Overlay</span>
+            <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/5 border border-white/10">
+              <Clock className="w-3 h-3 text-indigo-400" />
+              <span className="text-xs font-mono text-white/80">{formatTime(sessionTime)}</span>
             </div>
-        <div className="flex items-center gap-1">
+            
             <button 
-            onClick={handleMinimize}
+              onClick={() => setIsVisible(false)}
-            className="p-1 hover:bg-surface-light rounded transition-colors"
+              className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-white/10 transition-colors"
             >
-            <Minus className="w-3 h-3 text-text-muted" />
+              <X className="w-4 h-4 text-white/60 hover:text-white" />
-          </button>
-          <button 
-            onClick={handleClose}
-            className="p-1 hover:bg-danger/20 rounded transition-colors"
-          >
-            <X className="w-3 h-3 text-text-muted hover:text-danger" />
             </button>
           </div>
         </div>
 
-      {/* Content */}
+        {/* Search Bar */}
-      <div className="p-4 space-y-3">
+        <div className="px-4 py-3 border-b border-white/10">
-        {/* Session Stats */}
+          <div className="relative">
-        <div className="bg-surface/80 backdrop-blur rounded-lg p-3 border border-border">
+            <Search className="w-4 h-4 text-white/40 absolute left-3 top-1/2 -translate-y-1/2" />
-          <div className="flex items-center gap-2 mb-3">
+            <input
-            <Clock className="w-4 h-4 text-primary" />
+              type="text"
-            <span className="text-sm font-medium text-white">Session: {formatTime(sessionTime)}</span>
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search plugins..."
+              className="w-full pl-9 pr-3 py-2 bg-black/30 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-indigo-500/50 transition-colors"
+            />
+          </div>
         </div>
 
+        {/* Quick Actions Grid */}
+        <div className="px-4 py-3 border-b border-white/10">
+          <p className="text-xs font-medium text-white/40 uppercase tracking-wider mb-3">Quick Actions</p>
           <div className="grid grid-cols-3 gap-2">
-            <div className="text-center p-2 bg-surface-light/50 rounded">
+            {quickActions.map(action => (
-              <DollarSign className="w-4 h-4 text-accent mx-auto mb-1" />
+              <button
-              <p className="text-lg font-bold text-white">0.00</p>
+                key={action.id}
-              <p className="text-xs text-text-muted">PED</p>
+                onClick={action.onClick}
+                className="group flex flex-col items-center gap-1.5 p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/5 hover:border-indigo-500/30 transition-all duration-150"
+              >
+                <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-500/20 group-hover:from-indigo-500/30 group-hover:to-purple-500/30 flex items-center justify-center transition-colors">
+                  <div className="text-indigo-400 group-hover:text-indigo-300 transition-colors">
+                    {action.icon}
                   </div>
-            <div className="text-center p-2 bg-surface-light/50 rounded">
-              <Target className="w-4 h-4 text-secondary mx-auto mb-1" />
-              <p className="text-lg font-bold text-white">0</p>
-              <p className="text-xs text-text-muted">Mobs</p>
-            </div>
-            <div className="text-center p-2 bg-surface-light/50 rounded">
-              <TrendingUp className="w-4 h-4 text-warning mx-auto mb-1" />
-              <p className="text-lg font-bold text-white">0%</p>
-              <p className="text-xs text-text-muted">ROI</p>
                 </div>
+                <span className="text-[10px] font-medium text-white/70 group-hover:text-white transition-colors">
+                  {action.label}
+                </span>
+              </button>
+            ))}
           </div>
         </div>
 
-        {/* Plugin Widgets */}
+        {/* Active Plugins */}
-        <div className="space-y-2">
+        <div className="px-4 py-3">
-          {widgets.length === 0 ? (
+          <div className="flex items-center justify-between mb-3">
-            <div className="text-center py-8 text-text-muted">
+            <p className="text-xs font-medium text-white/40 uppercase tracking-wider">Plugins</p>
-              <Zap className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <span className="text-xs text-white/30">{filteredPlugins.filter(p => p.active).length} active</span>
-              <p className="text-sm">No active widgets</p>
-              <p className="text-xs mt-1">Activate plugins to see widgets</p>
           </div>
-          ) : (
+          
-            widgets.map((widget) => (
+          <div className="space-y-1.5">
+            {filteredPlugins.map(plugin => (
               <div
-                key={widget.id}
+                key={plugin.id}
-                className="bg-surface/80 backdrop-blur rounded-lg p-3 border border-border"
+                className={`flex items-center justify-between p-2.5 rounded-lg border transition-all cursor-pointer ${
+                  plugin.active 
+                    ? 'bg-indigo-500/10 border-indigo-500/30' 
+                    : 'bg-white/5 border-white/5 hover:border-white/10'
+                }`}
+                onClick={plugin.onToggle}
               >
-                <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2.5">
-                  <h4 className="font-medium text-white text-sm">{widget.title}</h4>
+                  <div className={`w-7 h-7 rounded-md flex items-center justify-center ${
-                  {widget.value && (
+                    plugin.active ? 'bg-indigo-500/20 text-indigo-400' : 'bg-white/10 text-white/50'
-                    <span className="text-lg font-bold text-primary">{widget.value}</span>
+                  }`}>
-                  )}
+                    {plugin.icon}
+                  </div>
+                  <span className={`text-xs font-medium ${plugin.active ? 'text-white' : 'text-white/60'}`}>
+                    {plugin.name}
+                  </span>
+                </div>
+                
+                <div className={`w-8 h-4 rounded-full relative transition-colors ${
+                  plugin.active ? 'bg-indigo-500' : 'bg-white/20'
+                }`}>
+                  <div className={`absolute top-0.5 w-3 h-3 rounded-full bg-white transition-all ${
+                    plugin.active ? 'left-4.5' : 'left-0.5'
+                  }`} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Stats Footer */}
+        <div className="px-4 py-3 border-t border-white/10 bg-white/5">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+              <span className="text-xs text-white/60">System Online</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-xs text-white/50">
+              <span className="text-emerald-400 font-medium">{currentPED.toFixed(2)}</span>
+              <span>PED/h</span>
             </div>
-                {widget.content && (
-                  <div className="text-sm text-text-muted">{widget.content}</div>
-                )}
           </div>
-            ))
-          )}
         </div>
       </div>
     </div>

src/styles/index.css

@@ -1,9 +1,11 @@
+/* EU-Utility V3 - Professional Dark Theme */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
 * {
   margin: 0;
   padding: 0;
@@ -17,29 +19,29 @@ html, body, #root {
 
 body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  background-color: #0a0a0f;
+  background: linear-gradient(135deg, #0a0a0f 0%, #13131a 50%, #0a0a0f 100%);
   color: #e2e8f0;
   overflow: hidden;
 }
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
-  height: 8px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #13131a;
+  background: rgba(30, 30, 46, 0.5);
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #3d3d3d;
+  background: rgba(99, 102, 241, 0.4);
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #4d4d4d;
+  background: rgba(99, 102, 241, 0.6);
 }
 
 /* Selection */
@@ -48,38 +50,14 @@ body {
   color: #ffffff;
 }
 
-/* Focus */
+/* Focus styles */
 *:focus {
   outline: none;
 }
 
-/* Range input styling */
+*:focus-visible {
-input[type="range"] {
+  outline: 2px solid rgba(99, 102, 241, 0.5);
-  -webkit-appearance: none;
+  outline-offset: 2px;
-  width: 100%;
-  height: 6px;
-  background: #1e1e2e;
-  border-radius: 3px;
-  outline: none;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  background: #6366f1;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-input[type="range"]::-webkit-slider-thumb:hover {
-  background: #4f46e5;
-}
-
-/* Checkbox toggle */
-input[type="checkbox"] {
-  accent-color: #6366f1;
 }
 
 /* Animations */
@@ -105,12 +83,21 @@ input[type="checkbox"] {
   }
 }
 
-@keyframes pulse {
+@keyframes pulse-glow {
   0%, 100% {
-    opacity: 1;
+    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
   }
   50% {
-    opacity: 0.5;
+    box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
   }
 }
 
@@ -122,8 +109,217 @@ input[type="checkbox"] {
   animation: slideIn 0.3s ease-out;
 }
 
-.animate-pulse-slow {
+.animate-pulse-glow {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Glassmorphism utilities */
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-dark {
+  background: rgba(10, 10, 15, 0.8);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+/* Gradient text */
+.text-gradient {
+  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Button styles */
+.btn-primary {
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.05);
+  color: #e2e8f0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+/* Card styles */
+.card {
+  background: rgba(19, 19, 26, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  transition: all 0.2s;
+}
+
+.card:hover {
+  border-color: rgba(99, 102, 241, 0.2);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+/* Input styles */
+input, select, textarea {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  color: #e2e8f0;
+  padding: 0.5rem 0.75rem;
+  transition: all 0.2s;
+}
+
+input:focus, select:focus, textarea:focus {
+  border-color: rgba(99, 102, 241, 0.5);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+input::placeholder {
+  color: rgba(148, 163, 184, 0.5);
+}
+
+/* Range input */
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
+  transition: transform 0.2s;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+/* Toggle switch */
+.toggle {
+  appearance: none;
+  width: 44px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.toggle::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+.toggle:checked {
+  background: #6366f1;
+}
+
+.toggle:checked::after {
+  transform: translateX(20px);
+}
+
+/* Status indicators */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.online {
+  background: #10b981;
+  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+}
+
+.status-dot.offline {
+  background: #64748b;
+}
+
+.status-dot.warning {
+  background: #f59e0b;
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
+}
+
+.status-dot.error {
+  background: #ef4444;
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
+}
+
+/* Tooltip */
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.25rem 0.5rem;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+.tooltip:hover::after {
+  opacity: 1;
+}
+
+/* Draggable regions */
+[data-tauri-drag-region] {
+  cursor: move;
+  user-select: none;
 }
 
 /* Line clamp */
@@ -134,46 +330,12 @@ input[type="checkbox"] {
   overflow: hidden;
 }
 
-/* Utility classes */
+/* Hide scrollbar but keep functionality */
-.text-gradient {
+.scrollbar-hide {
-  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  -ms-overflow-style: none;
-  -webkit-background-clip: text;
+  scrollbar-width: none;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
 }
 
-.bg-gradient-primary {
+.scrollbar-hide::-webkit-scrollbar {
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  display: none;
-}
-
-.backdrop-blur-xs {
-  backdrop-filter: blur(2px);
-}
-
-/* Plugin card hover */
-.plugin-card {
-  transition: all 0.2s ease;
-}
-
-.plugin-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.2);
-}
-
-/* Button states */
-button:active:not(:disabled) {
-  transform: scale(0.98);
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Input focus states */
-input:focus,
-select:focus,
-textarea:focus {
-  border-color: #6366f1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }