feat: v1.8.0 — new themes, queue toolbar, lightbox, i18n (fr/nl)

Themes:
- Add Poison (phosphor green on charcoal), Nucleo (warm brass light), Classic Winamp (LCD glow, Winamp yellow/orange) themes
- Overhaul Psychowave — refined deep violet, no longer WIP
- Reorganise ThemePicker into groups: Catppuccin, Nord, Retro, Tokyo Night, Psysonic Themes
- Add --volume-accent CSS var for per-theme volume slider colour override

Queue:
- Full toolbar redesign with centred round buttons (Shuffle/Save/Load/Clear/Gapless/Crossfade)
- Crossfade popover with 1–10 s range slider, right-aligned to avoid viewport overflow
- Queue header: title + count + duration inline in accent colour, close button removed
- Tech info (codec/bitrate) as frosted-glass overlay badge on cover art

UI:
- CoverLightbox shared component for album cover (AlbumHeader) and artist avatar (ArtistDetail)
- NowPlayingDropdown: separate spinning/loading state — button always clickable, icon spins 600 ms min
- Settings: "Experimental" badge on Crossfade and Gapless toggles
- Help page: 2-column grid layout, new Crossfade & Gapless Q&A entry, updated theme/language entries

i18n:
- Full French (fr) and Dutch (nl) translations across all namespaces
- Language selector sorted alphabetically (nl, en, fr, de)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/AlbumHeader.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } from 'lucide-react';
-import { SubsonicSong } from '../api/subsonic';
+import { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
 import CachedImage from './CachedImage';
+import CoverLightbox from './CoverLightbox';
 import { useTranslation } from 'react-i18next';
 
 function formatDuration(seconds: number): string {
@@ -49,6 +50,7 @@ function BioModal({ bio, onClose }: { bio: string; onClose: () => void }) {
   );
 }
 
+
 interface AlbumInfo {
   id: string;
   name: string;
@@ -97,6 +99,7 @@ export default function AlbumHeader({
 }: AlbumHeaderProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const [lightboxOpen, setLightboxOpen] = useState(false);
 
   const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
   const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
@@ -104,6 +107,13 @@ export default function AlbumHeader({
   return (
     <>
       {bioOpen && bio && <BioModal bio={bio} onClose={onCloseBio} />}
+      {lightboxOpen && info.coverArt && (
+        <CoverLightbox
+          src={buildCoverArtUrl(info.coverArt, 2000)}
+          alt={`${info.name} Cover`}
+          onClose={() => setLightboxOpen(false)}
+        />
+      )}
 
       <div className="album-detail-header">
         {resolvedCoverUrl && (
@@ -121,7 +131,14 @@ export default function AlbumHeader({
           </button>
           <div className="album-detail-hero">
             {coverUrl ? (
-              <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
+              <button
+                className="album-detail-cover-btn"
+                onClick={() => setLightboxOpen(true)}
+                data-tooltip="Vergrößern"
+                aria-label={`${info.name} Cover vergrößern`}
+              >
+                <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
+              </button>
             ) : (
               <div className="album-detail-cover album-cover-placeholder">♪</div>
             )}

src/components/ConnectionIndicator.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { ConnectionStatus } from '../hooks/useConnectionStatus';
 
 interface Props {
@@ -9,17 +10,24 @@ interface Props {
 
 export default function ConnectionIndicator({ status, isLan, serverName }: Props) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const label = isLan ? 'LAN' : t('connection.extern');
-  const title =
+  const tooltip =
     status === 'connected'
-      ? t('connection.connected')
+      ? t('connection.connectedTo', { server: serverName })
       : status === 'disconnected'
-      ? t('connection.disconnected')
+      ? t('connection.disconnectedFrom', { server: serverName })
       : t('connection.checking');
 
   return (
-    <div className="connection-indicator" data-tooltip={title} data-tooltip-pos="bottom">
+    <div
+      className="connection-indicator"
+      style={{ cursor: 'pointer' }}
+      onClick={() => navigate('/settings', { state: { tab: 'server' } })}
+      data-tooltip={tooltip}
+      data-tooltip-pos="bottom"
+    >
       <div className={`connection-led connection-led--${status}`} />
       <div className="connection-meta">
         <span className="connection-type">{label}</span>

src/components/CoverLightbox.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface Props {
+  src: string;
+  alt: string;
+  onClose: () => void;
+}
+
+export default function CoverLightbox({ src, alt, onClose }: Props) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    <div className="cover-lightbox-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={alt}>
+      <button className="cover-lightbox-close" onClick={onClose} aria-label="Close"><X size={20} /></button>
+      <img
+        className="cover-lightbox-img"
+        src={src}
+        alt={alt}
+        onClick={e => e.stopPropagation()}
+      />
+    </div>
+  );
+}

src/components/LastfmIndicator.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '../store/authStore';
+import LastfmIcon from './LastfmIcon';
+
+export default function LastfmIndicator() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { lastfmSessionKey, lastfmUsername, lastfmSessionError } = useAuthStore();
+
+  if (!lastfmSessionKey) return null;
+
+  const tooltip = lastfmSessionError
+    ? t('connection.lastfmSessionInvalid')
+    : t('connection.lastfmConnected', { user: lastfmUsername });
+
+  return (
+    <div
+      className="connection-indicator"
+      style={{ cursor: 'pointer' }}
+      onClick={() => navigate('/settings', { state: { tab: 'server' } })}
+      data-tooltip={tooltip}
+      data-tooltip-pos="bottom"
+    >
+      <div
+        className={`connection-led connection-led--${lastfmSessionError ? 'disconnected' : 'connected'}`}
+      />
+      <div className="connection-meta">
+        <span className="connection-type" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <LastfmIcon size={11} />
+          Last.fm
+        </span>
+        <span className="connection-server">
+          {lastfmSessionError ? t('connection.lastfmSessionInvalid').split(' —')[0] : `@${lastfmUsername}`}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/NowPlayingDropdown.tsx

@@ -14,6 +14,7 @@ export default function NowPlayingDropdown() {
   const isPlaying = usePlayerStore(s => s.isPlaying);
   const ownUsername = useAuthStore(s => s.getActiveServer()?.username ?? '');
   const [loading, setLoading] = useState(false);
+  const [spinning, setSpinning] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const fetchNowPlaying = async () => {
@@ -28,6 +29,13 @@ export default function NowPlayingDropdown() {
     }
   };
 
+  const handleRefresh = () => {
+    setSpinning(true);
+    fetchNowPlaying().finally(() => {
+      setTimeout(() => setSpinning(false), 600);
+    });
+  };
+
   // Poll in background so the badge stays current without opening the dropdown
   useEffect(() => {
     fetchNowPlaying();
@@ -104,11 +112,11 @@ export default function NowPlayingDropdown() {
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '0.5rem' }}>
             <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{t('nowPlaying.title')}</h3>
             <button
-              onClick={fetchNowPlaying}
-              className={`btn btn-ghost ${loading ? 'animate-spin' : ''}`}
-              style={{ width: '28px', height: '28px', padding: 0 }}
+              onClick={handleRefresh}
+              className="btn btn-ghost"
+              style={{ width: '28px', height: '28px', padding: 0, justifyContent: 'center' }}
             >
-              <RefreshCw size={14} />
+              <RefreshCw size={14} className={spinning ? 'animate-spin' : ''} />
             </button>
           </div>
 

src/components/PlayerBar.tsx

@@ -40,7 +40,7 @@ export default function PlayerBar() {
   }, [setVolume]);
 
   const volumeStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
+    background: `linear-gradient(to right, var(--volume-accent, var(--accent)) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
   };
 
   return (

src/components/QueuePanel.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useRef } from 'react';
 import { Track, usePlayerStore } from '../store/playerStore';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle } from 'lucide-react';
+import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves } from 'lucide-react';
 import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { useAuthStore } from '../store/authStore';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -130,6 +131,30 @@ export default function QueuePanel() {
   const enqueue = usePlayerStore(s => s.enqueue);
   const contextMenu = usePlayerStore(s => s.contextMenu);
 
+  const crossfadeEnabled = useAuthStore(s => s.crossfadeEnabled);
+  const crossfadeSecs = useAuthStore(s => s.crossfadeSecs);
+  const gaplessEnabled = useAuthStore(s => s.gaplessEnabled);
+  const setCrossfadeEnabled = useAuthStore(s => s.setCrossfadeEnabled);
+  const setCrossfadeSecs = useAuthStore(s => s.setCrossfadeSecs);
+  const setGaplessEnabled = useAuthStore(s => s.setGaplessEnabled);
+
+  const [showCrossfadePopover, setShowCrossfadePopover] = useState(false);
+  const crossfadeBtnRef = useRef<HTMLButtonElement>(null);
+  const crossfadePopoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!showCrossfadePopover) return;
+    const handle = (e: MouseEvent) => {
+      if (
+        crossfadeBtnRef.current?.contains(e.target as Node) ||
+        crossfadePopoverRef.current?.contains(e.target as Node)
+      ) return;
+      setShowCrossfadePopover(false);
+    };
+    document.addEventListener('mousedown', handle);
+    return () => document.removeEventListener('mousedown', handle);
+  }, [showCrossfadePopover]);
+
   const [draggedIdx, setDraggedIdx] = useState<number | null>(null);
   const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
   const isDraggingInternalRef = useRef(false);
@@ -255,8 +280,8 @@ export default function QueuePanel() {
       }}
     >
       <div className="queue-header">
-        <div>
-          <h2 style={{ fontSize: '14px', fontWeight: 600, margin: 0 }}>{t('queue.title')}</h2>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', minWidth: 0 }}>
+          <h2 style={{ fontSize: '16px', fontWeight: 700, margin: 0, flexShrink: 0 }}>{t('queue.title')}</h2>
           {queue.length > 0 && (() => {
             const totalSecs = queue.reduce((acc, t) => acc + (t.duration || 0), 0);
             const h = Math.floor(totalSecs / 3600);
@@ -266,31 +291,12 @@ export default function QueuePanel() {
               ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
               : `${m}:${s.toString().padStart(2, '0')}`;
             return (
-              <div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '2px' }}>
+              <span style={{ fontSize: '13px', color: 'var(--accent)', whiteSpace: 'nowrap' }}>
                 {queue.length} {queue.length === 1 ? t('queue.trackSingular') : t('queue.trackPlural')} · {dur}
-              </div>
+              </span>
             );
           })()}
         </div>
-        
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <button onClick={() => shuffleQueue()} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.shuffle')} data-tooltip={t('queue.shuffle')} disabled={queue.length < 2}>
-            <Shuffle size={14} />
-          </button>
-          <button onClick={handleSave} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.savePlaylist')} data-tooltip={t('queue.save')}>
-            <Save size={14} />
-          </button>
-          <button onClick={handleLoad} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.loadPlaylist')} data-tooltip={t('queue.load')}>
-            <FolderOpen size={14} />
-          </button>
-          <button onClick={handleClear} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.clear')} data-tooltip={t('queue.clear')}>
-            <Trash2 size={14} />
-          </button>
-          <div style={{ width: '1px', height: '14px', background: 'var(--border)', margin: '0 4px' }} />
-          <button onClick={toggleQueue} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.close')} data-tooltip={t('queue.hide')}>
-            <X size={16} />
-          </button>
-        </div>
       </div>
 
       {currentTrack && (
@@ -301,6 +307,13 @@ export default function QueuePanel() {
             ) : (
               <div className="fallback"><Music size={32} /></div>
             )}
+            {(currentTrack.bitRate || currentTrack.suffix) && (
+              <div className="queue-current-tech">
+                {currentTrack.bitRate && currentTrack.suffix
+                  ? `${currentTrack.bitRate} · ${currentTrack.suffix.toUpperCase()}`
+                  : currentTrack.suffix?.toUpperCase() ?? ''}
+              </div>
+            )}
           </div>
           <div className="queue-current-info">
             <h3 className="truncate" data-tooltip={currentTrack.title}>{currentTrack.title}</h3>
@@ -319,20 +332,78 @@ export default function QueuePanel() {
             {currentTrack.year && (
               <div className="queue-current-sub">{currentTrack.year}</div>
             )}
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px' }}>
-              <div className="queue-current-tech">
-                {currentTrack.bitRate && currentTrack.suffix ? (
-                  `${currentTrack.bitRate} kbps · ${currentTrack.suffix.toUpperCase()}`
-                ) : (
-                  currentTrack.suffix?.toUpperCase() ?? ''
-                )}
-              </div>
-              {renderStars(currentTrack.userRating)}
-            </div>
+            {renderStars(currentTrack.userRating)}
           </div>
         </div>
       )}
 
+      <div className="queue-toolbar">
+        <button className="queue-round-btn" onClick={() => shuffleQueue()} disabled={queue.length < 2} data-tooltip={t('queue.shuffle')} aria-label={t('queue.shuffle')}>
+          <Shuffle size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleSave} data-tooltip={t('queue.savePlaylist')} aria-label={t('queue.savePlaylist')}>
+          <Save size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleLoad} data-tooltip={t('queue.loadPlaylist')} aria-label={t('queue.loadPlaylist')}>
+          <FolderOpen size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleClear} data-tooltip={t('queue.clear')} aria-label={t('queue.clear')}>
+          <Trash2 size={13} />
+        </button>
+        <div className="queue-toolbar-sep" />
+        <button
+          className={`queue-round-btn${gaplessEnabled ? ' active' : ''}`}
+          onClick={() => setGaplessEnabled(!gaplessEnabled)}
+          data-tooltip={t('queue.gapless')}
+          aria-label={t('queue.gapless')}
+        >
+          <Infinity size={13} />
+        </button>
+        <div style={{ position: 'relative' }}>
+          <button
+            ref={crossfadeBtnRef}
+            className={`queue-round-btn${crossfadeEnabled || showCrossfadePopover ? ' active' : ''}`}
+            onClick={() => {
+              if (crossfadeEnabled) {
+                setCrossfadeEnabled(false);
+                setShowCrossfadePopover(false);
+              } else {
+                setCrossfadeEnabled(true);
+                setShowCrossfadePopover(true);
+              }
+            }}
+            data-tooltip={showCrossfadePopover ? undefined : t('queue.crossfade')}
+            aria-label={t('queue.crossfade')}
+          >
+            <Waves size={13} />
+          </button>
+          {showCrossfadePopover && (
+            <div className="crossfade-popover" ref={crossfadePopoverRef}>
+              <div className="crossfade-popover-label">
+                <Waves size={11} />
+                {t('queue.crossfade')}
+                <span className="crossfade-popover-value">{crossfadeSecs}s</span>
+              </div>
+              <input
+                type="range"
+                min={1}
+                max={10}
+                step={0.5}
+                value={crossfadeSecs}
+                onChange={e => {
+                  setCrossfadeSecs(Number(e.target.value));
+                  setCrossfadeEnabled(true);
+                }}
+                className="crossfade-popover-slider"
+              />
+              <div className="crossfade-popover-range">
+                <span>1s</span><span>10s</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
       {currentTrack && queue.length > 0 && <div className="queue-divider"><span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)' }}>{t('queue.nextTracks')}</span></div>}
       
       <div className="queue-list" ref={queueListRef}>

src/components/Sidebar.tsx

@@ -10,7 +10,7 @@ import {
 } from 'lucide-react';
 
 const PsysonicLogo = () => (
-  <img src="/logo-psysonic.png" alt="Psysonic Logo" width="36" height="36" style={{ borderRadius: '8px' }} />
+  <img src="/logo-psysonic.png" alt="Psysonic Logo" width="36" height="36" />
 );
 
 const navItems = [

src/components/ThemePicker.tsx

@@ -0,0 +1,155 @@
+import { Check } from 'lucide-react';
+
+interface ThemeDef {
+  id: string;
+  label: string;
+  bg: string;
+  card: string;
+  accent: string;
+}
+
+const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
+  {
+    group: 'Catppuccin',
+    themes: [
+      { id: 'mocha',     label: 'Mocha',     bg: '#1e1e2e', card: '#313244', accent: '#cba6f7' },
+      { id: 'macchiato', label: 'Macchiato', bg: '#24273a', card: '#363a4f', accent: '#c6a0f6' },
+      { id: 'frappe',    label: 'Frappé',    bg: '#303446', card: '#414559', accent: '#ca9ee6' },
+      { id: 'latte',     label: 'Latte',     bg: '#eff1f5', card: '#ccd0da', accent: '#8839ef' },
+    ],
+  },
+  {
+    group: 'Nord',
+    themes: [
+      { id: 'nord',           label: 'Polar Night', bg: '#3b4252', card: '#434c5e', accent: '#88c0d0' },
+      { id: 'nord-snowstorm', label: 'Snowstorm',   bg: '#e5e9f0', card: '#eceff4', accent: '#5e81ac' },
+      { id: 'nord-frost',     label: 'Frost',       bg: '#1e2d3d', card: '#243447', accent: '#88c0d0' },
+      { id: 'nord-aurora',    label: 'Aurora',      bg: '#3b4252', card: '#434c5e', accent: '#b48ead' },
+    ],
+  },
+  {
+    group: 'Retro',
+    themes: [
+      { id: 'gruvbox-dark-hard',    label: 'Dark Hard',    bg: '#1d2021', card: '#3c3836', accent: '#fabd2f' },
+      { id: 'gruvbox-dark-medium',  label: 'Dark Medium',  bg: '#282828', card: '#3c3836', accent: '#fabd2f' },
+      { id: 'gruvbox-dark-soft',    label: 'Dark Soft',    bg: '#32302f', card: '#45403d', accent: '#fabd2f' },
+      { id: 'gruvbox-light-hard',   label: 'Light Hard',   bg: '#f9f5d7', card: '#f2e5bc', accent: '#b57614' },
+      { id: 'gruvbox-light-medium', label: 'Light Medium', bg: '#fbf1c7', card: '#f2e5bc', accent: '#b57614' },
+      { id: 'gruvbox-light-soft',   label: 'Light Soft',   bg: '#f2e5bc', card: '#ebdbb2', accent: '#b57614' },
+    ],
+  },
+  {
+    group: 'Tokyo Night',
+    themes: [
+      { id: 'tokyo-night',       label: 'Standard', bg: '#1a1b26', card: '#24283b', accent: '#7aa2f7' },
+      { id: 'tokyo-night-storm', label: 'Storm',    bg: '#24283b', card: '#2f334d', accent: '#7aa2f7' },
+      { id: 'tokyo-night-light', label: 'Light',    bg: '#d5d6db', card: '#e9e9ec', accent: '#34548a' },
+    ],
+  },
+  {
+    group: 'Psysonic Themes',
+    themes: [
+      { id: 'classic-winamp', label: 'Classic Winamp', bg: '#2b2b3a', card: '#000000', accent: '#00ff00' },
+      { id: 'poison',         label: 'Poison',         bg: '#1f1f1f', card: '#282828', accent: '#1bd655' },
+      { id: 'nucleo',         label: 'Nucleo',         bg: '#f5e4c3', card: '#dfc08f', accent: '#9e9a92' },
+      { id: 'psychowave',     label: 'Psychowave',     bg: '#161428', card: '#1f1c38', accent: '#a06ae0' },
+    ],
+  },
+];
+
+interface Props {
+  value: string;
+  onChange: (id: string) => void;
+}
+
+export default function ThemePicker({ value, onChange }: Props) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      {THEME_GROUPS.map(({ group, themes }) => (
+        <div key={group}>
+          <div style={{
+            fontSize: '11px',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            color: 'var(--text-muted)',
+            marginBottom: '10px',
+          }}>
+            {group}
+          </div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))',
+            gap: '10px',
+          }}>
+            {themes.map((t) => {
+              const isActive = value === t.id;
+              return (
+                <button
+                  key={t.id}
+                  onClick={() => onChange(t.id)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '6px',
+                  }}
+                >
+                  <div style={{
+                    width: '100%',
+                    height: '46px',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    outline: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+                    outlineOffset: '2px',
+                    position: 'relative',
+                    boxShadow: isActive ? '0 0 8px var(--accent-glow, rgba(0,0,0,0.2))' : '0 1px 3px rgba(0,0,0,0.3)',
+                    transition: 'outline-color 0.15s, box-shadow 0.15s',
+                  }}>
+                    {/* main bg */}
+                    <div style={{ background: t.bg, height: '55%' }} />
+                    {/* card tone */}
+                    <div style={{ background: t.card, height: '20%' }} />
+                    {/* accent bar */}
+                    <div style={{ background: t.accent, height: '25%' }} />
+                    {isActive && (
+                      <div style={{
+                        position: 'absolute',
+                        top: '4px',
+                        right: '4px',
+                        width: '14px',
+                        height: '14px',
+                        borderRadius: '50%',
+                        background: t.accent,
+                        border: '1.5px solid rgba(255,255,255,0.7)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}>
+                        <Check size={8} strokeWidth={3} color="white" />
+                      </div>
+                    )}
+                  </div>
+                  <span style={{
+                    fontSize: '11px',
+                    color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
+                    fontWeight: isActive ? 600 : 400,
+                    textAlign: 'center',
+                    lineHeight: 1.2,
+                    wordBreak: 'break-word',
+                  }}>
+                    {t.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/WaveformSeek.tsx

@@ -59,8 +59,7 @@ function drawWaveform(
   ctx.clearRect(0, 0, w, h);
 
   const style = getComputedStyle(document.documentElement);
-  const colorBlue     = style.getPropertyValue('--ctp-blue').trim()     || '#89b4fa';
-  const colorMauve    = style.getPropertyValue('--ctp-mauve').trim()    || '#cba6f7';
+  const colorAccent   = style.getPropertyValue('--accent').trim()       || '#cba6f7';
   const colorBuffered = style.getPropertyValue('--ctp-overlay0').trim() || '#6c7086';
   const colorUnplayed = style.getPropertyValue('--ctp-surface1').trim() || '#313244';
 
@@ -97,14 +96,11 @@ function drawWaveform(
     ctx.fillRect(x, (h - barH) / 2, x2Of(i) - x, barH);
   }
 
-  // Pass 3 — played (gradient + glow)
+  // Pass 3 — played (accent color + glow)
   if (progress > 0) {
-    const grad = ctx.createLinearGradient(0, 0, progress * w, 0);
-    grad.addColorStop(0, colorBlue);
-    grad.addColorStop(1, colorMauve);
     ctx.globalAlpha = 1;
-    ctx.fillStyle = grad;
-    ctx.shadowColor = colorMauve;
+    ctx.fillStyle = colorAccent;
+    ctx.shadowColor = colorAccent;
     ctx.shadowBlur = 5;
     for (let i = 0; i < BAR_COUNT; i++) {
       if (i / BAR_COUNT >= progress) break;