Fix light-mode regression and finish design-system cleanup

A code-review pass on the previous commit found a real bug: the explore
genre tiles used var(--mf-ink) as a decorative gradient endpoint, but that
token is meant for text-on-accent and flips to white in light mode,
turning the tiles solid white. Replaces it with a new, deliberately
theme-invariant --mf-tile-shade token (same category as --mf-cover-grad).

Also: raises CollectionHeader's meta-line contrast in light mode
(text-muted, ~3:1, to text-fg-2), makes its actions prop optional so
pages without conditional actions don't render an empty wrapper, moves
AccountMenu.svelte into $lib/components/ui/ per the repo's own
componentization rule, adds the aria-expanded TopBar's trigger was
missing relative to MobileHeader's, and migrates the profile page
(u/[id]/+page.svelte) onto CollectionHeader — a sixth duplicate of the
same header pattern that the previous commit touched but missed.

web-player/src/lib/components/MobileHeader.svelte

@@ -4,7 +4,7 @@
 	import Folder from '@lucide/svelte/icons/folder';
 	import LogIn from '@lucide/svelte/icons/log-in';
 	import MenuItem from './ui/MenuItem.svelte';
-	import AccountMenu from './AccountMenu.svelte';
+	import AccountMenu from './ui/AccountMenu.svelte';
 
 	interface Props {
 		user: SessionUser | null;

web-player/src/lib/components/TopBar.svelte

@@ -7,7 +7,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import AccountMenu from './AccountMenu.svelte';
+	import AccountMenu from './ui/AccountMenu.svelte';
 
 	interface Props {
 		user: SessionUser | null;
@@ -107,11 +107,12 @@
 				{accountUrl}
 				panelClass="absolute top-full right-0 z-20 mt-2 w-52 overflow-hidden"
 			>
-				{#snippet trigger({ toggle })}
+				{#snippet trigger({ toggle, open })}
 					<button
 						type="button"
 						onclick={toggle}
 						aria-label="Tu cuenta"
+						aria-expanded={open}
 						class="block h-8.25 w-8.25 shrink-0 overflow-hidden rounded-full border border-line-strong transition active:scale-95"
 					>
 						{#if user.picture}

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

@@ -6,8 +6,8 @@
 	import Settings from '@lucide/svelte/icons/settings';
 	import Sun from '@lucide/svelte/icons/sun';
 	import Moon from '@lucide/svelte/icons/moon';
-	import MenuItem from './ui/MenuItem.svelte';
-	import GlassMenu from './ui/GlassMenu.svelte';
+	import MenuItem from './MenuItem.svelte';
+	import GlassMenu from './GlassMenu.svelte';
 	import { themeMode } from '$lib/theme/mode.svelte';
 
 	interface Props {

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

@@ -8,7 +8,7 @@
 		meta?: string;
 		align?: 'center' | 'end';
 		cover: Snippet;
-		actions: Snippet;
+		actions?: Snippet;
 	}
 
 	let { eyebrow, title, description, meta, align = 'end', cover, actions }: Props = $props();
@@ -33,11 +33,13 @@
 			<p class="mt-3 max-w-2xl text-sm text-fg-2 sm:text-base">{description}</p>
 		{/if}
 		{#if meta}
-			<p class="mt-3 text-sm text-muted">{meta}</p>
+			<p class="mt-3 text-sm text-fg-2">{meta}</p>
 		{/if}
 	</div>
 </div>
 
-<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
-	{@render actions()}
-</div>
+{#if actions}
+	<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
+		{@render actions()}
+	</div>
+{/if}

web-player/src/lib/theme/theme.css

@@ -36,6 +36,7 @@
 	--mf-logo-glow: 0 0 20px oklch(0.74 0.145 145 / 0.3);
 	--mf-cover-grad: linear-gradient(150deg, oklch(0.5 0.13 145), oklch(0.16 0.035 145));
 	--mf-liked-grad: linear-gradient(150deg, oklch(0.4 0.09 330), oklch(0.18 0.04 10));
+	--mf-tile-shade: rgba(9, 9, 12, 0.95);
 
 	--mf-accent: oklch(0.74 0.145 145);
 	--mf-accent-title: oklch(0.87 0.07 145);