Add anonymous listening support and redesign web-player UI

Backend:
- Expose GET /config/playback so the frontend can detect whether
  anonymous listening is enabled without requiring auth
- Wire anonymous access through track streaming and YouTube resolve flows

Frontend:
- Allow browsing/listening without a session when the backend enables it
- Redesign Inicio, Sidebar and top bar with a new dark theme, typography,
  and layout (top bar with live quick-search, sticky/blurred on scroll)
- Populate Top música, Popular and Recomendados with real Musify +
  YouTube Music data instead of placeholders
- Various shape, spacing, color and animation refinements across the
  redesigned components

web-player/src/routes/+layout.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import '@fontsource-variable/inter/index.css';
-	import '@fontsource-variable/sora/index.css';
+	import '@fontsource-variable/manrope/index.css';
+	import '@fontsource-variable/bricolage-grotesque/opsz.css';
 	import '$lib/theme/theme.css';
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
 	import PlayerBar from '$lib/components/player/PlayerBar.svelte';
 	import Sidebar from '$lib/components/Sidebar.svelte';
+	import TopBar from '$lib/components/TopBar.svelte';
 	import MobileHeader from '$lib/components/MobileHeader.svelte';
 	import MobileNav from '$lib/components/MobileNav.svelte';
 	import { player } from '$lib/player/player.svelte';
@@ -32,10 +33,6 @@
 		player.toggle();
 	}
 
-	$effect(() => {
-		document.documentElement.classList.toggle('home', page.url.pathname === '/');
-	});
-
 	function parseAccent(value: string): { c: number; h: number } | null {
 		const m = /oklch\(\s*[\d.]+%?\s+([\d.]+)\s+([\d.]+)/.exec(value);
 		return m ? { c: parseFloat(m[1]), h: parseFloat(m[2]) } : null;
@@ -78,7 +75,7 @@
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 
-{#if isAuthPage || !data.user}
+{#if isAuthPage || (!data.user && !data.allowAnonymousListening)}
 	<div class="min-h-screen bg-bg text-fg antialiased">
 		{@render children()}
 	</div>
@@ -87,6 +84,7 @@
 		<Sidebar user={data.user} />
 		<div class="flex min-w-0 flex-1 flex-col">
 			<MobileHeader user={data.user} />
+			<TopBar user={data.user} />
 			<main
 				class="flex-1 transition-[padding]"
 				style="padding-bottom:calc(var(--mf-nav-h) + var(--mf-safe-b) + {hasTrack
@@ -100,7 +98,7 @@
 			{#if hasTrack}
 				<PlayerBar />
 			{/if}
-			<MobileNav />
+			<MobileNav user={data.user} />
 		</div>
 	</div>
 {/if}