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

@@ -948,12 +948,12 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
   // Portaled to <body>, like every other full-screen overlay here (Modal, PlayerModal, ChatDock,
   // BackToTop). A fixed, full-viewport player must not be painted inside the page scroller: the
   // moment that scroller gets a mask/filter/transform/contain it becomes a stacking context, and
-  // this z-50 is then scoped inside it — the rail, the side panel and the header paint straight
+  // this z-overlay is then scoped inside it — the rail, the side panel and the header paint straight
   // over the player. That is exactly what the scroller's edge-fade did before this moved out.
   return createPortal(
     <div
       ref={wrapRef}
-      className="fixed left-0 top-0 z-50 bg-black flex items-center justify-center select-none"
+      className="fixed left-0 top-0 z-overlay bg-black flex items-center justify-center select-none"
       onMouseMove={wake}
       onClick={wake}
       onWheel={onWheel}
@@ -1546,7 +1546,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
       {/* Keyboard-shortcut cheat sheet (toggle with "h" or the keyboard button). */}
       {helpOpen && (
         <div
-          className="absolute inset-0 z-20 grid place-items-center bg-black/60 p-4"
+          className="absolute inset-0 z-menu grid place-items-center bg-black/60 p-4"
           onClick={(e) => {
             e.stopPropagation();
             setHelpOpen(false);
@@ -1609,7 +1609,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
       {/* Rich info overlay (poster/cast/ratings) — "i" or the info button; video keeps playing. */}
       {infoOpen && detail && (
         <div
-          className="absolute inset-0 z-20 grid place-items-center overflow-y-auto bg-black/70 p-4"
+          className="absolute inset-0 z-menu grid place-items-center overflow-y-auto bg-black/70 p-4"
           onClick={(e) => {
             e.stopPropagation();
             setInfoOpen(false);