diff --git a/src/App.svelte b/src/App.svelte
index d08ac28..f9c5d80 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -53,7 +53,7 @@
        cancels the pane's top padding so a page's artwork can run underneath it,
        and the page restores that inset for its own content. Without it the page
        renders 24px too high; with it but not listed here, 24px too low. */
-    const BAR_VIEWS = new Set(["catalogArtist", "catalogAlbum"]);
+    const BAR_VIEWS = new Set(["catalogArtist", "catalogAlbum", "catalog"]);
 
     initEvents();
     autoConnect();
@@ -180,6 +180,12 @@
            it: the glass bar bleeds up over it, cancels it for what follows, and
            each page under the bar restores it as its own padding-top. */
         --pane-pad: 24px;
+        /* The glass bar's height, declared HERE rather than on the bar so pages
+           can clear it. A page with a hero (artist, album) wants its artwork to
+           run underneath the bar and only takes --pane-pad back; a page with no
+           artwork behind the bar (search) has to start below it, or its first
+           heading sits under the frost at rest. */
+        --bar-h: 46px;
         border-radius: var(--radius);
         overflow-y: auto;
         overflow-anchor: none;
diff --git a/src/components/AlbumCard.svelte b/src/components/AlbumCard.svelte
index fcc47a8..ad1e8b3 100644
--- a/src/components/AlbumCard.svelte
+++ b/src/components/AlbumCard.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { getArt, ui } from "../lib/state.svelte.js";
+    import { getArt, openLibraryAlbum } from "../lib/state.svelte.js";
     import Icon from "./Icon.svelte";
 
     let { album, onselect = null } = $props();
@@ -15,8 +15,9 @@
             onselect(album);
             return;
         }
-        ui.view = "library";
-        ui.albumId = album.id;
+        // One album page for everything — the old in-library album view is
+        // gone, so a local record opens the same page a catalog record does.
+        void openLibraryAlbum(album.id);
     }
 </script>
 
diff --git a/src/components/GlassBar.svelte b/src/components/GlassBar.svelte
index 0c07947..8397224 100644
--- a/src/components/GlassBar.svelte
+++ b/src/components/GlassBar.svelte
@@ -125,8 +125,12 @@
 
 <style>
     .glassbar {
-        --bar-h: 46px;
-        /* Sticky rather than absolute, so the bar pins to the top of the pane
+        /* --bar-h is INHERITED from the scroll pane (App.svelte), not declared
+           here: pages need the same number to decide whether to clear the bar
+           or run their artwork under it, and two copies would drift. Safe
+           because this component is only ever mounted inside that pane — see
+           the note at the top of the file.
+           Sticky rather than absolute, so the bar pins to the top of the pane
            and stays there as the page scrolls, and `top` pins it flush against
            the very top of the pane over that padding.
 
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index e55a213..dc6981c 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -12,6 +12,8 @@
         toggleSidebar,
         goToView,
         openCatalogAlbum,
+        openAlbumByName,
+        openLibraryAlbum,
         getArt,
     } from "../lib/state.svelte.js";
     import * as api from "../lib/api.js";
@@ -137,7 +139,7 @@
         return !!a.art_path && a.art_path === playingArt;
     }
 
-    function openRecent(a) {
+    async function openRecent(a) {
         if (a.kind === "catalog" && a.catalog_album_id) {
             // The catalog page, not the old library album view — streamed
             // records live in the catalog. The seed paints title/artist/cover
@@ -152,7 +154,17 @@
             });
             return;
         }
-        goToView("library", { albumId: a.album_id });
+        // A library row has no catalog id to open with — local albums carry no
+        // catalog identity at all (`albums.mbid` is null and never surfaced) —
+        // so the record is resolved by artist + title, where BOTH must match
+        // normalized or nothing opens. That namesake guard lives in
+        // openAlbumByName and is the reason this can't just take a first hit.
+        //
+        // Either way it is the SAME album page: a record no catalog has (Panda
+        // Bear's "A ? of WHEN", verified live) opens from the library's own
+        // data instead. There is no second album view to fall back to.
+        if (await openAlbumByName(a.artist, a.title)) return;
+        void openLibraryAlbum(a.album_id);
     }
 
     $effect(() => {
diff --git a/src/lib/api.js b/src/lib/api.js
index 26162d3..bdb2f03 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -33,13 +33,26 @@ const checkedArtistIdentity = (artistId, artist) =>
         return payload;
     });
 
-const checkedAlbumPayload = (albumId) =>
-    invoke("catalog_album", { albumId }).then((payload) => {
+// The id is COERCED to a number here, not merely passed along. Deezer album
+// ids reach the frontend as strings from two places — SQLite stores the
+// recently-played anchor as TEXT, and page seeds carry `String(id)` — and the
+// Rust command takes a u64, so a string argument is rejected outright with
+// "invalid type: string … expected u64". That made every streamed row in the
+// sidebar's history dead on click (2026-08-01). The identity check below still
+// compares through `sameArtistId`, which normalizes both sides, so a numeric
+// id and its string form remain the same album.
+const checkedAlbumPayload = (albumId) => {
+    const numeric = typeof albumId === "number" ? albumId : Number(String(albumId).trim());
+    if (!Number.isFinite(numeric)) {
+        return Promise.reject(new Error(`catalog_album: not an album id: ${albumId}`));
+    }
+    return invoke("catalog_album", { albumId: numeric }).then((payload) => {
         if (!sameArtistId(payload?.album?.id, albumId)) {
             throw new Error("catalog_album returned a mismatched album identity");
         }
         return payload;
     });
+};
 
 export const appStatus = () => invoke("app_status");
 export const getCredentials = () => invoke("get_credentials");
diff --git a/src/lib/state.svelte.js b/src/lib/state.svelte.js
index 672e2e8..31311c4 100644
--- a/src/lib/state.svelte.js
+++ b/src/lib/state.svelte.js
@@ -1279,6 +1279,21 @@ export async function openEntry(entry) {
         case "catalogArtist":
             return openCatalogArtist(entry.artistId);
         case "catalogAlbum":
+            // A local record lives on this same view but is composed from the
+            // library rather than fetched — the back arrow has to route on the
+            // id's realm or it would ask the catalog for a `lib:` id.
+            if (isLibraryAlbumId(entry.albumId)) {
+                return openLibraryAlbum(libraryAlbumIdOf(entry.albumId), {
+                    seed: entry.art
+                        ? {
+                              cover: entry.art,
+                              title: entry.label ?? null,
+                              artist: entry.artist ?? null,
+                              kind: null,
+                          }
+                        : null,
+                });
+            }
             // `recordVisit` stored this record's cover, so going back paints
             // the skeleton with the artwork rather than a grey block. Older
             // entries predate that field and simply seed nothing.
@@ -2413,26 +2428,149 @@ export async function openArtistByName(name) {
     }
 }
 
+/** Local library albums are rendered by the SAME page as catalog records —
+ * there is no second album view. Their ids are namespaced so they can never
+ * collide with a Deezer album id in the page cache or an identity check.
+ * `openCatalogAlbum` refuses these; they go through `openLibraryAlbum`. */
+const LIB_ALBUM_PREFIX = "lib:";
+export const isLibraryAlbumId = (id) =>
+    typeof id === "string" && id.startsWith(LIB_ALBUM_PREFIX);
+export const libraryAlbumIdOf = (id) =>
+    isLibraryAlbumId(id) ? Number(id.slice(LIB_ALBUM_PREFIX.length)) : null;
+
+/**
+ * Open a LOCAL album on the album page. Same view, same shape — a library
+ * record simply has no catalog counterpart to fetch, so the page is composed
+ * from what the library itself knows: its tracks, their durations and
+ * bitrates, and the cover already on disk.
+ *
+ * The remote-only sections (listeners, editions, prose) are absent rather than
+ * empty; the page hides what it has no data for. Playback stays LOCAL — the
+ * point of a library record is the file you already have.
+ */
+export async function openLibraryAlbum(albumId, opts = {}) {
+    const id = Number(albumId);
+    if (!Number.isFinite(id)) return;
+    captureScroll();
+    // A verified navigation supersedes any still-running name search, exactly
+    // as openCatalogAlbum does — otherwise a slow resolve can land on top.
+    albumResolveRequest += 1;
+    const request = ++albumPageRequest;
+    ui.view = "catalogAlbum";
+    ui.albumId = null;
+    catalog.albumPage = null;
+    catalog.albumLoading = true;
+    catalog.albumSeed = opts.seed ?? null;
+    catalog.error = "";
+    const active = () => request === albumPageRequest && ui.view === "catalogAlbum";
+    try {
+        if (!libraryStore.loaded) await refreshLibrary();
+        const meta = libraryStore.albums.find((a) => a.id === id) ?? null;
+        if (!meta) throw new Error("album is not in your library");
+        const [tracks, cover] = await Promise.all([
+            api.albumTracks(id),
+            getArt(meta.art_path).catch(() => null),
+        ]);
+        if (!active()) return;
+        catalog.albumPage = {
+            local: true,
+            libraryAlbumId: id,
+            libraryTracks: tracks,
+            artPath: meta.art_path ?? null,
+            album: {
+                id: `${LIB_ALBUM_PREFIX}${id}`,
+                title: meta.title,
+                artist: meta.artist,
+                cover: cover ?? null,
+                release_date: meta.year ? String(meta.year) : null,
+                record_type: "album",
+                track_count: tracks.length,
+                is_soundtrack: false,
+            },
+            // Shaped like catalog tracks so the tracklist renders unchanged;
+            // `path`/`bitrate_kbps` ride along for the local row and playback.
+            tracks: tracks.map((t) => ({
+                id: `${LIB_ALBUM_PREFIX}t${t.id}`,
+                title: t.title,
+                artist: t.artist || meta.artist,
+                album: meta.title,
+                album_id: null,
+                cover: cover ?? null,
+                duration_secs: t.duration_secs ?? null,
+                preview: null,
+                track_no: t.track_no ?? null,
+                unreleased: false,
+                path: t.path,
+                bitrate_kbps: t.bitrate_kbps ?? null,
+            })),
+            album_plays: null,
+            album_listeners: null,
+            totals_summed: false,
+        };
+        recordVisit({
+            view: "catalogAlbum",
+            label: meta.title,
+            albumId: `${LIB_ALBUM_PREFIX}${id}`,
+            artist: meta.artist,
+            art: cover ?? null,
+        });
+    } catch (error) {
+        if (active()) {
+            catalog.error = String(error);
+            catalog.albumPage = null;
+        }
+    } finally {
+        if (active()) catalog.albumLoading = false;
+    }
+}
+
+/** Confirmed answers from `openAlbumByName`, keyed on the normalized pair:
+ * an album id, or `null` for a record no catalog has. Both are worth keeping —
+ * a local-only album misses every time, and remembering the miss is what makes
+ * a second click instant instead of re-running the search. Only SETTLED
+ * answers land here; a transport failure stays retryable. */
+const albumNameResolves = new Map();
+
 /** Resolve an album by artist + title (via catalog search) and open its page —
- * used by the now-playing album/song links when there's no catalog albumId
- * (e.g. a local library track). */
+ * used by the now-playing album/song links and the sidebar's recently-played
+ * rows when there's no catalog albumId (e.g. a local library track, which
+ * carries no catalog identity of any kind).
+ *
+ * Returns the album id it opened, or `null` when nothing matched — callers
+ * that have a fallback destination need to know which happened. */
 export async function openAlbumByName(artist, title, opts = {}) {
     const request = ++albumResolveRequest;
-    if (opts.albumId != null) return openCatalogAlbum(opts.albumId, opts);
-    if (!artist || !title) return;
+    if (opts.albumId != null) {
+        openCatalogAlbum(opts.albumId, opts);
+        return opts.albumId;
+    }
+    if (!artist || !title) return null;
+    const na = catNorm(artist);
+    const nt = catNorm(title);
+    const key = `${na}|${nt}`;
+    if (albumNameResolves.has(key)) {
+        const id = albumNameResolves.get(key);
+        if (id != null) openCatalogAlbum(id, opts);
+        return id;
+    }
     try {
         const res = await api.catalogSearch(`${artist} ${title}`);
-        if (request !== albumResolveRequest) return;
-        const na = catNorm(artist);
-        const nt = catNorm(title);
+        if (request !== albumResolveRequest) return null;
         // A title-only or first-result fallback can cross into a namesake's
         // catalog. Without a verified id, both artist and title must match.
         const match = res.albums?.find(
             (album) => catNorm(album.artist) === na && catNorm(album.title) === nt,
         );
-        if (match) openCatalogAlbum(match.id, opts);
+        // A successful search that matched nothing is an answer ABOUT THE
+        // RECORD: this artist has no such album in the catalog. Negative-cache
+        // it. A throw below is an answer about the network, and is not cached.
+        albumNameResolves.set(key, match ? match.id : null);
+        if (!match) return null;
+        openCatalogAlbum(match.id, opts);
+        return match.id;
     } catch {
         // no album match — leave the view as-is
+        return null;
     }
 }
 
diff --git a/src/views/CatalogAlbum.svelte b/src/views/CatalogAlbum.svelte
index 63f3411..09040e1 100644
--- a/src/views/CatalogAlbum.svelte
+++ b/src/views/CatalogAlbum.svelte
@@ -19,6 +19,7 @@
         openCatalogAlbum,
         openAlbumFromPreviewItem,
         toggleShuffle,
+        playAlbum,
         ui,
     } from "../lib/state.svelte.js";
     import { openPreview } from "../lib/preview/previewSession.svelte.js";
@@ -32,10 +33,17 @@
 
     const page = $derived(catalog.albumPage); // { album, tracks, album_plays, … }
     const album = $derived(page?.album ?? null);
+    /** A LOCAL library record on this same page. Everything remote is simply
+     * absent — no listeners, no editions, no prose, no cover upgrade to chase
+     * — and playback goes to the files on disk instead of the resolver. */
+    const isLocal = $derived(Boolean(page?.local));
 
     // Upgrade this album's cover to the highest verified-same-artwork source.
     let coveredId = null;
     $effect(() => {
+        // A local cover is already the file on disk — there is no better
+        // source to go looking for, and the upgrade path expects a URL.
+        if (isLocal) return;
         if (album?.cover && album.id !== coveredId) {
             coveredId = album.id;
             resolveCovers([album], album.artist);
@@ -566,7 +574,20 @@
         else flagSaveError(`t${t.id}`);
     }
 
-    const playTrack = (t) =>
+    const playTrack = (t) => {
+        // A local record plays the file you already have — queueing the whole
+        // album from the clicked row, the way the library always did — rather
+        // than sending a track you own back through the resolver.
+        if (isLocal) {
+            const at = page.libraryTracks.findIndex((lt) => lt.path === t.path);
+            playAlbum(
+                page.libraryTracks,
+                `${album.artist} — ${album.title}`,
+                at < 0 ? 0 : at,
+                page.artPath,
+            );
+            return;
+        }
         streamSong(album.artist, t.title, {
             cover: t.cover ?? album.cover,
             trackId: t.id,
@@ -574,6 +595,7 @@
             album: album.title || null,
             expectSecs: t.duration_secs ?? null,
         });
+    };
 
     function year(a) {
         return a?.release_date?.slice(0, 4) ?? "";
@@ -736,17 +758,30 @@
                             class="pill"
                             disabled={hasUnreleased}
                             title={hasUnreleased ? "Not released yet" : ""}
-                            onclick={() => streamCatalogAlbum(album)}
+                            onclick={() =>
+                                isLocal
+                                    ? playAlbum(
+                                          page.libraryTracks,
+                                          `${album.artist} — ${album.title}`,
+                                          0,
+                                          page.artPath,
+                                      )
+                                    : streamCatalogAlbum(album)}
                         >
                             <Icon name="play" size={12} /> Play
                         </button>
-                        <button class="pill ghost" disabled={hasUnreleased} onclick={saveAlbumAction}>
-                            <Icon
-                                name={saved.album === "ok" ? "check" : saved.album === "err" ? "x" : "download"}
-                                size={13}
-                            />
-                            {saved.album === "ok" ? "Saved" : saved.album === "err" ? "No sources" : "Save"}
-                        </button>
+                        <!-- Save is "fetch this from the network into your
+                             library". A local record is already there, so the
+                             control has nothing to do and is not offered. -->
+                        {#if !isLocal}
+                            <button class="pill ghost" disabled={hasUnreleased} onclick={saveAlbumAction}>
+                                <Icon
+                                    name={saved.album === "ok" ? "check" : saved.album === "err" ? "x" : "download"}
+                                    size={13}
+                                />
+                                {saved.album === "ok" ? "Saved" : saved.album === "err" ? "No sources" : "Save"}
+                            </button>
+                        {/if}
                         <button
                             class="iconbtn"
                             class:on={player.shuffle}
@@ -936,10 +971,16 @@
                 {#if nTracks}<span class="gpill">{nTracks}</span>{/if}
                 {#if runtime}<span class="gpill">{runtime}</span>{/if}
             </div>
+            <!-- Attribution has to be true of THIS page: a local record's
+                 facts were read off the files, not fetched from a catalogue. -->
             <p class="srcs">
                 {#if info?.description}<b>Words</b> Wikipedia · {/if}
                 {#if albumPlays || albumListeners}<b>Counts</b> Last.fm · {/if}
-                <b>Catalogue</b> Deezer + MusicBrainz
+                {#if isLocal}
+                    <b>Catalogue</b> your library
+                {:else}
+                    <b>Catalogue</b> Deezer + MusicBrainz
+                {/if}
             </p>
         {/if}
     {/if}
diff --git a/src/views/CatalogSearch.svelte b/src/views/CatalogSearch.svelte
index 7649da7..dd57b73 100644
--- a/src/views/CatalogSearch.svelte
+++ b/src/views/CatalogSearch.svelte
@@ -194,6 +194,14 @@
     .catalog {
         display: flex;
         flex-direction: column;
+        /* The glass bar cancels the pane's top padding so a page's artwork can
+           run underneath it, and each page under the bar hands that inset back.
+           Unlike the artist and album pages there is no hero here for the bar to
+           float over, so the results also have to CLEAR the bar's height —
+           without it the "Top result" heading sits under the frost at rest.
+           They still slide under it on scroll, which is what the frost is for.
+           See the note by BAR_VIEWS and --bar-h in App.svelte. */
+        padding-top: calc(var(--pane-pad) + var(--bar-h));
     }
 
     .hint {
diff --git a/src/views/Library.svelte b/src/views/Library.svelte
index 5abf15f..d4532ec 100644
--- a/src/views/Library.svelte
+++ b/src/views/Library.svelte
@@ -3,19 +3,14 @@
     import { slide } from "svelte/transition";
     import {
         libraryStore,
-        ui,
         getArt,
-        evictArt,
         playAlbum,
         player,
-        playlistStore,
-        refreshPlaylists,
     } from "../lib/state.svelte.js";
     import * as api from "../lib/api.js";
     import AlbumCard from "../components/AlbumCard.svelte";
     import Icon from "../components/Icon.svelte";
 
-    let showPlaylistMenu = $state(false);
     let expandedArtist = $state(null);
     let inlineAlbumId = $state(null);
     let inlineTracks = $state([]);
@@ -238,66 +233,13 @@
         revealRaf = requestAnimationFrame(step);
     }
 
-    async function addAlbumToPlaylist(playlistId) {
-        showPlaylistMenu = false;
-        const payload = tracks.map((t) => ({
-            title: t.title,
-            artist: t.artist,
-            duration_secs: t.duration_secs ?? null,
-            path: t.path,
-            art_path: album?.art_path ?? null,
-        }));
-        await api.addToPlaylist(playlistId, payload);
-        await refreshPlaylists();
-    }
-
-    async function newPlaylistWithAlbum() {
-        const id = await api.createPlaylist(album.title);
-        await addAlbumToPlaylist(id);
-    }
-
-    let tracks = $state([]);
-    let art = $state(null);
-    let refreshingArt = $state(false);
-    let artError = $state("");
-
-    async function refreshArt() {
-        if (!album || refreshingArt) return;
-        refreshingArt = true;
-        artError = "";
-        try {
-            const path = await api.refreshAlbumArt(album.id);
-            evictArt(path);
-            forgetArtistArt(album.artist);
-            art = await getArt(path);
-        } catch (e) {
-            artError = String(e);
-        } finally {
-            refreshingArt = false;
-        }
-    }
-
-    const album = $derived(libraryStore.albums.find((a) => a.id === ui.albumId) ?? null);
-
-    $effect(() => {
-        if (!album) return;
-        tracks = [];
-        art = null;
-        api.albumTracks(album.id).then((t) => (tracks = t));
-        getArt(album.art_path).then((url) => (art = url));
-    });
-
+    // Still used by the inline album expander in the artist rows below.
     function fmtDuration(s) {
         if (s == null) return "";
         return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
     }
-
-    const nowPlayingPath = $derived(
-        player.queueIndex >= 0 ? player.queue[player.queueIndex]?.path : null,
-    );
 </script>
 
-{#if !album}
     <div class="library">
             <h1>Artists</h1>
             {#if libraryStore.albums.length === 0}
@@ -369,87 +311,6 @@
             </section>
             {/if}
     </div>
-{:else}
-    <div class="album-page">
-        <button class="back" onclick={() => (ui.albumId = null)}>
-            <Icon name="chevron-left" size={16} /> Library
-        </button>
-
-        <header>
-            {#if art}
-                <img class="cover" src={art} alt="" draggable="false" />
-            {:else}
-                <div class="cover placeholder"><Icon name="disc" size={56} /></div>
-            {/if}
-            <div class="head-meta">
-                <p class="kind">Album</p>
-                <h1>{album.title}</h1>
-                <p class="line">
-                    <strong>{album.artist}</strong>
-                    {album.year ? ` · ${album.year}` : ""} · {album.track_count} tracks
-                </p>
-                <div class="actions">
-                    <button
-                        class="play-all"
-                        onclick={() =>
-                            playAlbum(tracks, `${album.artist} — ${album.title}`, 0, album.art_path)}
-                        disabled={tracks.length === 0}
-                    >▶ Play</button>
-                    <div class="add-menu">
-                        <button
-                            class="refresh-art"
-                            title="Add album to a playlist"
-                            onclick={() => (showPlaylistMenu = !showPlaylistMenu)}
-                            disabled={tracks.length === 0}
-                        ><Icon name="list-plus" size={15} /> Playlist</button>
-                        {#if showPlaylistMenu}
-                            <div class="menu">
-                                <button class="menu-item new" onclick={newPlaylistWithAlbum}>
-                                    + New playlist
-                                </button>
-                                {#each playlistStore.playlists as pl (pl.id)}
-                                    <button
-                                        class="menu-item"
-                                        onclick={() => addAlbumToPlaylist(pl.id)}
-                                    >{pl.name}</button>
-                                {/each}
-                            </div>
-                        {/if}
-                    </div>
-                    <button
-                        class="refresh-art"
-                        title="Wrong cover? Refetch the album art"
-                        onclick={refreshArt}
-                        disabled={refreshingArt}
-                    >
-                        <Icon name="refresh" size={14} />
-                        {refreshingArt ? "fetching…" : "art"}
-                    </button>
-                </div>
-                {#if artError}
-                    <p class="art-error">{artError}</p>
-                {/if}
-            </div>
-        </header>
-
-        <div class="tracklist">
-            {#each tracks as t, i (t.id)}
-                <button
-                    class="trow"
-                    class:playing={nowPlayingPath === t.path}
-                    onclick={() =>
-                        playAlbum(tracks, `${album.artist} — ${album.title}`, i, album.art_path)}
-                >
-                    <span class="tno">{t.track_no ?? "·"}</span>
-                    <span class="ttitle">{t.title}</span>
-                    <span class="tmeta">
-                        {t.bitrate_kbps ? `${t.bitrate_kbps} kbps · ` : ""}{fmtDuration(t.duration_secs)}
-                    </span>
-                </button>
-            {/each}
-        </div>
-    </div>
-{/if}
 
 <style>
     h1 {
@@ -600,201 +461,4 @@
     .inline-ttitle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .inline-tmeta { color: var(--text-muted); font-size: 12px; }
 
-    /* album page */
-    .back {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        color: var(--text-secondary);
-        font-weight: 600;
-        margin-bottom: 18px;
-    }
-
-    .back:hover {
-        color: var(--text-primary);
-    }
-
-    header {
-        display: flex;
-        gap: 24px;
-        align-items: flex-end;
-        margin-bottom: 28px;
-    }
-
-    .cover {
-        width: 200px;
-        height: 200px;
-        object-fit: cover;
-        border-radius: 8px;
-        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
-        flex-shrink: 0;
-    }
-
-    .cover.placeholder {
-        display: grid;
-        place-items: center;
-        background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
-        color: var(--text-muted);
-        font-size: 56px;
-    }
-
-    .kind {
-        font-size: 12px;
-        font-weight: 700;
-        text-transform: uppercase;
-        color: var(--text-secondary);
-        letter-spacing: 0.08em;
-    }
-
-    .head-meta h1 {
-        margin: 6px 0 10px;
-        font-size: 40px;
-    }
-
-    .line {
-        color: var(--text-secondary);
-        font-size: 13px;
-    }
-
-    .actions {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        margin-top: 16px;
-    }
-
-    .play-all {
-        display: inline-flex;
-        align-items: center;
-        gap: 7px;
-        padding: 10px 26px;
-        border-radius: 24px;
-        background: var(--accent);
-        color: #000;
-        font-weight: 700;
-    }
-
-    .refresh-art {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 9px 16px;
-        border-radius: 24px;
-        background: var(--bg-highlight);
-        color: var(--text-secondary);
-        font-weight: 600;
-        font-size: 12px;
-    }
-
-    .refresh-art:hover:not(:disabled) {
-        color: var(--text-primary);
-    }
-
-    .refresh-art:disabled {
-        opacity: 0.4;
-    }
-
-    .add-menu {
-        position: relative;
-    }
-
-    .menu {
-        position: absolute;
-        top: calc(100% + 6px);
-        left: 0;
-        z-index: 20;
-        min-width: 200px;
-        max-height: 320px;
-        overflow-y: auto;
-        background: var(--bg-press);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 6px;
-        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
-    }
-
-    .menu-item {
-        display: block;
-        width: 100%;
-        text-align: left;
-        padding: 9px 12px;
-        border-radius: 5px;
-        color: var(--text-primary);
-        font-size: 13px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .menu-item:hover {
-        background: var(--bg-highlight);
-    }
-
-    .menu-item.new {
-        color: var(--accent-hover);
-        font-weight: 600;
-        border-bottom: 1px solid var(--border);
-        border-radius: 5px 5px 0 0;
-        margin-bottom: 4px;
-    }
-
-    .art-error {
-        margin-top: 8px;
-        font-size: 12px;
-        color: #f15e6c;
-    }
-
-    .play-all:hover:not(:disabled) {
-        background: var(--accent-hover);
-        transform: scale(1.02);
-    }
-
-    .play-all:disabled {
-        opacity: 0.5;
-    }
-
-    .tracklist {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .trow {
-        display: flex;
-        align-items: center;
-        gap: 14px;
-        padding: 9px 12px;
-        border-radius: 6px;
-        text-align: left;
-    }
-
-    .trow:hover {
-        background: var(--bg-highlight);
-    }
-
-    .trow.playing .ttitle {
-        color: var(--accent-hover);
-    }
-
-    .tno {
-        width: 22px;
-        text-align: right;
-        color: var(--text-muted);
-        font-variant-numeric: tabular-nums;
-        flex-shrink: 0;
-    }
-
-    .ttitle {
-        flex: 1;
-        min-width: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-weight: 500;
-    }
-
-    .tmeta {
-        color: var(--text-muted);
-        font-size: 12px;
-        flex-shrink: 0;
-    }
 </style>