Add likes, follows and playlist visibility; redesign web-player UI

Backend:
- New Likes feature (toggle/get liked tracks) and endpoints
- User follow/unfollow, listening stats, public user profile
- Playlist visibility (public/private) support
- Various auth and DTO/response adjustments to support the above

Frontend (web-player):
- New design system pass: theme tokens/mode (light/dark), glass menu,
  tabs bar, player dock/extras/queue components, mix tiles, artist link
- New routes: Liked, public user profile (/u/[id]), likes API proxy
- Search refactor: shared SearchBox component used by TopBar and
  MobileHeader (search now reachable on mobile), live results as you
  type instead of requiring Enter, dropped the "Buscando…" quick-result
  preview
- Removed now-unused components (MobileNav, CoverBadge, MixBentoTile,
  PlayPauseOverlay, SuggestionsTable, userDirectory)
- Design handoff reference docs added under web-player/design_handoff_musify_player
  and web-player/docs/design-system-refactor-plan.md

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web-player/src/lib/components/ui/EmptyState.svelte

@@ -13,24 +13,19 @@
 	let { icon: Icon, title, description, class: klass = '', actions }: Props = $props();
 </script>
 
-<div
-	class="flex flex-col items-center rounded-panel border border-dashed border-line px-6 py-16 text-center {klass}"
->
+<div class="flex flex-col items-center rounded-panel px-6 py-16 text-center {klass}">
 	{#if Icon}
-		<span
-			class="grid h-16 w-16 place-items-center rounded-full text-on-accent"
-			style="background:radial-gradient(circle at 30% 30%, color-mix(in oklch, var(--color-accent), white 15%), var(--color-accent))"
-		>
-			<Icon class="h-7 w-7" />
-		</span>
+		<Icon class="h-9 w-9 text-fg-2" strokeWidth={1.3} />
 	{/if}
 	{#if title}
-		<h3 class="mt-6 font-display text-2xl font-medium tracking-tight text-fg">{title}</h3>
+		<h3 class="mt-6 font-display text-xl font-semibold tracking-[-0.025em] text-fg">
+			{title}
+		</h3>
 	{/if}
 	{#if description}
-		<p class="mt-2 max-w-sm text-fg-2">{description}</p>
+		<p class="mt-2.5 max-w-sm text-[13px] leading-[1.65] text-fg-2">{description}</p>
 	{/if}
 	{#if actions}
-		<div class="mt-6 flex items-center gap-3">{@render actions()}</div>
+		<div class="mt-6 flex flex-wrap items-center justify-center gap-2.5">{@render actions()}</div>
 	{/if}
 </div>