build(deps): migrate Tailwind CSS v3.4 → v4

Root-fixes the opacity-modifier seed bug behind R10 S0: the theme colors were
bare `var(--x)` hex with no <alpha-value>, so `bg-accent/40`, `ring-accent/40`,
`border-border/60`, `text-muted/70`, … (~99 sites across 45 files) emitted no
CSS rule at all — latent no-ops. v4 implements the opacity modifier via
`color-mix`, so the modifier now works with the existing hex vars, no per-scheme
token duplication needed.

- `npx @tailwindcss/upgrade`: `@tailwind` directives → `@import "tailwindcss"`,
  JS config → CSS `@theme` (colors, --font-sans, the z-index tokens preserved),
  classname renames (rounded/shadow/blur scale, outline-none→outline-hidden,
  ring→ring-2) across 56 files; PostCSS plugin → @tailwindcss/postcss,
  autoprefixer removed (v4 prefixes for you).
- `@theme` → `@theme inline` (load-bearing): the color vars are redefined at
  runtime under html[data-scheme]/[data-theme]; inline resolves them at the use
  site so per-scheme opacity tints track the active scheme (the shadcn v4 pattern).
- Revert one codemod false-positive: it rewrote the English word "rounded" →
  "rounded-sm" inside a releaseNotes.ts prose sentence.

Gate green: tsc(app+node) / eslint 0-err / prettier / vitest 79 / knip.
Verified in-browser: bg-accent/15 now computes a scheme-tracking color at 0.15
alpha across all 6 schemes × 2 themes; the hand-rolled glass border/shadow/
radius/backdrop-filter render unchanged under v4.

frontend/src/components/Channels.tsx

@@ -616,7 +616,7 @@ export default function Channels() {
   const cardPager = <Pager {...pagerProps} />;
 
   const tabs = (
-    <div className="px-4 pt-4 max-w-[96rem] mx-auto flex items-center justify-between gap-4 flex-wrap">
+    <div className="px-4 pt-4 max-w-384 mx-auto flex items-center justify-between gap-4 flex-wrap">
       <div className="flex flex-wrap items-center gap-1.5">
         {(["subscribed", "discovery", "blocked"] as ChannelsView[]).map((v) => (
           <button
@@ -648,7 +648,7 @@ export default function Channels() {
       <PageToolbar>
         {tabs}
         {view === "subscribed" && (
-          <div className="px-4 pt-2 pb-2 max-w-[96rem] mx-auto">
+          <div className="px-4 pt-2 pb-2 max-w-384 mx-auto">
             {/* Your tags (left) share one row with the two catalog-wide actions (right); the channel-name
           search lives in the shared top SearchBar, tag create/delete in the manager. */}
             <div className="flex items-center justify-between gap-4 flex-wrap">
@@ -700,7 +700,7 @@ export default function Channels() {
         {/* In table mode the status chips + pager ride in DataTable's own in-band controls row. The card
         layout has no such row, so surface the same status chips (left) and its pager (right) here. */}
         {view === "subscribed" && layout === "cards" && (
-          <div className="px-4 pb-2 max-w-[96rem] mx-auto flex items-center justify-between gap-3 flex-wrap">
+          <div className="px-4 pb-2 max-w-384 mx-auto flex items-center justify-between gap-3 flex-wrap">
             {statusChips}
             {cardPager}
           </div>
@@ -719,7 +719,7 @@ export default function Channels() {
         />
       ) : view === "blocked" ? (
         /* Blocked channels — videos from these are hidden everywhere and dropped from live search. */
-        <div className="px-4 pb-4 pt-3 max-w-[96rem] mx-auto">
+        <div className="px-4 pb-4 pt-3 max-w-384 mx-auto">
           {(blockedQuery.data?.length ?? 0) === 0 ? (
             <p className="text-sm text-muted py-8">{t("channels.blocked.empty")}</p>
           ) : (
@@ -756,7 +756,7 @@ export default function Channels() {
         /* No top padding: the sticky header sits flush at the scroller top so it doesn't shift when
          `position: sticky` engages on the first scroll (the band's controls row above gives the
          visual gap). */
-        <div className="px-4 pb-4 max-w-[96rem] mx-auto">
+        <div className="px-4 pb-4 max-w-384 mx-auto">
           {/* Channel table — only the rows scroll; the header row is sticky, and the controls row
             (status chips + pager) rides in the fixed band right above it (controlsInBand). The
             card layout swaps the table for a virtualized grid over the same rows (its pager and
@@ -776,7 +776,7 @@ export default function Channels() {
               controlsPosition="both"
               controlsLeading={statusChips}
               controlsInBand
-              controlsBandClassName="px-4 max-w-[96rem] mx-auto"
+              controlsBandClassName="px-4 max-w-384 mx-auto"
               sort={sort}
               onSortChange={setSort}
               rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
@@ -953,7 +953,7 @@ function PriorityCell({
                 else if (e.key === "Escape") setEditing(false);
               }}
               aria-label={t("channels.row.priorityHint")}
-              className="absolute top-1/2 right-0 -translate-y-1/2 w-14 h-6 text-sm font-medium tabular-nums text-right bg-card border border-accent rounded px-1 outline-none z-popover [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+              className="absolute top-1/2 right-0 -translate-y-1/2 w-14 h-6 text-sm font-medium tabular-nums text-right bg-card border border-accent rounded-sm px-1 outline-hidden z-popover [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
             />
           )}
         </span>