refactor(z-index): name the stacking layers as a token scale

Replace ~48 magic z-index values (z-10..z-[9999] + 2 inline zIndex) with named
tailwind zIndex tokens (base/menu/chrome/paneltab/panel/rail/overlay/popover/
tooltip/tuner). Values are UNCHANGED — a rename, not a renumber — so layering is
identical; the names give one source of truth for the stack.

frontend/src/components/ChannelPage.tsx

@@ -260,7 +260,7 @@ export default function ChannelPage({
         <button
           data-testid="channel-back"
           onClick={closeChannel}
-          className="absolute top-5 left-7 sm:left-9 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
+          className="absolute top-5 left-7 sm:left-9 z-base inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
         >
           <ArrowLeft className="w-4 h-4" />
           {t("channel.back")}
@@ -268,9 +268,9 @@ export default function ChannelPage({
       </div>
 
       <div className="px-4 sm:px-6">
-        {/* Identity + actions. relative+z-10 so the avatar that overlaps up into the banner
+        {/* Identity + actions. relative+z-base so the avatar that overlaps up into the banner
             paints ABOVE it (the banner's positioned container would otherwise cover it). */}
-        <div className="relative z-10 flex items-end gap-4 -mt-8">
+        <div className="relative z-base flex items-end gap-4 -mt-8">
           <Avatar
             src={ch?.thumbnail_url ?? null}
             fallback={name}