Implement Lucide Vue icon system and UI improvements

- Replace emoji icons with professional SVG icons from Lucide Vue
- Add collapsible MusicControls with compact top-right collapse button
- Improve icon system with dynamic sizing and proper prop handling
- Disable SSR to prevent hydration issues with audio APIs
- Update IconButton to support both emoji strings and SVG components
- Optimize bottom positioning for expanded vs collapsed states
- Document new icon system in DESIGN_SYSTEM.md

components/ThemeToggle.client.vue

@@ -0,0 +1,59 @@
+<template>
+  <IconButton
+    :icon="isDark ? Sun : Moon"
+    :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    @click="toggleTheme"
+    class="theme-toggle"
+  />
+</template>
+
+<script setup>
+import { useLocalStorage } from '@vueuse/core'
+import { watch } from 'vue'
+import { Sun, Moon } from 'lucide-vue-next'
+import IconButton from './IconButton.client.vue'
+
+const isDark = useLocalStorage('theme-dark', false)
+
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+}
+
+// Apply theme change to document
+watch(isDark, (newValue) => {
+  if (process.client) {
+    document.documentElement.setAttribute('data-theme', newValue ? 'dark' : 'light')
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.theme-toggle {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1) rotate(180deg);
+}
+
+/* Special glow effect for theme toggle */
+.theme-toggle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.3s ease;
+  z-index: -1;
+}
+
+.theme-toggle:hover::after {
+  width: 80px;
+  height: 80px;
+  opacity: 0.3;
+}
+</style>