feat(web/m7-363): per-route svelte:head titles for dynamic detail pages

web/src/routes/albums/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { createAlbumQuery } from '$lib/api/queries';
+  import { pageTitle } from '$lib/branding';
   import TrackRow from '$lib/components/TrackRow.svelte';
   import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
@@ -23,6 +24,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>{pageTitle(query.data?.title ? `Album · ${query.data.title}` : 'Album')}</title>
+</svelte:head>
+
 <div class="space-y-6">
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">

web/src/routes/artists/[id]/+page.svelte

@@ -2,6 +2,7 @@
   import { Play } from 'lucide-svelte';
   import { page } from '$app/state';
   import { createArtistQuery } from '$lib/api/queries';
+  import { pageTitle } from '$lib/branding';
   import AlbumCard from '$lib/components/AlbumCard.svelte';
   import LikeButton from '$lib/components/LikeButton.svelte';
   import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
@@ -48,6 +49,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>{pageTitle(query.data?.name ? `Artist · ${query.data.name}` : 'Artist')}</title>
+</svelte:head>
+
 <div class="space-y-4">
   <a href="/" class="text-sm text-text-secondary hover:text-text-primary">← Library</a>
 

web/src/routes/playlists/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
+  import { pageTitle } from '$lib/branding';
   import { Pencil, Trash2 } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
   import PlaylistTrackRow from '$lib/components/PlaylistTrackRow.svelte';
@@ -136,6 +137,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>{pageTitle(playlistQuery?.data?.name ? `Playlists · ${playlistQuery.data.name}` : 'Playlists')}</title>
+</svelte:head>
+
 <div class="mx-auto max-w-4xl px-4 py-6">
   {#if playlistQuery?.isPending}
     <p class="text-text-muted">Loading…</p>