feat(theme): R10 S2 — re-close the rem system (px-frozen labels/chrome -> rem)

The ~124 px-frozen text-[Npx] labels didn't track the Settings font-scale slider
while their rem-sized neighbours did. Add text-2xs (0.6875rem) / text-3xs
(0.625rem) font-size-ONLY tokens (no paired line-height -> matches the arbitrary
they replace, zero vertical-rhythm shift) and codemod every text-[Npx] to a rem
class (rare 8/9/12/13px -> rem arbitraries).

Also: --hdr-h 68px -> 4.25rem so header content clears the rem-sized pills at
scale 1.3 instead of sliding under; NavSidebar/SidePanel slot widths + their
icon/badge px sizes go rem so the rails keep pace with their (now-scaling)
labels; a w-24/h-[54px] thumb -> h-13.5 to preserve 16:9 at scale. Media
thumbnails, page-width caps and fixed container widths deliberately stay px.

Verified via getComputedStyle at scale 1.06/1.3: text-2xs 11.66->14.3px, header
clearance 72->88px, nav slot 246->302px — all scale proportionally.

frontend/src/components/playlistColumns.tsx

@@ -69,7 +69,7 @@ export function playlistColumns({
             </span>
           </button>
           <button onClick={() => onPlay(v)} className="min-w-0 flex-1 text-left">
-            <span className="block text-[13px] text-fg truncate">{v.title}</span>
+            <span className="block text-[0.8125rem] text-fg truncate">{v.title}</span>
           </button>
         </div>
       ),
@@ -83,7 +83,7 @@ export function playlistColumns({
       sortValue: (v) => v.channel_title ?? "",
       filter: { kind: "text", get: (v) => v.channel_title ?? "" },
       render: (v) => (
-        <span className="text-[13px] text-muted truncate block">{v.channel_title}</span>
+        <span className="text-[0.8125rem] text-muted truncate block">{v.channel_title}</span>
       ),
     },
     {
@@ -99,12 +99,12 @@ export function playlistColumns({
       sortValue: (v) => v.duration_seconds ?? Number.MAX_SAFE_INTEGER,
       render: (v) =>
         v.duration_seconds != null ? (
-          <span className="text-[11px] text-muted tabular-nums">
+          <span className="text-2xs text-muted tabular-nums">
             {formatDuration(v.duration_seconds)}
           </span>
         ) : v.live_status === "live" || v.live_status === "upcoming" ? (
           <span
-            className={`text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
+            className={`text-3xs font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
               v.live_status === "live"
                 ? "bg-red-500/90 text-white" /* fixed live-red, not the status token */
                 : "bg-card border border-border text-muted"