Phase 1: Modern glassmorphic design system with light/dark mode

- Added glassmorphic components with backdrop blur and transparency
  * .glass-panel and .glass-card classes for frosted glass effect
  * Smooth transitions and hover animations
  * Proper light mode support via prefers-color-scheme and manual toggle

- Implemented light/dark mode system
  * ThemeContext provider for global theme state
  * Persists user preference to localStorage
  * Theme toggle button in TopBar (☀️/🌙)
  * Automatic detection of system preference

- Enhanced UI components with modern animations
  * Updated button styles with primary, ghost, and icon variants
  * Smooth transitions (cubic-bezier curves)
  * Slide/fade animations on component mount
  * Hover effects with subtle shadows

- Improved visual design
  * Updated color scheme (brighter accent: #0ea5e9)
  * Better visual hierarchy in typography
  * Refined spacing and padding
  * Glass effect on panels and cards

- Updated components:
  * TopBar: Added theme toggle
  * TabNav: Smooth transitions and glassmorphic styling
  * ZoneCard: Glassmorphic cards with hover effects
  * ZoneGrid: Frosted panel design

- Build: 65 modules, 184.27 KB (57.47 KB gzipped)
- All hot reloading working smoothly

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

dashboard/src/components/audio/ZoneCard.jsx

@@ -81,49 +81,57 @@ export default function ZoneCard({ zone, onVolume, onMute, onSource, onGroup, gr
 const styles = {
   card: {
     padding: 14,
-    background: 'var(--surface)',
+    background: 'var(--glass-bg)',
+    backdropFilter: 'blur(var(--glass-blur))',
+    WebkitBackdropFilter: 'blur(var(--glass-blur))',
     borderRadius: 'var(--radius)',
-    border: '1px solid var(--border)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
     display: 'flex', flexDirection: 'column', gap: 10,
-    transition: 'border-color 0.2s, opacity 0.2s',
+    transition: 'all 0.3s cubic-bezier(0.23, 1, 0.320, 1)',
+    cursor: 'pointer',
   },
   header: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 },
   titleArea: { display: 'flex', flexDirection: 'column', gap: 6, flex: 1 },
-  name: { fontWeight: 600, fontSize: 14 },
+  name: { fontWeight: 600, fontSize: 15, letterSpacing: '-0.01em' },
   sourceTag: { 
-    fontSize: 11, padding: '3px 8px', borderRadius: 4, fontWeight: 600,
+    fontSize: 11, padding: '4px 8px', borderRadius: 6, fontWeight: 600,
     display: 'inline-block', width: 'fit-content',
+    transition: 'all 0.2s',
   },
   badges: { display: 'flex', gap: 4 },
-  badge: { fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700, minHeight: 24, minWidth: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' },
+  badge: { fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700, minHeight: 24, minWidth: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' },
   
   groupInfo: {
     fontSize: 11, color: 'var(--muted)',
-    background: '#38bdf811', padding: 8, borderRadius: 4,
+    background: 'rgba(14, 165, 233, 0.08)', padding: 8, borderRadius: 6,
     borderLeft: '2px solid var(--accent)',
+    animation: 'slideInUp 0.3s ease-out',
   },
-  groupLabel: { fontWeight: 600, marginBottom: 4 },
+  groupLabel: { fontWeight: 600, marginBottom: 4, display: 'block' },
   groupZones: { display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 4 },
   groupZone: { 
-    fontSize: 10, padding: '2px 6px', background: 'var(--accent)',
-    color: 'var(--bg)', borderRadius: 3, fontWeight: 600,
+    fontSize: 10, padding: '3px 8px', background: 'var(--accent)',
+    color: 'white', borderRadius: 4, fontWeight: 600,
+    animation: 'slideInUp 0.2s ease-out',
   },
 
   sourceControl: { display: 'flex', gap: 8, alignItems: 'center' },
   sourceSelect: {
-    flex: 1, padding: '8px 10px', background: 'var(--bg)', color: 'var(--text)',
-    border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+    flex: 1, padding: '8px 10px', background: 'rgba(255, 255, 255, 0.05)', 
+    color: 'var(--text)',
+    border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 'var(--radius)',
     fontSize: 12, fontWeight: 600, cursor: 'pointer',
+    transition: 'all 0.2s',
   },
   groupBtn: {
-    minWidth: 44, minHeight: 44, padding: 0,
-    background: 'var(--border)', color: 'var(--text)',
-    border: 'none', borderRadius: 'var(--radius)', cursor: 'pointer',
-    fontSize: 18, transition: 'background 0.2s',
-    '&:hover': { background: 'var(--accent)' },
+    minWidth: 40, minHeight: 40, padding: 0,
+    background: 'rgba(255, 255, 255, 0.08)', color: 'var(--text)',
+    border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 'var(--radius)', 
+    cursor: 'pointer',
+    fontSize: 16, transition: 'all 0.2s',
   },
 
   volumeRow: { display: 'flex', alignItems: 'center', gap: 10 },
-  muteBtn: { fontSize: 18, minWidth: 44, minHeight: 44, background: 'none', border: 'none', cursor: 'pointer' },
-  volVal: { fontFamily: 'var(--font-mono)', fontSize: 13, minWidth: 26, textAlign: 'right', color: 'var(--muted)' },
+  muteBtn: { fontSize: 18, minWidth: 40, minHeight: 40, background: 'none', border: 'none', cursor: 'pointer', transition: 'transform 0.2s' },
+  volVal: { fontFamily: 'var(--font-mono)', fontSize: 12, minWidth: 28, textAlign: 'right', color: 'var(--muted)' },
 }

dashboard/src/components/audio/ZoneGrid.jsx

@@ -100,25 +100,29 @@ const styles = {
     gridTemplateColumns: '240px 1fr',
     gap: 16,
     height: '100%',
+    padding: 16,
   },
   groupingPanel: {
-    background: 'var(--surface)',
-    borderRadius: 'var(--radius)',
-    border: '1px solid var(--border)',
-    padding: 12,
+    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)',
+    padding: 14,
     display: 'flex',
     flexDirection: 'column',
     gap: 10,
-    maxHeight: '100vh',
+    maxHeight: 'calc(100vh - 200px)',
     overflowY: 'auto',
+    animation: 'slideInDown 0.3s ease-out',
   },
   panelTitle: {
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: 700,
     color: 'var(--muted)',
     margin: '0 0 8px 0',
     textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    letterSpacing: 0.6,
   },
   emptyText: {
     fontSize: 11,
@@ -132,13 +136,14 @@ const styles = {
     gap: 6,
   },
   groupListItem: {
-    background: '#38bdf811',
-    border: '1px solid var(--accent)',
-    borderRadius: 4,
+    background: 'rgba(14, 165, 233, 0.08)',
+    border: '1px solid rgba(14, 165, 233, 0.2)',
+    borderRadius: 6,
     padding: '8px 10px',
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
+    transition: 'all 0.2s',
   },
   groupName: {
     fontSize: 11,
@@ -155,11 +160,13 @@ const styles = {
     padding: '0 4px',
     minWidth: 24,
     minHeight: 24,
+    transition: 'transform 0.2s',
   },
   grid: {
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
     gap: 12,
     overflowY: 'auto',
+    animation: 'slideInUp 0.3s ease-out',
   }
 }

dashboard/src/components/layout/TabNav.jsx

@@ -16,6 +16,7 @@ export default function TabNav({ activeTab, onTabChange }) {
             ...(activeTab === tab.id ? styles.active : {}),
           }}
           onClick={() => onTabChange(tab.id)}
+          className={activeTab === tab.id ? 'slide-in-down' : ''}
         >
           <span style={styles.icon}>{tab.icon}</span>
           <span style={styles.label}>{tab.label}</span>
@@ -31,6 +32,7 @@ const styles = {
     background: 'var(--surface)',
     borderBottom: '1px solid var(--border)',
     flexShrink: 0,
+    backdropFilter: 'blur(8px)',
   },
   tab: {
     flex: 1,
@@ -43,14 +45,14 @@ const styles = {
     fontSize: 11,
     color: 'var(--muted)',
     borderRadius: 0,
-    borderBottom: '2px solid transparent',
-    transition: 'color 0.15s, border-color 0.15s',
+    borderBottom: '3px solid transparent',
+    transition: 'color 0.2s cubic-bezier(0.23, 1, 0.320, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.320, 1)',
     minHeight: 48,
   },
   active: {
     color: 'var(--accent)',
-    borderBottom: '2px solid var(--accent)',
+    borderBottom: '3px solid var(--accent)',
   },
-  icon: { fontSize: 16 },
+  icon: { fontSize: 18, transition: 'transform 0.2s' },
   label: { fontSize: 10, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' },
 }

dashboard/src/components/layout/TopBar.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useNMEA } from '../../hooks/useNMEA.js'
+import { useTheme } from '../../contexts/ThemeContext.jsx'
 
 const isMock = import.meta.env.VITE_USE_MOCK === 'true'
 const isDev  = import.meta.env.DEV
@@ -10,6 +11,7 @@ function formatTime() {
 
 export default function TopBar() {
   const { sog, heading, connected } = useNMEA()
+  const { isDark, toggleTheme } = useTheme()
   const [time, setTime] = useState(formatTime())
 
   // Clock tick
@@ -23,7 +25,7 @@ export default function TopBar() {
       <div style={styles.left}>
         <span style={styles.logo}>⚓ Bordanlage</span>
         {isMock && <span style={styles.devBadge}>DEV · MOCK DATA</span>}
-        {isDev && !isMock && <span style={{ ...styles.devBadge, background: '#38bdf822', color: 'var(--accent)', borderColor: 'var(--accent)' }}>DEV · LIVE</span>}
+        {isDev && !isMock && <span style={{ ...styles.devBadge, background: '#0ea5e922', color: 'var(--accent)', borderColor: 'var(--accent)' }}>DEV · LIVE</span>}
       </div>
 
       <div style={styles.center}>
@@ -45,6 +47,14 @@ export default function TopBar() {
       </div>
 
       <div style={styles.right}>
+        <button 
+          className="icon ghost"
+          onClick={toggleTheme}
+          title={isDark ? 'Light Mode' : 'Dark Mode'}
+          style={{ fontSize: 18 }}
+        >
+          {isDark ? '☀️' : '🌙'}
+        </button>
         <span style={styles.time}>{time}</span>
       </div>
     </header>