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/PlaylistsRail.tsx

@@ -154,7 +154,7 @@ export default function PlaylistsRail({
                 value={plSort.key}
                 onChange={(e) => setPlSort({ ...plSort, key: e.target.value as PlSort["key"] })}
                 aria-label={t("playlists.sortLabel")}
-                className="flex-1 min-w-0 bg-card border border-border rounded-md px-1.5 py-1 text-[11px] outline-hidden focus:border-accent"
+                className="flex-1 min-w-0 bg-card border border-border rounded-md px-1.5 py-1 text-2xs outline-hidden focus:border-accent"
               >
                 <option value="custom">{t("playlists.railSortCustom")}</option>
                 <option value="name">{t("playlists.railSortName")}</option>
@@ -246,7 +246,7 @@ export default function PlaylistsRail({
                   )}
                 </div>
                 <div className="min-w-0">
-                  <div className="flex items-center gap-1 text-[13px] text-fg">
+                  <div className="flex items-center gap-1 text-[0.8125rem] text-fg">
                     <span className="truncate">{plName(pl)}</span>
                     {(pl.source === "youtube" || pl.yt_playlist_id) && (
                       <Youtube
@@ -254,7 +254,7 @@ export default function PlaylistsRail({
                       />
                     )}
                   </div>
-                  <div className="text-[11px] text-muted">
+                  <div className="text-2xs text-muted">
                     {t("playlists.itemCount", { count: pl.item_count })}
                     {pl.total_duration_seconds > 0 &&
                       ` · ${formatDuration(pl.total_duration_seconds)}`}