/* ==UserStyle==
@name           PlexTune
@namespace      https://plextune.pages.dev
@version        0.9.4
@description    Color-responsive dark theme. Accent color adapts live from artwork via Vibrant.js. Modern streaming-quality UX with depth, hierarchy, and clean contrast.
@author         Joe Sutliff
@preprocessor   default
@match          https://app.plex.tv/*
@updateURL      https://plextune.pages.dev/userstyle/plextune.user.css
@downloadURL    https://plextune.pages.dev/userstyle/plextune.user.css
==/UserStyle== */

/* ── Self-hosted fonts (no CDN requests) ─────────────────────────────────── */
/* cyrillic-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/ec84a3760fbd.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/4ee8fc9834b2.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/f55b8d3974cf.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
/* greek */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/eef1e4977282.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
/* vietnamese */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/983e90946228.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/395290514d97.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/567244088c9c.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/ec84a3760fbd.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/4ee8fc9834b2.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/f55b8d3974cf.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/eef1e4977282.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/983e90946228.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/395290514d97.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/567244088c9c.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/ec84a3760fbd.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/4ee8fc9834b2.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/f55b8d3974cf.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/eef1e4977282.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/983e90946228.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/395290514d97.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/567244088c9c.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/ec84a3760fbd.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/4ee8fc9834b2.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/f55b8d3974cf.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/eef1e4977282.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/983e90946228.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/395290514d97.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/567244088c9c.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Playfair Display — 400/600/700 */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/64b566ad864f.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/2ac5e2f25b27.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/4136269b36a2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/48d1e9cdfb4d.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/64b566ad864f.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/2ac5e2f25b27.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/4136269b36a2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/48d1e9cdfb4d.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/64b566ad864f.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/2ac5e2f25b27.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/4136269b36a2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/48d1e9cdfb4d.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Share Tech Mono — 400 */
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://plextune.pages.dev/vendor/fonts/de0fcc3929a6.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@-moz-document domain("app.plex.tv") {

  /* ====================================================================
     1. TOKEN SYSTEM — Color-responsive dark palette
     ==================================================================== */
  :root {
    /* ── Dynamic accent — Vibrant.js sets these per artwork ── */
    --pt-media-1: #7eb8f7;   /* accent — default cool blue */
    --pt-media-2: #1e3f6e;   /* muted/shadow */
    --pt-media-3: #08111e;   /* deep shadow */

    /* Semantic aliases */
    --pt-accent:       var(--pt-media-1);
    --pt-accent-muted: var(--pt-media-2);
    --pt-accent-deep:  var(--pt-media-3);

    /* Accent at opacity (color-mix — Chrome-native, no static rgba needed) */
    --pt-a5:  color-mix(in srgb, var(--pt-accent)  5%, transparent);
    --pt-a8:  color-mix(in srgb, var(--pt-accent)  8%, transparent);
    --pt-a12: color-mix(in srgb, var(--pt-accent) 12%, transparent);
    --pt-a20: color-mix(in srgb, var(--pt-accent) 20%, transparent);
    --pt-a30: color-mix(in srgb, var(--pt-accent) 30%, transparent);
    --pt-a50: color-mix(in srgb, var(--pt-accent) 50%, transparent);

    /* ── Surface elevation scale — neutral cool-dark ── */
    --pt-z0: #080810;   /* page void */
    --pt-z1: #0d0d16;   /* base surface */
    --pt-z2: #12121c;   /* panels */
    --pt-z3: #181824;   /* card resting */
    --pt-z4: #20202e;   /* card elevated / hover */
    --pt-z5: #2a2a3a;   /* borders */
    --pt-z6: #363648;   /* prominent borders */

    /* ── Text hierarchy ── */
    --pt-t0: #f0f0f8;   /* headlines */
    --pt-t1: #b8b8d0;   /* body */
    --pt-t2: #787898;   /* secondary / captions */
    --pt-t3: #484862;   /* disabled / placeholders */

    /* ── Glow — all derive from dynamic accent ── */
    --pt-glow-sm:  0 0 8px  color-mix(in srgb, var(--pt-accent) 55%, transparent);
    --pt-glow-md:  0 0 20px color-mix(in srgb, var(--pt-accent) 38%, transparent),
                   0 0 60px color-mix(in srgb, var(--pt-accent) 12%, transparent);
    --pt-glow-lg:  0 0 40px color-mix(in srgb, var(--pt-accent) 30%, transparent),
                   0 0 120px color-mix(in srgb, var(--pt-accent)  8%, transparent);

    /* ── Depth shadows (neutral, non-tinted) ── */
    --pt-shadow-sm:   0 2px  8px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    --pt-shadow-card: 0 4px 16px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
    --pt-shadow-deep: 0 16px 48px rgba(0,0,0,.7),  0 4px 16px rgba(0,0,0,.5);
    --pt-shadow-xl:   0 32px 80px rgba(0,0,0,.8),  0 8px 24px rgba(0,0,0,.6);

    /* ── Typography ── */
    --pt-font-display: 'Playfair Display', Georgia, serif;
    --pt-font-main:    'Inter', system-ui, sans-serif;
    --pt-font-mono:    'Share Tech Mono', 'Courier New', monospace;

    /* ── Motion ── */
    --pt-ease:   cubic-bezier(.33, 1, .68, 1);
    --pt-t-snap: 120ms var(--pt-ease);
    --pt-t-fast: 200ms var(--pt-ease);
    --pt-t-med:  340ms var(--pt-ease);
    --pt-t-slow: 560ms var(--pt-ease);

    /* ── Radii ── */
    --pt-r-sm:   6px;
    --pt-r-md:   10px;
    --pt-r-lg:   16px;
    --pt-r-pill: 999px;

    /* ── Grain texture — subtle surface warmth ── */
    --pt-grain: repeating-linear-gradient(
      45deg, transparent, transparent 1px,
      rgba(255,255,255,.009) 1px, rgba(255,255,255,.009) 2px
    );
  }

  /* Accent transition — smooth color shift when artwork changes */
  :root {
    transition:
      --pt-media-1 380ms ease,
      --pt-media-2 380ms ease,
      --pt-media-3 380ms ease;
  }

  /* ====================================================================
     2. GLOBAL BASE
     ==================================================================== */
  body {
    font-family: var(--pt-font-main) !important;
    color: var(--pt-t1) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    background:
      /* Strong dark overlay so text contrast holds on any bg image */
      linear-gradient(180deg,
        color-mix(in srgb, var(--pt-z0) 92%, transparent) 0%,
        color-mix(in srgb, var(--pt-z0) 78%, transparent) 40%,
        color-mix(in srgb, var(--pt-z0) 90%, transparent) 100%),
      url('/vendor/images/bg-1920.jpg') center/cover fixed no-repeat,
      var(--pt-z0) !important;
  }
  @media (max-width: 900px) {
    body { background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--pt-z0) 92%, transparent) 0%,
        color-mix(in srgb, var(--pt-z0) 78%, transparent) 40%,
        color-mix(in srgb, var(--pt-z0) 90%, transparent) 100%),
      url('/vendor/images/bg-1280.jpg') !important; }
  }
  [class*="Page-page-"],
  [class*="AppBody-appBody-"] {
    font-family: var(--pt-font-main) !important;
    background: transparent !important;
    color: var(--pt-t1) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
  }

  /* Top signature line — accent-colored, transitions with artwork */
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--pt-accent-muted) 20%,
      var(--pt-accent) 50%,
      var(--pt-accent-muted) 80%,
      transparent 100%
    );
    box-shadow: var(--pt-glow-sm);
    z-index: 9999;
    pointer-events: none;
    transition: background 380ms ease, box-shadow 380ms ease;
  }

  /* ====================================================================
     3. TYPOGRAPHY
     ==================================================================== */
  h1, h2, h3,
  [class*="MetadataPosterTitle-title-"],
  [class*="PrePlayHero-title-"],
  [class*="MetadataPostersTitle-title-"] {
    font-family: var(--pt-font-display) !important;
    font-weight: 600 !important;
    color: var(--pt-t0) !important;
    letter-spacing: -.02em !important;
  }

  [class*="DurationRemaining-"],
  [class*="TimeRemaining-"],
  [class*="VideoTimeline-time-"],
  [class*="VideoTimeline-"],
  [class*="MediaInfo-"],
  [class*="MediaFlags-"] {
    font-family: var(--pt-font-mono) !important;
    color: var(--pt-t2) !important;
    font-size: .78rem !important;
    letter-spacing: .04em !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* ====================================================================
     4. NAVIGATION & TOP BAR
     ==================================================================== */
  [class*="Sidebar-sidebar-"],
  [class*="TopBar-topBar-"],
  [class*="Header-header-"] {
    background: rgba(8, 8, 16, .96) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.04),
      0 4px 24px rgba(0,0,0,.65) !important;
    position: relative !important;
  }

  /* Accent line under nav, transitions with artwork */
  [class*="TopBar-topBar-"]::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(
      90deg,
      transparent,
      var(--pt-a30) 30%,
      var(--pt-a50) 50%,
      var(--pt-a30) 70%,
      transparent
    ) !important;
    pointer-events: none !important;
    transition: background 380ms ease !important;
  }

  /* Nav links */
  [class*="NavItem-"],
  [class*="SidebarNavItem-"] {
    color: var(--pt-t2) !important;
    font-family: var(--pt-font-main) !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    position: relative !important;
    padding-bottom: 3px !important;
    transition: color var(--pt-t-snap) !important;
  }
  [class*="NavItem-"]:hover,
  [class*="SidebarNavItem-"]:hover {
    color: var(--pt-t0) !important;
  }
  [class*="NavItem-active-"],
  [class*="NavItem-selected-"] {
    color: var(--pt-accent) !important;
  }
  [class*="NavItem-active-"]::after,
  [class*="NavItem-selected-"]::after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: var(--pt-accent) !important;
    box-shadow: var(--pt-glow-sm) !important;
    border-radius: 1px !important;
    transition: background 380ms ease !important;
  }
  [class*="NavItem-"]:hover::after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: var(--pt-a50) !important;
    border-radius: 1px !important;
  }

  /* Back / breadcrumb links */
  [class*="Breadcrumb-"],
  [class*="BackButton-"],
  [class*="PrePlayBreadcrumb-"],
  [class*="BackLink-"] {
    color: var(--pt-t2) !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: color var(--pt-t-snap) !important;
  }
  [class*="Breadcrumb-"]:hover,
  [class*="BackButton-"]:hover,
  [class*="BackLink-"]:hover {
    color: var(--pt-accent) !important;
  }

  /* ====================================================================
     5. POSTER CARDS — base styles (shelves redefine sizing in section 13)
     ==================================================================== */
  [class*="PosterCard-card-"],
  [class*="MetadataPosterCard-"],
  [class*="CardBase-card-"] {
    border-radius: var(--pt-r-md) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: var(--pt-shadow-card) !important;
    overflow: hidden !important;
    background-color: var(--pt-z3) !important;
    transition:
      transform var(--pt-t-med),
      box-shadow var(--pt-t-med),
      border-color var(--pt-t-med),
      filter var(--pt-t-med) !important;
    filter: saturate(.88) brightness(.94) !important;
  }

  [class*="PosterCard-card-"]:hover,
  [class*="MetadataPosterCard-"]:hover,
  [class*="CardBase-card-"]:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow:
      var(--pt-shadow-deep),
      0 0 0 1px var(--pt-a50),
      0 0 30px var(--pt-a12) !important;
    border-color: var(--pt-a50) !important;
    filter: saturate(1.08) brightness(1.05) !important;
    will-change: transform, box-shadow !important;
    z-index: 3 !important;
  }

  [class*="PosterCard-card-"]:hover img,
  [class*="MetadataPosterCard-"]:hover img,
  [class*="CardBase-card-"]:hover img {
    animation: pt-aberration 200ms forwards;
  }
  @keyframes pt-aberration {
    0%   { filter: none; }
    25%  { filter: drop-shadow(-2px 0 rgba(255,60,60,.3)) drop-shadow(2px 0 rgba(60,160,255,.3)); }
    75%  { filter: drop-shadow(1px 0 rgba(60,220,180,.25)) drop-shadow(-1px 0 rgba(255,60,120,.2)); }
    100% { filter: none; }
  }

  /* ── Shelf section titles (section 13 adds grid context) ── */
  [class*="HubHeader-title-"],
  [class*="DirectoryListPageTitle-"],
  [class*="ShelfHeader-title-"] {
    font-family: var(--pt-font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--pt-t0) !important;
    padding-left: 18px !important;
    position: relative !important;
  }

  [class*="HubHeader-title-"]::before,
  [class*="DirectoryListPageTitle-"]::before,
  [class*="ShelfHeader-title-"]::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important; height: 1.3em !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, var(--pt-accent), var(--pt-accent-muted)) !important;
    box-shadow: var(--pt-glow-sm) !important;
    transition: background 380ms ease !important;
  }

  /* Tag / genre chips */
  [class*="TagList-"],
  [class*="Tag-tag-"],
  [class*="GenreTag-"],
  [class*="Tag-link-"] {
    background: var(--pt-a8) !important;
    border: 1px solid var(--pt-a20) !important;
    color: color-mix(in srgb, var(--pt-accent) 80%, var(--pt-t1)) !important;
    font-family: var(--pt-font-main) !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    padding: 4px 12px !important;
    border-radius: var(--pt-r-pill) !important;
    transition: background var(--pt-t-snap), color var(--pt-t-snap) !important;
  }
  [class*="TagList-"]:hover,
  [class*="Tag-tag-"]:hover,
  [class*="Tag-link-"]:hover {
    background: var(--pt-a20) !important;
    color: var(--pt-accent) !important;
  }

  /* ====================================================================
     6. DETAIL / PREPLAY PAGE
     ==================================================================== */
  [class*="PrePlayContainer-container-"] {
    position: relative !important;
  }

  [class*="PrePlayHero-hero-"] {
    background:
      linear-gradient(
        105deg,
        rgba(8,8,16,.98) 0%,
        rgba(10,10,18,.90) 35%,
        rgba(10,10,18,.60) 62%,
        rgba(8,8,16,.20) 100%
      ) !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  /* Accent ambient wash — shifts color with artwork */
  [class*="PrePlayHero-hero-"]::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      radial-gradient(1100px 600px at 78% 55%,
        color-mix(in srgb, var(--pt-accent) 9%, transparent), transparent 60%),
      radial-gradient(500px 350px at 4%  95%,
        color-mix(in srgb, var(--pt-accent) 11%, transparent), transparent 65%),
      linear-gradient(0deg, rgba(0,0,0,.3) 0%, transparent 40%) !important;
    pointer-events: none !important;
    transition: background 380ms ease !important;
  }

  [class*="PrePlayHero-title-"] {
    font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.03em !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Title glitch plays once on initial paint, not on every hover (audit P2:
     hover-triggered animation was fatiguing during normal browsing). */
  [class*="PrePlayHero-title-"] {
    animation: pt-glitch 400ms steps(1) 1 !important;
  }
  @keyframes pt-glitch {
    0%   { text-shadow: none; transform: none; }
    15%  { text-shadow: -3px 0 rgba(255,60,60,.55), 3px 0 rgba(60,160,255,.55); transform: skewX(-1deg); }
    35%  { text-shadow: 3px 0 rgba(60,220,180,.5), -3px 0 rgba(255,60,120,.45); transform: skewX(.5deg); }
    55%  { text-shadow: -2px 0 rgba(255,60,60,.35); transform: translate(-1px, 1px); }
    75%  { text-shadow: none; transform: none; }
    90%  { text-shadow: -1px 0 rgba(60,220,180,.3), 1px 0 rgba(60,160,255,.4); }
    100% { text-shadow: none; transform: none; }
  }

  /* ====================================================================
     7. BUTTONS
     ==================================================================== */
  /* Primary — solid accent fill */
  [class*="PrimaryButton-button-"],
  [class*="PlayButton-button-"],
  [class*="Button-primary-"] {
    background: var(--pt-accent) !important;
    border: none !important;
    color: var(--pt-z0) !important;
    border-radius: var(--pt-r-pill) !important;
    padding: 11px 28px !important;
    font-family: var(--pt-font-main) !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    box-shadow: 0 4px 16px var(--pt-a30), 0 1px 4px rgba(0,0,0,.4) !important;
    position: relative !important;
    overflow: hidden !important;
    transition:
      filter var(--pt-t-fast),
      transform var(--pt-t-fast),
      box-shadow var(--pt-t-fast),
      background 380ms ease !important;
  }
  [class*="PrimaryButton-button-"]::before,
  [class*="PlayButton-button-"]::before,
  [class*="Button-primary-"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 60%) !important;
    border-radius: inherit !important;
  }
  [class*="PrimaryButton-button-"]:hover,
  [class*="PlayButton-button-"]:hover,
  [class*="Button-primary-"]:hover {
    filter: brightness(1.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px var(--pt-a30), 0 2px 8px rgba(0,0,0,.5) !important;
  }
  [class*="PrimaryButton-button-"]:active,
  [class*="PlayButton-button-"]:active,
  [class*="Button-primary-"]:active {
    transform: translateY(0) !important;
    filter: brightness(.95) !important;
  }

  /* Secondary — ghost */
  [class*="SecondaryButton-"],
  [class*="Button-secondary-"],
  [class*="Button-ghost-"] {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: var(--pt-t1) !important;
    border-radius: var(--pt-r-pill) !important;
    font-family: var(--pt-font-main) !important;
    font-weight: 500 !important;
    font-size: .88rem !important;
    transition: background var(--pt-t-fast), border-color var(--pt-t-fast), color var(--pt-t-fast) !important;
  }
  [class*="SecondaryButton-"]:hover,
  [class*="Button-secondary-"]:hover,
  [class*="Button-ghost-"]:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.28) !important;
    color: var(--pt-t0) !important;
  }

  /* ====================================================================
     8. PLAYER CONTROLS
     ==================================================================== */
  [class*="PlayerControls-controls-"],
  [class*="VideoControls-controls-"] {
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(8,8,16,.82) 35%,
        rgba(8,8,16,.98) 100%),
      var(--pt-grain) !important;
    padding: 28px 36px 36px !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }

  [class*="VideoSlider-slider-"] [class*="-track-"],
  [class*="Slider-track-"] {
    background: rgba(255,255,255,.16) !important;
    height: 3px !important;
    border-radius: var(--pt-r-pill) !important;
  }

  [class*="VideoSlider-slider-"] [class*="-fill-"],
  [class*="Slider-fill-"] {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--pt-accent) 70%, white),
      var(--pt-accent)) !important;
    border-radius: var(--pt-r-pill) !important;
    box-shadow: var(--pt-glow-sm) !important;
    transition: background 380ms ease !important;
  }

  [class*="VideoSlider-slider-"] [class*="-thumb-"],
  [class*="Slider-thumb-"] {
    background: var(--pt-t0) !important;
    border: 2px solid var(--pt-z0) !important;
    box-shadow: 0 0 0 2px var(--pt-accent), var(--pt-glow-sm) !important;
    width: 14px !important;
    height: 14px !important;
    transition: box-shadow 380ms ease !important;
  }

  [class*="PlayPauseButton-"] {
    background: rgba(255,255,255,.1) !important;
    border: 1.5px solid rgba(255,255,255,.22) !important;
    color: var(--pt-t0) !important;
    border-radius: 50% !important;
    transition: all var(--pt-t-fast) !important;
  }
  [class*="PlayPauseButton-"]:hover {
    background: var(--pt-accent) !important;
    border-color: var(--pt-accent) !important;
    color: var(--pt-z0) !important;
    box-shadow: var(--pt-glow-md) !important;
  }

  [class*="IconButton-button-"] {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    color: var(--pt-t2) !important;
    border-radius: 50% !important;
    transition: all var(--pt-t-fast) !important;
  }
  [class*="IconButton-button-"]:hover {
    background: rgba(255,255,255,.13) !important;
    border-color: rgba(255,255,255,.26) !important;
    color: var(--pt-t0) !important;
  }

  [class*="MediaFlag-"],
  [class*="CodecInfo-"],
  [class*="StreamInfo-"] {
    font-family: var(--pt-font-mono) !important;
    font-size: .68rem !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    color: var(--pt-t2) !important;
    border-radius: var(--pt-r-pill) !important;
    padding: 3px 10px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  /* ====================================================================
     9. SUBTITLES
     ==================================================================== */
  [class*="VideoSubtitle-"] {
    font-family: var(--pt-font-main) !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    color: var(--pt-t0) !important;
  }
  [class*="VideoSubtitle-"] > * {
    background: rgba(0,0,0,.80) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    padding: 5px 14px !important;
    border-radius: var(--pt-r-sm) !important;
    backdrop-filter: blur(6px) !important;
  }

  /* ====================================================================
     10. PANELS, MODALS, OVERLAYS
     ==================================================================== */
  [class*="Modal-modal-"],
  [class*="Overlay-overlay-"],
  [class*="PopupMenu-menu-"],
  [class*="Dropdown-"],
  [class*="ContextMenu-"] {
    background: rgba(10,10,20,.97) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow:
      var(--pt-shadow-xl),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) saturate(1.5) !important;
    border-radius: var(--pt-r-lg) !important;
  }

  [class*="MenuItem-"],
  [class*="PopupMenuItem-"] {
    font-family: var(--pt-font-main) !important;
    font-size: .86rem !important;
    color: var(--pt-t1) !important;
    transition: background var(--pt-t-snap), color var(--pt-t-snap) !important;
  }
  [class*="MenuItem-"]:hover,
  [class*="PopupMenuItem-"]:hover {
    background: var(--pt-a8) !important;
    color: var(--pt-t0) !important;
  }

  /* ====================================================================
     11. SCROLLBARS
     ==================================================================== */
  html, body, [class*="Page-page-"], [class*="Scroller-"] {
    scrollbar-width: thin !important;
    scrollbar-color: var(--pt-z5) var(--pt-z1) !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  [class*="Page-page-"]::-webkit-scrollbar,
  [class*="Scroller-"]::-webkit-scrollbar { width: 6px; height: 6px; }
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  [class*="Page-page-"]::-webkit-scrollbar-track,
  [class*="Scroller-"]::-webkit-scrollbar-track { background: var(--pt-z1); }
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  [class*="Page-page-"]::-webkit-scrollbar-thumb,
  [class*="Scroller-"]::-webkit-scrollbar-thumb {
    background: var(--pt-z5);
    border-radius: var(--pt-r-pill);
    border: 1px solid var(--pt-z1);
  }
  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  [class*="Page-page-"]::-webkit-scrollbar-thumb:hover,
  [class*="Scroller-"]::-webkit-scrollbar-thumb:hover {
    background: var(--pt-a50);
  }

  /* ====================================================================
     12. FOCUS, SETTINGS, LOADING
     ==================================================================== */
  *:focus-visible {
    outline: 2px solid var(--pt-accent) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px var(--pt-a12) !important;
    border-radius: 4px !important;
  }

  [class*="PreferencesPage-"],
  [class*="SettingsPage-"] { background: var(--pt-z1) !important; }
  [class*="PreferenceRow-"],
  [class*="SettingsRow-"] { border-bottom-color: rgba(255,255,255,.06) !important; }

  [class*="Skeleton-"],
  [class*="LoadingIndicator-"],
  [class*="Spinner-"] {
    background: linear-gradient(
      90deg, var(--pt-z3) 25%, var(--pt-a5) 50%, var(--pt-z3) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: pt-shimmer 1.8s ease-in-out infinite !important;
  }
  @keyframes pt-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ====================================================================
     13. BROWSE — FREE-FLOAT 2D GRID WITH FEATURED SIZING
     ==================================================================== */

  /* Shelf container → wrapping 2D grid */
  [class*="HubList-list-"],
  [class*="MediaList-list-"],
  [class*="GalleryList-list-"],
  [class*="HomeHubList-list-"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
    grid-auto-rows: 215px !important;
    gap: 18px !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  [class*="Shelf-shelf-"],
  [class*="MediaHub-hub-"],
  [class*="HubsHub-hub-"],
  [class*="HomeHubRow-row-"] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  [class*="HubListItem-item-"],
  [class*="MediaListItem-"],
  [class*="GalleryListItem-"] {
    position: relative !important;
  }

  /* Featured: first — 2 cols × 2 rows */
  [class*="HubListItem-item-"]:first-child,
  [class*="MediaListItem-"]:first-child,
  [class*="GalleryListItem-"]:first-child {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }
  [class*="HubListItem-item-"]:first-child [class*="PosterCard-card-"],
  [class*="HubListItem-item-"]:first-child [class*="CardBase-card-"],
  [class*="MediaListItem-"]:first-child [class*="PosterCard-card-"] {
    height: 100% !important;
    border-color: var(--pt-a30) !important;
    box-shadow:
      var(--pt-shadow-deep),
      0 0 0 1px var(--pt-a20),
      0 0 40px var(--pt-a8) !important;
  }

  /* FEATURED badge */
  [class*="HubListItem-item-"]:first-child::before,
  [class*="MediaListItem-"]:first-child::before {
    content: "✦  FEATURED" !important;
    position: absolute !important;
    top: 10px !important; right: 10px !important;
    z-index: 10 !important;
    font-family: var(--pt-font-mono) !important;
    font-size: .58rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--pt-accent) !important;
    background: rgba(8,8,16,.92) !important;
    border: 1px solid var(--pt-a30) !important;
    padding: 4px 9px !important;
    border-radius: var(--pt-r-sm) !important;
    box-shadow: var(--pt-glow-sm) !important;
    transition: color 380ms ease, border-color 380ms ease !important;
  }

  /* Secondary: second — 1 col × 2 rows */
  [class*="HubListItem-item-"]:nth-child(2),
  [class*="MediaListItem-"]:nth-child(2),
  [class*="GalleryListItem-"]:nth-child(2) {
    grid-row: span 2 !important;
  }
  [class*="HubListItem-item-"]:nth-child(2) [class*="PosterCard-card-"],
  [class*="HubListItem-item-"]:nth-child(2) [class*="CardBase-card-"],
  [class*="MediaListItem-"]:nth-child(2) [class*="PosterCard-card-"] {
    height: 100% !important;
    border-color: rgba(255,255,255,.1) !important;
  }

  /* Wide: third — 2 cols × 1 row */
  [class*="HubListItem-item-"]:nth-child(3),
  [class*="MediaListItem-"]:nth-child(3) {
    grid-column: span 2 !important;
  }

  /* Card: fill container, gradient overlay, accent bloom */
  [class*="PosterCard-card-"],
  [class*="CardBase-card-"],
  [class*="MetadataPosterCard-"] {
    border-radius: var(--pt-r-md) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    overflow: hidden !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    transition:
      transform var(--pt-t-fast),
      box-shadow var(--pt-t-fast),
      border-color var(--pt-t-fast) !important;
  }

  [class*="PosterCard-card-"]::after,
  [class*="CardBase-card-"]::after,
  [class*="MetadataPosterCard-"]::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        transparent 28%,
        rgba(8,8,16,.55) 65%,
        rgba(8,8,16,.95) 100%
      ),
      radial-gradient(
        ellipse 80% 55% at 50% 115%,
        color-mix(in srgb, var(--pt-accent) 7%, transparent), transparent 70%
      ) !important;
    border-radius: inherit !important;
    z-index: 1 !important;
    transition: background 380ms ease !important;
  }

  /* Card label */
  [class*="PosterCard-card-"] [class*="CardOverlay-"],
  [class*="PosterCard-card-"] [class*="PosterCardOverlay-"],
  [class*="CardBase-card-"]   [class*="CardOverlay-"],
  [class*="CardBase-card-"]   .lbl {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 2 !important;
    padding: 10px 12px !important;
    font-family: var(--pt-font-main) !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--pt-t0) !important;
    line-height: 1.3 !important;
  }

  /* Card hover */
  [class*="PosterCard-card-"]:hover,
  [class*="CardBase-card-"]:hover,
  [class*="MetadataPosterCard-"]:hover {
    transform: translateY(-5px) scale(1.025) !important;
    border-color: var(--pt-a50) !important;
    box-shadow:
      var(--pt-shadow-deep),
      0 0 0 1px var(--pt-a30),
      0 0 30px var(--pt-a12) !important;
    will-change: transform, box-shadow !important;
    z-index: 3 !important;
  }

  /* Section headers */
  [class*="HubHeader-title-"],
  [class*="DirectoryListPageTitle-"],
  [class*="ShelfHeader-title-"],
  [class*="Shelf-title-"],
  [class*="MediaHub-title-"] {
    font-family: var(--pt-font-display) !important;
    font-size: 1.12rem !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    color: var(--pt-t0) !important;
    padding: 28px 0 12px 20px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
  }

  [class*="HubHeader-title-"]::after,
  [class*="ShelfHeader-title-"]::after,
  [class*="Shelf-title-"]::after {
    content: "View All →" !important;
    font-family: var(--pt-font-main) !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    color: var(--pt-t3) !important;
    opacity: 0 !important;
    transition: opacity var(--pt-t-fast), color var(--pt-t-fast) !important;
    margin-left: auto !important;
    padding-right: 4px !important;
  }
  [class*="HubHeader-title-"]:hover::after,
  [class*="ShelfHeader-title-"]:hover::after,
  [class*="Shelf-title-"]:hover::after {
    opacity: 1 !important;
    color: var(--pt-accent) !important;
  }

  [class*="Shelf-"],
  [class*="MediaHub-"],
  [class*="HubsHub-"] { margin-bottom: 32px !important; }

  /* Editorial featured-tile sizing — scoped to .shelf.editorial only so it
     does NOT match real Plex card lists and create rogue 2x2 featured tiles
     across the production site. The dev harness uses data-size attributes
     for size control; this nth-child block is dead code in v0.9 and removed. */

  /* ====================================================================
     14. ANIMATION PAUSE — toggled by userscript (body.pt-anim-paused)
     ==================================================================== */
  body.pt-anim-paused [class*="Skeleton-"],
  body.pt-anim-paused [class*="LoadingIndicator-"],
  body.pt-anim-paused [class*="Spinner-"] {
    animation-play-state: paused !important;
  }

  /* ====================================================================
     15. SELECTOR FALLBACKS — alternate Plex component name patterns
     ==================================================================== */
  [class*="DetailHero-hero-"],
  [class*="PrePlayHero-"] {
    background:
      linear-gradient(105deg,
        rgba(8,8,16,.98) 0%,
        rgba(10,10,18,.90) 35%,
        rgba(10,10,18,.60) 62%,
        rgba(8,8,16,.20) 100%
      ) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  [class*="ArtBackground-bg-"],
  [class*="BackgroundImage-"] {
    opacity: .35 !important;
    filter: saturate(.7) brightness(.6) !important;
  }

  [class*="DetailHero-title-"],
  [class*="TitleSection-title-"] {
    font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.8rem) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* ====================================================================
     16. REDUCED MOTION
     ==================================================================== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: .01ms !important;
    }
  }

  /* ====================================================================
     17. CURRENT PLEX CLASS NAME ALIASES (2025/2026 build)
     Plex rotates hashed class suffixes on each deploy. These rules
     target the stable prefix portion that never changes.
     ==================================================================== */

  /* Background container — full page dark wash */
  [class*="FullPageBackground-backgroundContainer"] {
    background: linear-gradient(180deg, rgba(8,8,16,.94) 0%, rgba(8,8,16,.80) 40%, rgba(8,8,16,.93) 100%) !important;
    background-color: #080810 !important;
  }
  /* Body and root surface — catch-all so no gray ever shows through */
  body, [class*="FullPage-container-"], [class*="application"] {
    background-color: #080810 !important;
  }

  /* Sidebar / source nav */
  [class*="SourceSidebar-"],
  [class*="SourceSidebarContainer-"] {
    background: rgba(8,8,16,.96) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    backdrop-filter: blur(16px) !important;
  }

  /* Sidebar nav items */
  [class*="SourceSidebarItem-"],
  [class*="SourceSidebarLink-"] {
    color: rgba(255,255,255,.65) !important;
    font-family: var(--pt-font-main) !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    transition: color .18s ease !important;
    border-radius: 8px !important;
  }
  [class*="SourceSidebarItem-"]:hover,
  [class*="SourceSidebarLink-"]:hover {
    color: #fff !important;
    background: rgba(255,255,255,.06) !important;
  }
  [class*="SourceSidebarItem-"][class*="active"],
  [class*="SourceSidebarItem-"][class*="selected"],
  [class*="SourceSidebarLink-"][class*="active"],
  [class*="SourceSidebarLink-"][class*="selected"] {
    color: var(--pt-accent) !important;
    background: color-mix(in srgb, var(--pt-accent) 12%, transparent) !important;
  }

  /* Hub / shelf section headers — "Continue Watching", "Recently Added" etc */
  [class*="VirtualHubScroller-hubHeader"],
  [class*="HubScroller-hubHeader"],
  [class*="HubScroller-title"],
  [class*="VirtualHubScroller-title"] {
    font-family: var(--pt-font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--pt-t0) !important;
    letter-spacing: -.01em !important;
    padding: 24px 0 10px 0 !important;
    border-left: 3px solid color-mix(in srgb, var(--pt-accent, #7eb8f7) 70%, transparent) !important;
    padding-left: 12px !important;
    margin-bottom: 0 !important;
  }

  /* Hub row container */
  [class*="VirtualHubScroller-hub"],
  [class*="HubScroller-hub"] {
    background: transparent !important;
    padding: 0 !important;
  }

  /* Poster cards — current naming */
  [class*="PosterCard-card"],
  [class*="MetadataPosterListItem-card"],
  [class*="MetadataSimplePosterCard-card"],
  [class*="MetadataPosterCard-card"] {
    background: rgba(20,20,32,.9) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    transition: transform .22s cubic-bezier(.2,.7,.3,1),
                box-shadow .22s,
                border-color .22s !important;
    overflow: hidden !important;
  }
  [class*="PosterCard-card"]:hover,
  [class*="MetadataPosterListItem-card"]:hover,
  [class*="MetadataSimplePosterCard-card"]:hover {
    transform: translateY(-4px) scale(1.025) !important;
    border-color: color-mix(in srgb, var(--pt-accent, #7eb8f7) 45%, transparent) !important;
    box-shadow:
      0 18px 40px rgba(0,0,0,.55),
      0 0 0 1px color-mix(in srgb, var(--pt-accent, #7eb8f7) 30%, transparent) !important;
  }

  /* Page header — "Home", "Movies" etc */
  [class*="PageHeader-pageHeader"],
  [class*="PageHeader-header"] {
    font-family: var(--pt-font-display) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--pt-t0) !important;
    letter-spacing: -.02em !important;
    background: transparent !important;
  }

  /* Global font application to any element not caught above */
  [class*="Page-page-"],
  [class*="AppBody-"],
  [class*="PageBody-"],
  [class*="MainContent-"],
  [class*="Content-content-"],
  [class*="ViewContent-"] {
    font-family: var(--pt-font-main) !important;
    background: transparent !important;
    color: var(--pt-t1) !important;
  }

  /* Metadata title text on cards */
  [class*="MetadataPosterTitle-"],
  [class*="CardTitle-"],
  [class*="CardOverlay-title"] {
    font-family: var(--pt-font-main) !important;
    color: var(--pt-t0) !important;
    font-weight: 600 !important;
  }

  /* Progress bar on continue-watching cards */
  [class*="CardProgressBar-"],
  [class*="ProgressBar-"] {
    background: rgba(255,255,255,.18) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
  }
  [class*="CardProgressBar-"] > *,
  [class*="ProgressBar-fill"],
  [class*="ProgressBar-progress"] {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--pt-accent, #7eb8f7) 80%, #fff),
      var(--pt-accent, #7eb8f7)
    ) !important;
    border-radius: 2px !important;
  }

  /* Play button on hover — accent coloured */
  [class*="PlayButton-"],
  [class*="CardOverlay-playButton"] {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--pt-accent, #7eb8f7) 100%, #fff 10%),
      var(--pt-accent, #7eb8f7)
    ) !important;
    color: #08080f !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--pt-accent, #7eb8f7) 40%, transparent) !important;
  }

  /* ── Section 18: Live DOM selectors (2025-26 Plex class names) ─────── */

  /* Top navigation bar */
  [class*="NavBar-container-"] {
    background: rgba(8,8,16,.97) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  /* Page header title text */
  [class*="PageHeaderTitle-title-"] {
    font-family: var(--pt-font-display) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    color: var(--pt-t0) !important;
  }
  [class*="PageHeaderTitle-container-"] {
    background: transparent !important;
  }

  /* Sidebar links (current Plex uses SidebarLink-) */
  [class*="SidebarLink-sidebarLink-"] {
    color: rgba(255,255,255,.65) !important;
    font-family: var(--pt-font-main) !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: background .15s, color .15s !important;
  }
  [class*="SidebarLink-sidebarLink-"]:hover,
  [class*="SidebarLink-sidebarLink-"][class*="active"],
  [class*="SidebarLink-sidebarLink-"][aria-selected="true"] {
    color: var(--pt-t0) !important;
    background: rgba(255,255,255,.07) !important;
  }
  [class*="SidebarLink-title-"] {
    font-family: var(--pt-font-main) !important;
  }

  /* Detail / pre-play page */
  [class*="PrePlayPageContent-prePlayContentWrapper-"] {
    background: transparent !important;
  }
  [class*="PrePlayPageHeader-pageHeader-"] {
    font-family: var(--pt-font-display) !important;
    font-weight: 700 !important;
    color: var(--pt-t0) !important;
  }
  [class*="PrePlayMetadata-container-"] {
    color: var(--pt-t1) !important;
    font-family: var(--pt-font-main) !important;
  }

  /* Player seek / volume slider */
  [class*="Slider-track-"] {
    background: rgba(255,255,255,.18) !important;
    border-radius: 4px !important;
  }
  [class*="Slider-thumb-"] {
    background: var(--pt-accent, #7eb8f7) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-accent, #7eb8f7) 30%, transparent) !important;
  }

  /* Card progress bars (MetadataPosterCard variant) */
  [class*="MetadataPosterCard-progressBar-"],
  [class*="MetadataPosterCard-progress-"] {
    background: rgba(255,255,255,.18) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
  }
  [class*="MetadataPosterCard-progress-"] > *,
  [class*="MetadataPosterCardProgressBar-progress-"] {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--pt-accent, #7eb8f7) 80%, #fff),
      var(--pt-accent, #7eb8f7)
    ) !important;
    border-radius: 2px !important;
  }

  /* Scroll containers — transparent so page bg shows through */
  [class*="Scroller-scroller-"] {
    background: transparent !important;
  }

  /* Icon buttons — accent tint on hover */
  [class*="IconButton-iconButton-"] {
    color: rgba(255,255,255,.65) !important;
    transition: color .15s, background .15s !important;
    border-radius: 50% !important;
  }
  [class*="IconButton-iconButton-"]:hover {
    color: var(--pt-accent, #7eb8f7) !important;
    background: color-mix(in srgb, var(--pt-accent, #7eb8f7) 12%, transparent) !important;
  }
}