diff --git a/public/components/ContactManager.js b/public/components/ContactManager.js
index 214a301..a522f18 100644
--- a/public/components/ContactManager.js
+++ b/public/components/ContactManager.js
@@ -355,7 +355,7 @@ class ContactManager {
         }
 
         container.innerHTML = `
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <div class="mb-4">
                     <h2 class="text-lg font-bold text-white">📞 Your Feedback Contact</h2>
                 </div>
diff --git a/public/components/EventManager.js b/public/components/EventManager.js
index 0e83a53..95bf826 100644
--- a/public/components/EventManager.js
+++ b/public/components/EventManager.js
@@ -285,7 +285,7 @@ class EventManager {
         }
 
         container.innerHTML = `
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <div class="mb-4">
                     <h2 class="text-lg font-bold text-white">🎯 Edit Event Details</h2>
                 </div>
diff --git a/public/components/FFmpegStreamsManager.js b/public/components/FFmpegStreamsManager.js
index a3f09f4..2057f0d 100644
--- a/public/components/FFmpegStreamsManager.js
+++ b/public/components/FFmpegStreamsManager.js
@@ -77,7 +77,7 @@ class FFmpegStreamsManager {
                 </div>
                 <p data-duplicate-message class="text-gray-300 text-sm mb-6"></p>
                 <div class="flex justify-end">
-                    <button data-duplicate-ok class="px-4 py-2 bg-[var(--primary-color)] hover:opacity-90 text-white rounded-lg transition-colors">OK</button>
+                    <button data-duplicate-ok class="px-4 py-2 btn-glass btn-glass-primary text-white rounded-lg">OK</button>
                 </div>
             </div>
         `;
@@ -651,7 +651,7 @@ class FFmpegStreamsManager {
                                 id="editStreamName"
                                 value="${stream.name || ''}"
                                 maxlength="50"
-                                class="w-full px-3 py-2 bg-[#1a1a1a] border border-[var(--border-color)] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-[var(--primary-color)] transition-colors pr-12"
+                                class="w-full px-3 py-2 input-glass rounded-lg text-white placeholder-gray-400 transition-colors pr-12"
                                 placeholder="Enter stream name"
                                 required
                             >
@@ -688,7 +688,7 @@ class FFmpegStreamsManager {
                         </button>
                         <button
                             type="submit"
-                            class="flex-1 px-4 py-2 bg-[var(--primary-color)]/20 hover:bg-[var(--primary-color)]/30 border border-[var(--primary-color)]/30 text-[var(--primary-color)] rounded-lg transition-all duration-300"
+                            class="flex-1 btn-glass btn-glass-secondary"
                         >
                             Update Stream
                         </button>
@@ -952,7 +952,7 @@ class FFmpegStreamsManager {
         }
 
         this.container.innerHTML = `
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <!-- Header -->
                 <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
                     <div>
@@ -1008,7 +1008,7 @@ class FFmpegStreamsManager {
                         <p class="text-gray-400 mb-4">No active streams yet. Start streaming audio from any input source.</p>
                     </div>
 
-                    <div class="bg-[#111111] border border-[var(--border-color)] rounded-xl p-6 max-w-md mx-auto">
+                    <div class="glass-card-inset rounded-xl p-6 max-w-md mx-auto">
                         <h4 class="text-white font-medium mb-3">🚀 Quick Start Guide:</h4>
                         <div class="text-left space-y-2 text-sm text-gray-300">
                             <div class="flex items-center gap-2">
@@ -1081,7 +1081,7 @@ class FFmpegStreamsManager {
             }
 
             return `
-            <div class="bg-[#111111] border border-[var(--border-color)] rounded-xl p-5 hover:border-[var(--primary-color)]/30 transition-all duration-300">
+            <div class="glass-card-inset rounded-xl p-5 hover:border-[var(--primary-color)]/30 transition-all duration-300">
                 <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                     <!-- Stream Info (label S1, S2, S3 + reorder) -->
                     <div class="flex items-center gap-4 flex-1">
@@ -1266,7 +1266,7 @@ class FFmpegStreamsManager {
         if (!this.container) return;
 
         this.container.innerHTML = `
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <div class="flex items-center justify-between mb-4">
                     <h2 class="text-xl font-bold text-white">FFmpeg Streams</h2>
                     <div class="group relative flex items-center">
@@ -1279,7 +1279,7 @@ class FFmpegStreamsManager {
                 <div class="text-center py-8">
                     <span class="material-symbols-rounded text-4xl text-red-500 mb-2">error</span>
                     <p class="text-red-400 mb-2">${message}</p>
-                    <button onclick="ffmpegStreamsManager.init()" class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold text-white bg-[var(--primary-color)]/10 hover:bg-[var(--primary-color)]/20 border border-[var(--border-color)] transition-all duration-300">
+                    <button onclick="ffmpegStreamsManager.init()" class="btn-glass btn-glass-secondary text-sm">
                         <span class="material-symbols-rounded">refresh</span>
                         Retry
                     </button>
@@ -1319,7 +1319,7 @@ class FFmpegStreamsManager {
         const modal = document.createElement('div');
         modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
         modal.innerHTML = `
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30 max-w-lg w-full mx-4">
+            <div class="glass-card p-6 max-w-lg w-full mx-4">
                 <div class="flex items-center gap-3 mb-6">
                     <span class="material-symbols-rounded text-2xl text-[var(--primary-color)]">radio</span>
                     <h3 class="text-xl font-bold text-white">🎤 Start New Audio Stream</h3>
@@ -1346,7 +1346,7 @@ class FFmpegStreamsManager {
                                 <input type="text"
                                        id="stream-name"
                                        maxlength="50"
-                                       class="w-full bg-[#2A2A2A] border border-[var(--border-color)] text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5 pr-12"
+                                       class="w-full input-glass text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5 pr-12"
                                        placeholder="e.g., Main Room Audio, DJ Mix, Podcast"
                                        required>
                                 <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
@@ -1361,7 +1361,7 @@ class FFmpegStreamsManager {
                                 <span class="material-symbols-rounded text-sm mr-1">mic</span>
                                 Audio Input Source
                             </label>
-                            <select id="stream-device" class="w-full bg-[#2A2A2A] border border-[var(--border-color)] text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5" required>
+                            <select id="stream-device" class="w-full input-glass text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5" required>
                                 <option value="">🎯 Select your audio source...</option>
                                 ${this.audioDevices.map(device => `
                                     <option value="${device.id}">
@@ -1384,7 +1384,7 @@ class FFmpegStreamsManager {
                                 <span class="material-symbols-rounded text-sm mr-1">high_quality</span>
                                 Stream Quality
                             </label>
-                            <select id="stream-bitrate" class="w-full bg-[#2A2A2A] border border-[var(--border-color)] text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5">
+                            <select id="stream-bitrate" class="w-full input-glass text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5">
                                 <option value="128">🎵 128 kbps - Good (smaller file size)</option>
                                 <option value="192" selected>🎶 192 kbps - High Quality (recommended)</option>
                                 <option value="256">🎼 256 kbps - Very High Quality</option>
diff --git a/public/components/HeaderComponent.js b/public/components/HeaderComponent.js
index e838229..9fe757c 100644
--- a/public/components/HeaderComponent.js
+++ b/public/components/HeaderComponent.js
@@ -94,7 +94,7 @@ class HeaderComponent {
         const modal = document.createElement('div');
         modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
         modal.innerHTML = `
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
+            <div class="glass-card p-6 max-w-md mx-4">
                 <div class="flex items-center gap-3 mb-4">
                     <span class="material-symbols-rounded text-3xl text-green-500">system_update</span>
                     <div>
@@ -102,7 +102,7 @@ class HeaderComponent {
                         <p class="text-sm text-gray-400">A new version of LANStreamer is ready</p>
                     </div>
                 </div>
-                <div class="bg-gray-800/50 rounded-lg p-4 mb-4">
+                <div class="glass-card-inset rounded-lg p-4 mb-4">
                     <div class="flex justify-between items-center mb-2">
                         <span class="text-gray-400 text-sm">Current Version</span>
                         <span class="text-white font-medium">${this.updateInfo.current}</span>
@@ -113,10 +113,10 @@ class HeaderComponent {
                     </div>
                 </div>
                 <div class="flex gap-3">
-                    <button id="update-view-release" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors">
+                    <button id="update-view-release" class="btn-glass btn-glass-primary flex-1">
                         View Release
                     </button>
-                    <button id="update-close-modal" class="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg transition-colors">
+                    <button id="update-close-modal" class="btn-glass btn-glass-secondary flex-1">
                         Close
                     </button>
                 </div>
@@ -159,13 +159,13 @@ class HeaderComponent {
         const streamsUrl = this.serverHost ? `http://${this.serverHost}:3001/streams` : '/streams';
 
         container.innerHTML = `
-            <header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-[var(--border-color)] bg-[var(--dark-bg)]/80 px-10 py-4 backdrop-blur-lg">
+            <header class="header-glass sticky top-0 z-50 flex items-center justify-between whitespace-nowrap px-10 py-4">
                 <!-- Logo Section -->
                 <div class="flex items-center gap-4 text-white">
                     <a href="http://localhost:3001" class="flex items-center gap-2 text-white hover:text-[var(--primary-color)] transition-colors">
                         <img src="/assets/lanstreamer-logo.png"
                              alt="LANStreamer"
-                             class="h-16 w-auto"
+                             class="h-16 w-auto logo-glow"
                              id="logo-image"
                              onerror="this.style.display='none'; document.getElementById('logo-fallback').style.display='flex';">
                         <div id="logo-fallback" style="display: none;" class="flex items-center">
@@ -178,7 +178,7 @@ class HeaderComponent {
                 <div class="flex items-center gap-3">
                     <!-- Update Icon: shows badge when update available; click opens modal or runs check -->
                     <button id="header-update-bell-btn"
-                            class="inline-flex items-center justify-center w-10 h-10 text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 border border-gray-600/30 hover:border-gray-500/50 rounded-lg transition-all duration-300"
+                            class="icon-btn text-gray-300 hover:text-white"
                             title="Check for Updates"
                             aria-label="Check for Updates">
                         <span class="material-symbols-rounded text-sm">system_update</span>
@@ -188,14 +188,14 @@ class HeaderComponent {
                     <div class="flex items-center gap-2">
                         <a href="${streamsUrl}"
                            target="_blank"
-                           class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 border border-gray-600/30 hover:border-gray-500/50 rounded-lg transition-all duration-300"
+                           class="btn-glass btn-glass-secondary"
                            title="Open Streams Page (for listeners)">
                             <span class="material-symbols-rounded text-sm">radio</span>
                             <span class="hidden sm:inline">Listen to Streams</span>
                         </a>
 
                         <button id="header-logout-btn"
-                               class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 border border-gray-600/30 hover:border-gray-500/50 rounded-lg transition-all duration-300"
+                               class="btn-glass btn-glass-secondary"
                                title="Logout from Admin Dashboard"
                                aria-label="Sign out of admin dashboard"
                                role="button">
@@ -318,17 +318,17 @@ class HeaderComponent {
             const modal = document.createElement('div');
             modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
             modal.innerHTML = `
-                <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
+                <div class="glass-card p-6 max-w-md mx-4">
                     <div class="flex items-center gap-3 mb-4">
                         <span class="material-symbols-rounded text-yellow-500">logout</span>
                         <h3 class="text-lg font-semibold text-white">Confirm Logout</h3>
                     </div>
                     <p class="text-gray-300 mb-6">Are you sure you want to sign out of the admin dashboard?</p>
                     <div class="flex justify-end gap-3">
-                        <button id="cancel-logout" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg transition-colors">
+                        <button id="cancel-logout" class="btn-glass btn-glass-secondary">
                             Cancel
                         </button>
-                        <button id="confirm-logout" class="px-4 py-2 bg-red-600 hover:bg-red-500 text-white rounded-lg transition-colors">
+                        <button id="confirm-logout" class="btn-glass btn-glass-danger">
                             Sign Out
                         </button>
                     </div>
diff --git a/public/components/IcecastManager.js b/public/components/IcecastManager.js
index 0b5a458..b779c63 100644
--- a/public/components/IcecastManager.js
+++ b/public/components/IcecastManager.js
@@ -414,7 +414,7 @@ class IcecastManager {
         const icecastAdminUrl = `http://${icecastHost}:${icecastPort}/admin/`;
 
         container.innerHTML = `
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <div class="flex justify-between items-start mb-4">
                     <div class="flex items-center gap-3">
                         <h2 class="text-xl font-bold text-white">Icecast Server</h2>
@@ -438,7 +438,7 @@ class IcecastManager {
 
                 <div class="space-y-5 ${!this.status.installed ? 'opacity-50' : ''}">
                     <!-- Server Status -->
-                    <div class="flex items-center gap-4 p-3 bg-[#111111] border border-[var(--border-color)] rounded-xl">
+                    <div class="flex items-center gap-4 p-3 glass-card-inset rounded-xl">
                         <span class="material-symbols-rounded text-2xl ${statusColor.replace('bg-', 'text-')}">${statusIcon}</span>
                         <div class="flex-1">
                             <p class="font-semibold text-white">${this.getServerStatusText()}</p>
diff --git a/public/index.html b/public/index.html
index cf3e4ac..b76c425 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,13 +13,410 @@
     <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
     <style type="text/tailwindcss">
         :root {
+          /* Existing colors */
           --primary-color: #00AEEF;
           --live-color: #4CAF50;
           --dark-bg: #111111;
           --card-bg: #1A1A1A;
           --border-color: #2F2F2F;
           --warning-color: #F85149;
+
+          /* Glass system */
+          --glass-bg-subtle: rgba(255, 255, 255, 0.03);
+          --glass-bg-mid: rgba(255, 255, 255, 0.05);
+          --glass-bg-strong: rgba(255, 255, 255, 0.08);
+          --glass-border-subtle: rgba(255, 255, 255, 0.08);
+          --glass-border-mid: rgba(255, 255, 255, 0.12);
+          --glass-border-strong: rgba(255, 255, 255, 0.2);
+
+          /* Gradient overlays */
+          --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          --gradient-green: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+          --gradient-red: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
+          --gradient-cyan: linear-gradient(135deg, #00AEEF 0%, #0088CC 100%);
+
+          /* Glow effects */
+          --glow-purple: 0 0 20px rgba(102, 126, 234, 0.4);
+          --glow-green: 0 0 20px rgba(56, 239, 125, 0.4);
+          --glow-red: 0 0 20px rgba(235, 51, 73, 0.4);
+          --glow-cyan: 0 0 20px rgba(0, 174, 239, 0.4);
+
+          /* Shadow system */
+          --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.2);
+          --shadow-mid: 0 4px 16px rgba(0, 0, 0, 0.3);
+          --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.4);
+          --shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+
+          /* Material Design animation curves */
+          --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
+          --ease-emphasized-decelerate: cubic-bezier(0, 0, 0.2, 1);
+          --ease-emphasized-accelerate: cubic-bezier(0.4, 0, 1, 1);
+          --ease-standard: cubic-bezier(0.4, 0, 0.6, 1);
+          --ease-standard-decelerate: cubic-bezier(0, 0, 0.6, 1);
+          --ease-standard-accelerate: cubic-bezier(0.4, 0, 1, 1);
+        }
+
+        /* ========================================
+           GLASS CARD SYSTEM (Foundation)
+           ======================================== */
+
+        /* Premium glass card base */
+        .glass-card {
+          background: var(--glass-bg-subtle);
+          border: 1px solid var(--glass-border-subtle);
+          border-radius: 16px;
+          backdrop-filter: blur(20px) saturate(180%);
+          -webkit-backdrop-filter: blur(20px) saturate(180%);
+          box-shadow: var(--shadow-glass);
+          transition: all 0.3s var(--ease-emphasized);
+        }
+
+        .glass-card:hover {
+          background: var(--glass-bg-mid);
+          border-color: var(--glass-border-mid);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+          transform: translateY(-2px);
+        }
+
+        /* Elevated variant (for key cards) */
+        .glass-card-elevated {
+          background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+
+        /* Inset variant (for nested content) */
+        .glass-card-inset {
+          background: rgba(0, 0, 0, 0.2);
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05);
+        }
+
+        /* ========================================
+           GRADIENT BACKGROUND SYSTEM
+           ======================================== */
+
+        .body-bg {
+          background:
+            /* Static gradient base */
+            linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%),
+            /* Animated ambient glow */
+            radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.15) 0%, transparent 40%),
+            radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.1) 0%, transparent 40%);
+          background-attachment: fixed;
+          min-height: 100vh;
+        }
+
+        /* Optional: subtle animation (respects prefers-reduced-motion) */
+        @keyframes ambientShift {
+          0%, 100% {
+            background-position: 0% 50%, 100% 50%;
+          }
+          50% {
+            background-position: 100% 50%, 0% 50%;
+          }
+        }
+
+        .body-bg-animated {
+          animation: ambientShift 20s ease-in-out infinite;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .body-bg-animated {
+            animation: none;
+          }
+        }
+
+        /* ========================================
+           PREMIUM GLASS BUTTONS
+           ======================================== */
+
+        /* Base button with glass effect */
+        .btn-glass {
+          position: relative;
+          padding: 12px 24px;
+          border-radius: 12px;
+          font-weight: 600;
+          font-size: 14px;
+          border: none;
+          cursor: pointer;
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          transition: all 0.3s var(--ease-emphasized);
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .btn-glass svg {
+          width: 18px;
+          height: 18px;
+        }
+
+        /* Primary - purple gradient */
+        .btn-glass-primary {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          color: white;
+        }
+
+        .btn-glass-primary:hover {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
+          border-color: rgba(255, 255, 255, 0.25);
+          box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+
+        /* Success - green gradient */
+        .btn-glass-success {
+          background: linear-gradient(135deg, rgba(17, 153, 142, 0.8) 0%, rgba(56, 239, 125, 0.8) 100%);
+          border: 1px solid rgba(56, 239, 125, 0.3);
+          color: white;
+        }
+
+        .btn-glass-success:hover {
+          box-shadow: 0 8px 24px rgba(56, 239, 125, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+
+        /* Danger - red gradient */
+        .btn-glass-danger {
+          background: linear-gradient(135deg, rgba(235, 51, 73, 0.8) 0%, rgba(244, 92, 67, 0.8) 100%);
+          border: 1px solid rgba(244, 92, 67, 0.3);
+          color: white;
+        }
+
+        .btn-glass-danger:hover {
+          box-shadow: 0 8px 24px rgba(235, 51, 73, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+
+        /* Secondary - glass outline */
+        .btn-glass-secondary {
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          color: rgba(255, 255, 255, 0.9);
+        }
+
+        .btn-glass-secondary:hover {
+          background: rgba(255, 255, 255, 0.08);
+          border-color: rgba(255, 255, 255, 0.15);
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+
+        /* ========================================
+           ENHANCED LIVE BADGE
+           ======================================== */
+
+        /* Live status badge */
+        .live-badge {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 14px;
+          background: rgba(56, 239, 125, 0.1);
+          border: 1px solid rgba(56, 239, 125, 0.3);
+          border-radius: 20px;
+          backdrop-filter: blur(12px);
+          color: #38ef7d;
+          font-size: 12px;
+          font-weight: 600;
+          box-shadow: 0 0 20px rgba(56, 239, 125, 0.2), inset 0 1px 0 rgba(56, 239, 125, 0.1);
+          animation: badgeGlow 3s ease-in-out infinite;
+        }
+
+        /* Pulsing dot indicator */
+        .live-badge::before {
+          content: '';
+          position: absolute;
+          left: 8px;
+          width: 8px;
+          height: 8px;
+          background: #38ef7d;
+          border-radius: 50%;
+          box-shadow: 0 0 8px #38ef7d;
+          animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+
+        .live-badge span {
+          padding-left: 12px;
+        }
+
+        @keyframes livePulse {
+          0%, 100% {
+            opacity: 1;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.5;
+            transform: scale(0.8);
+          }
+        }
+
+        @keyframes badgeGlow {
+          0%, 100% {
+            box-shadow: 0 0 20px rgba(56, 239, 125, 0.2), inset 0 1px 0 rgba(56, 239, 125, 0.1);
+          }
+          50% {
+            box-shadow: 0 0 30px rgba(56, 239, 125, 0.4), inset 0 1px 0 rgba(56, 239, 125, 0.15);
+          }
+        }
+
+        /* ========================================
+           GLASS FORM INPUTS
+           ======================================== */
+
+        .input-glass {
+          width: 100%;
+          padding: 12px 16px;
+          background: rgba(0, 0, 0, 0.3);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 10px;
+          color: white;
+          font-size: 14px;
+          backdrop-filter: blur(10px);
+          transition: all 0.2s var(--ease-emphasized);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .input-glass::placeholder {
+          color: rgba(255, 255, 255, 0.4);
+        }
+
+        .input-glass:focus {
+          outline: none;
+          border-color: rgba(102, 126, 234, 0.5);
+          background: rgba(0, 0, 0, 0.2);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
+
+        .input-glass:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .textarea-glass {
+          min-height: 100px;
+          resize: vertical;
+        }
+
+        /* ========================================
+           GLASS NAVIGATION BAR
+           ======================================== */
+
+        .header-glass {
+          position: sticky;
+          top: 0;
+          z-index: 100;
+          background: rgba(15, 12, 41, 0.7);
+          backdrop-filter: blur(20px) saturate(180%);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+        }
+
+        .logo-glow {
+          filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.5));
+        }
+
+        /* ========================================
+           ICON BUTTONS
+           ======================================== */
+
+        .icon-btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(10px);
+          transition: all 0.2s var(--ease-emphasized);
+        }
+
+        .icon-btn:hover {
+          background: rgba(255, 255, 255, 0.08);
+          transform: scale(1.05);
+        }
+
+        .icon-spin {
+          animation: spin 1s var(--ease-emphasized);
+        }
+
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+
+        /* ========================================
+           MICRO-INTERACTIONS
+           ======================================== */
+
+        /* Success toast */
+        .toast-success {
+          background: rgba(56, 239, 125, 0.1);
+          border: 1px solid rgba(56, 239, 125, 0.3);
+          backdrop-filter: blur(20px);
+          animation: slideIn 0.3s var(--ease-emphasized);
+        }
+
+        @keyframes slideIn {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+
+        /* Loading shimmer */
+        .shimmer {
+          position: relative;
+          overflow: hidden;
+        }
+
+        .shimmer::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+          animation: shimmer 2s infinite;
+        }
+
+        @keyframes shimmer {
+          to {
+            left: 100%;
+          }
+        }
+
+        /* Fade in animation */
+        .fade-in {
+          animation: fadeIn 0.3s var(--ease-emphasized);
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(-8px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        /* ========================================
+           LEGACY BUTTON STYLES (kept for compatibility)
+           ======================================== */
+
         .btn-gradient {
             background-image: linear-gradient(to right, #00AEEF, #0088CC);
             box-shadow: 0 4px 15px 0 rgba(0, 174, 239, 0.3);
@@ -47,7 +444,46 @@
                 box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
             }
         }
-        
+
+        /* ========================================
+           ACCESSIBILITY (Enhanced)
+           ======================================== */
+
+        /* Respect user motion preferences */
+        @media (prefers-reduced-motion: reduce) {
+          *,
+          *::before,
+          *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+          }
+
+          .stream-card-3d .stream-card:hover {
+            transform: none !important;
+          }
+
+          .body-bg-animated {
+            animation: none !important;
+          }
+        }
+
+        /* Focus states for keyboard navigation */
+        .btn-glass:focus-visible,
+        .input-glass:focus-visible,
+        .glass-card:focus-visible {
+          outline: 2px solid rgba(102, 126, 234, 0.6);
+          outline-offset: 2px;
+        }
+
+        /* Touch target sizing */
+        .btn-glass,
+        .glass-card,
+        .icon-btn {
+          min-height: 44px;
+          min-width: 44px;
+        }
+
         /* Loading animations */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
@@ -57,6 +493,8 @@
         .animate-fade-in {
             animation: fadeIn 0.3s ease-out;
         }
+
+        /* Range input with glass styling */
         input[type=range] {
             -webkit-appearance: none;
             appearance: none;
@@ -68,34 +506,49 @@
             outline: none;
         }
         input[type=range]::-webkit-slider-runnable-track {
-            background-color: #2F2F2F;
+            background-color: rgba(255, 255, 255, 0.1);
             border-radius: 0.5rem;
             height: 0.5rem;
+            backdrop-filter: blur(10px);
         }
         input[type=range]::-webkit-slider-thumb {
-            -webkit-appearance: none;appearance: none;
-            margin-top: -4px;background-color: var(--primary-color);
+            -webkit-appearance: none;
+            appearance: none;
+            margin-top: -4px;
+            background: linear-gradient(135deg, #00AEEF, #0088CC);
             border-radius: 50%;
             height: 1rem;
             width: 1rem;
-            box-shadow: 0 0 5px rgba(0, 174, 239, 0.5);
-         }
+            box-shadow: 0 0 10px rgba(0, 174, 239, 0.5);
+            transition: all 0.2s var(--ease-emphasized);
+        }
+        input[type=range]::-webkit-slider-thumb:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 15px rgba(0, 174, 239, 0.7);
+        }
         input[type=range]::-moz-range-track {
-            background-color: #2F2F2F;
+            background-color: rgba(255, 255, 255, 0.1);
             border-radius: 0.5rem;
             height: 0.5rem;
+            backdrop-filter: blur(10px);
         }
         input[type=range]::-moz-range-thumb {
-            background-color: var(--primary-color);
-            border: none;border-radius: 50%;
+            background: linear-gradient(135deg, #00AEEF, #0088CC);
+            border: none;
+            border-radius: 50%;
             height: 1rem;
             width: 1rem;
-            box-shadow: 0 0 5px rgba(0, 174, 239, 0.5);
+            box-shadow: 0 0 10px rgba(0, 174, 239, 0.5);
+            transition: all 0.2s var(--ease-emphasized);
+        }
+        input[type=range]::-moz-range-thumb:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 15px rgba(0, 174, 239, 0.7);
         }
       </style>
     </head>
     <body class="bg-[var(--dark-bg)]">
-    <div class="relative min-h-screen flex flex-col bg-gradient-to-br from-[#111111] to-[#0A0A0A] dark group/design-root overflow-x-hidden" style='font-family: Inter, "Noto Sans", sans-serif;'>
+    <div class="relative min-h-screen flex flex-col body-bg dark group/design-root overflow-x-hidden" style='font-family: Inter, "Noto Sans", sans-serif;'>
     <!-- Header Component Container -->
     <div id="header-container"></div>
     <main class="px-4 sm:px-6 lg:px-10 py-8">
@@ -172,7 +625,7 @@
 
         <!-- Audio Devices Static Template (Hidden - Dynamic content will be rendered) -->
         <div id="audio-devices-static" style="display: none;">
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <div class="flex items-center justify-between mb-4">
                     <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
                     <button class="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold text-white bg-[var(--primary-color)]/10 hover:bg-[var(--primary-color)]/20 border border-[var(--border-color)] transition-all duration-300">
@@ -184,7 +637,7 @@ <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
                     <div>
                         <h3 class="text-lg font-semibold text-white mb-3">Audio Input Devices</h3>
                         <div class="space-y-3">
-                            <div class="flex items-center justify-between p-3 bg-[#111111] rounded-xl border border-[var(--border-color)]">
+                            <div class="flex items-center justify-between p-3 glass-card-inset rounded-xl">
                                 <div class="flex items-center gap-3">
                                     <span class="material-symbols-rounded text-2xl text-[var(--live-color)]">mic</span>
                                     <div>
@@ -193,7 +646,7 @@ <h3 class="text-lg font-semibold text-white mb-3">Audio Input Devices</h3>
                                     </div>
                                 </div>
                             </div>
-                            <div class="flex items-center justify-between p-3 bg-[#111111] rounded-xl border border-[var(--border-color)]">
+                            <div class="flex items-center justify-between p-3 glass-card-inset rounded-xl">
                                 <div class="flex items-center gap-3">
                                     <span class="material-symbols-rounded text-2xl text-gray-600">mic_off</span>
                                     <div>
@@ -207,7 +660,7 @@ <h3 class="text-lg font-semibold text-white mb-3">Audio Input Devices</h3>
                     <div>
                         <h3 class="text-lg font-semibold text-white mb-3">Audio Output Devices</h3>
                         <div class="space-y-3">
-                            <div class="flex items-center justify-between p-3 bg-[#111111] rounded-xl border border-[var(--border-color)]">
+                            <div class="flex items-center justify-between p-3 glass-card-inset rounded-xl">
                                 <div class="flex items-center gap-3">
                                     <span class="material-symbols-rounded text-2xl text-gray-600">headphones</span>
                                     <div>
@@ -216,7 +669,7 @@ <h3 class="text-lg font-semibold text-white mb-3">Audio Output Devices</h3>
                                     </div>
                                 </div>
                             </div>
-                            <div class="flex items-center justify-between p-3 bg-[#111111] rounded-xl border border-[var(--border-color)]">
+                            <div class="flex items-center justify-between p-3 glass-card-inset rounded-xl">
                                 <div class="flex items-center gap-3">
                                     <span class="material-symbols-rounded text-2xl text-gray-600">speaker</span>
                                     <div>
@@ -233,13 +686,13 @@ <h3 class="text-lg font-semibold text-white mb-3">Audio Output Devices</h3>
 
         <!-- Video Sources Static Template -->
         <div id="video-sources-static" style="display: none;">
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <div class="flex items-center justify-between mb-4">
                     <h2 class="text-xl font-bold text-white">Video Sources captured by FFmpeg</h2>
                     <span class="text-xs text-blue-400 bg-blue-500/10 px-3 py-1.5 rounded-full border border-blue-500/20">Coming Soon</span>
                 </div>
                 <div class="space-y-4">
-                    <div class="flex items-center justify-center p-8 bg-[#111111] rounded-xl border border-[var(--border-color)] opacity-50">
+                    <div class="flex items-center justify-center p-8 glass-card-inset rounded-xl opacity-50">
                         <div class="text-center">
                             <span class="material-symbols-rounded text-4xl text-gray-600 mb-3 block">videocam_off</span>
                             <p class="font-semibold text-white mb-2">Video Streaming Feature</p>
@@ -255,7 +708,7 @@ <h2 class="text-xl font-bold text-white">Video Sources captured by FFmpeg</h2>
 
         <!-- Icecast Server Static Template -->
         <div id="icecast-server-static" style="display: none;">
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <div class="flex justify-between items-start mb-4">
                     <h2 class="text-xl font-bold text-white">Icecast Server</h2>
                     <div class="flex items-center gap-3">
@@ -279,7 +732,7 @@ <h2 class="text-xl font-bold text-white">Icecast Server</h2>
                     </div>
                     
                     <!-- Server Status -->
-                    <div class="flex items-center gap-4 p-3 bg-[#111111] border border-[var(--border-color)] rounded-xl">
+                    <div class="flex items-center gap-4 p-3 glass-card-inset rounded-xl">
                         <span class="material-symbols-rounded text-2xl text-red-500">code_off</span>
                         <div class="flex-1">
                             <p class="font-semibold text-white">Icecast Server Component Not Available</p>
@@ -316,9 +769,9 @@ <h2 class="text-xl font-bold text-white">Icecast Server</h2>
 
         <!-- Lobby Music Player Static Template -->
         <div id="lobby-music-static" style="display: none;">
-            <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+            <div class="glass-card p-6">
                 <h2 class="text-xl font-bold text-white mb-4">Lobby Background Music</h2>
-                <div class="bg-[#111111] border border-[var(--border-color)] rounded-xl p-4 space-y-4">
+                <div class="glass-card-inset rounded-xl p-4 space-y-4">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center gap-4">
                             <div class="w-2 h-10 rounded-full bg-gray-600"></div>
@@ -512,7 +965,7 @@ <h2 class="text-xl font-bold text-white mb-4">Lobby Background Music</h2>
                 if (!container) return;
 
                 container.innerHTML = `
-                    <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+                    <div class="glass-card p-6">
                         <div class="flex items-center justify-between mb-4">
                             <h2 class="text-xl font-bold text-white">📞 Contact Information</h2>
                         </div>
@@ -612,16 +1065,16 @@ <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
                 const finalOutputDevices = outputDevices;
 
                 container.innerHTML = `
-                    <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+                    <div class="glass-card p-6">
                         <div class="flex items-center justify-between mb-4">
                             <h2 class="text-xl font-bold text-white">🎤 Audio Input Sources for Streaming</h2>
-                            <button id="refresh-audio-devices" class="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold text-white bg-[var(--primary-color)]/10 hover:bg-[var(--primary-color)]/20 border border-[var(--border-color)] transition-all duration-300">
+                            <button id="refresh-audio-devices" class="btn-glass btn-glass-secondary">
                                 <span class="material-symbols-rounded text-base">refresh</span>
-                                Refresh Devices
+                                <span>Refresh Devices</span>
                             </button>
                         </div>
 
-                        <div class="mb-4 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+                        <div class="mb-4 p-3 glass-card-inset rounded-lg border border-blue-500/20">
                             <div class="flex items-start gap-2">
                                 <span class="material-symbols-rounded text-blue-400 text-lg mt-0.5">info</span>
                                 <div class="text-sm">
@@ -633,7 +1086,7 @@ <h2 class="text-xl font-bold text-white">🎤 Audio Input Sources for Streaming<
 
                         <div class="space-y-2">
                             ${finalInputDevices.map(device => `
-                                <div class="flex items-center gap-3 p-3 bg-[#111111] rounded-lg border border-[var(--border-color)] hover:border-[var(--primary-color)]/30 transition-all duration-300">
+                                <div class="flex items-center gap-3 p-3 glass-card-inset rounded-lg hover:border-[var(--primary-color)]/30 transition-all duration-300">
                                     <span class="material-symbols-rounded text-xl ${device.fallback ? 'text-gray-500' : (device.virtual ? 'text-purple-400' : 'text-[var(--live-color)]')}">
                                         ${device.virtual ? 'cable' : 'mic'}
                                     </span>
@@ -665,12 +1118,12 @@ <h2 class="text-xl font-bold text-white">🎤 Audio Input Sources for Streaming<
                 }
 
                 container.innerHTML = `
-                    <div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
+                    <div class="glass-card p-6">
                         <div class="flex items-center justify-between mb-4">
                             <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
-                            <button id="refresh-audio-devices" class="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold text-white bg-[var(--primary-color)]/10 hover:bg-[var(--primary-color)]/20 border border-[var(--border-color)] transition-all duration-300">
+                            <button id="refresh-audio-devices" class="btn-glass btn-glass-secondary">
                                 <span class="material-symbols-rounded text-base">refresh</span>
-                                Refresh device list
+                                <span>Refresh Devices</span>
                             </button>
                         </div>
                         <div class="text-center py-8">
@@ -784,7 +1237,7 @@ <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
                 const hasDefaultCredentials = criticalVulns.length > 0;
 
                 banner.innerHTML = `
-                    <div class="mb-8 p-4 rounded-xl bg-red-500/10 border border-red-500/50 text-red-400">
+                    <div class="mb-8 p-4 rounded-xl glass-card border border-red-500/50 text-red-400">
                         <div class="flex items-center justify-between">
                             <div class="flex items-center gap-3">
                                 <span class="material-symbols-rounded text-2xl">security</span>
@@ -828,7 +1281,7 @@ <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
                 // Critical vulnerabilities
                 criticalVulns.forEach(vuln => {
                     html += `
-                        <div class="bg-red-800/30 border border-red-500/30 rounded-lg p-3">
+                        <div class="glass-card-inset border border-red-500/30 rounded-lg p-3">
                             <div class="flex items-center gap-2 mb-2">
                                 <span class="material-symbols-rounded text-red-400">warning</span>
                                 <span class="font-semibold text-red-300">${vuln.message}</span>
@@ -852,7 +1305,7 @@ <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
                 // High severity vulnerabilities
                 highVulns.forEach(vuln => {
                     html += `
-                        <div class="bg-orange-800/30 border border-orange-500/30 rounded-lg p-3">
+                        <div class="glass-card-inset border border-orange-500/30 rounded-lg p-3">
                             <div class="flex items-center gap-2 mb-2">
                                 <span class="material-symbols-rounded text-orange-400">warning</span>
                                 <span class="font-semibold text-orange-300">${vuln.message}</span>
@@ -868,7 +1321,7 @@ <h2 class="text-xl font-bold text-white">Audio Devices captured by FFmpeg</h2>
 
                 // How to fix section
                 html += `
-                    <div class="bg-yellow-800/30 border border-yellow-500/30 rounded-lg p-3">
+                    <div class="glass-card-inset border border-yellow-500/30 rounded-lg p-3">
                         <h4 class="font-semibold text-yellow-300 mb-2 flex items-center gap-2">
                             <span class="material-symbols-rounded">build</span>
                             How to Fix:
@@ -1078,14 +1531,14 @@ <h4 class="font-semibold text-yellow-300 mb-2 flex items-center gap-2">
             showNotification(message, type = 'info') {
                 const notification = document.createElement('div');
                 notification.className = `fixed top-4 left-1/2 -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 max-w-md opacity-0`;
-                
+
                 const colors = {
-                    'info': 'bg-blue-500',
-                    'success': 'bg-green-500', 
-                    'error': 'bg-red-500'
+                    'info': 'glass-card border-blue-500/30 text-blue-300',
+                    'success': 'toast-success',  /* Uses glassmorphism toast styles */
+                    'error': 'glass-card border-red-500/30 text-red-300'
                 };
-                
-                notification.className += ` ${colors[type] || colors.info} text-white`;
+
+                notification.className += ` ${colors[type] || colors.info}`;
                 notification.innerHTML = `
                     <div class="flex items-start gap-3">
                         <span class="flex-1">${message}</span>
diff --git a/public/streams.html b/public/streams.html
index b126328..ebe3af0 100644
--- a/public/streams.html
+++ b/public/streams.html
@@ -10,20 +10,214 @@
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
     <style>
         :root {
-            --primary-color: #00AEEF;
-            --live-color: #4CAF50;
-            --dark-bg: #111111;
-            --card-bg: #1A1A1A;
-            --border-color: #2F2F2F;
-            --warning-color: #F85149;
+          /* Existing colors */
+          --primary-color: #00AEEF;
+          --live-color: #4CAF50;
+          --dark-bg: #111111;
+          --card-bg: #1A1A1A;
+          --border-color: #2F2F2F;
+          --warning-color: #F85149;
+
+          /* Glass system */
+          --glass-bg-subtle: rgba(255, 255, 255, 0.03);
+          --glass-bg-mid: rgba(255, 255, 255, 0.05);
+          --glass-bg-strong: rgba(255, 255, 255, 0.08);
+          --glass-border-subtle: rgba(255, 255, 255, 0.08);
+          --glass-border-mid: rgba(255, 255, 255, 0.12);
+          --glass-border-strong: rgba(255, 255, 255, 0.2);
+
+          /* Gradient overlays */
+          --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          --gradient-green: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+          --gradient-red: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
+          --gradient-cyan: linear-gradient(135deg, #00AEEF 0%, #0088CC 100%);
+
+          /* Glow effects */
+          --glow-purple: 0 0 20px rgba(102, 126, 234, 0.4);
+          --glow-green: 0 0 20px rgba(56, 239, 125, 0.4);
+          --glow-red: 0 0 20px rgba(235, 51, 73, 0.4);
+          --glow-cyan: 0 0 20px rgba(0, 174, 239, 0.4);
+
+          /* Shadow system */
+          --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.2);
+          --shadow-mid: 0 4px 16px rgba(0, 0, 0, 0.3);
+          --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.4);
+          --shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+
+          /* Material Design animation curves */
+          --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
+          --ease-emphasized-decelerate: cubic-bezier(0, 0, 0.2, 1);
+          --ease-emphasized-accelerate: cubic-bezier(0.4, 0, 1, 1);
+          --ease-standard: cubic-bezier(0.4, 0, 0.6, 1);
+          --ease-standard-decelerate: cubic-bezier(0, 0, 0.6, 1);
+          --ease-standard-accelerate: cubic-bezier(0.4, 0, 1, 1);
         }
-        
+
         body {
             font-family: 'Inter', sans-serif;
-            background: var(--dark-bg);
             min-height: 100vh;
         }
-        
+
+        /* Glass card base */
+        .glass-card {
+          background: var(--glass-bg-subtle);
+          border: 1px solid var(--glass-border-subtle);
+          border-radius: 16px;
+          backdrop-filter: blur(20px) saturate(180%);
+          -webkit-backdrop-filter: blur(20px) saturate(180%);
+          box-shadow: var(--shadow-glass);
+          transition: all 0.3s var(--ease-emphasized);
+        }
+
+        .glass-card:hover {
+          background: var(--glass-bg-mid);
+          border-color: var(--glass-border-mid);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+          transform: translateY(-2px);
+        }
+
+        /* Inset variant (for nested content) */
+        .glass-card-inset {
+          background: rgba(0, 0, 0, 0.2);
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05);
+        }
+
+        /* Glass header (v2 §7) */
+        .header-glass {
+          background: rgba(15, 12, 41, 0.7);
+          backdrop-filter: blur(20px) saturate(180%);
+          -webkit-backdrop-filter: blur(20px) saturate(180%);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+        }
+
+        /* Primary/secondary glass buttons for streams page */
+        .btn-glass-primary {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          color: white;
+        }
+        .btn-glass-primary:hover {
+          box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+        .btn-glass-secondary {
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          color: rgba(255, 255, 255, 0.9);
+        }
+        .btn-glass-secondary:hover {
+          background: rgba(255, 255, 255, 0.08);
+          border-color: rgba(255, 255, 255, 0.15);
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+
+        /* Body background */
+        .body-bg {
+          background:
+            linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%),
+            radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.15) 0%, transparent 40%),
+            radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.1) 0%, transparent 40%);
+          background-attachment: fixed;
+          min-height: 100vh;
+        }
+
+        /* Glass buttons */
+        .btn-glass {
+          position: relative;
+          padding: 12px 24px;
+          border-radius: 12px;
+          font-weight: 600;
+          font-size: 14px;
+          border: none;
+          cursor: pointer;
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          transition: all 0.3s var(--ease-emphasized);
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .btn-glass-success {
+          background: linear-gradient(135deg, rgba(17, 153, 142, 0.8) 0%, rgba(56, 239, 125, 0.8) 100%);
+          border: 1px solid rgba(56, 239, 125, 0.3);
+          color: white;
+        }
+
+        .btn-glass-success:hover {
+          box-shadow: 0 8px 24px rgba(56, 239, 125, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+
+        .btn-glass-danger {
+          background: linear-gradient(135deg, rgba(235, 51, 73, 0.8) 0%, rgba(244, 92, 67, 0.8) 100%);
+          border: 1px solid rgba(244, 92, 67, 0.3);
+          color: white;
+        }
+
+        .btn-glass-danger:hover {
+          box-shadow: 0 8px 24px rgba(235, 51, 73, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+
+        /* Live badge */
+        .live-badge {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 14px;
+          background: rgba(56, 239, 125, 0.1);
+          border: 1px solid rgba(56, 239, 125, 0.3);
+          border-radius: 20px;
+          backdrop-filter: blur(12px);
+          color: #38ef7d;
+          font-size: 12px;
+          font-weight: 600;
+          box-shadow: 0 0 20px rgba(56, 239, 125, 0.2), inset 0 1px 0 rgba(56, 239, 125, 0.1);
+          animation: badgeGlow 3s ease-in-out infinite;
+        }
+
+        .live-badge::before {
+          content: '';
+          position: absolute;
+          left: 8px;
+          width: 8px;
+          height: 8px;
+          background: #38ef7d;
+          border-radius: 50%;
+          box-shadow: 0 0 8px #38ef7d;
+          animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+
+        .live-badge span {
+          padding-left: 12px;
+        }
+
+        @keyframes livePulse {
+          0%, 100% {
+            opacity: 1;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.5;
+            transform: scale(0.8);
+          }
+        }
+
+        @keyframes badgeGlow {
+          0%, 100% {
+            box-shadow: 0 0 20px rgba(56, 239, 125, 0.2), inset 0 1px 0 rgba(56, 239, 125, 0.1);
+          }
+          50% {
+            box-shadow: 0 0 30px rgba(56, 239, 125, 0.4), inset 0 1px 0 rgba(56, 239, 125, 0.15);
+          }
+        }
+
+        /* Legacy styles */
         .pulse-live {
             animation: pulse-live 2s infinite;
         }
@@ -39,7 +233,7 @@
 
         /* ON AIR Button Styles */
         .on-air-button {
-            transition: all 0.3s ease;
+            transition: all 0.3s var(--ease-emphasized);
             border: 2px solid transparent;
         }
 
@@ -51,9 +245,9 @@
         }
 
         .on-air-button.inactive {
-            background: linear-gradient(135deg, #374151 0%, #1F2937 100%);
-            box-shadow: none;
-            border-color: #4B5563;
+            background: var(--glass-bg-mid);
+            box-shadow: var(--shadow-glass);
+            border-color: var(--glass-border-subtle);
         }
 
         @keyframes on-air-pulse {
@@ -68,7 +262,7 @@
         }
 
         .on-air-indicator {
-            transition: all 0.3s ease;
+            transition: all 0.3s var(--ease-emphasized);
         }
 
         .on-air-indicator.active {
@@ -109,16 +303,17 @@
             box-shadow: 0 6px 20px 0 rgba(248, 81, 73, 0.4);
         }
 
-        /* Volume Slider Styling */
+        /* Volume Slider Styling with glassmorphism */
         .volume-slider {
-            background: #374151;
+            background: transparent;
             outline: none;
         }
 
         .volume-slider::-webkit-slider-track {
-            background: #374151;
+            background: rgba(255, 255, 255, 0.1);
             height: 8px;
             border-radius: 4px;
+            backdrop-filter: blur(10px);
         }
 
         .volume-slider::-webkit-slider-thumb {
@@ -126,39 +321,57 @@
             width: 16px;
             height: 16px;
             border-radius: 50%;
-            background: var(--primary-color);
+            background: linear-gradient(135deg, #00AEEF, #0088CC);
             cursor: pointer;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-            transition: all 0.2s ease;
+            box-shadow: 0 0 10px rgba(0, 174, 239, 0.5);
+            transition: all 0.2s var(--ease-emphasized);
         }
 
         .volume-slider::-webkit-slider-thumb:hover {
-            background: #0088CC;
             transform: scale(1.1);
+            box-shadow: 0 0 15px rgba(0, 174, 239, 0.7);
         }
 
         .volume-slider::-moz-range-track {
-            background: #374151;
+            background: rgba(255, 255, 255, 0.1);
             height: 8px;
             border-radius: 4px;
             border: none;
+            backdrop-filter: blur(10px);
         }
 
         .volume-slider::-moz-range-thumb {
             width: 16px;
             height: 16px;
             border-radius: 50%;
-            background: var(--primary-color);
+            background: linear-gradient(135deg, #00AEEF, #0088CC);
             cursor: pointer;
             border: none;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 0 10px rgba(0, 174, 239, 0.5);
+            transition: all 0.2s var(--ease-emphasized);
+        }
+
+        .volume-slider::-moz-range-thumb:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 15px rgba(0, 174, 239, 0.7);
+        }
+
+        /* Accessibility */
+        @media (prefers-reduced-motion: reduce) {
+          *,
+          *::before,
+          *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+          }
         }
     </style>
 </head>
 <body class="text-white">
-    <div class="relative flex size-full min-h-screen flex-col bg-gradient-to-br from-[#111111] to-[#0A0A0A] dark group/design-root overflow-x-hidden" style='font-family: Inter, "Noto Sans", sans-serif;'>
+    <div class="relative flex size-full min-h-screen flex-col body-bg dark group/design-root overflow-x-hidden" style='font-family: Inter, "Noto Sans", sans-serif;'>
         <!-- Header -->
-        <header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-[var(--border-color)] bg-[var(--dark-bg)]/80 px-4 sm:px-6 lg:px-10 py-3 sm:py-4 backdrop-blur-lg">
+        <header class="header-glass sticky top-0 z-50 flex items-center justify-between whitespace-nowrap px-4 sm:px-6 lg:px-10 py-3 sm:py-4">
             <div class="flex items-center gap-2 sm:gap-4 text-white min-w-0">
                 <a href="/" class="flex items-center gap-2 text-white hover:text-[var(--primary-color)] transition-colors min-w-0">
                     <img src="/assets/lanstreamer-logo.png" alt="LANStreamer" class="h-12 sm:h-16 w-auto flex-shrink-0" id="logo-image" onerror="this.style.display='none'; document.getElementById('logo-fallback').style.display='flex';">