black lyrics sheet, and lift the inactive lines out of the murk

the sheet forces the dark theme tokens on its own subtree — they are CSS
variables scoped to a .dark ancestor, so a light theme would otherwise paint
near-black text on black. inactive synced lines drop the /50 and use plain
muted-foreground, the same grade as the artist under each track title.

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

src/workspaces/officerdev/src/MusicPlayer/LyricsPane.tsx

@@ -49,7 +49,7 @@ export const LyricsPane = ({ lines, synced, loading }: LyricsPaneProps) => {
             synced ? 'text-center' : 'text-left text-foreground/85',
             // Only the colour changes on the active line — no weight or size change, so nothing reflows
             // and the sheet does not jitter as the highlight moves.
-            active ? 'text-foreground' : synced ? 'text-muted-foreground/50' : '',
+            active ? 'text-foreground' : synced ? 'text-muted-foreground' : '',
             seekable ? 'cursor-pointer hover:text-foreground/80' : '',
           ]
             .filter(Boolean)

src/workspaces/officerdev/src/MusicPlayer/LyricsPanel.tsx

@@ -15,8 +15,11 @@ export const LyricsPanel = () => {
   const [, toggleLyrics] = useLyricsOpen();
   const lyrics = useLyrics(current?.albumRel ?? '', current?.file ?? '', true, token);
 
+  // `dark` is not decoration: the theme tokens are CSS variables scoped to a `.dark` ancestor, so marking
+  // this subtree re-points foreground/muted-foreground/border at their dark values. Without it a light
+  // theme would paint near-black text on the black sheet.
   return (
-    <div className="flex h-full flex-col">
+    <div className="dark flex h-full flex-col bg-black">
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
         <MicVocal size={15} className="shrink-0 text-muted-foreground" />
         <div className="min-w-0 flex-1">