ui: make player, top bar and bottom nav opaque

Drop the semi-transparent backgrounds and backdrop blur for a cleaner, solid look.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/layout/BottomNav.tsx

@@ -28,7 +28,7 @@ export function BottomNav() {
   if (isAdmin) tabs.push({ to: '/admin/users', label: 'Admin', icon: <Shield size={20} /> })
 
   return (
-    <nav className="fixed inset-x-0 bottom-0 z-30 flex h-16 border-t border-border bg-surface/95 backdrop-blur md:hidden">
+    <nav className="fixed inset-x-0 bottom-0 z-30 flex h-16 border-t border-border bg-surface md:hidden">
       {tabs.map((tab) => (
         <NavLink
           key={tab.label}

src/components/layout/TopBar.tsx

@@ -19,7 +19,7 @@ export function TopBar() {
   }
 
   return (
-    <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-bg/85 px-5 backdrop-blur md:px-8">
+    <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-bg px-5 md:px-8">
       <form onSubmit={onSubmit} className="relative w-full max-w-md">
         <Search
           size={16}

src/components/player/PlayerBar.tsx

@@ -51,7 +51,7 @@ export function PlayerBar() {
   return (
     <div
       className={cn(
-        'fixed bottom-16 left-0 right-0 z-40 border-t border-border bg-surface/95 backdrop-blur md:bottom-0',
+        'fixed bottom-16 left-0 right-0 z-40 border-t border-border bg-surface md:bottom-0',
         // On desktop the bar starts at the sidebar's right edge so it never covers the
         // sidebar's own controls (Settings / collapse).
         sidebarCollapsed ? 'md:left-[68px]' : 'md:left-60',