perf: reduce CPU usage and unify next-track buffering settings

- Throttle audio:progress from 100ms to 500ms; WaveformSeek and
  FsSeekbar use imperative DOM updates instead of React re-renders
- Fix all usePlayerStore() calls without selectors across pages and
  components (useShallow / individual selectors throughout)
- Remove filter:blur and transform:scale from Hero, AlbumDetail and
  FullscreenPlayer backgrounds — eliminated expensive software
  compositing layers on WebKitGTK
- Replace translate3d with 2D translate in FS mesh and portrait
  animations; remove will-change:transform from mesh blobs
- Move Hot Cache section from Storage tab to Audio tab; group Preload
  and Hot Cache under a shared 'Next Track Buffering' section with a
  mutual-exclusivity note and auto-disable logic
- Add 'off' toggle to Preload (replaces Off button with toggle switch);
  enabling either method now automatically disables the other

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

src/components/FullscreenPlayer.tsx

@@ -192,34 +192,50 @@ const FsPortrait = memo(function FsPortrait({ url }: { url: string }) {
   );
 });
 
-// ─── Full-width seekbar (isolated — re-renders every tick) ────────────────────
+// ─── Full-width seekbar — imperative DOM updates, zero React re-renders on tick ─
 const FsSeekbar = memo(function FsSeekbar({ duration }: { duration: number }) {
-  const progress    = usePlayerStore(s => s.progress);
-  const buffered    = usePlayerStore(s => s.buffered);
-  const currentTime = usePlayerStore(s => s.currentTime);
   const seek        = usePlayerStore(s => s.seek);
+  const timeRef     = useRef<HTMLSpanElement>(null);
+  const playedRef   = useRef<HTMLDivElement>(null);
+  const bufRef      = useRef<HTMLDivElement>(null);
+  const inputRef    = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const s = usePlayerStore.getState();
+    const pct = s.progress * 100;
+    if (timeRef.current)   timeRef.current.textContent  = formatTime(s.currentTime);
+    if (playedRef.current) playedRef.current.style.width = `${pct}%`;
+    if (bufRef.current)    bufRef.current.style.width    = `${Math.max(pct, s.buffered * 100)}%`;
+    if (inputRef.current)  inputRef.current.value        = String(s.progress);
+
+    return usePlayerStore.subscribe(state => {
+      const p = state.progress * 100;
+      if (timeRef.current)   timeRef.current.textContent  = formatTime(state.currentTime);
+      if (playedRef.current) playedRef.current.style.width = `${p}%`;
+      if (bufRef.current)    bufRef.current.style.width    = `${Math.max(p, state.buffered * 100)}%`;
+      if (inputRef.current)  inputRef.current.value        = String(state.progress);
+    });
+  }, []);
 
   const handleSeek = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)),
     [seek]
   );
 
-  const pct = progress * 100;
-  const buf = Math.max(pct, buffered * 100);
-
   return (
     <div className="fs-seekbar-wrap">
       <div className="fs-seekbar-times">
-        <span>{formatTime(currentTime)}</span>
+        <span ref={timeRef} />
         <span>{formatTime(duration)}</span>
       </div>
       <div className="fs-seekbar">
         <div className="fs-seekbar-bg" />
-        <div className="fs-seekbar-buf" style={{ width: `${buf}%` }} />
-        <div className="fs-seekbar-played" style={{ width: `${pct}%` }} />
+        <div className="fs-seekbar-buf" ref={bufRef} />
+        <div className="fs-seekbar-played" ref={playedRef} />
         <input
+          ref={inputRef}
           type="range" min={0} max={1} step={0.001}
-          value={progress}
+          defaultValue={0}
           onChange={handleSeek}
           aria-label="seek"
         />