diff --git a/src/App.tsx b/src/App.tsx
index 9c43580b..8789969b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,7 +56,7 @@ import GenreDetail from './pages/GenreDetail';
 import ExportPickerModal from './components/ExportPickerModal';
 import AppUpdater from './components/AppUpdater';
 import TitleBar from './components/TitleBar';
-import { IS_LINUX, IS_WINDOWS } from './utils/platform';
+import { IS_LINUX, IS_MACOS, IS_WINDOWS } from './utils/platform';
 import { version } from '../package.json';
 import { useConnectionStatus } from './hooks/useConnectionStatus';
 import { useAuthStore } from './store/authStore';
@@ -112,6 +112,11 @@ function AppShell() {
     }).catch(() => {});
   }, []);
 
+  useEffect(() => {
+    const platform = IS_LINUX ? 'linux' : IS_MACOS ? 'macos' : IS_WINDOWS ? 'windows' : 'unknown';
+    document.documentElement.setAttribute('data-platform', platform);
+  }, []);
+
   useEffect(() => {
     const win = getCurrentWindow();
     // Check initial state (e.g. app launched maximised / already fullscreen).
diff --git a/src/styles/layout.css b/src/styles/layout.css
index b2446711..b2d4c6a2 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -1244,6 +1244,21 @@
   gap: 8px;
 }
 
+/* Liquid-glass floating bar — macOS + Windows only.
+   Inspired by PR #211 (kveld9), adapted to theme tokens and reduced
+   blur so it stays within WebView2 / WKWebView GPU budgets. Linux
+   always keeps the solid look from PR #216, regardless of compositor. */
+html[data-platform="macos"] .player-bar.floating,
+html[data-platform="windows"] .player-bar.floating {
+  background: color-mix(in srgb, var(--bg-player) 72%, transparent);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.45),
+    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 12%, transparent);
+}
+
 .player-track-info {
   display: flex;
   align-items: center;