polish(ui): tighter header gap, stronger row hover, readable tag chips (R13 S3)

- Channel-manager tab row: pt-4 -> pt-2, closing the too-wide gap under the
  fixed header.
- Row hover was barely visible (--card sits close to --bg in dark schemes). New
  shared --hover token (a 9% foreground mix, clear in every scheme + theme,
  auto-adapting via --fg); the .selectable recipe and the DataTable row both use
  it, so every hoverable row app-wide (tables, nav rail, menu rows) reads.
- Channel tag chips: text-3xs -> text-2xs + font-medium, so the tiny labels stay
  legible on the accent fill across all colour schemes.

Self-E2E'd: tighter gap, a table-row hover now clearly visible. gate green
(tsc/eslint-0/vitest 147/knip/prettier/build).

frontend/src/components/ChannelTags.tsx

@@ -22,7 +22,8 @@ interface TagChipProps {
 }
 
 function TagChip({ tag, onClick, title }: TagChipProps) {
-  const cls = "chip-solid shrink-0 text-3xs px-1.5 py-0.5 rounded-full max-w-36 truncate";
+  const cls =
+    "chip-solid shrink-0 text-2xs font-medium px-1.5 py-0.5 rounded-full max-w-36 truncate";
   return onClick ? (
     <button
       type="button"

frontend/src/components/Channels.tsx

@@ -397,7 +397,7 @@ export default function Channels() {
     [t],
   );
   const tabs = (
-    <div className="px-4 pt-4 max-w-384 mx-auto flex items-center justify-between gap-4 flex-wrap">
+    <div className="px-4 pt-2 max-w-384 mx-auto flex items-center justify-between gap-4 flex-wrap">
       <Tabs
         tabs={viewTabs}
         active={view}

frontend/src/components/DataTable.tsx

@@ -236,7 +236,7 @@ export default function DataTable<T>({
             {paged.map((row) => (
               <tr
                 key={rowKey(row)}
-                className={`border-b border-border/50 hover:bg-card/40 transition ${
+                className={`border-b border-border/50 hover:bg-(--hover) transition ${
                   rowClassName?.(row) ?? ""
                 }`}
               >