Phase 4: Glassmorphic design refresh across all components

- Enhanced all major components with glassmorphic styling:
  * EngineData gauges: frosted glass panels with animations
  * InstrumentPanel: glassmorphic waypoint boxes and data tables
  * NowPlaying: glassmorphic album art container and controls
  * All panels: smooth fade-in animations on mount

- Updated visual elements:
  * Consistent use of backdrop-filter blur effect
  * Semi-transparent borders with 0.1-0.2 opacity
  * Smooth animations (slideInUp, slideInDown, fadeIn)
  * Better font weights and hierarchy
  * Improved contrast and readability

- Color scheme refinements:
  * Highlight backgrounds use RGBA with proper opacity
  * Better use of accent colors for emphasis
  * Consistent border styling with transparency
  * Support for light/dark mode throughout

- Animation improvements:
  * All cards and panels animate on mount
  * Tab transitions are smooth and snappy
  * Hover effects with scale and shadow changes
  * Cubic-bezier timing functions for natural feel

- Build optimization:
  * Still 70 modules, same bundle size
  * CSS is well-organized and maintainable
  * No breaking changes to component APIs

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

dashboard/src/components/systems/EngineData.jsx

@@ -15,8 +15,13 @@ export default function EngineData() {
 
 const styles = {
   grid: {
-    display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center',
-    padding: 16, background: 'var(--surface)',
-    borderRadius: 'var(--radius)', border: '1px solid var(--border)',
+    display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
+    padding: 16, 
+    background: 'var(--glass-bg)',
+    backdropFilter: 'blur(var(--glass-blur))',
+    WebkitBackdropFilter: 'blur(var(--glass-blur))',
+    borderRadius: 'var(--radius-lg)', 
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    animation: 'slideInUp 0.3s ease-out',
   }
 }