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/ui/AccountMenu.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SessionUser } from '$lib/types';
+	import LogOut from '@lucide/svelte/icons/log-out';
+	import User from '@lucide/svelte/icons/user';
+	import Settings from '@lucide/svelte/icons/settings';
+	import Sun from '@lucide/svelte/icons/sun';
+	import Moon from '@lucide/svelte/icons/moon';
+	import MenuItem from './MenuItem.svelte';
+	import GlassMenu from './GlassMenu.svelte';
+	import { themeMode } from '$lib/theme/mode.svelte';
+
+	interface Props {
+		user: SessionUser;
+		accountUrl?: string | null;
+		panelClass?: string;
+		extraItems?: Snippet<[{ close: () => void }]>;
+		trigger: Snippet<[{ toggle: () => void; open: boolean }]>;
+	}
+
+	let {
+		user,
+		accountUrl,
+		panelClass = 'absolute top-full right-0 mt-2 w-52 overflow-hidden',
+		extraItems,
+		trigger
+	}: Props = $props();
+
+	let open = $state(false);
+	let menuRef: HTMLDivElement | undefined = $state();
+
+	function toggle() {
+		open = !open;
+	}
+
+	function close() {
+		open = false;
+	}
+
+	function onDocumentClick(event: MouseEvent) {
+		if (menuRef && !menuRef.contains(event.target as Node)) open = false;
+	}
+</script>
+
+<div class="relative" bind:this={menuRef}>
+	{@render trigger({ toggle, open })}
+
+	{#if open}
+		<GlassMenu class={panelClass}>
+			<MenuItem icon={User} label="Ver perfil" href="/u/{user.sub}" onclick={close} />
+			{@render extraItems?.({ close })}
+			{#if accountUrl}
+				<MenuItem
+					icon={Settings}
+					label="Ajustes"
+					href={accountUrl}
+					target="_blank"
+					onclick={close}
+				/>
+			{/if}
+			<MenuItem
+				icon={themeMode.current === 'dark' ? Sun : Moon}
+				label={themeMode.current === 'dark' ? 'Modo blanco' : 'Modo oscuro'}
+				onclick={() => themeMode.toggle()}
+			/>
+			<form method="POST" action="/logout" data-sveltekit-reload>
+				<MenuItem icon={LogOut} label="Cerrar sesión" type="submit" />
+			</form>
+		</GlassMenu>
+	{/if}
+</div>
+
+<svelte:window onclick={onDocumentClick} />

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}