/* ============================================================
   Carib Radio web app — /listen — design tokens + components

   Source: the FROZEN concept-v5 baseline committed at design/concept-v5/
   (index.html <style>, lines 11-1491), ported verbatim. This file supersedes
   the earlier partial port of the same lineage (App Idiom rev 8-app base).

   Two deliberate deviations from the frozen baseline, both owner-decided:

   1. D-3 — no ad units. The ads-v1 pass's carousel rules (.banner.ads,
      .adTrack, .adSlide, .adTag, .adDots, .adNav and their responsive
      variants) are removed, and the four editorial hero banners
      (.bimg/.pill/.heroTitle/.heroSub/.heroPlay) are retained instead.
      21 ad rules dropped; 0 ad selectors remain in the CSS body.

   2. D-2 — Poppins is self-hosted; @font-face lives in fonts.css, loaded
      before this file. No Google Fonts reference anywhere.

   Everything else is the locked design: the 4-step dusk elevation ramp
   (#081114 / #0E1C22 / #16242B / #24373F), the solid --rail #46616C hairline,
   the AA-lifted dusk secondary text (#B4C3C3 / #8FA3A6), and the dusk 1px
   inset-ring outline system. Light theme is unchanged from the deployed port.
   ============================================================ */
  :root{
    --paper:#F4F1EC; --card:#FFFFFF; --herowash:#E6F1F3; --raised:#FFFFFF;
    --inkdark:#0D1B1E; --deep:#1F4A52; --teal:#00778B; --inkfill:#FFFFFF;
    --gold:#E8B422; --badge-ink:#0D1B1E; --seafoam:#7BCAB0; --sand:#F6E5D3;
    --slate:#6F6C6C; --placeholder:#A09B95; --iconoff:#C8C4BD; --rail:#E2E0DD;
    --floatg:linear-gradient(95deg,#00879C 0%,#1F4A52 100%);
    --soft:0 10px 24px rgba(13,27,30,.10);
    --soft2:0 14px 26px rgba(13,27,30,.14);
    --glow:0 10px 22px rgba(0,119,139,.40);
    --glowbig:0 16px 32px rgba(13,27,30,.16);
    --toastbg:#0D1B1E;
    --notif-red:oklch(55% 0.2 25);
    --sw:230px; --bH:240px; --cx:500px;
    --ease-spring:cubic-bezier(.32,.72,0,1);
  }
  html[data-theme="dusk"]{
    /* D2: paper → wash → card → raised, four clearly perceptible dusk steps (L* ≈ 4/7/13/22) */
    --paper:#081114; --card:#16242B; --herowash:#0E1C22; --raised:#24373F;
    --inkdark:#F6E5D3; --deep:#F6E5D3; --teal:#7BCAB0; --inkfill:#08151A;
    /* D4: secondary text and idle icons lifted to AA on --card (≈6.0-8.7:1) */
    --slate:#B4C3C3; --placeholder:#8FA3A6; --iconoff:#8FA3A6;
    /* D2: solid desaturated teal-grey hairline so chips, rails, dividers and outlines read */
    --rail:#46616C;
    --floatg:linear-gradient(95deg,#00778B 0%,#14262B 100%);
    --soft:0 10px 24px rgba(4,10,12,.5);
    --soft2:0 14px 26px rgba(4,10,12,.55);
    --glow:0 10px 22px rgba(123,202,176,.28);
    --glowbig:0 16px 32px rgba(4,10,12,.55);
    --toastbg:#24373F;
  }
  /* D3: dusk outline+elevation combos (dusk-scoped; light rendering is untouched).
     Black blurs no longer carry separation on dark surfaces: each elevated card,
     tile or control gets a 1px inset hairline from --rail, shadow kept as depth cue only. */
  html[data-theme="dusk"] .cov img,html[data-theme="dusk"] .tcov img,html[data-theme="dusk"] .scard .disc,
  html[data-theme="dusk"] .g,html[data-theme="dusk"] .btile,html[data-theme="dusk"] .lvtile .im,
  html[data-theme="dusk"] .drArt,html[data-theme="dusk"] .empty,html[data-theme="dusk"] .dlIcon,html[data-theme="dusk"] .shot{
    box-shadow:0 14px 26px rgba(4,10,12,.55),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .row img,html[data-theme="dusk"] .artists img,html[data-theme="dusk"] .mrow .mi{
    box-shadow:0 10px 24px rgba(4,10,12,.5),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .cbtn,html[data-theme="dusk"] .refbtn,html[data-theme="dusk"] .arrL,
  html[data-theme="dusk"] .lback,html[data-theme="dusk"] .stBack,html[data-theme="dusk"] .sact .rnd,
  html[data-theme="dusk"] .adNav{
    box-shadow:0 10px 24px rgba(4,10,12,.5),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .banner.ads{box-shadow:inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .mrow,html[data-theme="dusk"] .upc,html[data-theme="dusk"] .fsrc,
  html[data-theme="dusk"] .fseg,html[data-theme="dusk"] .dens,html[data-theme="dusk"] .skel,
  html[data-theme="dusk"] .skp,html[data-theme="dusk"] .sfoot .ghostbtn,html[data-theme="dusk"] .kpop{
    box-shadow:inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .float,html[data-theme="dusk"] .signin,html[data-theme="dusk"] .mini{
    box-shadow:0 22px 44px rgba(0,119,139,.4),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .promo{box-shadow:0 16px 32px rgba(0,119,139,.3),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .player{box-shadow:0 -14px 34px rgba(4,10,12,.5),inset 0 1px 0 var(--rail)}
  html[data-theme="dusk"] .tabbar{box-shadow:0 -10px 26px rgba(4,10,12,.5),inset 0 1px 0 var(--rail)}
  html[data-theme="dusk"] .sidebar{box-shadow:inset -1px 0 0 var(--rail)}
  html[data-theme="dusk"] .sheet{box-shadow:-24px 0 60px rgba(4,10,12,.55),inset 1px 0 0 var(--rail)}
  html[data-theme="dusk"] .stBox{box-shadow:0 40px 100px rgba(4,10,12,.6),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .sover{box-shadow:0 40px 90px rgba(4,10,12,.6),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] #toast{box-shadow:0 22px 44px rgba(4,10,12,.55),inset 0 0 0 1px var(--rail)}
  /* D1 superseded: the four tab banners are now full-bleed ad carousels and the slim page banners
     carry their copy on the plain wash, so no dusk scrim is needed on any of them. */
  *{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
  html,body{height:100%}
  body{background:var(--card);color:var(--inkdark);font-family:'Poppins',sans-serif;overflow:hidden;transition:background .25s,color .25s}
  button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
  :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
  html[data-theme="dusk"] :focus-visible{outline-color:var(--gold)}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

  /* ---------- views ---------- */
  .view{display:none}
  .view.on{display:block;position:fixed;left:var(--sw);right:0;top:0;bottom:0;overflow-y:auto;scrollbar-width:none;transition:left .25s}
  .view.on::-webkit-scrollbar{display:none}

  /* ---------- sidebar ---------- */
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sw);background:var(--card);z-index:5;transition:background .25s,width .25s;display:flex;flex-direction:column;padding:34px 0 14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .sidebar::-webkit-scrollbar{display:none}
  .logo{position:static;align-self:flex-start;margin:0 0 10px 30px;height:96px;width:auto;object-fit:contain;display:block;background:#fff;border-radius:34px;padding:10px;box-sizing:content-box;box-shadow:var(--soft)}
  .logoT{position:static;margin:0 0 6px 10px;width:44px;display:none}
  /* SOT §74: the logo is a link home (News) */
  .logoLink{align-self:flex-start;display:block;text-decoration:none;border-radius:34px}
  .logoLink:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
  .railTop{width:20px;height:20px}
  .navlabel{position:static;margin:22px 0 0 37px;line-height:1;font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder)}
  .nav{margin:12px 0 0}
  .nav a{position:static;margin-left:37px;display:flex;align-items:center;gap:14px;font-size:14.5px;font-weight:500;color:var(--slate);text-decoration:none;white-space:nowrap;min-height:42px}
  .side-div{flex:none;margin:auto 37px 0;height:1px;background:var(--rail)}
  .nav a svg{width:18px;height:18px;color:var(--iconoff);flex:none;transition:color .25s}
  .nav a:hover{color:var(--inkdark)}
  .nav a.on{color:var(--teal)}
  .nav a.on svg{color:var(--teal)}
  /* sits clear of the fixed player bar; hidden before it can crowd the nav list */
  .side-foot{position:absolute;left:37px;right:20px;bottom:96px;font-size:11px;font-weight:500;color:var(--placeholder);line-height:1.5}
  @media (max-height:920px){.side-foot{display:none}}

  /* ---------- banner: sponsored ad carousel (paid slot, one full-bleed image per slide) ---------- */
  .banner{position:relative;height:var(--bH);background:var(--herowash);overflow:hidden;z-index:1;transition:background .25s,height .25s}
  /* SOT §65: the Shows tab's banner is the design's sponsored carousel again (verbatim from the design, rev ads-v1) */
  .banner.ads{background:var(--rail)}
  .banner.ads .adTrack{position:absolute;inset:0;display:flex;transition:transform .55s cubic-bezier(.22,.61,.21,1);touch-action:pan-y}
  .banner.ads .adSlide{flex:0 0 100%;position:relative;display:block;padding:0;border:0;background:none;cursor:pointer}
  .banner.ads .adSlide img{width:100%;height:100%;object-fit:cover;display:block}
  .banner.ads .adSlide:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
  .adTag{position:absolute;left:16px;top:16px;z-index:3;background:var(--gold);border-radius:8px;padding:6px 12px;
         font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--badge-ink);box-shadow:0 6px 16px rgba(13,27,30,.14);pointer-events:none}
  .adDots{position:absolute;right:16px;bottom:14px;z-index:3;display:flex;gap:7px}
  .adDots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;background:rgba(13,27,30,.32);transition:width .25s,background .25s}
  .adDots button.on{width:22px;background:var(--gold)}
  .adDots button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .adNav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
         background:color-mix(in srgb,var(--card) 88%,transparent);box-shadow:var(--soft);color:var(--inkdark);
         display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
  .banner.ads:hover .adNav,.banner.ads:focus-within .adNav{opacity:1}
  .adNav.pv{left:12px}
  .adNav.nx{right:12px}
  @media (prefers-reduced-motion:reduce){.banner.ads .adTrack{transition:none}}
  /* a slide with no link, and the house banner (no slides or an ad-free member), are pictures, not buttons */
  .banner.ads div.adSlide{cursor:default}
  /* a creative far from the band's shape shows whole (app.js adFit): the band around it takes the creative's own edge
     colours and the creative fades into them; a soft blur of the creative when its pixels cannot be read */
  .banner.ads .adSlide .adBlur{display:none}
  .banner.ads .adSlide.fit{overflow:hidden;display:flex;align-items:center;justify-content:center}
  .banner.ads .adSlide.fit .adBlur{display:block;position:absolute;inset:0;filter:blur(26px) saturate(1.1);transform:scale(1.25)}
  .banner.ads .adSlide.fit img.adImg{position:relative;width:auto;max-width:100%;height:100%;object-fit:contain}
  .banner.ads .adSlide.fit.edge{background:linear-gradient(90deg,var(--adL) 50%,var(--adR) 50%)}
  .banner.ads .adSlide.fit.edge .adBlur{display:none}
  .banner.ads .adSlide.fit.edge img.adImg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  /* ---- editorial hero banner elements --------------------------------
     D-3 carve-out. The frozen baseline's ads-v1 pass deleted these rules when
     it replaced the four editorial heroes with paid ad carousels; decision D-3
     keeps the editorial heroes and ships no ad units at all, so the element
     rules are restored here. They are position:absolute, so they sit correctly
     inside the locked design's position:relative .banner without touching the
     concept frame.

     GEOMETRY IS DERIVED, NOT EXTRACTED: the deployed heroes were tuned for a
     360px band, the locked design's band is --bH 240/210/190px, and the
     pre-ads tuned values did not survive (context/backups was cleaned
     2026-09-09). Offsets below are the deployed values scaled by the band
     ratio and are pending visual sign-off at the Stage-1 checkpoint. ------- */
  html[data-theme="dusk"] .banner:not(.ads)::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,21,26,.18) 0,rgba(8,21,26,.42) 14%,rgba(8,21,26,.88) 24%,rgba(20,38,43,.97) 40%);pointer-events:none}
  .banner>.pill,.banner>.heroTitle,.banner>.heroSub,.banner>.heroPlay{z-index:1}
  .bimg{position:absolute;left:0;top:0;height:var(--bH);width:auto;display:block}
  .pill{position:absolute;left:calc(var(--cx) + 2px);top:52px;background:var(--gold);border-radius:9px;padding:8px 16px;
        font-size:10px;font-weight:700;letter-spacing:2px;color:var(--badge-ink);box-shadow:0 6px 16px rgba(13,27,30,.08)}
  .heroTitle{position:absolute;left:var(--cx);top:87px;width:560px;max-width:calc(100% - var(--cx) - 40px);font-size:24px;line-height:1.18;font-weight:600;color:var(--inkdark);letter-spacing:-.4px;text-wrap:balance}
  .heroSub{position:absolute;left:calc(var(--cx) + 3px);top:152px;font-size:13px;font-weight:400;color:var(--slate)}
  .heroPlay{position:absolute;left:calc(var(--cx) + 2px);top:176px;width:42px;height:42px;border-radius:50%;background:var(--card);
            box-shadow:var(--glowbig);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal);transition:transform .2s}
  .heroPlay:hover{transform:translateY(-3px)}
  .heroPlay:active{transform:scale(.95)}

  /* slim page banners (Recently Played / Favorites / Settings) keep the plain wash + copy */
  .banner.slim{height:140px;--cx2:55px}
  .banner.slim h1{position:absolute;left:var(--cx2);bottom:46px;font-size:24px;font-weight:600;letter-spacing:-.4px;color:var(--inkdark);z-index:1}
  .banner.slim p{position:absolute;left:var(--cx2);bottom:22px;font-size:13.5px;color:var(--slate);z-index:1}
  /* SOT §74 tab banners: Tier 1 (News, Radio, Live) keep the tall band, Tier 2 (Recently Played, Favorites, Settings)
     the slim one. Once a tab's banner has slides it takes the top of the tab: the editorial hero goes, and the slim
     title band stays for screen readers only */
  .view.adOn>.banner:not(.ads):not(.slim){display:none}
  .view.adOn .banner.slim:not(.ads){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;transition:none}
  /* Support & Feedback (SOT §74): the whole content width, even gutters, New Request centred in its own row */
  .acwrap.wide{max-width:none;width:100%;margin:0 auto}
  .content.cwide{padding-right:55px}
  .nrRow{display:flex;justify-content:center;align-items:center;margin:0 0 22px}
  .nrRow .pillgo{width:auto;min-width:220px;padding-left:28px;padding-right:28px}
  .ferr:empty{display:none}
  .pwChk{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--placeholder)}
  .pwChk li::before{content:"\25CB";margin-right:6px}
  .pwChk li.ok{color:var(--teal)}
  .pwChk li.ok::before{content:"\2713"}
  .pillgo[aria-busy="true"]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .docFrame{display:block;width:100%;min-height:70vh;border:0;border-radius:16px;background:#fff}
  .docWait{display:flex;align-items:center;gap:10px;color:var(--slate);font-size:13px}
  #shareLinkBox[hidden]{display:none}
  /* ---------- Support & Feedback like the phone app (SOT §75) ---------- */
  .spHelp{display:flex;flex-direction:column;align-items:center;text-align:center;margin:4px 0 26px}
  .spHelp .eico{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);display:flex;align-items:center;justify-content:center}
  .spHelp .eico svg{width:32px;height:32px}
  .spHelp h3{margin-top:14px;font-size:22px;font-weight:700;color:var(--inkdark)}
  .spHelp p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--slate);max-width:420px}
  .spHelp .nrRow{margin:18px 0 0;width:100%}
  .tk .tkrow{display:flex;align-items:center;gap:10px;margin-top:10px}
  .tk .tksubj{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:600;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tk .tkdate{margin-left:auto;font-size:11.5px;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .tk .tmeta{display:inline-flex;align-items:center;gap:5px;color:var(--placeholder);font-weight:500}
  .nrAdd{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;border:1.5px dashed color-mix(in srgb,var(--placeholder) 60%,transparent);border-radius:12px;background:none;color:var(--placeholder);font:inherit;font-size:13px;cursor:pointer}
  .nrAdd:hover{color:var(--teal);border-color:var(--teal)}
  .nrPrev{position:relative;border-radius:12px;overflow:hidden}
  .nrPrev img{display:block;width:100%;height:150px;object-fit:cover}
  .nrX,.tkAttX{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:#d93025;color:#fff;font-size:18px;line-height:26px;padding:0;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  .tkWrap .tkHead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--teal) 8%,transparent);margin-bottom:12px}
  .tkWrap .tkHead .tksubj{background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600}
  .tkWrap .tkHead .stchip{margin-left:auto}
  .tkMsgs{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 330px);min-height:260px;overflow-y:auto;padding:6px 2px 10px;overscroll-behavior:contain}
  .tkB{display:flex;align-items:flex-start;gap:8px}
  .tkB.me{justify-content:flex-end}
  .tkAv{flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--teal) 20%,transparent);color:var(--teal);display:flex;align-items:center;justify-content:center}
  .tkBody{max-width:min(72%,560px);padding:12px;border-radius:12px 12px 12px 2px;background:color-mix(in srgb,var(--herowash) 70%,var(--card));min-width:0}
  .tkB.me .tkBody{border-radius:12px 12px 2px 12px;background:color-mix(in srgb,var(--teal) 12%,var(--card))}
  .tkWho{display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--teal)}
  .tkImgA{display:block;margin-bottom:8px}
  .tkImg{display:block;width:200px;max-width:100%;height:150px;object-fit:cover;border-radius:8px;background:var(--rail)}
  .tkBody p{font-size:14px;line-height:1.5;color:var(--inkdark);white-space:pre-wrap;overflow-wrap:anywhere}
  .tkBody time{display:block;margin-top:4px;font-size:10.5px;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .tkB.me .tkBody time{text-align:right}
  .tkTyping{display:flex;align-items:center;gap:8px}
  .tkTyping[hidden]{display:none}
  .tkTyTx{padding:10px 12px;border-radius:12px 12px 12px 2px;background:color-mix(in srgb,var(--herowash) 70%,var(--card));font-size:13px;color:var(--slate);display:inline-flex;align-items:center;gap:6px}
  .tkDots{display:inline-flex;gap:3px}
  .tkDots b{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:tkDot 1.2s infinite ease-in-out}
  .tkDots b:nth-child(2){animation-delay:.15s}
  .tkDots b:nth-child(3){animation-delay:.3s}
  @keyframes tkDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  @media (prefers-reduced-motion:reduce){.tkDots b{animation:none;opacity:.6}}
  .tkClosed{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 4px;padding:10px 15px;border-radius:8px;background:color-mix(in srgb,var(--placeholder) 12%,transparent);color:var(--slate);font-size:13px;font-weight:500}
  .tkClosed svg{width:16px;height:16px}
  .tkBar{margin-top:10px;padding:10px 10px 8px;border-radius:14px;background:var(--card);box-shadow:0 -2px 12px color-mix(in srgb,var(--placeholder) 18%,transparent)}
  .tkAtt{position:relative;width:60px;height:60px;margin:0 0 8px 40px}
  .tkAtt[hidden]{display:none}
  .tkAtt img{width:60px;height:60px;object-fit:cover;border-radius:8px;display:block}
  .tkAtt .tkAttX{top:-6px;right:-6px;width:20px;height:20px;font-size:14px;line-height:20px}
  .tkRow{display:flex;align-items:flex-end;gap:8px}
  .tkClip,.tkSend{flex:none;width:36px;height:38px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--placeholder)}
  .tkSend{color:var(--teal)}
  .tkSend:disabled{opacity:.6;cursor:default}
  .tkRow textarea{flex:1;min-width:0;resize:none;min-height:38px;max-height:120px;padding:9px 15px;border-radius:20px;border:1px solid color-mix(in srgb,var(--placeholder) 40%,transparent);background:var(--card);color:var(--inkdark);font:inherit;font-size:14px;line-height:1.4}
  .tkRow textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}

  /* ---------- top-right cluster ---------- */
  .cluster{position:fixed;right:40px;top:40px;display:flex;align-items:center;gap:14px;z-index:6}
  .cbtn{position:relative;width:45px;height:45px;border-radius:50%;background:var(--card);box-shadow:var(--soft);
        display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal);transition:transform .2s,background .25s}
  .cbtn:hover{transform:translateY(-2px)}
  .cbtn svg{display:block}
  .cbtn em{font-style:normal;position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--gold);color:var(--badge-ink);
           font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-variant-numeric:tabular-nums;box-shadow:0 4px 10px rgba(232,180,34,.4)}
  .cbtn em[hidden]{display:none}
  .cbtn .ndot{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:var(--notif-red);box-shadow:0 0 0 3px var(--card)}
  .cbtn .ndot[hidden]{display:none}

  /* ---------- scrolling content ---------- */
  .content{position:static;z-index:1;padding:34px 50px 130px 55px}

  .sec{margin-bottom:48px}
  .secHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
  .secHead h2{font-size:21px;font-weight:600;color:var(--deep);letter-spacing:-.2px}
  .seeall{font-size:13px;font-weight:500;color:var(--slate);cursor:pointer;white-space:nowrap}
  .seeall:hover{color:var(--teal)}
  .arrows{display:flex;gap:7px;align-items:center}
  .arrL{width:36px;height:36px;border-radius:50%;background:var(--card);box-shadow:0 8px 20px rgba(13,27,30,.10);
        display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal)}
  .arrR{width:40px;height:40px;border-radius:15px;background:var(--teal);color:var(--inkfill);box-shadow:var(--glow);
        display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}
  .arrL:hover,.arrR:hover{transform:translateY(-2px)}
  .arrL[hidden],.arrR[hidden]{display:none}

  /* covers */
  .coverGrid{display:flex;gap:20px}
  .cov{flex:1 1 0;min-width:0;text-align:center;cursor:pointer}
  .cov img{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;display:block;
           box-shadow:var(--soft2);transition:transform .3s var(--ease-spring)}
  .cov:hover img{transform:translateY(-4px)}
  .cov .t{margin-top:12px;font-size:13.5px;line-height:1.3;font-weight:600;color:var(--deep);
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cov .a{margin-top:4px;font-size:12px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* chips */
  .chips{display:flex;gap:10px;flex-wrap:wrap;margin:-18px 0 34px}
  .chip{height:34px;border-radius:12px;background:var(--card);border:1.5px solid var(--rail);padding:0 16px;
        display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--slate);cursor:pointer;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
  .chip:hover{color:var(--inkdark)}
  .chip.on{background:var(--teal);border-color:var(--teal);color:var(--inkfill);font-weight:600;box-shadow:0 8px 18px rgba(0,119,139,.30)}

  /* two-column lower area */
  .cols{display:flex;gap:65px;align-items:flex-start;flex-wrap:wrap}
  .colL{flex:1 1 420px;min-width:320px}
  .colR{flex:0 1 458px;min-width:300px}
  .colR .sec{margin-bottom:32px}

  /* rows */
  .row{display:flex;align-items:center;min-height:48px;margin-bottom:7px;border-radius:10px;padding:0 6px;transition:background .2s}
  .row:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .row .num{font-size:13px;font-weight:500;color:var(--placeholder);width:20px;flex:none;font-variant-numeric:tabular-nums}
  .row img{width:48px;height:48px;border-radius:10px;object-fit:cover;box-shadow:0 6px 14px rgba(13,27,30,.14);margin-left:6px;flex:none;cursor:pointer}
  .row .tx{flex:1;min-width:0;margin-left:12px;cursor:pointer}
  .row .tt{font-size:14.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .aa{margin-top:3px;font-size:12.5px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .du{margin-left:auto;font-size:13px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;flex:none;padding-left:14px}
  .row .ic{margin-left:22px;color:var(--placeholder);cursor:pointer;flex:none;display:flex;transition:color .2s}
  .row .ic:hover{color:var(--teal)}
  .row .ic.on{color:var(--gold)}

  .feed-end{text-align:center;font-size:12.5px;font-weight:500;color:var(--placeholder);padding:18px 0 6px}
  .skel{background:var(--herowash);position:relative;overflow:hidden}
  .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 75%,transparent),transparent);animation:shim 1.4s infinite}
  @keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

  /* stations / streamers / hosts */
  .artists{display:flex;justify-content:space-between;gap:16px}
  .artists .artt{flex:none;text-align:center;cursor:pointer}
  .artists img{width:70px;height:70px;border-radius:20px;box-shadow:0 10px 22px rgba(13,27,30,.16);display:block;transition:transform .3s var(--ease-spring)}
  .artists .artt:hover img{transform:translateY(-4px) scale(1.03)}

  /* categories */
  .genres{display:flex;gap:22px}
  .g{position:relative;flex:1 1 0;min-width:0;height:96px;border-radius:14px;overflow:hidden;box-shadow:var(--soft2);cursor:pointer}
  .g img{width:100%;height:100%;object-fit:cover}
  .g span{position:absolute;left:8px;right:8px;bottom:36px;height:28px;border-radius:10px;background:color-mix(in srgb,var(--card) 88%,transparent);
          display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--deep)}

  /* live cards */
  /* ================= live tab: portrait tiles (live_stream_tile.dart anatomy: thumb + 50%-up scrim, LIVE/viewer pills, title/host/category over scrim) ================= */
  .lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
  .lvtile{position:relative;cursor:pointer}
  .lvtile .im{position:relative;width:100%;aspect-ratio:0.72;border-radius:18px;overflow:hidden;box-shadow:var(--soft2);background:var(--herowash)}
  .lvtile .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
  .lvtile:hover .im img{transform:scale(1.03)}
  .lvtile .im.scene{background:linear-gradient(165deg,#1F4A52 0%,#08151A 78%)}
  .lvtile .im .cam{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(246,229,211,.8)}
  .lvtile .im::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));pointer-events:none}
  .lvtile .bd{position:absolute;left:10px;top:10px;z-index:2;background:var(--gold);color:var(--badge-ink);border-radius:7px;padding:4px 9px;font-size:9.5px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:5px}
  .lvtile .bd i{width:6px;height:6px;border-radius:50%;background:var(--badge-ink);animation:pulse 1.6s infinite}
  .lvtile .vw{position:absolute;right:10px;top:10px;z-index:2;background:rgba(8,21,26,.6);backdrop-filter:blur(6px);border-radius:8px;padding:4px 9px;font-size:10.5px;font-weight:600;color:#fff;display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
  .lvtile .stt{position:absolute;left:10px;top:10px;z-index:2;background:rgba(8,21,26,.72);border-radius:7px;padding:4px 9px;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#CFD8D8}
  .lvtile .stt.warn{color:var(--gold)}
  .lvtile .ov{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;min-width:0}
  .lvtile .tt{font-size:13.5px;font-weight:700;line-height:1.35;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lvtile .hr{display:flex;align-items:center;gap:7px;margin-top:6px;min-width:0}
  .lvtile .av{width:24px;height:24px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.92);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(165deg,#1F4A52,#08151A)}
  .lvtile .av img{width:100%;height:100%;object-fit:cover}
  .lvtile .hn{font-size:12px;font-weight:500;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lvtile .ck{flex:none;color:#7BCAB0;display:flex;align-items:center}
  .lvtile .cc{display:inline-block;margin-top:7px;background:rgba(255,255,255,.22);border-radius:6px;padding:3px 8px;font-size:10.5px;font-weight:600;color:#fff}
  .lvnow{display:flex;align-items:baseline;gap:10px}
  .lvnow small{font-size:12px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums}
  .lempty{background:var(--herowash);border-radius:20px;padding:40px 30px;text-align:center;color:var(--deep)}
  .lempty .ei{width:52px;height:52px;border-radius:17px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--teal)}
  .lempty h3{font-size:16.5px;font-weight:600}
  .lempty p{font-size:13px;color:var(--slate);margin-top:5px}
  .lvref{margin-top:16px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:13px;background:var(--card);border:1.5px solid var(--rail);font-size:13px;font-weight:600;color:var(--deep);cursor:pointer;font-family:inherit}
  .lvref:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--rail));color:var(--teal)}
  .mystream{display:flex;align-items:center;gap:14px;border-radius:18px;background:var(--card);padding:12px 16px;cursor:pointer;box-shadow:var(--soft);transition:transform .25s var(--ease-spring)}
  .mystream:hover{transform:translateY(-2px)}
  .mystream img,.mystream .ph{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none;background:linear-gradient(165deg,#1F4A52,#08151A)}
  .mystream .msT{font-size:14px;font-weight:700;color:var(--deep)}
  .mystream .msS{font-size:12px;color:var(--slate);margin-top:2px}
  /* live overlays: scrim + centered panel; phone = full-screen sheet */
  .lvov{position:fixed;inset:0;z-index:66;display:none;align-items:center;justify-content:center;padding:28px}
  .lvov.on{display:flex}
  .lvovS{position:absolute;inset:0;background:rgba(8,21,26,.55);backdrop-filter:blur(6px)}
  .lvpan{position:relative;width:min(560px,calc(100vw - 56px));max-height:min(88vh,880px);overflow-y:auto;background:var(--card);border-radius:24px;box-shadow:var(--glowbig);color:var(--deep)}
  .lvx{position:absolute;right:14px;top:14px;z-index:5;width:36px;height:36px;border-radius:50%;border:none;background:rgba(8,21,26,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px)}
  .lvx:hover{background:rgba(8,21,26,.8)}
  /* pre-join modal (viewer_pre_join_screen.dart) */
  #preJoin .lvpan{width:min(780px,calc(100vw - 56px))}
  .pjCover{position:relative;width:100%;aspect-ratio:16/9;border-radius:24px 24px 0 0;overflow:hidden;background:linear-gradient(165deg,#1F4A52 0%,#08151A 78%)}
  .pjCover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pjCover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
  .pjCover .cam{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(246,229,211,.85)}
  .pjCover .cam span{font-size:11.5px;font-weight:700;letter-spacing:.24em}
  .pjCover .cam i{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(246,229,211,.6);display:flex;align-items:center;justify-content:center;font-style:normal}
  .pjBody{padding:0 24px 24px}
  .pjAv{width:64px;height:64px;border-radius:50%;margin-top:-34px;position:relative;z-index:2;box-shadow:0 0 0 3px var(--card),0 0 0 4.5px rgba(255,255,255,.92);background:linear-gradient(165deg,#1F4A52,#08151A);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;overflow:hidden}
  .pjAv img{width:100%;height:100%;object-fit:cover}
  .pjBadges{display:flex;gap:8px;margin-top:12px;align-items:center}
  .pjBadge{border-radius:8px;padding:4px 10px;font-size:10px;font-weight:700;letter-spacing:.08em}
  .pjBadge.live{background:var(--gold);color:var(--badge-ink);display:inline-flex;gap:5px;align-items:center}
  .pjBadge.live i{width:6px;height:6px;border-radius:50%;background:var(--badge-ink);animation:pulse 1.6s infinite}
  .pjBadge.mode{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal)}
  .pjT{font-size:23px;font-weight:800;line-height:1.25;margin-top:10px}
  .pjMeta{font-size:12.5px;color:var(--slate);margin-top:6px}
  .pjDesc{font-size:13.5px;line-height:1.6;margin-top:10px;color:var(--deep)}
  .pjDesc.dim{color:var(--slate);font-style:italic}
  .pjChips{display:flex;gap:8px;margin-top:12px}
  .glass{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:11px;background:color-mix(in srgb,var(--herowash) 72%,transparent);border:1px solid var(--rail);font-size:12px;font-weight:600;color:var(--deep);font-variant-numeric:tabular-nums}
  .pjJoin{width:100%;margin-top:16px;height:52px;border:none;border-radius:16px;background:var(--floatg);color:#fff;font-family:inherit;font-size:15.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:var(--glow);transition:transform .2s var(--ease-spring)}
  .pjJoin:hover{transform:translateY(-2px)}
  .pjNote{font-size:11.5px;color:var(--slate);text-align:center;margin-top:9px;line-height:1.5}
  .pjShare{margin-top:10px;width:100%;height:42px;border-radius:13px;background:none;border:1.5px solid var(--rail);color:var(--deep);font-family:inherit;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
  .pjShare:hover{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,var(--rail))}
  .pjEnded{padding:56px 24px 48px;text-align:center}
  .pjEnded .ei{width:56px;height:56px;border-radius:18px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:var(--herowash);color:var(--slate)}
  .pjEnded h3{font-size:17px;font-weight:700}
  .pjEnded p{font-size:13px;color:var(--slate);margin-top:6px}
  /* replay preview modal (replay_preview_sheet.dart) */
  .rpCover{position:relative;height:200px;border-radius:24px 24px 0 0;overflow:hidden;background:linear-gradient(150deg,var(--teal),var(--herowash))}
  .rpCover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .rpCover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
  .rpBody{padding:16px 22px 22px}
  .rpT{font-size:20px;font-weight:900;font-style:italic;line-height:1.3;color:var(--deep)}
  .rpHost{display:flex;align-items:center;gap:10px;margin-top:10px;min-width:0}
  .rpHost .av{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1.5px var(--rail);overflow:hidden;flex:none;background:linear-gradient(165deg,#1F4A52,#08151A);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
  .rpHost .av img{width:100%;height:100%;object-fit:cover}
  .rpHost b{font-size:13.5px;font-weight:600;color:var(--deep);min-width:0}
  .rpCat{display:inline-block;margin-top:10px;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal);border-radius:8px;padding:4px 10px;font-size:11px;font-weight:700}
  .rpDesc{font-size:13px;line-height:1.6;color:var(--slate);margin-top:10px}
  .rpAct{display:flex;gap:10px;margin-top:16px}
  .rpPlay{flex:1;height:48px;border:none;border-radius:15px;background:var(--floatg);color:#fff;font-family:inherit;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:var(--glow)}
  .rpPlay:disabled{background:var(--herowash);color:var(--slate);box-shadow:none;cursor:not-allowed}
  .rpPlay .tag{font-size:10px;font-weight:700;letter-spacing:.06em;border-radius:7px;padding:3px 8px;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
  .rpSec{min-width:64px;height:48px;padding:0 14px;border-radius:15px;border:1.5px solid var(--rail);background:none;color:var(--deep);font-family:inherit;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
  .rpSec:hover{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,var(--rail))}
  .rpOwnerRow{display:flex;align-items:center;border-top:1px solid var(--rail);margin-top:16px;padding-top:14px}
  .rpDel{display:flex;align-items:center;gap:10px;background:none;border:none;font-family:inherit;cursor:pointer;padding:0}
  .rpDel .t{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--notif-red) 14%,transparent);color:var(--notif-red);display:flex;align-items:center;justify-content:center;flex:none}
  .rpDel b{font-size:13px;font-weight:700;color:var(--notif-red)}
  .rpDel small{display:block;font-size:11px;color:var(--slate);margin-top:1px;text-align:left}
  /* my streams / past broadcasts (recordingslist.dart) */
  .msBanner{display:flex;align-items:center;gap:10px;border-radius:14px;background:color-mix(in srgb,var(--gold) 12%,transparent);padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--deep)}
  .msBanner button{margin-left:auto;background:none;border:none;color:var(--teal);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
  .msrow{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rail);cursor:pointer;position:relative}
  .msrow .th{width:86px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:linear-gradient(165deg,#1F4A52,#08151A)}
  .msrow .tt{font-size:13.5px;font-weight:600;color:var(--deep);line-height:1.35}
  .msrow .mt{font-size:11.5px;color:var(--slate);margin-top:4px;display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums;flex-wrap:wrap}
  .sc{font-size:9.5px;font-weight:700;letter-spacing:.05em;border-radius:6px;padding:2px 7px}
  .sc.ready{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}
  .sc.processing{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
  .sc.failed{background:color-mix(in srgb,var(--notif-red) 14%,transparent);color:var(--notif-red)}
  .msrow.dis{opacity:.55;cursor:default}
  .toastAct{margin-left:14px;background:none;border:none;color:var(--gold);font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.04em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
    pointer-events:auto} /* #toast is click-through (pointer-events:none), so UNDO never received a click (2026-09-28) */
  /* go live: gate, setup, summary */
  .glGate{padding:34px 28px;text-align:center;width:min(420px,calc(100vw - 56px))}
  .glGate .ei{width:56px;height:56px;border-radius:18px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
  .glGate h3{font-size:18px;font-weight:800}
  .glGate p{font-size:13px;line-height:1.65;color:var(--slate);margin-top:8px}
  #goLiveSetup .lvpan,#goLiveSummary .lvpan{width:min(1080px,calc(100vw - 48px));max-height:94vh}
  #goLiveSetup .lvpan,#goLiveSummary .lvpan{background:var(--paper)}
  .glHead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:18px 26px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rail)}
  .glHead h2{font-size:17px;font-weight:800}
  .glX{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .glX:hover{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,var(--rail))}
  .glCols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;padding:26px 26px 20px}
  .glPrev{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(165deg,#1F4A52 0%,#08151A 78%);box-shadow:var(--soft2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(246,229,211,.85)}
  .glPrev .cam{display:flex}
  .glPrev .cam i{width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(246,229,211,.55);display:flex;align-items:center;justify-content:center;font-style:normal}
  .glPrev span.lbl{font-size:11px;font-weight:700;letter-spacing:.22em}
  .glPrev small{font-size:11.5px;color:rgba(246,229,211,.6);padding:0 24px;text-align:center}
  /* 2026-09-26 real device preview (cr-devices.js): the host's own camera,
     mirrored like every self-view, contain so the preview shows the whole
     frame that will be sent (never a crop) */
  #glPrevVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;transform:scaleX(-1)}
  #glPrevVideo[hidden]{display:none}
  .glMeter{flex:1 1 100%;height:4px;border-radius:2px;background:var(--rail);overflow:hidden}
  .glMeter i{display:block;height:100%;width:0;background:var(--teal);transition:width .08s linear}
  .glDev{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
  .glDev label{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;color:var(--slate)}
  .glDev select{flex:1;height:40px;border-radius:12px;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);font-family:inherit;font-size:12.5px;padding:0 10px;min-width:0}
  .glFlip{display:none;margin-top:14px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
  .glSec{margin-top:22px}
  .glSec h3{font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--slate);margin-bottom:10px}
  .glModes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .glmode{border:1.5px solid var(--rail);background:var(--card);border-radius:16px;padding:14px 16px;cursor:pointer;text-align:left;font-family:inherit;color:var(--deep)}
  .glmode b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
  .glmode small{display:block;font-size:11.5px;color:var(--slate);margin-top:4px;line-height:1.5}
  .glmode.on{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
  .glF{display:block;width:100%;height:44px;border-radius:13px;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);font-family:inherit;font-size:13.5px;padding:0 14px;margin-top:10px}
  .glF:focus{outline:none;border-color:var(--teal)}
  textarea.glF{height:84px;padding:12px 14px;resize:none;line-height:1.55}
  .glLbl{font-size:11px;font-weight:700;color:var(--slate);margin-top:12px;display:block}
  .glLbl i{font-style:normal;color:var(--gold)}
  .glCover{display:flex;gap:12px;align-items:center;margin-top:10px}
  .glCover .slot{width:128px;aspect-ratio:16/9;border-radius:14px;border:1.5px dashed var(--rail);background:var(--herowash);display:flex;align-items:center;justify-content:center;color:var(--slate);cursor:pointer;overflow:hidden;position:relative;flex:none}
  .glCover .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .glCover .cf{font-size:11.5px;color:var(--slate);line-height:1.6}
  .glCover .cf b{display:block;font-size:12.5px;color:var(--deep)}
  .glTog{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:13px;font-weight:600;color:var(--deep)}
  .glSw{position:relative;width:44px;height:25px;border-radius:13px;border:none;background:var(--rail);cursor:pointer;transition:background .2s;flex:none;padding:0}
  .glSw.on{background:var(--teal)}
  .glSw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
  .glSw.on::after{left:21.5px}
  .glChk{border-radius:16px;background:var(--card);padding:4px 16px;box-shadow:var(--soft)}
  .glChk .r{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rail);font-size:13px;font-weight:600;color:var(--deep)}
  .glChk .r:last-child{border-bottom:none}
  .glChk .r .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
  .glChk .r .dot.no{background:var(--notif-red)}
  .glChk .r small{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.05em;border-radius:7px;padding:3px 8px;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal)}
  .glChk .r small.no{background:color-mix(in srgb,var(--notif-red) 12%,transparent);color:var(--notif-red)}
  .glBar{position:sticky;bottom:0;z-index:4;padding:16px 26px 22px;background:linear-gradient(180deg,transparent,var(--paper) 30%);border-top:1px solid var(--rail)}
  .glGo{width:100%;max-width:420px;margin:0 auto;display:flex;height:52px;border:none;border-radius:16px;background:var(--floatg);color:#fff;font-family:inherit;font-size:15px;font-weight:800;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:var(--glow)}
  .glGo:disabled{background:var(--herowash);color:var(--slate);box-shadow:none;cursor:not-allowed}
  .glWhy{text-align:center;font-size:11.5px;color:var(--slate);margin-top:8px}
  .glBlock{margin-top:10px;border-radius:16px;background:color-mix(in srgb,var(--gold) 12%,transparent);padding:14px 16px;font-size:12.5px;font-weight:600;color:var(--deep)}
  /* SOT §101: Go Live from an encoder (OBS, other), cr-encoder.js */
  .glSrc{margin-top:0;margin-bottom:16px}
  .glSrc .glF{margin-top:0}
  .glEncSteps{margin-top:14px;border-radius:16px;background:var(--card);box-shadow:var(--soft);padding:14px 16px;font-size:12.5px;color:var(--deep);line-height:1.6}
  .glEncSteps b{display:block;font-size:12px;letter-spacing:.06em;color:var(--slate);margin-bottom:6px}
  .glEncSteps ol{margin:0 0 10px 18px;padding:0}
  .glEncSteps li{margin:3px 0}
  .glEncSteps table{width:100%;border-collapse:collapse;font-size:12px}
  .glEncSteps td{padding:5px 0;border-top:1px solid var(--rail);vertical-align:top}
  .glEncSteps td:first-child{color:var(--slate);font-weight:600;width:42%;padding-right:10px}
  .glEncConn{margin-top:14px}
  .glGo[hidden]{display:none} /* an encoder stream is set up: the key pane takes over */
  .glEncPrev{margin-top:10px}
  .glEncPrev[hidden]{display:none}
  #glEncPrevView{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
  #glEncPrevView video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .glEncPrev small{display:block;font-size:11px;color:var(--slate);margin-top:6px}
  .glEncState{display:flex;align-items:center;gap:10px;border-radius:14px;padding:12px 14px;background:var(--herowash);font-size:12.5px;font-weight:600;color:var(--deep);line-height:1.5}
  .glEncState.live{background:color-mix(in srgb,var(--teal) 14%,transparent)}
  .glEncState.warn{background:color-mix(in srgb,var(--gold) 16%,transparent)}
  .glEncState.bad{background:color-mix(in srgb,var(--notif-red) 12%,transparent)}
  .glEncState .dotl{width:9px;height:9px;border-radius:50%;background:var(--notif-red);flex:none;animation:glPulse 1.4s ease-in-out infinite}
  @keyframes glPulse{50%{opacity:.35}}
  .glKey{display:flex;gap:8px;align-items:center}
  .glKey .glF{margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;min-width:0}
  .glKb{flex:none;height:44px;margin-top:6px;padding:0 14px;border-radius:13px;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
  .glKb:hover{border-color:var(--teal);color:var(--teal)}
  .glKb:disabled{opacity:.55;cursor:wait}
  .glEncAct{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
  .glEncAct .glKb{flex:1;margin-top:0}
  .glKb.glEncEnd{border-color:color-mix(in srgb,var(--notif-red) 45%,var(--rail));color:var(--notif-red)}
  .glSum{padding:64px 30px 44px;text-align:center}
  .glSum .ei{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal)}
  .glSum h2{font-size:24px;font-weight:800}
  .glSum>p{font-size:13.5px;color:var(--slate);margin-top:8px}
  .glStats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px auto 0;max-width:560px}
  .glStat{background:var(--herowash);border-radius:16px;padding:16px 10px}
  .glStat b{display:block;font-size:19px;font-weight:800;color:var(--deep);font-variant-numeric:tabular-nums}
  .glStat small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--slate);margin-top:5px}
  .glTap{border:0;font:inherit;text-align:inherit;cursor:pointer;width:100%}
  .glTap small svg{width:12px;height:12px;vertical-align:-2px;margin-left:2px}
  .glTap:focus-visible{outline:2px solid var(--seafoam);outline-offset:2px}
  .glDone{margin:26px auto 0;display:flex;width:min(320px,100%);height:52px;border:none;border-radius:16px;background:var(--floatg);color:#fff;font-family:inherit;font-size:14.5px;font-weight:800;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:var(--glow)}
  .lvCrumb{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .lvCrumb button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .lvCrumb button:hover{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,var(--rail))}
  .lvCrumb h2{font-size:21px;font-weight:800}
  .lvCrumb small{font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums;margin-left:2px}
  #glFab{position:fixed;right:20px;bottom:96px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .glfab-btn{height:46px;padding:0 18px;border-radius:23px;border:none;font-family:inherit;font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:var(--glowbig)}
  #glPill{background:var(--floatg);color:#fff}
  @media (max-width:1024px){.glCols{grid-template-columns:1fr}}
  @media (max-width:719px){
    .lvov{padding:0}
    .lvpan,#preJoin .lvpan{width:100%;max-width:none;height:100%;max-height:none;border-radius:0}
    .pjCover{border-radius:0}
    .rpCover{border-radius:0}
    .glCols{padding:18px 18px 16px;gap:20px}
    .glDev{display:none}
    .glFlip{display:flex}
    .glStats{grid-template-columns:repeat(2,1fr)}}
  /* live surface dusk outlines (D3 system): tiles, empty cards, panels, checklist, stats */
  html[data-theme="dusk"] .lvtile .im,html[data-theme="dusk"] .lempty,html[data-theme="dusk"] .mystream,
  html[data-theme="dusk"] .lvpan,html[data-theme="dusk"] .glChk,html[data-theme="dusk"] .glStat,
  html[data-theme="dusk"] .glmode,html[data-theme="dusk"] .msBanner,html[data-theme="dusk"] .glBlock{
    box-shadow:var(--soft2),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .lvtile .im.scene{outline:none}
  html[data-theme="dusk"] .lvx{background:rgba(8,21,26,.72);box-shadow:inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .glHead{background:color-mix(in srgb,var(--paper) 90%,transparent)}
  /* promo card */
  .promo{position:relative;width:100%;border-radius:16px;background:var(--floatg);
         box-shadow:0 16px 32px rgba(0,119,139,.30)}
  .promo .pt{position:absolute;left:20px;font-weight:600;color:#fff}
  .promo .ps{position:absolute;left:20px;font-weight:400;color:rgba(255,255,255,.72)}
  .promo .pb{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:var(--gold);border-radius:9px;
             padding:8px 14px;font-size:11.5px;font-weight:700;color:var(--badge-ink);cursor:pointer;white-space:nowrap;
             box-shadow:0 8px 16px rgba(232,180,34,.40)}

  /* ---------- news v2: pills / update bar / trending rail / filter panel ---------- */
  .nprow{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin:-2px -2px 0;flex:none}
  .nprow::-webkit-scrollbar{display:none}
  .chips.nprow{margin:0 0 2px;flex-wrap:nowrap}
  .nbar{display:flex;align-items:center;gap:14px;margin:6px 0 8px;flex-wrap:wrap}
  .updrow{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums}
  .refbtn{width:34px;height:34px;border-radius:50%;background:var(--card);box-shadow:var(--soft);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s}
  .refbtn:hover{transform:rotate(60deg)}
  .refbtn.spin svg{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .bgrp{margin-bottom:16px}
  .bgrp:last-child{margin-bottom:0}
  .bgrp h3{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);text-transform:uppercase;margin-bottom:9px}
  .brow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;flex-wrap:nowrap}
  .brow::-webkit-scrollbar{display:none}
  .brow .chip{height:30px;font-size:12px;padding:0 12px;border-radius:10px;flex:none}
  .afline{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--slate);margin:0 0 4px;flex-wrap:wrap}
  .afline b{color:var(--deep);font-weight:600}
  .afline button{color:var(--teal);font-weight:600;font-size:12.5px;cursor:pointer}
  .tgrid{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:4px 4px 10px;margin:-4px -4px 6px}
  .tgrid::-webkit-scrollbar{display:none}
  .tcov{flex:none;width:calc((100% - 70px)/6);min-width:140px;scroll-snap-align:start;text-align:left;cursor:pointer}
  .tcov img{width:100%;aspect-ratio:4/3;border-radius:14px;object-fit:cover;display:block;box-shadow:var(--soft2);transition:transform .3s var(--ease-spring)}
  /* News Increment D (2026-10-11): the paper tile a story shows when it has no picture
     (the admin's logo, else the initials on the phone app's palette); never the stock banner */
  .ntile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--ntb);color:var(--ntf);overflow:hidden;flex:none;user-select:none;text-align:center}
  .ntile b{font-weight:700;letter-spacing:.04em;line-height:1}
  .ntile small{font-size:11px;font-weight:600;line-height:1.2;opacity:.85;max-width:86%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ntile img{width:64%;height:64%;object-fit:contain;display:block;box-shadow:none}
  .tcov .ntile{width:100%;aspect-ratio:4/3;border-radius:14px;box-shadow:var(--soft2);transition:transform .3s var(--ease-spring)}
  .tcov .ntile b{font-size:34px}
  .tcov:hover .ntile{transform:translateY(-4px)}
  .row .ntile{width:48px;height:48px;border-radius:10px;box-shadow:0 6px 14px rgba(13,27,30,.14);margin-left:6px;cursor:pointer}
  .row .ntile b{font-size:16px}
  .mrow .mi .ntile{width:100%;height:100%;border-radius:inherit}
  .mrow .mi .ntile b{font-size:14px}
  .tcov:hover img{transform:translateY(-4px)}
  .tcov .t{margin-top:10px;font-size:12.5px;line-height:1.3;font-weight:600;color:var(--deep);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tcov .a{margin-top:3px;font-size:11px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .secHead.col{display:block}
  .secHead.col p{margin-top:4px;font-size:12.5px;font-weight:400;color:var(--slate)}
  .fgrp{margin-bottom:26px}
  .fgrp h3{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);text-transform:uppercase;margin-bottom:12px}
  .fgrp .chips{margin:0;flex-wrap:wrap}
  .fsrc{display:flex;align-items:center;gap:10px;border-radius:12px;background:var(--herowash);padding:11px 14px;margin-bottom:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--deep);text-align:left;width:100%;transition:background .2s,color .2s}
  .fsrc small{margin-left:auto;font-weight:500;color:var(--slate);font-size:11.5px;white-space:nowrap}
  .fsrc.on{background:var(--teal);color:var(--inkfill)}
  .fsrc.on small{color:var(--inkfill);opacity:.78}
  .sfoot{display:flex;gap:12px;padding:14px 20px 26px;box-shadow:0 -14px 34px rgba(13,27,30,.07)}
  .sfoot .ghostbtn{flex:1;height:44px;border-radius:14px;background:var(--herowash);color:var(--deep);font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s}
  .sfoot .ghostbtn:hover{transform:translateY(-2px)}
  .sfoot .applybtn{flex:1;height:44px;border-radius:14px;background:var(--teal);color:var(--inkfill);font-size:14px;font-weight:600;box-shadow:var(--glow);cursor:pointer;transition:transform .2s}
  .sfoot .applybtn:hover{transform:translateY(-2px)}
  .skp{height:34px;width:112px;border-radius:12px;flex:none}

  /* ---------- radio: facets / rails / station cards ---------- */
  .facets{display:flex;align-items:center;gap:14px;margin:-18px 0 26px;flex-wrap:wrap}
  /* 390px overflow fix (owner-sanctioned exception, 2026-09-14): inside .facets
     the Live chip row is a flex item, and .nprow{flex:none} (flex:0 0 auto)
     forbids shrinking, so it pushed the document to 646px at 390. min-width:0
     alone is not enough with flex-shrink:0; flex:0 1 auto restores shrinking and
     the row's own overflow-x:auto then scrolls its chips. News is unaffected:
     its pill row is a block child of .content, not a flex item. */
  .facets>.nprow{min-width:0;flex:0 1 auto}
  .fseg{display:flex;background:var(--herowash);border-radius:14px;padding:4px;gap:2px;flex:none}
  .fseg button{height:30px;border-radius:11px;padding:0 14px;font-size:12.5px;font-weight:600;color:var(--slate);cursor:pointer;transition:background .2s,color .2s}
  .fseg button.on{background:var(--card);color:var(--teal);box-shadow:0 6px 14px rgba(13,27,30,.10)}
  .fvals{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:2px}
  .fvals::-webkit-scrollbar{display:none}
  .railRow{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:4px 4px 10px;margin:-4px -4px 0}
  .railRow .lvtile{flex:none;width:184px}
  .railRow::-webkit-scrollbar{display:none}
  #genreRow{flex:1;min-width:0;margin:0}
  .cbtn[hidden]{display:none}
  .btile{position:relative;flex:none;width:138px;height:96px;border-radius:14px;overflow:hidden;box-shadow:var(--soft2);cursor:pointer;transition:transform .3s var(--ease-spring)}
  .btile:hover{transform:translateY(-4px)}
  .btile img{width:100%;height:100%;object-fit:cover;display:block}
  .btile .lb{position:absolute;left:8px;right:8px;bottom:8px;height:28px;border-radius:10px;background:color-mix(in srgb,var(--card) 88%,transparent);
             display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--deep);white-space:nowrap;padding:0 8px}
  .btile .lb small{font-weight:500;font-size:10.5px;color:var(--slate);font-variant-numeric:tabular-nums}
  /* radio top zone: Countries + Languages rails left, Top Stations flush to their top edge at right */
  #v-live .content>.facets{padding-top:52px}
  .radioTop{display:grid;grid-template-columns:minmax(0,1fr) 458px;gap:0 65px;align-items:start}
  .radioTop[hidden]{display:none}
  .rtR{margin-bottom:0}
  .rtR .sec{margin-bottom:0}
  .rtR .promo{margin-top:22px}
  /* 390px overflow fix (owner-sanctioned exception to the locked CSS, 2026-09-14):
     `1fr` is minmax(auto,1fr), so the single-column track took the rails'
     min-content width (918-1074px) and .rtL blew the document out. minmax(0,1fr)
     lets the track shrink to the viewport; the rails keep their internal
     overflow-x:auto scroll. Verified delta vs the pre-fix build at 390. */
  @media (max-width:1024px){.radioTop{grid-template-columns:minmax(0,1fr)}.radioTop .rtR{margin-bottom:48px}}
  .dimgrid{display:grid;grid-template-columns:repeat(auto-fill,138px);gap:18px;padding-top:4px}
  .dens[hidden]{display:none}
  .scard{flex:none;width:168px;text-align:left;cursor:pointer;display:block}
  .scard .disc{position:relative;display:block;width:168px;height:168px;border-radius:20px;overflow:hidden;box-shadow:var(--soft2);transition:transform .3s var(--ease-spring)}
  .scard:hover .disc{transform:translateY(-4px)}
  .scard .disc img{width:100%;height:100%;object-fit:cover;display:block}
  .scard .hv{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(8,21,26,.55));opacity:0;transition:opacity .25s;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px}
  .scard:hover .hv,.scard:focus-within .hv{opacity:1}
  .scard .hv .pb2{width:40px;height:40px;border-radius:50%;background:var(--teal);color:var(--inkfill);box-shadow:var(--glow);display:flex;align-items:center;justify-content:center}
  .scard .lock{position:absolute;left:10px;top:10px;z-index:2;width:26px;height:26px;border-radius:9px;background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--gold);display:flex;align-items:center;justify-content:center}
  .scard .hrt{position:absolute;right:10px;top:10px;z-index:2;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--slate);display:flex;align-items:center;justify-content:center;transition:color .2s,transform .2s}
  .scard:hover .hrt{opacity:1}
  .scard .hrt:hover{transform:scale(1.08)}
  .scard .hrt.on{color:var(--gold)}
  .scard .tx2{display:block;min-width:0}
  .scard .nm{display:block;margin-top:11px;font-size:13.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scard .mt{display:block;margin-top:3px;font-size:11.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scard .eq{position:absolute;left:10px;bottom:10px;display:none;gap:2.5px;align-items:flex-end;height:14px}
  .scard.playing .eq{display:flex}
  .scard .eq i{width:3px;border-radius:2px;background:var(--gold);animation:eqb 1s ease-in-out infinite alternate}
  .scard .eq i:nth-child(2){animation-delay:.2s}.scard .eq i:nth-child(3){animation-delay:.4s}
  @keyframes eqb{from{height:4px}to{height:14px}}
  .lhead{display:flex;align-items:center;gap:14px;margin:-14px 0 22px;flex-wrap:wrap}
  .lback{width:40px;height:40px;border-radius:50%;background:var(--card);box-shadow:var(--soft);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .lhead h2{font-size:21px;font-weight:600;color:var(--deep)}
  .lcount{font-size:12.5px;color:var(--placeholder);font-weight:500}
  .dens{margin-left:auto;display:flex;background:var(--herowash);border-radius:12px;padding:3px;gap:2px}
  .dens button{width:34px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--slate);cursor:pointer}
  .dens button.on{background:var(--card);color:var(--teal);box-shadow:0 5px 12px rgba(13,27,30,.10)}
  .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:20px}
  .sgrid.list{grid-template-columns:1fr;gap:6px}
  .sgrid.list .scard{display:flex;align-items:center;gap:14px;width:100%}
  .sgrid.list .scard .disc{width:56px;height:56px;border-radius:14px;flex:none}
  .sgrid.list .scard .hv{display:none}
  .sgrid.list .scard .tx2{flex:1;min-width:0}
  .sgrid.list .scard .nm{margin-top:0;font-size:14.5px}
  .sgrid.list .scard .mt{font-size:12px}
  .sgrid.list .scard .lock{left:auto;right:6px;top:6px;width:22px;height:22px}
  .sgrid.list .scard .hrt{position:static;background:none;width:34px;height:34px;flex:none;margin-left:auto}
  .scrim{position:fixed;inset:0;background:rgba(8,21,26,.55);backdrop-filter:blur(6px);z-index:64;opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.on{opacity:1;pointer-events:auto}
  .sheet{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--card);z-index:65;border-radius:26px 0 0 26px;
         box-shadow:-24px 0 60px rgba(13,27,30,.25);transform:translateX(102%);transition:transform .38s var(--ease-spring),visibility 0s linear .38s;
         display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
  .sheet.on{transform:none;visibility:visible;transition:transform .38s var(--ease-spring),visibility 0s}
  .sheet .sh{display:flex;align-items:center;gap:12px;padding:18px 20px 14px}
  .sheet .sh b{font-size:15px;font-weight:600;color:var(--deep);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet .sb{overflow-y:auto;padding:0 20px 120px;scrollbar-width:none}
  .sheet .sb::-webkit-scrollbar{display:none}
  /* SOT §66 (design): station drawer compact identity header (96px art, kind eyebrow, name, meta), actions clear of the art */
  .drHead{display:flex;gap:14px;align-items:center;margin:2px 0 20px;min-width:0}
  .drArt{width:96px;height:96px;border-radius:18px;object-fit:cover;flex:none;display:block;background:var(--herowash);box-shadow:var(--soft)}
  .drArt.cini{display:flex;align-items:center;justify-content:center;font-size:30px}
  .drArt[hidden]{display:none}
  .drId{min-width:0;display:grid;gap:3px}
  .drId b{display:block;font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drId small{display:block;font-size:12.5px;font-weight:500;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drKind{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--placeholder)}
  .smeta{display:flex;flex-direction:column;gap:8px;margin:18px 0}
  .smeta div{display:flex;justify-content:space-between;font-size:13px}
  .smeta dt{color:var(--placeholder);font-weight:500}
  .smeta dd{color:var(--deep);font-weight:600}
  .sact{display:flex;gap:12px;align-items:center;margin-bottom:24px}
  .sact .big{flex:1;height:52px;border-radius:16px;background:var(--teal);color:var(--inkfill);font-size:14.5px;font-weight:600;box-shadow:var(--glow);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
  .sact .rnd{width:52px;height:52px;border-radius:16px;background:var(--herowash);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .sact .rnd.on{color:var(--gold)}
  .sover{position:fixed;left:50%;top:70px;transform:translate(-50%,-16px);width:min(680px,calc(100vw - 40px));background:var(--card);
         border-radius:22px;box-shadow:0 40px 90px rgba(13,27,30,.35);z-index:66;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease-spring);overflow:hidden}
  .sover.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .sover .sin{display:flex;align-items:center;gap:12px;padding:16px 20px}
  .sover .sin svg{color:var(--teal);flex:none}
  .sover input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--inkdark);outline:none}
  .sover input::placeholder{color:var(--placeholder)}
  .sres{max-height:min(480px,60vh);overflow-y:auto;padding:0 12px 14px;scrollbar-width:none}
  .sres::-webkit-scrollbar{display:none}
  .sgroup{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);padding:12px 10px 6px}
  .kpop{position:fixed;right:40px;bottom:120px;width:280px;background:var(--card);border-radius:18px;box-shadow:var(--soft2);z-index:66;padding:16px 18px;display:none}
  .kpop.on{display:block}
  .kpop div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--slate);padding:5px 0}
  .kpop kbd{background:var(--herowash);border-radius:6px;padding:2px 8px;font-family:inherit;font-size:11px;font-weight:600;color:var(--deep)}
  .signin{display:flex;align-items:center;gap:14px;border-radius:18px;background:var(--floatg);padding:16px 18px;margin-bottom:26px;box-shadow:0 16px 32px rgba(0,119,139,.30)}
  .signin b{display:block;font-size:14px;font-weight:600;color:#fff}
  .signin small{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.75)}
  .signin button{margin-left:auto;flex:none;background:var(--gold);border-radius:10px;padding:9px 14px;font-size:12px;font-weight:700;color:var(--badge-ink);cursor:pointer}

  /* mrow (You tabs) */
  .mrow{display:flex;align-items:center;gap:14px;height:64px;border-radius:16px;padding:0 14px;margin-bottom:12px;
        background:color-mix(in srgb,var(--herowash) 60%,var(--card));cursor:pointer;transition:transform .2s}
  .mrow:hover{transform:translateY(-2px)}
  .mrow .mi{width:40px;height:40px;border-radius:13px;background:var(--card);box-shadow:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--teal);flex:none}
  .mrow .mi img{width:26px;height:26px;border-radius:8px;object-fit:cover}
  .mrow b{display:block;font-size:14.5px;font-weight:600;color:var(--deep)}
  .mrow small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--slate)}
  .mrow .chev{margin-left:auto;color:var(--iconoff)}

  /* empty state */
  .empty{background:var(--herowash);border-radius:20px;padding:46px;text-align:center;color:var(--deep)}
  .empty .eico{font-size:26px;color:var(--teal);display:flex;justify-content:center}
  .empty h3{font-size:19px;font-weight:600;margin-top:10px}
  .empty p{font-size:13.5px;color:var(--slate);margin:8px auto 22px;max-width:340px}
  .empty .arrR{margin:0 auto}
  /* render guard card (Wave 1): a screen part that failed to draw offers Try again */
  .rguard{margin:22px 50px 0 55px;padding:26px 24px}
  .rguard p{margin-bottom:6px}
  .content>.rguard{margin:0 0 26px}
  .sb>.rguard,#searchRes>.rguard,.cmtSec>.rguard{margin:0 0 16px}
  @media (max-width:1080px){.view>.rguard{margin:18px 24px 0 20px}}
  @media (max-width:719px){.view>.rguard{margin:16px 16px 0}}
  @media (max-width:719px){.vvol{display:none}}

  /* ---------- floating now-playing ---------- */
  .float{position:fixed;left:calc(var(--sw) - 71px);bottom:122px;width:602px;max-width:calc(100% - 40px);height:70px;border-radius:18px;z-index:6;
         background:var(--floatg);box-shadow:0 22px 44px rgba(0,119,139,.40);
         display:flex;align-items:center;gap:17px;padding:0 20px;color:#fff;
         opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:bottom .35s ease,opacity .35s var(--ease-spring),transform .35s var(--ease-spring)}
  .float.show{opacity:1;transform:none;pointer-events:auto}
  body.stopped .float{bottom:26px}
  .float .fp{cursor:pointer;color:#fff;display:flex}
  .float img{width:54px;height:54px;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.18);object-fit:cover;flex:none}
  .float .fi2{flex:1;min-width:0}
  .float .ft{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .float .fa{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .float .fd{font-size:12px;font-weight:600;letter-spacing:1.4px;display:flex;align-items:center;gap:7px;flex:none}
  .float .fd i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:block}
  .float .fx{color:#fff;display:flex;cursor:pointer}

  /* ---------- bottom player ---------- */
  .player{position:fixed;left:var(--sw);right:0;bottom:0;height:91px;background:var(--card);
          box-shadow:0 -14px 34px rgba(13,27,30,.07);z-index:7;display:flex;align-items:center;
          padding:0 37px;transition:transform .35s ease,background .25s}
  body.stopped .player{transform:translateY(110%)}
  .player img.pcov{width:54px;height:54px;border-radius:10px;box-shadow:0 8px 16px rgba(13,27,30,.16);flex:none;object-fit:cover}
  .pinfo{margin-left:16px;flex:none;min-width:200px}
  .player .pt{font-size:15px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
  .player .pa{margin-top:3px;font-size:12.5px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
  .pidle{font-size:13.5px;font-weight:500;color:var(--placeholder);margin-left:8px}
  .watchBtn{margin-left:16px;height:34px;border-radius:999px;background:var(--teal);color:var(--inkfill);box-shadow:var(--glow);font-size:12.5px;font-weight:600;padding:0 14px;display:flex;align-items:center;gap:7px;flex:none}
  .watchBtn[hidden]{display:none}
  .pgrp{display:flex;align-items:center;gap:26px;margin-left:70px;flex:none}
  .pctl{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--placeholder);transition:color .2s,transform .2s}
  .pctl.t{color:var(--teal)}
  .pctl.t:hover{transform:scale(1.08)}
  .ppause{width:42px;height:42px;border-radius:50%;background:var(--teal);color:var(--inkfill);box-shadow:var(--glow)}
  .ppause:hover{transform:scale(1.06)}
  .ptime{font-size:12.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;flex:none;margin-left:70px}
  .track{position:relative;flex:1 1 0;min-width:80px;height:4px;border-radius:2px;background:var(--rail);margin-left:16px;cursor:pointer}
  .track .fill{height:100%;width:0;border-radius:2px;background:var(--teal)}
  .track .fill.gold{background:linear-gradient(90deg,var(--teal) 0 70%,var(--gold) 70%)}
  .thumb{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;
         background:var(--card);border:5px solid var(--teal);box-shadow:0 2px 8px rgba(0,119,139,.4);pointer-events:none}
  .pgrpR{display:flex;align-items:center;gap:24px;margin-left:70px;flex:none}
  .voltrack{position:relative;width:68px;height:4px;border-radius:2px;background:var(--rail)}
  .voltrack .fill{height:100%;width:60%;border-radius:2px;background:var(--teal)}
  .voltrack .thumb{left:60%;width:13px;height:13px;border-width:4px}
  .mobile-play{display:none}
  /* Close player (owner 2026-10-06): a quiet round button at the bar's end, only while nothing plays */
  .pclose{flex:none;margin-left:24px;width:34px;height:34px;border-radius:50%;background:var(--rail);color:var(--slate)}
  /* Watch / Resume as an icon (phones, narrow tablets) shows an open-player arrow, never a
     second play glyph next to the play buttons */
  .watchBtn .wexp{display:none}
  .pclose[hidden]{display:none}
  .pclose:hover{color:var(--deep)}
  /* Wave 2: repeat (off / all / one), the volume slider, the Up next queue */
  #bRepeat{position:relative}
  #bRepeat.on,#bShuffle[aria-pressed="true"]{color:var(--gold)}
  #bRepeat[data-mode="one"]::after{content:"1";position:absolute;right:-7px;top:-6px;min-width:13px;height:13px;border-radius:7px;background:var(--gold);color:var(--badge-ink);font-size:9px;font-weight:700;line-height:13px;text-align:center}
  #bRepeat.dim{opacity:.35;cursor:default}
  .voltrack{cursor:pointer;touch-action:none}
  .voltrack:focus-visible,.vvol:focus-visible,.track:focus-visible{outline:2px solid var(--teal);outline-offset:6px}
  .track,.vtrack{touch-action:none}
  .vvol{position:relative;width:72px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);cursor:pointer;touch-action:none;flex:none}
  .vvol .vfill{height:100%;width:100%;border-radius:2px;background:#fff}
  .vvol .vthumb{position:absolute;left:100%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#fff;pointer-events:none}
  .qtools{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 6px}
  .qsec{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate);margin:16px 0 8px}
  .qrow{cursor:pointer}
  .qrow:hover{background:color-mix(in srgb,var(--herowash) 70%,transparent)}
  .qrow.cur{cursor:default;background:color-mix(in srgb,var(--teal) 10%,transparent)}
  .qrow .num .eqm{display:inline-flex;gap:2.5px;align-items:flex-end;height:12px}
  .qrow .num .eqm i{width:3px;border-radius:2px;background:var(--teal);animation:eqb 1s ease-in-out infinite alternate}
  .qrow .num .eqm i:nth-child(2){animation-delay:.2s}
  .qrow .num .eqm i:nth-child(3){animation-delay:.4s}
  .qrow .num .eqm.pausedeq i{animation-play-state:paused}
  body.qOver #rScrim{z-index:71}
  body.qOver #qDrawer{z-index:72}

  /* ---------- toast ---------- */
  #toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,16px);z-index:60;background:var(--toastbg);color:var(--sand);
         border-radius:999px;padding:11px 22px;font-size:13.5px;font-weight:500;box-shadow:0 22px 44px rgba(13,27,30,.4);
         opacity:0;pointer-events:none;transition:opacity .3s var(--ease-spring),transform .3s var(--ease-spring)}
  #toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- video theater ---------- */
  .st{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:24px}
  .stX{width:38px;height:38px;border-radius:50%;border:none;background:rgba(8,21,26,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:12px;backdrop-filter:blur(6px)}
  .stX:hover{background:rgba(8,21,26,.85)}
  .stRealVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;border-radius:inherit}
  /* ---------- ReplayPlayer adapter (video.js 8.24.1, 2026-09-23) ----------
     The player root owns video + stock control bar; letterboxed contain on
     true black (never cover-crop); custom theater chrome steps aside while
     the videojs bar is live; fullscreen hides header/UP NEXT/comments. */
  .crpRoot{position:absolute;inset:0;background:#000;border-radius:inherit}
  .crpRoot .video-js,.crpRoot .crpVideo{position:absolute;inset:0;width:100%;height:100%}
  .crpRoot video{object-fit:contain;background:#000}
  .crpLegacy{position:absolute;inset:0}
  /* Debate stage zoom (2026-09-28, cr-replay-player.js): the video element
     is scaled so a Debate recording's stage band fills the player — clip it
     to the player, and ease between the host-alone and stage views */
  .crpRoot .video-js,.crpRoot.crpLegacy{overflow:hidden}
  .crpRoot video{transition:transform .45s cubic-bezier(.22,.61,.21,1)}
  #stMedia.crpActive .stCtl,#stMedia.crpActive .stBig,#stMedia.crpActive .stNow,#stMedia.crpActive .stVeil{display:none}
  #stMedia.crpActive .stVid{background-image:none!important}
  .crpRoot .vjs-control-bar{background:linear-gradient(to top,rgba(7,18,21,.9),rgba(7,18,21,.42) 72%,transparent);color:#F4FBF9}
  /* safety net: v8 hides the bar until vjs-has-started — never leave a
     paused/blocked replay without visible controls */
  .crpRoot .video-js:not(.vjs-has-started) .vjs-control-bar{display:flex;visibility:visible;opacity:1}
  .crpRoot .vjs-time-control{color:#F4FBF9}
  .crpRoot .vjs-play-progress,.crpRoot .vjs-volume-level{background:var(--teal)}
  .crpRoot .vjs-slider{background:rgba(255,255,255,.22)}
  .crpRoot .vjs-load-progress{background:rgba(255,255,255,.14)}
  /* ±10 s (owner 2026-09-28: "the spacing … looks a bit off"). The labels
     are text in video.js's ICON slot, which is sized for its 1.8em icon font
     on a 1.67 line — plain text sat ~5px above the play icon and the
     timeline. The slot now centres its text on both axes; the pair is a
     touch narrower than the 4em icon buttons (a group, not two icons) with
     clear air before the timeline. .vjs-control.crp-skip outranks the
     vendor's .video-js .vjs-control, whose sheet loads after this one. */
  .crpRoot .vjs-control.crp-skip{width:3.2em}
  .crpRoot .vjs-control.crp-skip-fwd{margin-right:.5em}
  .crpRoot .crp-skip .vjs-icon-placeholder{font-family:inherit;line-height:1}
  .crpRoot .crp-skip .vjs-icon-placeholder:before{content:"-10";display:flex;align-items:center;justify-content:center;font-size:12.5px;line-height:1;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .crpRoot .crp-skip-fwd .vjs-icon-placeholder:before{content:"+10"}
  .crpRoot .vjs-control-text{font-size:12px}
  @media (max-width:640px){
    .crpRoot .vjs-control-bar{height:3.6em}
    .crpRoot .vjs-control,.crpRoot .vjs-button{min-width:44px;min-height:44px}
  }
  #theater.crp-fs{padding:0}
  /* SOT §66: the Up next rail, the description and the host line step aside in the replay's full screen too */
  #theater.crp-fs .stHead,#theater.crp-fs .stFoot,#theater.crp-fs .cmtSec,#theater.crp-fs .stRail,#theater.crp-fs .stDesc,#theater.crp-fs .stHostLine{display:none!important}
  #theater.crp-fs .stBox{display:block;width:100%;max-width:none;border-radius:0;box-shadow:none;max-height:100dvh}
  #theater.crp-fs .stMedia{margin:0;border-radius:0;aspect-ratio:auto;width:100%;height:100dvh}
  .crpRoot.crp-fw{position:fixed;inset:0;z-index:120;border-radius:0}
  .st.open{display:flex}
  .stScrim{position:absolute;inset:0;background:rgba(8,21,26,.66);backdrop-filter:blur(7px)}
  .stBox{position:relative;width:min(980px,100%);background:var(--card);border-radius:26px;box-shadow:0 40px 100px rgba(0,0,0,.45);
         max-height:min(94dvh,1100px);overflow-y:auto;overscroll-behavior:contain;animation:pop .5s var(--ease-spring)}
  @keyframes pop{from{transform:translateY(22px) scale(.97);opacity:.6}to{transform:none;opacity:1}}
  .stHead{display:flex;align-items:center;gap:14px;padding:16px 20px;position:sticky;top:0;z-index:6;background:var(--card)}
  .stBack{width:38px;height:38px;border-radius:50%;background:var(--herowash);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .stTitle b{display:block;font-size:15px;font-weight:600;color:var(--deep)}
  .stTitle small{display:block;margin-top:2px;font-size:12px;color:var(--slate)}
  .stRight{margin-left:auto}
  .stPill{height:30px;border-radius:999px;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--badge-ink);
          display:inline-flex;align-items:center;gap:7px;padding:0 12px;font-size:11px;font-weight:700;letter-spacing:1.4px}
  html[data-theme="dusk"] .stPill{color:var(--gold)}
  .stPill i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.6s infinite}
  .stPill[hidden]{display:none}
  .stMedia{position:relative;aspect-ratio:16/9;background:#0D1B1E;border-radius:18px;margin:0 20px;overflow:hidden}
  .stVid{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s linear}
  .stMedia.playing .stVid{animation:kb 18s ease-in-out infinite alternate}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(2%,-2%)}}
  /* owner 2026-10-01: no gray wash over a real video. Only a short shade behind
     the control bar, and only while the controls show. */
  .stVeil{position:absolute;left:0;right:0;bottom:0;height:96px;max-height:40%;background:linear-gradient(180deg,rgba(8,21,26,0),rgba(8,21,26,.55));pointer-events:none;opacity:0;transition:opacity .25s}
  .stMedia.hov .stVeil{opacity:1}
  .stNow{position:absolute;left:14px;top:12px;font-size:10.5px;font-weight:600;letter-spacing:1.2px;color:rgba(255,255,255,.85)}
  .stBig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;
         background:var(--teal);color:var(--inkfill);box-shadow:0 10px 22px rgba(0,119,139,.5);display:none;align-items:center;justify-content:center;cursor:pointer}
  .stMedia.idleBig .stBig{display:flex}
  .stCtl{position:absolute;left:16px;right:16px;bottom:12px;color:#fff;opacity:0;transition:opacity .25s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
  .stMedia.hov .stCtl{opacity:1}
  .vline{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .vtime{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
  .vtrack{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.28);cursor:pointer}
  .vtrack .vfill{height:100%;width:0;border-radius:2px;background:var(--teal)}
  .vtrack.liveFill .vfill{background:var(--gold)}
  .vtrack .vthumb{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:#fff}
  .vbtns{display:flex;align-items:center;gap:16px}
  .vb{color:#fff;display:flex;align-items:center;cursor:pointer}
  .vb:disabled{opacity:.4;cursor:default}
  .vb[disabled]{pointer-events:none}
  .sk{gap:2px;font-size:9.5px;font-weight:600}
  .vsp{flex:1}
  .vspeed{border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);cursor:pointer;font-variant-numeric:tabular-nums}
  .stFoot{display:flex;align-items:center;gap:16px;padding:16px 20px 20px}
  /* SOT §66 (design): theater playlist rail (desktop >1080): main column + 336px queue rail beside the stage,
     stacks back to one column below; rail rows are tonal, no borders, hover wash-blend only */
  .stBox.hasRail{width:min(1320px,100%);display:grid;grid-template-columns:minmax(0,1fr) 336px;align-items:start}
  .stMain{min-width:0}
  .stRail{position:sticky;top:0;padding:14px 20px 24px 8px;max-height:inherit;overflow-y:auto;scrollbar-width:thin}
  .stRail[hidden]{display:none}
  .railHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 8px 10px}
  .railHead .uplabel{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--placeholder)}
  .railHead small{font-size:11px;font-weight:600;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .upcList{display:flex;flex-direction:column;gap:4px;min-width:0}
  .upcList .upc{display:grid;grid-template-columns:144px minmax(0,1fr);gap:10px;align-items:start;width:100%;background:none;border:0;padding:8px;border-radius:12px;text-align:left;color:inherit;font-family:inherit;cursor:pointer;transition:background .25s}
  /* height:auto: the old strip's .upc img{height:44px} otherwise wins and squashes the 16:9 thumb to 144x44 */
  .upcList .upc img{width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;object-fit:cover;display:block;background:var(--herowash)}
  .upcList .upc span{min-width:0}
  .upcList .upc b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}
  .upcList .upc small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  .upcList .upc:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  html[data-theme="dusk"] .upcList .upc:focus-visible{outline-color:var(--gold)}
  .railEnd{font-size:12.5px;font-weight:500;color:var(--placeholder);padding:8px 10px;line-height:1.6}
  @media (hover:hover){.upcList .upc:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}}
  @media (max-width:1080px){.stBox.hasRail{display:block;width:min(980px,100%)}.stRail{position:static;padding:4px 20px 20px;overflow:visible}.upcList{flex-direction:row;flex-wrap:wrap}.upcList .upc{width:min(340px,100%)}}
  @media (max-width:719px){.upcList .upc{grid-template-columns:128px minmax(0,1fr)}}
  /* native full screen is the stage's own space: the rail steps aside like YouTube */
  .stBox:fullscreen{width:100%}
  .stBox:fullscreen.hasRail{display:block}
  .stBox:fullscreen .stRail{display:none}
  .uplabel{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);flex:none}
  .upc{display:flex;align-items:center;gap:10px;border-radius:12px;padding:8px 12px 8px 8px;background:color-mix(in srgb,var(--herowash) 60%,var(--card));cursor:pointer;min-width:0}
  .upc img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
  .upc b{display:block;font-size:12.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
  .upc small{display:block;margin-top:2px;font-size:11px;color:var(--slate)}
  /* episode comments: tonal sheet under the Up Next footer, internally scrollable thread */
  .cmtSec{margin:0 20px 20px;padding:16px 18px 18px;border-radius:18px;background:color-mix(in srgb,var(--herowash) 60%,var(--card))}
  /* SOT §66 (design): episode description: same wash-blend panel language as Comments; links always reachable */
  .stDesc{margin:15px 20px 0;padding:16px 18px 18px;border-radius:18px;background:color-mix(in srgb,var(--herowash) 60%,var(--card))}
  .stDesc[hidden]{display:none}
  .stDesc .dt{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--placeholder);margin-bottom:8px}
  .stDesc .dm{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;margin-bottom:10px}
  .stDesc .dm .dot{width:3px;height:3px;border-radius:50%;background:var(--placeholder)}
  .md{font-size:13px;line-height:1.65;color:var(--slate);min-width:0;overflow-wrap:anywhere}
  .md p{margin:0 0 8px}
  .md p:last-child{margin-bottom:0}
  .md strong{font-weight:600;color:var(--deep)}
  .md em{font-style:italic}
  .md ul{margin:0 0 8px;padding-left:18px}
  .md li{margin:2px 0}
  .md a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;font-weight:500;cursor:pointer}
  @media (hover:hover){.md a:hover{text-decoration-thickness:2px}}
  .md a:focus-visible,.mdMore:focus-visible,.mdT:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
  html[data-theme="dusk"] .md a:focus-visible,html[data-theme="dusk"] .mdMore:focus-visible,html[data-theme="dusk"] .mdT:focus-visible{outline-color:var(--gold)}
  .stDesc .md{max-height:5.4em;overflow:hidden}
  .stDesc .md.open{max-height:none;overflow:visible}
  .mdMore{margin-top:8px;min-height:40px;display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--teal);background:none;border:0;padding:6px 2px;cursor:pointer;font-family:inherit}
  .mdMore[hidden]{display:none}
  /* editor description tools: pill mini-buttons on the wash, preview reuses the viewer's .md prose */
  .mdtag{font-size:9.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--placeholder);margin-left:10px;font-style:normal}
  .mdTools{display:flex;align-items:center;gap:6px;margin:0 0 8px}
  .mdT{height:32px;min-width:32px;padding:0 12px;border:0;border-radius:999px;background:var(--herowash);color:var(--deep);font-size:12px;font-weight:600;line-height:1;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:background .25s,color .25s}
  .mdT b{font-weight:700}
  .mdT.on{background:var(--teal);color:var(--inkfill)}
  @media (hover:hover){.mdT:hover{background:color-mix(in srgb,var(--teal) 10%,var(--herowash))}}
  .mdT:disabled{opacity:.5;cursor:default}
  .mdSp{flex:1}
  .mdPrev{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:14px;padding:14px 16px;margin-top:8px}
  .mdNone{font-size:12.5px;color:var(--placeholder)}
  .cmtSec[hidden]{display:none}
  #eipMore[hidden]{display:none} /* .lvref sets display, which beat the hidden attribute: "Load more" showed with nothing more */
  .cmtHead{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
  .cmtHead h3{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate)}
  .ccount{font-size:12px;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .cmtAdd{display:flex;gap:10px;align-items:center;margin-bottom:14px}
  .cmtAdd input{flex:1;min-width:0;height:42px;border-radius:12px;background:var(--card);color:var(--deep);padding:0 14px;font:inherit;font-size:13.5px;border:0;outline:none;box-shadow:inset 0 0 0 1px var(--rail)}
  .cmtAdd input:focus{box-shadow:inset 0 0 0 2px var(--teal)}
  .cmtPost{height:42px;border-radius:12px;background:var(--teal);color:var(--inkfill);font-weight:600;font-size:13px;padding:0 16px;cursor:pointer;border:0;flex:none}
  .cmtPost:disabled{opacity:.45;cursor:default}
  .cmtList{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:13px}
  .crow{display:flex;gap:10px;align-items:flex-start}
  .cav{flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--teal) 16%,var(--card));color:var(--teal);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
  .cav.me{background:color-mix(in srgb,var(--gold) 24%,var(--card));color:var(--badge-ink)}
  .cbody{min-width:0}
  .cbody b{font-size:12.5px;font-weight:600;color:var(--deep)}
  .cbody time{font-size:11px;color:var(--placeholder);margin-left:8px}
  .cbody p{font-size:13px;line-height:1.5;color:var(--slate);margin-top:2px}
  .cnone{font-size:13px;color:var(--placeholder)}

  /* ---------- phone: download gate ---------- */
  .dl{display:none;position:fixed;inset:0;z-index:90;overflow-y:auto;background:
      radial-gradient(60% 40% at 50% 0%,var(--herowash),transparent 70%),var(--paper);padding:56px 28px 60px;text-align:center}
  body.show-dl .dl{display:block}
  body.show-dl .sidebar,body.show-dl .banner,body.show-dl .content,body.show-dl .player,body.show-dl .float,body.show-dl .cluster,body.show-dl .tabbar{display:none}
  .dlIcon{width:96px;height:96px;border-radius:28px;background:var(--card);box-shadow:var(--soft2);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
  .dlIcon img{width:78px;height:78px;object-fit:contain}
  .dlEyebrow{margin-top:22px;font-size:11px;font-weight:600;letter-spacing:2px;color:var(--placeholder)}
  .dl h1{margin-top:8px;font-size:30px;font-weight:700;letter-spacing:-.6px;color:var(--inkdark)}
  .dl h1 em{font-style:normal;color:var(--teal)}
  .dlSub{margin:14px auto 26px;max-width:420px;font-size:14.5px;color:var(--slate);line-height:1.6}
  .shot{position:relative;width:min(340px,100%);margin:0 auto;border-radius:26px;overflow:hidden;box-shadow:var(--soft2)}
  .shot img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
  .mini{position:absolute;left:14px;right:14px;bottom:14px;height:52px;border-radius:14px;background:var(--floatg);display:flex;align-items:center;gap:10px;padding:0 10px;color:#fff}
  .mini img{width:36px;height:36px;border-radius:9px;object-fit:cover}
  .mini span b{display:block;font-size:12.5px;font-weight:600}
  .mini span small{display:block;font-size:10.5px;color:rgba(255,255,255,.75)}
  .mini i{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--gold)}
  .badges{margin-top:26px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .badge{display:flex;align-items:center;gap:10px;background:var(--badgebg,#0D1B1E);color:#fff;border-radius:14px;padding:10px 18px;text-decoration:none;box-shadow:0 16px 34px rgba(13,27,30,.28)}
  html[data-theme="dusk"] .badge{--badgebg:var(--raised);box-shadow:0 16px 34px rgba(4,10,12,.55),inset 0 0 0 1px var(--rail)}
  .badge svg{width:22px;height:22px}
  .badge small{display:block;font-size:9.5px;font-weight:500;color:rgba(255,255,255,.7)}
  .badge b{display:block;font-size:15px;font-weight:600}
  .dlFine{margin-top:20px;font-size:12.5px;color:var(--placeholder)}
  .dlFine a{color:var(--teal);font-weight:600}
  /* web first (owner 2026-10-17): the phone's "Get the app" bar, closable, in place of the download gate */
  .appBar{display:none}
  @media (max-width:719px){
    body.has-appbar .appBar{display:flex;position:fixed;left:0;right:0;top:0;z-index:9;height:56px;align-items:center;gap:10px;padding:0 10px 0 14px;
      background:var(--card);box-shadow:0 8px 22px rgba(13,27,30,.08)}
    body.has-appbar{padding-top:56px}
    body.has-appbar .cluster{top:72px}
    .appBar img{width:34px;height:34px;border-radius:10px;object-fit:contain;flex:none}
    .appBar .tx{flex:1;min-width:0}
    .appBar b{display:block;font-size:13px;font-weight:700;color:var(--deep)}
    .appBar small{display:block;font-size:11.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .appBar .upmini{flex:none;display:inline-flex;align-items:center;text-decoration:none}
    .appBarX{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--slate);border-radius:50%}
    html[data-theme="dusk"] .appBar{box-shadow:0 8px 22px rgba(4,10,12,.5),inset 0 -1px 0 var(--rail)}
  }

  /* ================= SHOWS module (shows-v2: typed shows, seasons, resume) ================= */
  /* type badge: small frosted chip, distinct glyph per show.type; future types slot in with a new glyph */
  .tbdg{position:absolute;left:8px;top:8px;z-index:2;height:22px;border-radius:8px;background:rgba(8,21,26,.62);backdrop-filter:blur(6px);
         color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px;padding:0 8px}
  .tbdg svg{display:block}
  .tbdg.live{background:var(--gold);color:var(--badge-ink)}
  .tbdg.live i{width:6px;height:6px;border-radius:50%;background:var(--badge-ink);animation:pulse 1.6s infinite}
  .tbdg .vw{color:#fff;font-weight:600;letter-spacing:0}
  /* show rail card: art (square or landscape per section layout), badge row, 2-line title, meta, plays, hairline */
  .shcard{flex:none;width:150px;min-width:0;text-align:left;cursor:pointer;display:block;position:relative}
  .shcard .art{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--soft2);background:var(--herowash);transition:transform .3s var(--ease-spring)}
  .shcard:hover .art{transform:translateY(-4px)}
  .shcard .art img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
  .shcard.ls{width:224px}
  .shcard.ls .art img{aspect-ratio:16/9}
  .shcard .prchip{position:absolute;right:8px;top:8px;z-index:2;width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--gold);display:flex;align-items:center;justify-content:center}
  .shcard .hair{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(8,21,26,.30)}
  .shcard .hair i{display:block;height:100%;background:var(--teal)}
  .shcard .t{margin-top:11px;font-size:13px;line-height:1.3;font-weight:600;color:var(--deep);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .shcard .m{margin-top:4px;font-size:11.5px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shcard .p{margin-top:3px;font-size:11px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .shgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:20px}
  .shgrid .shcard{width:auto}
  /* continue watching + live podcasts landscape tiles */
  .cwtile{flex:none;width:238px;cursor:pointer;position:relative}
  .cwtile .im{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:var(--soft2);background:var(--herowash);transition:transform .3s var(--ease-spring)}
  .cwtile:hover .im{transform:translateY(-4px)}
  .cwtile .im img{width:100%;height:100%;object-fit:cover;display:block}
  .cwtile .im::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}
  .cwtile .bar{height:3px;border-radius:2px;background:var(--rail);margin-top:8px;overflow:hidden}
  .cwtile .bar i{display:block;height:100%;background:var(--teal)}
  .cwtile .t{margin-top:9px;font-size:13px;line-height:1.3;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cwtile .s{margin-top:3px;font-size:11.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cwtile .rtag{position:absolute;right:8px;bottom:8px;z-index:2;height:24px;border-radius:8px;background:rgba(8,21,26,.66);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;padding:0 7px}
  /* shows right rail: Continue Watching stacks full-width tiles (Radio rtR pattern), sections spaced */
  .rtR .cwcol{display:flex;flex-direction:column;gap:20px}
  .rtR .cwtile{width:100%}
  .rtR .sec+.sec{margin-top:34px}
  /* applied-filter summary strip: what the sheet filtered out, each dimension removable */
  .shapplied{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:-14px 0 30px}
  .shapplied[hidden]{display:none}
  .shapplied .lb{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--placeholder)}
  .shapplied .chip{flex:none;display:inline-flex;align-items:center;gap:7px}
  .shapplied .chip .x{display:flex;opacity:.85}
  .shapplied .cnt{font-size:12.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;margin-left:2px}
  .shapplied .lvref{margin:0 0 0 2px;height:32px;padding:0 14px;font-size:12px;border-radius:11px}
  /* languages/genres browse tiles: icon-led plain tiles with a selected (teal) state */
  /* selected flag tile: same teal glow as an active chip, label bar flips to the on-fill */
  .btile.on{box-shadow:var(--soft2),0 8px 18px rgba(0,119,139,.30)}
  .btile.on .lb{background:var(--teal);color:var(--inkfill)}
  .btile.on .lb small{color:var(--inkfill);opacity:.75}
  .gchips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:4px}
  .gchip{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--herowash);color:var(--deep);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .25s,color .25s,transform .2s var(--ease-spring)}
  .gchip .gi{display:flex;flex:none;color:var(--teal)}
  .gchip small{font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--placeholder);font-variant-numeric:tabular-nums}
  @media (hover:hover){.gchip:hover{background:color-mix(in srgb,var(--teal) 8%,var(--herowash));transform:translateY(-1px)}}
  .gchip:active{transform:scale(.97)}
  .gchip.on{background:var(--teal);color:var(--inkfill)}
  .gchip.on .gi{color:var(--inkfill)}
  .gchip.on small{color:var(--inkfill);opacity:.78}
  /* Shows categories (SOT §65): the design's pill; a genre name wider than the tile ends in "…" at the tile's edge
     instead of being cut on both sides */
  #v-shows .g span em{display:block;flex:none;max-width:calc(100% + 12px);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* latest-episodes numbered rows (feed row anatomy + S·E label) */
  .row .aa .se{color:var(--teal);font-weight:600}
  /* show detail: sticky hero column + season pills + episode list */
  .sdet{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:52px;align-items:start;padding-bottom:40px}
  .sdL{position:sticky;top:8px;min-width:0}
  .sdArt{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--soft2);background:var(--herowash)}
  .sdArt>img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
  .sdT{margin-top:18px;font-size:27px;font-weight:700;letter-spacing:-.5px;line-height:1.15;color:var(--inkdark);text-wrap:balance}
  .sdMeta{margin-top:8px;font-size:12.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .sdMeta .dot{width:3px;height:3px;border-radius:50%;background:var(--placeholder)}
  .sdMeta .mi{display:inline-flex;align-items:center;gap:7px}
  .sdDescWrap{margin-top:14px}
  .sdDesc{font-size:13.5px;line-height:1.65;color:var(--slate);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sdDesc.open{-webkit-line-clamp:unset}
  /* SOT §66: the show description is Markdown now (same renderer as episodes); it keeps the page's own size */
  .sdDesc .md{font-size:inherit;line-height:inherit}
  .sdMore{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--teal);cursor:pointer;background:none;padding:0}
  .sdAct{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
  .sdCTA{height:50px;border-radius:16px;background:var(--floatg);color:#fff;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:10px;padding:0 22px;cursor:pointer;box-shadow:var(--glow);transition:transform .2s var(--ease-spring);font-variant-numeric:tabular-nums}
  .sdCTA:hover{transform:translateY(-2px)}
  .sdCTA .left{font-weight:500;opacity:.78;font-size:12.5px}
  .sdSec{height:50px;border-radius:16px;background:var(--herowash);color:var(--deep);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:0 18px;cursor:pointer;transition:color .2s,background .2s}
  .sdSec:hover{color:var(--teal)}
  .sdRnd{width:50px;height:50px;border-radius:16px;background:var(--herowash);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .sdRnd.on{color:var(--gold)}
  .sdNote{margin-top:14px;border-radius:14px;background:color-mix(in srgb,var(--gold) 12%,transparent);padding:12px 14px;font-size:12.5px;font-weight:500;color:var(--deep);line-height:1.6;display:flex;gap:10px;align-items:flex-start}
  .sdNote svg{color:var(--gold);flex:none;margin-top:1px}
  .seasRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .seasRow .chip small{margin-left:7px;font-weight:500;opacity:.72;font-variant-numeric:tabular-nums}
  .epList{display:flex;flex-direction:column;gap:4px}
  .eprow{display:flex;gap:14px;align-items:flex-start;padding:13px 10px;border-radius:14px;cursor:pointer;transition:background .2s;position:relative}
  .eprow:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .eprow .epnum{flex:none;width:34px;text-align:center;font-size:12.5px;font-weight:600;color:var(--placeholder);padding-top:16px;font-variant-numeric:tabular-nums}
  .eprow .thumb{position:relative;transform:none;flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;box-shadow:0 6px 14px rgba(13,27,30,.14);background:var(--herowash)}
  .eprow .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .eprow .thumb .vp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(13,27,30,.42);color:#fff;opacity:0;transition:opacity .25s}
  .eprow:hover .thumb .vp{opacity:1}
  .eprow .eptx{flex:1;min-width:0;padding-top:1px}
  .eprow .ept{font-size:14px;font-weight:600;color:var(--deep);line-height:1.35}
  .eprow .epd{margin-top:3px;font-size:12px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .eprow .epstats{margin-top:6px;font-size:11.5px;font-weight:500;color:var(--placeholder);display:flex;gap:12px;align-items:center;font-variant-numeric:tabular-nums;flex-wrap:wrap}
  .eprow .epstats span{display:inline-flex;align-items:center;gap:5px}
  .eprow .epright{margin-left:auto;flex:none;text-align:right;padding-top:2px}
  .eprow .epdur{font-size:12.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums}
  .eprow .epgo{margin-top:8px;width:34px;height:34px;border-radius:50%;background:var(--card);box-shadow:var(--soft);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-left:auto;transition:transform .2s}
  .eprow:hover .epgo{transform:scale(1.06)}
  .eprow .phair{position:absolute;left:10px;right:10px;bottom:6px;height:3px;border-radius:2px;background:var(--rail);overflow:hidden}
  .eprow .phair i{display:block;height:100%;background:var(--teal)}
  .eprow .pleft{font-size:11px;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
  .eprow .eqm{display:inline-flex;gap:2.5px;align-items:flex-end;height:12px;vertical-align:-1px}
  .eprow .eqm i{width:3px;border-radius:2px;background:var(--gold);animation:eqb 1s ease-in-out infinite alternate}
  .eprow .eqm i:nth-child(2){animation-delay:.2s}
  .eprow .eqm i:nth-child(3){animation-delay:.4s}
  .eprow.pausedeq .eqm i{animation-play-state:paused}
  .eprow.locked .ept,.eprow.locked .epd{color:var(--placeholder)}
  .eprow.locked .thumb img{filter:grayscale(.6);opacity:.65}
  .eprow .plock{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:7px;background:color-mix(in srgb,var(--gold) 14%,transparent);padding:3px 8px}
  /* player extensions: resume chip + end-of-episode card (over the media, same chrome) */
  .vrz{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;z-index:5;display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 16px;border-radius:999px;background:rgba(8,21,26,.8);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
  .vrz.show{opacity:1;pointer-events:auto}
  .vrz b{font-weight:700;font-variant-numeric:tabular-nums}
  .vrz button{height:28px;border-radius:999px;padding:0 13px;background:var(--gold);color:var(--badge-ink);font-size:11.5px;font-weight:700;cursor:pointer}
  .endc{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(8,21,26,.86);backdrop-filter:blur(10px);color:#fff;text-align:center;padding:28px}
  .endc.on{display:flex}
  .endc .eb{font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:rgba(255,255,255,.66)}
  .endc .et{font-size:18px;font-weight:700;line-height:1.3;max-width:520px;text-wrap:balance;margin-top:4px}
  .endc .es{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:2px;font-variant-numeric:tabular-nums}
  .endc .eact{display:flex;gap:12px;margin-top:18px;align-items:center}
  .endc .eplay{height:44px;border-radius:999px;padding:0 22px;background:var(--teal);color:var(--inkfill);font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:9px;cursor:pointer;box-shadow:var(--glow)}
  .endc .ecancel{height:44px;border-radius:999px;padding:0 18px;background:none;border:1.5px solid rgba(255,255,255,.35);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
  .endc .ecount{font-size:11px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;margin-top:2px}
  /* dusk parity outlines for the new surfaces */
  html[data-theme="dusk"] .shcard .art,html[data-theme="dusk"] .cwtile .im,
  html[data-theme="dusk"] .sdArt,html[data-theme="dusk"] .eprow .thumb,html[data-theme="dusk"] .shgrid .tcov img{
    box-shadow:0 14px 26px rgba(4,10,12,.55),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .eprow .epgo,html[data-theme="dusk"] .sdRnd,html[data-theme="dusk"] .sdSec{
    box-shadow:inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .vrz,html[data-theme="dusk"] .endc{box-shadow:inset 0 0 0 1px rgba(246,229,211,.14)}
  /* ================= account layer: sidebar user block ================= */
  /* docked above the fixed player bar (91px desktop / 76px tablet) */
  .ublock{margin:12px 12px 0;flex:none;display:flex;align-items:center;gap:11px;min-height:58px;border-radius:16px;padding:9px 10px;text-align:left;cursor:pointer;background:none;transition:background .2s}
  .ublock:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .ub-av{position:relative;width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--floatg);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px color-mix(in srgb,var(--teal) 42%,transparent)}
  .ub-av img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
  .ub-av .ini{color:#fff;font-size:14px;font-weight:700;line-height:1}
  .ub-av.gone{background:var(--card);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--rail);color:var(--placeholder);justify-content:center}
  .ub-tx{flex:1;min-width:0}
  .ub-tx b{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--deep);line-height:1.25}
  .ub-tx b i{flex:1;min-width:0;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ub-tx small{display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ub-tx small.sig{color:var(--teal)}
  .ub-vtf{flex:none;color:var(--teal);display:inline-flex}
  .ublock .chev{color:var(--iconoff);flex:none;display:flex}

  /* ================= account layer: settings pane + sub-views ================= */
  .acwrap{max-width:640px}
  .ublock.pblock{display:none}
  .agrp{margin-bottom:28px}
  .agrp h3{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);text-transform:uppercase;margin:0 4px 10px}
  .acard{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:20px;overflow:hidden}
  .arow{display:flex;align-items:center;gap:13px;min-height:64px;padding:10px 16px;cursor:pointer;transition:background .2s;text-align:left;width:100%;font-family:inherit;color:inherit}
  .arow+.arow{border-top:1px solid var(--rail)}
  .arow:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .arow .ai{width:40px;height:40px;border-radius:13px;background:var(--card);box-shadow:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--teal);flex:none}
  .arow .atx{flex:1;min-width:0}
  .arow b{display:block;font-size:14.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arow small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arow .aval{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;padding-left:10px;max-width:190px;text-align:right}
  .arow .aval.one{flex-direction:row;align-items:center}
  .mini56{width:56px;height:4px;border-radius:2px;background:var(--rail);overflow:hidden;display:block;flex:none}
  .mini56 i{display:block;height:100%;width:0;border-radius:2px;background:var(--teal)}
  .premchip{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);border-radius:8px;padding:5px 10px;font-size:10.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
  .arow .achev{margin-left:8px;color:var(--iconoff);flex:none;display:flex}
  .arow.danger b,.arow.danger small{color:var(--notif-red)}
  .arow.danger .ai{color:var(--notif-red)}
  .arow.static{cursor:default}
  .arow.static:hover{background:none}
  .aversion{text-align:center;font-size:12px;font-weight:500;color:var(--placeholder);padding:2px 0 24px;font-variant-numeric:tabular-nums}

  /* profile + forms */
  .planchip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;letter-spacing:.04em}
  .krow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 16px;font-size:13.5px}
  .krow+.krow{border-top:1px solid var(--rail)}
  .krow dt{color:var(--placeholder);font-weight:500;flex:none}
  .krow dd{color:var(--deep);font-weight:600;min-width:0;text-align:right;overflow-wrap:anywhere}
  .noteRow{display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:12.5px;font-weight:500;color:var(--slate);border-top:1px solid var(--rail)}
  .noteRow svg{color:var(--placeholder);flex:none}
  .pacts{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .pillgo{width:100%;height:52px;border-radius:16px;background:var(--floatg);color:#fff;font-size:14.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:var(--glow);font-family:inherit;transition:transform .2s var(--ease-spring)}
  .pillgo:hover{transform:translateY(-2px)}
  .pillgo:disabled{background:var(--herowash);color:var(--slate);box-shadow:none;cursor:not-allowed;transform:none}
  .pilltonal{width:100%;height:52px;border-radius:16px;background:var(--herowash);color:var(--deep);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:inherit;transition:color .2s}
  .pilltonal:hover{color:var(--teal)}
  .pilldanger{width:100%;height:52px;border-radius:16px;background:color-mix(in srgb,var(--notif-red) 10%,transparent);color:var(--notif-red);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:inherit;transition:background .2s}
  .pilldanger:hover{background:color-mix(in srgb,var(--notif-red) 16%,transparent)}
  .avUp{position:relative;width:78px;height:78px;border-radius:50%;background:var(--floatg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;overflow:visible;cursor:pointer;flex:none;margin:6px auto 0}
  .avUp img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
  .avUp .cam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--card);color:var(--teal);box-shadow:var(--soft);display:flex;align-items:center;justify-content:center}
  .fld{display:block;text-align:left;margin-top:16px}
  .fld label{font-size:11px;font-weight:700;color:var(--slate);display:block;margin-bottom:6px}
  .fld label i{font-style:normal;color:var(--gold)}
  .fld input,.fld select,.fld textarea{width:100%;height:46px;border-radius:13px;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);font-family:inherit;font-size:13.5px;padding:0 14px;outline:none}
  .fld textarea{height:96px;padding:12px 14px;resize:none;line-height:1.55}
  .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--teal)}
  .fld .ferr{display:block;margin-top:6px;font-size:12px;font-weight:500;color:var(--notif-red)}
  .fld .fhint{display:block;margin-top:6px;font-size:11.5px;color:var(--placeholder);line-height:1.5}
  .fRow{display:flex;gap:10px}
  .fRow select{width:168px;flex:none}
  .fRow input{flex:1;min-width:0}
  .radioRow{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--deep);font-family:inherit;text-align:left;width:100%}
  .radioRow+.radioRow{border-top:1px solid var(--rail)}
  .radioRow .rd{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--rail);flex:none;display:flex;align-items:center;justify-content:center;transition:box-shadow .2s}
  .radioRow.on .rd{box-shadow:inset 0 0 0 2px var(--teal)}
  .radioRow.on .rd::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal)}
  .chkRow{display:flex;align-items:flex-start;gap:11px;padding:15px 16px;font-size:12.5px;font-weight:500;color:var(--slate);line-height:1.55;text-align:left;width:100%;font-family:inherit}
  .chkRow .ck{width:20px;height:20px;border-radius:7px;box-shadow:inset 0 0 0 2px var(--rail);flex:none;display:flex;align-items:center;justify-content:center;color:transparent;transition:background .2s,color .2s,box-shadow .2s}
  .chkRow.on .ck{background:var(--teal);color:var(--inkfill);box-shadow:none}

  /* streaming usage */
  .uhero{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:22px;padding:22px 22px 18px}
  .uherotop{display:flex;align-items:center;gap:10px}
  .planBadge{border-radius:8px;padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:.14em;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
  .unum{margin-top:16px;font-size:54px;font-weight:800;letter-spacing:-1.6px;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1}
  .unum small{font-size:19px;font-weight:600;letter-spacing:-.2px;margin-left:6px}
  .ofsub{margin-top:7px;font-size:13px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums}
  .ubar{height:8px;border-radius:999px;background:var(--rail);overflow:hidden;margin-top:16px}
  .ubar i{display:block;height:100%;border-radius:999px;background:var(--teal);transition:width .4s var(--ease-io,cubic-bezier(.22,.61,.21,1))}
  .ubar i.gold{background:var(--gold)}
  .ubar i.red{background:var(--notif-red)}
  .uline{display:flex;justify-content:space-between;gap:14px;margin-top:10px;font-size:12px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums}
  .ufoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rail);font-size:12.5px;font-weight:500;color:var(--slate)}
  .ufoot b{color:var(--deep);font-weight:600}
  .countchip{border-radius:999px;background:var(--card);box-shadow:var(--soft);padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums;flex:none}
  .sessRow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 16px;font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums}
  .sessRow+.sessRow{border-top:1px solid var(--rail)}
  .sessRow b{color:var(--deep);font-weight:700;font-variant-numeric:tabular-nums;flex:none}
  .softsell{text-align:center;padding:34px 26px 30px}
  .softsell .ssart{width:min(300px,100%);margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:var(--soft2);display:block}
  .softsell .ssart img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
  .softsell h2{margin-top:22px;font-size:21px;font-weight:700;font-style:italic;letter-spacing:-.3px;color:var(--deep);text-wrap:balance;line-height:1.3}
  .softsell p{margin:10px auto 0;max-width:400px;font-size:13.5px;line-height:1.65;color:var(--slate)}
  .bens{display:flex;flex-direction:column;gap:11px;margin:20px auto 0;max-width:320px;text-align:left}
  .bens div{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:500;color:var(--deep)}
  .bens svg{flex:none;margin-top:2px;color:var(--teal)}
  .softsell .pillgo{max-width:320px;margin:24px auto 0;width:100%}

  /* subscriptions */
  .subsHero{border-radius:22px;background:var(--floatg);box-shadow:var(--glow);color:#fff;padding:24px}
  .subsHero h2{font-size:21px;font-weight:700;letter-spacing:-.3px}
  .subsHero p{margin-top:6px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.78)}
  .actHero{display:flex;flex-direction:column;align-items:center;text-align:center;background:color-mix(in srgb,var(--teal) 8%,var(--card));border-radius:22px;padding:30px 24px 26px}
  html[data-theme="dusk"] .actHero{background:var(--herowash)}
  .actCheck{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal);display:flex;align-items:center;justify-content:center}
  .actHero h2{margin-top:14px;font-size:20px;font-weight:700;color:var(--deep)}
  .actHero p{margin-top:6px;font-size:13.5px;color:var(--slate);font-variant-numeric:tabular-nums}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
  .plancard{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:stretch}
  .plancard h3{font-size:17px;font-weight:700;color:var(--deep)}
  .cyclepill{align-self:flex-start;margin-top:9px;height:26px;border-radius:999px;background:var(--card);box-shadow:var(--soft);padding:0 12px;display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--teal);text-transform:uppercase}
  .plancard .bens{margin:16px 0 0;max-width:none}
  .pricerow{margin-top:16px;font-size:12px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .ctaSoon{margin-top:14px;height:44px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--rail);color:var(--slate);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:not-allowed;font-family:inherit}
  .renew{margin-top:18px;font-size:11.5px;font-weight:500;color:var(--placeholder);text-align:center;line-height:1.6}
  .lline{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--slate);flex-wrap:wrap}
  .lline button{color:var(--teal);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit}
  .lline .dot{width:3px;height:3px;border-radius:50%;background:var(--placeholder)}

  /* tickets */
  .tk{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:18px;padding:16px 18px;margin-bottom:12px;cursor:pointer;text-align:left;width:100%;font-family:inherit;transition:transform .2s var(--ease-spring)}
  .tk:hover{transform:translateY(-2px)}
  .tk .tktop{display:flex;align-items:center;gap:10px}
  .tk .tno{font-size:14.5px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums}
  .stchip{margin-left:auto;border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex:none}
  .st-open{background:color-mix(in srgb,var(--seafoam) 22%,transparent);color:color-mix(in srgb,var(--seafoam) 42%,var(--inkdark))}
  .st-replied{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal)}
  .st-closed{background:color-mix(in srgb,var(--placeholder) 18%,transparent);color:var(--slate)}
  .tk .subj{display:inline-block;margin-top:10px;background:var(--card);border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--deep);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tk .created{margin-top:10px;font-size:11.5px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .tk .tdesc{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--slate);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tk .tmeta{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
  .tmsg{display:flex;gap:10px;align-items:flex-start;padding:14px 0}
  .tmsg+.tmsg{border-top:1px solid var(--rail)}
  .twho{font-size:12.5px;font-weight:600;color:var(--deep)}
  .twho time{font-size:11px;color:var(--placeholder);margin-left:8px;font-weight:500}
  .tbody{min-width:0}
  .tbody p{font-size:13px;line-height:1.6;color:var(--slate);margin-top:3px;overflow-wrap:anywhere}
  .tkHead{display:flex;align-items:center;gap:10px}
  .tkHead .stchip{margin-left:0}

  /* documents */
  .doc{max-width:680px;padding-bottom:30px}
  .doc h1{font-size:24px;font-weight:700;letter-spacing:-.4px;color:var(--inkdark)}
  .doc .dnote{margin-top:10px;border-radius:14px;background:color-mix(in srgb,var(--gold) 10%,transparent);padding:12px 14px;font-size:12px;font-weight:500;color:var(--slate);line-height:1.6}
  .doc h3{margin-top:26px;font-size:15px;font-weight:700;color:var(--deep)}
  .doc p{margin-top:8px;font-size:13.5px;line-height:1.7;color:var(--slate)}
  .doc p b{color:var(--deep);font-weight:600}

  /* sign-in sheet */
  #authSheet .lvpan{width:min(430px,calc(100vw - 56px));padding:28px 24px 24px}
  .auTitle{font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--inkdark);text-align:center}
  .auSub{margin-top:8px;font-size:13px;line-height:1.6;color:var(--slate);text-align:center}
  .auSub b{color:var(--deep);font-weight:600;font-variant-numeric:tabular-nums}
  .auDiv{display:flex;align-items:center;gap:12px;margin:20px 0 14px;font-size:11.5px;font-weight:600;color:var(--placeholder)}
  .auDiv::before,.auDiv::after{content:"";flex:1;height:1px;background:var(--rail)}
  .soc{width:100%;height:50px;border-radius:14px;background:var(--badgebg,#0D1B1E);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 16px 34px rgba(13,27,30,.28);margin-top:10px}
  .soc:hover{transform:translateY(-1px)}
  html[data-theme="dusk"] .soc{--badgebg:var(--raised);box-shadow:0 16px 34px rgba(4,10,12,.55),inset 0 0 0 1px var(--rail)}
  .auLink{margin-top:16px;font-size:13px;color:var(--slate);text-align:center}
  .auLink button{color:var(--teal);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
  .auFine{margin-top:16px;font-size:11px;font-weight:500;color:var(--placeholder);text-align:center;line-height:1.6}
  .otpWrap{display:flex;gap:9px;margin-top:22px;justify-content:center}
  .otpBox{width:44px;height:54px;border-radius:13px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--rail);text-align:center;font-size:20px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums;font-family:inherit;border:0;outline:none}
  .otpBox:focus{box-shadow:inset 0 0 0 2px var(--teal)}
  .auErr{display:block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--notif-red);text-align:center}
  .auResend{display:block;margin:14px auto 0;font-size:12px;font-weight:600;color:var(--teal);cursor:pointer}
  .okHero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 0 4px}
  .okHero .actCheck{width:62px;height:62px}
  .okHero h2{margin-top:16px;font-size:21px;font-weight:700;color:var(--deep)}
  .okHero p{margin-top:6px;font-size:13.5px;color:var(--slate);line-height:1.6}
  .tref{margin-top:14px;display:inline-flex;border-radius:12px;background:var(--herowash);padding:10px 18px;font-size:16px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums;letter-spacing:.04em}

  /* dusk outlines (D3 system) for the account surfaces */
  html[data-theme="dusk"] .acard,html[data-theme="dusk"] .uhero,html[data-theme="dusk"] .plancard,
  html[data-theme="dusk"] .tk,html[data-theme="dusk"] .pblock,html[data-theme="dusk"] .actHero,
  html[data-theme="dusk"] .countchip,html[data-theme="dusk"] .cyclepill,html[data-theme="dusk"] .ctaSoon{
    box-shadow:inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .arow .ai{box-shadow:0 10px 24px rgba(4,10,12,.5),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .ub-av{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px color-mix(in srgb,var(--teal) 42%,transparent)}

  /* tablet rail: the sidebar user block collapses to the avatar circle (the phone pane block keeps its copy) */
  @media (max-width:1080px){
    #userBlock{margin:8px 10px 0;justify-content:center;padding:9px 0}
    #userBlock .ub-tx,#userBlock .chev{display:none}
    .side-div{margin:auto 12px 0}
  }
  @media (max-width:1080px) and (min-width:720px){.sidebar{padding:14px 0 14px}}
  /* short windows: tighten the rhythm so the pinned profile block never crowds the nav */
  @media (max-height:870px){
    .sidebar{padding-top:22px}
    .logo{margin-bottom:0}
    .navlabel{margin-top:16px}
    .nav{margin-top:10px}
    .nav a{min-height:40px}
  }
  @media (max-height:870px) and (max-width:1080px){
    .sidebar{padding-top:12px;padding-bottom:10px}
    aside .navlabel{margin-top:12px}
    aside .nav{margin-top:8px}
    aside .nav a{min-height:32px}}
  /* phone: the settings pane pins the same user block at its top */
  @media (max-width:719px){
    .ublock.pblock{display:flex;position:static;width:100%;left:auto;right:auto;bottom:auto;margin:0 0 26px;padding:12px 14px;min-height:64px;background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:18px}
    .pblock .ub-tx b i{max-width:none}
    .pgrid{grid-template-columns:1fr}
  }

  /* ---------- tablet 720-1080 ---------- */
  @media (max-width:1080px){
    :root{--sw:64px;--bH:210px;--cx:378px}
    .logo{display:none}
    .logoT{display:block;height:44px;object-fit:contain;border-radius:13px;background:#fff;box-shadow:var(--soft)}
    .navlabel{margin:22px 0 0;text-align:center;font-size:9px;letter-spacing:.8px}
    .nav{margin-top:12px}
    .nav a{margin-left:22px;gap:0;width:20px;min-height:40px}
    .nav a span{display:none}
    .side-foot{display:none}
    .banner.slim{height:130px}
    .banner.slim h1{font-size:23px;bottom:44px}
    .banner.slim p{bottom:24px;font-size:12.5px}
    .adTag{left:12px;top:12px;padding:5px 10px;font-size:9px;letter-spacing:1.4px}
    /* D-3 hero, tablet band 210px (deployed 300px values scaled 0.7) */
    .heroTitle{top:56px;font-size:20px;letter-spacing:-.3px;line-height:1.22}
    .pill{top:28px;padding:6px 12px;font-size:9px;letter-spacing:1.6px;border-radius:8px}
    .heroSub{top:109px;font-size:12px}
    .heroPlay{top:134px;width:38px;height:38px}

    .cluster{right:20px;top:16px;gap:10px}
    .cbtn{width:38px;height:38px}
    .content{padding:26px 24px 116px 20px}
    .content.cwide{padding-left:24px;padding-right:24px}
    .sec{margin-bottom:36px}
    .secHead{margin-bottom:16px}
    .secHead h2{font-size:18px}
    .coverGrid{gap:12px}
    .cov img{border-radius:12px}
    .cov .t{font-size:11.5px;margin-top:9px}
    .cov .a{font-size:10.5px}
    .chips{gap:8px;margin:-10px 0 26px}
    .chip{height:28px;font-size:11px;padding:0 12px;border-radius:10px}
    .nprow{gap:8px;padding-bottom:6px}
    .nprow .chip{margin:0}
    .nbar{margin:4px 0 6px}
    .updrow{font-size:11.5px}
    .refbtn{width:30px;height:30px}
    .tgrid{gap:12px}
    .tcov{width:calc((100% - 36px)/4);min-width:96px}
    .tcov .t{font-size:11px}
    .tcov .a{font-size:10px}
    .cols{gap:40px}
    .colR{flex:1 1 308px}
    .row{min-height:40px;margin-bottom:8px}
    .row img{width:40px;height:40px;border-radius:9px}
    .row .ntile{width:40px;height:40px;border-radius:9px}
    .row .ntile b{font-size:13px}
    .tcov .ntile b{font-size:26px}
    .row .tt{font-size:13px}
    .row .aa{font-size:11px}
    .row .du{font-size:11.5px}
    .artists{gap:12px}
    .artists img{width:48px;height:48px;border-radius:15px}
    .genres{gap:10px}
    .g{height:64px;border-radius:10px}
    .g span{bottom:20px;height:22px;font-size:11px}
    .lvgrid{gap:14px}
    .float{left:84px}
    .player{height:76px;padding:0 24px 0 84px}
    .player img.pcov{width:44px;height:44px}
    .player .pt{font-size:13.5px}.player .pa{font-size:11px}
    .pgrp{margin-left:24px;gap:16px}
    .ptime{margin-left:20px;font-size:11.5px}
    .pgrpR{display:none}
    .thumb{width:14px;height:14px;border-width:4px}
    /* shows tablet retune: smaller rail cards, single-column detail */
    .shcard{width:128px}
    .shcard.ls{width:190px}
    .cwtile{width:196px}
    .shgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px}
    .sdet{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:34px}
    .sdT{font-size:23px}
    .eprow .epnum{display:none}
    .eprow .thumb{width:52px;height:52px}
  }
  @media (max-width:1180px) and (min-width:1081px){
    .heroTitle{font-size:22px}
    .pgrp{margin-left:34px;gap:18px}
    .ptime{margin-left:30px}
    .pgrpR{margin-left:30px;gap:16px}}
  /* desktop: the bar fits its width so Close stays on screen (2026-10-07). With an episode
     (Resume, .pw) and/or Close (.pc) the design's bar outgrew most laptops (1440 overflowed by
     40 px with an episode, cutting the volume group). Where it fits, nothing changes; when it
     does not, in order: the volume slider goes (L1), the title narrows and the wide gaps close
     to 30 px (L2), the volume group goes (L3), the clock times go (L4). Thresholds are the
     content widths the bar needs per state: 1062 + 114 (Resume) + 58 (Close). */
  @media (min-width:1081px){
    .player{container:pbar/inline-size}
    @container pbar (max-width:1061.98px){.player:not(.pw):not(.pc) .voltrack{display:none}}
    @container pbar (max-width:1119.98px){.player.pc:not(.pw) .voltrack{display:none}}
    @container pbar (max-width:1175.98px){.player.pw:not(.pc) .voltrack{display:none}}
    @container pbar (max-width:1233.98px){.player.pw.pc .voltrack{display:none}}
    @container pbar (max-width:969.98px){.player:not(.pw):not(.pc) :is(.pgrp,.ptime,.pgrpR){margin-left:30px}.player:not(.pw):not(.pc) .pinfo{min-width:110px;flex:0 1 auto}}
    @container pbar (max-width:1027.98px){.player.pc:not(.pw) :is(.pgrp,.ptime,.pgrpR){margin-left:30px}.player.pc:not(.pw) .pinfo{min-width:110px;flex:0 1 auto}}
    @container pbar (max-width:1083.98px){.player.pw:not(.pc) :is(.pgrp,.ptime,.pgrpR){margin-left:30px}.player.pw:not(.pc) .pinfo{min-width:110px;flex:0 1 auto}}
    @container pbar (max-width:1141.98px){.player.pw.pc :is(.pgrp,.ptime,.pgrpR){margin-left:30px}.player.pw.pc .pinfo{min-width:110px;flex:0 1 auto}}
    @container pbar (max-width:759.98px){.player:not(.pw):not(.pc) .pgrpR{display:none}}
    @container pbar (max-width:817.98px){.player.pc:not(.pw) .pgrpR{display:none}}
    @container pbar (max-width:873.98px){.player.pw:not(.pc) .pgrpR{display:none}}
    @container pbar (max-width:931.98px){.player.pw.pc .pgrpR{display:none}}
    @container pbar (max-width:627.98px){.player:not(.pw):not(.pc) .ptime{display:none}}
    @container pbar (max-width:685.98px){.player.pc:not(.pw) .ptime{display:none}}
    @container pbar (max-width:741.98px){.player.pw:not(.pc) .ptime{display:none}}
    @container pbar (max-width:799.98px){.player.pw.pc .ptime{display:none}}
  }
  /* tablet: the bar fits its width so Close stays on screen (2026-10-07; an episode's Resume
     button already pushed the clock off a 768 screen). The title gives way first (ellipsis);
     below 900 the clock times go and Resume is its icon (the seek bar stays). */
  @media (max-width:1080px) and (min-width:720px){
    .pinfo{min-width:80px;flex:1 1 auto}
    .player .pt,.player .pa{max-width:none}}
  @media (max-width:899px) and (min-width:720px){
    .ptime{display:none}
    .watchBtn{margin-left:10px;width:34px;padding:0;justify-content:center}
    .watchBtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .watchBtn svg:not(.wexp){display:none}.watchBtn .wexp{display:block}}

  /* ---------- phone shell (<720, after gate) ---------- */
  .tabbar{display:none;position:fixed;left:0;right:0;bottom:0;height:62px;background:var(--card);z-index:8;
          box-shadow:0 -10px 26px rgba(13,27,30,.07)}
  .tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--placeholder);font-size:10.5px;font-weight:500}
  .tabbar button.on{color:var(--teal)}
  @media (max-width:719px){
    body:not(.show-dl){--sw:0px;--bH:0px}
    .sidebar{display:none}
    .view.on{position:static;overflow:visible}
    .banner{position:relative;height:190px;left:0}
    /* D-3 hero at phone: restored to the deployed static stack (HOLD item 2,
       2026-09-14). The scaled-overlay derivation put dark copy directly on the
       cover photo and was illegible at 390. position:relative (not the old
       static) keeps the dusk scrim ::after scoped to the band. */
    .banner{position:relative;height:auto;left:0}
    .banner.ads{height:190px}
    .adNav{display:none}
    .adDots{bottom:10px;right:12px}
    .bimg{position:static;width:100%;height:190px;object-fit:cover}
    .pill{position:static;display:inline-block;margin:18px 0 0 20px}
    .heroTitle{position:static;width:auto;max-width:100%;font-size:23px;padding:10px 20px 0;line-height:1.22}
    .heroSub{position:static;padding:8px 20px 0;font-size:13px}
    .heroPlay{position:static;margin:14px 20px 22px;width:54px;height:54px}
    /* The dusk scrim is a horizontal gradient built for the side-by-side hero;
       with the stacked phone layout it washed over the copy below the image.
       Limit it to the image block so the sand title keeps its contrast. */
    html[data-theme="dusk"] .banner:not(.ads)::after{height:190px}

    .banner.slim{height:auto}
    .banner.slim h1,.banner.slim p{position:static;padding:20px 16px 0}
    .banner.slim p{padding-bottom:22px}
    .banner.slim.ads{height:auto;aspect-ratio:40/7}
    .content.cwide{padding-left:16px;padding-right:16px}
    /* SOT §75: on a phone the thread leaves room for the reply bar above the bottom menu */
    .tkMsgs{max-height:calc(100vh - 430px);max-height:calc(100dvh - 430px);min-height:180px}
    .tkBody{max-width:80%}
    .content{position:static;overflow:visible;top:0;left:0;padding:24px 16px 190px}
    body{overflow:auto}
    .cluster{position:sticky;top:8px;right:0;left:0;width:100%;justify-content:flex-end;padding:8px 12px;background:color-mix(in srgb,var(--card) 92%,transparent)}
    .tabbar{display:flex}
    .player{height:74px;padding:0 14px}
    /* the player sits on top of the tab bar, never under it (owner 2026-10-06); the Go Live
       button rides above whichever is on top */
    .player{bottom:62px}
    body.stopped .player{transform:translateY(calc(100% + 62px))}
    body:not(.stopped) #glFab{bottom:150px}
    /* room for the title next to Close: Watch / Resume is its icon on phones (the word stays for screen readers) */
    .watchBtn{margin-left:10px;width:34px;padding:0;justify-content:center}
    .watchBtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .watchBtn svg:not(.wexp){display:none}.watchBtn .wexp{display:block}
    .pclose{margin-left:8px;width:30px;height:30px}
    .pinfo{min-width:0;flex:1;margin-left:10px}
    .pgrp{margin-left:8px;gap:12px}
    .pgrp .dtop{display:none}
    .ptime{display:none}.track{display:none}
    .mobile-play{display:flex}
    .float{display:none}
    #toast{bottom:160px}
    .lvgrid{grid-template-columns:repeat(2,1fr)}
    .coverGrid{flex-wrap:wrap}
    .cov{flex:1 1 45%}
    .nprow .chip{height:34px;font-size:12.5px;padding:0 14px;border-radius:12px;flex:none}
    #v-news .secHead .arrows{display:none}
    .tcov{width:calc((100% - 20px)/2.3)}
    .sheet{width:100%;max-width:100%;border-radius:0}
    .sfoot{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
    .afline{font-size:12px}
    /* shows phone: stacked detail, scrolling season pills, compact rows; theater full-bleed */
    .sdet{grid-template-columns:minmax(0,1fr);gap:26px}
    .sdL{position:static}
    .sdR{min-width:0}
    .sdT{font-size:24px}
    .seasRow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin:-2px -2px 14px}
    .seasRow::-webkit-scrollbar{display:none}
    .seasRow .chip{flex:none}
    .eprow{padding:10px 6px;gap:10px}
    .eprow .epnum{display:none}
    .eprow .thumb{width:52px;height:52px}
    .eprow .epstats{display:none}
    .eprow .epstats .cmt{display:inline-flex}
    .shapplied{margin:-6px 0 22px}
    .cwtile{width:210px}
    .sdCTA,.sdSec{height:46px}
    .vrz{bottom:76px;max-width:calc(100% - 24px)}
    .st{padding:0}
    .stBox{width:100%;border-radius:0;max-height:100dvh;overflow-y:auto}
    .stMedia{margin:0;border-radius:0}
    .stFoot{padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px))}
    .stDesc{margin-left:16px;margin-right:16px}}

  /* ============================================================
     CREATOR CONTENT LAYER: hub rows, lifecycle chips, dropzones,
     upload progress, steppers, preview player. Tonal containment,
     no borders on cards/tiles; dashed rails only on dropzones.
     ============================================================ */
  /* lifecycle chips: colour + text label + dot glyph (never colour alone) */
  .lc{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;flex:none}
  .lc i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
  .lc-draft{background:color-mix(in srgb,var(--slate) 16%,transparent);color:var(--slate)}
  .lc-pending_review{background:color-mix(in srgb,var(--gold) 18%,transparent);color:color-mix(in srgb,var(--gold) 62%,var(--inkdark))}
  .lc-published{background:color-mix(in srgb,var(--seafoam) 22%,transparent);color:color-mix(in srgb,var(--seafoam) 45%,var(--inkdark))}
  .lc-changes_requested{background:color-mix(in srgb,var(--notif-red) 14%,transparent);color:var(--notif-red)}
  .lc-archived{background:color-mix(in srgb,var(--placeholder) 18%,transparent);color:var(--placeholder)}
  /* media status chips reuse the Live-pass .sc shape (.sc.uploading added) */
  .sc.uploading{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}
  .sc.pending{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
  /* hub header extras */
  .crhead{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .crnew{height:40px;border-radius:999px;background:var(--floatg);color:#fff;font-family:inherit;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;padding:0 18px;cursor:pointer;box-shadow:var(--glow);transition:transform .2s var(--ease-spring)}
  .crghost{height:40px;border-radius:999px;background:transparent;border:1.5px solid var(--rail);color:var(--slate);font-family:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;padding:0 15px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
  .crghost:hover{border-color:var(--teal);color:var(--teal)}
  .crghost.on{background:var(--teal);border-color:var(--teal);color:var(--inkfill);font-weight:700}
  .crnew:hover{transform:translateY(-2px)}
  .crnew:disabled{background:var(--herowash);color:var(--slate);box-shadow:none;cursor:not-allowed;transform:none}
  /* hub show rows (My Streams msrow vocabulary: thumb, title, chips, meta) */
  .cwrap{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:20px;overflow:visible}
  .csh{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;position:relative;border-radius:20px;transition:background .2s}
  .csh+.csh{border-top:1px solid var(--rail)}
  .csh:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .csh .cs1{width:56px;height:56px;border-radius:14px;overflow:hidden;flex:none;box-shadow:0 6px 14px rgba(13,27,30,.14);background:var(--herowash);display:flex;align-items:center;justify-content:center}
  .csh .cs1 img{width:100%;height:100%;object-fit:cover;display:block}
  .cini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(165deg,#1F4A52,#08151A);color:#fff;font-weight:700;letter-spacing:.02em}
  .csh .cs1 .cini{font-size:17px}
  .shcard .ho .cini{font-size:10px;border-radius:7px}
  .csh .cmid{flex:1;min-width:0}
  .csh .ct{font-size:14.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .csh .cx{margin-top:3px;font-size:12px;color:var(--slate);display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-variant-numeric:tabular-nums}
  .csh .cx .dot{width:3px;height:3px;border-radius:50%;background:var(--placeholder)}
  .csh .attn{display:inline-flex;align-items:center;gap:5px;color:var(--notif-red);font-weight:600}
  .csh .attn i{width:6px;height:6px;border-radius:50%;background:var(--notif-red)}
  .csh .cright{margin-left:auto;flex:none;display:flex;align-items:center;gap:10px}
  .ovbtn{width:36px;height:36px;border-radius:50%;background:var(--card);box-shadow:var(--soft);color:var(--slate);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .ovbtn:hover{color:var(--teal);transform:translateY(-1px)}
  .cmenu{position:fixed;z-index:72;min-width:200px;background:var(--card);border-radius:16px;box-shadow:var(--soft2),0 0 0 1px color-mix(in srgb,var(--rail) 60%,transparent);padding:6px}
  .cmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:11px;font-family:inherit;font-size:13px;font-weight:600;color:var(--deep);cursor:pointer;background:none;text-align:left}
  .cmenu button:hover{background:color-mix(in srgb,var(--teal) 7%,transparent)}
  .cmenu button svg{color:var(--slate);flex:none}
  .cmenu button.dgr{color:var(--notif-red)}
  .cmenu button.dgr svg{color:var(--notif-red)}
  .cmenu[hidden]{display:none}
  .crfoot{margin-top:18px;font-size:11.5px;font-weight:500;color:var(--placeholder);display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
  .crfoot .fbar{width:120px;height:4px;border-radius:2px;background:var(--rail);overflow:hidden}
  .crfoot .fbar i{display:block;height:100%;width:17%;background:var(--teal)}
  .offbanner{display:flex;align-items:center;gap:10px;border-radius:14px;background:color-mix(in srgb,var(--slate) 12%,transparent);padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--deep);margin-bottom:14px}
  /* editors: wide wrapper + two columns; lhead rows keep clear of the fixed cluster */
  .cw{max-width:1080px}
  @media (min-width:1081px){.cw>.lhead,.acwrap>.lhead{padding-right:320px}}
  .crcols{display:grid;grid-template-columns:minmax(0,620px) minmax(0,380px);gap:34px;align-items:start}
  .cform{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:20px;padding:24px 22px}
  .cside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}
  .asave{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
  .asave svg{width:13px;height:13px}
  .asave[hidden]{display:none}
  .fcount{margin-top:6px;font-size:11px;font-weight:500;color:var(--placeholder);text-align:right;font-variant-numeric:tabular-nums}
  .fcount.warn{color:var(--notif-red)}
  .fhint .nettip{color:var(--placeholder)}
  /* segmented control (show type) */
  .seg{display:inline-flex;background:var(--card);border-radius:13px;padding:3px;gap:2px;box-shadow:var(--soft)}
  .seg button{height:36px;padding:0 18px;border-radius:10px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--slate);cursor:pointer;background:none;display:flex;align-items:center;gap:7px}
  .seg button.on{background:var(--teal);color:var(--inkfill);font-weight:700;box-shadow:var(--glow)}
  /* numeric stepper */
  .stp{display:inline-flex;align-items:center;background:var(--card);border-radius:12px;box-shadow:var(--soft);overflow:hidden;flex:none}
  .stp button{width:36px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:16px;font-weight:700;cursor:pointer}
  .stp button:hover{background:color-mix(in srgb,var(--teal) 7%,transparent)}
  .stp b{min-width:38px;text-align:center;font-size:14px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums}
  .stp button:disabled{color:var(--iconoff);cursor:default;background:none}
  .stepline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .seprev{font-size:12.5px;font-weight:700;color:var(--teal);border-radius:999px;background:color-mix(in srgb,var(--teal) 12%,transparent);padding:5px 12px;font-variant-numeric:tabular-nums}
  /* dropzone tiles (covers + MP4): one primitive, both ratios */
  .dzrow{display:flex;gap:14px;flex-wrap:wrap}
  .dzcol{flex:1;min-width:200px}
  .dzlbl{font-size:11px;font-weight:700;color:var(--slate);margin-bottom:8px;display:flex;align-items:center;gap:8px}
  .dzlbl i{font-style:normal;color:var(--gold)}
  .inhchip{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:7px;padding:3px 8px;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
  .dz{width:100%;border:1.5px dashed var(--rail);border-radius:18px;background:var(--herowash);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--slate);cursor:pointer;font-family:inherit;text-align:center;padding:14px;transition:border-color .2s,background .2s,transform .2s var(--ease-spring),box-shadow .2s}
  .dz:hover{border-color:color-mix(in srgb,var(--teal) 55%,var(--rail));color:var(--deep)}
  .dz.over{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,var(--herowash));transform:scale(1.01);color:var(--deep)}
  .dz svg{color:var(--teal)}
  .dz b{font-size:13.5px;font-weight:700;color:var(--deep)}
  .dz small{font-size:11.5px;color:var(--slate)}
  .dz .acc{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--placeholder)}
  .dz1{aspect-ratio:1;max-width:220px}
  .dz16{aspect-ratio:16/9;max-height:300px}
  .dz:disabled,.dz.dis{cursor:not-allowed;opacity:.55;transform:none}
  .dzFill{position:relative;overflow:hidden}
  .dzFill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
  .dzFill .dur{position:absolute;right:8px;bottom:8px;z-index:2;border-radius:8px;background:rgba(13,27,30,.72);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;font-variant-numeric:tabular-nums}
  .dzActs{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(8,21,26,.45);opacity:0;transition:opacity .2s;border-radius:inherit}
  .dzFill:hover .dzActs,.dzFill:focus-within .dzActs{opacity:1}
  .dzActs button{height:34px;border-radius:999px;padding:0 14px;background:var(--card);color:var(--deep);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
  .dzActs button:hover{color:var(--teal)}
  .dzActs button.rm{color:var(--notif-red)}
  /* upload file card + progress (determinate and indeterminate) */
  .upcard{border-radius:18px;background:var(--herowash);padding:16px}
  .upcard.err{background:color-mix(in srgb,var(--notif-red) 9%,var(--card))}
  .upfile{display:flex;align-items:center;gap:12px;min-width:0}
  .upfile .fi{width:40px;height:40px;border-radius:12px;background:var(--card);box-shadow:var(--soft);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
  .upfile .fn{flex:1;min-width:0}
  .upfile .fn b{display:block;font-size:13.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .upfile .fn small{display:block;font-size:11.5px;color:var(--slate);margin-top:2px;font-variant-numeric:tabular-nums}
  .spin{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--teal) 30%,transparent);border-top-color:var(--teal);animation:spn .8s linear infinite;flex:none}
  @keyframes spn{to{transform:rotate(360deg)}}
  .upbar{position:relative;height:4px;border-radius:2px;background:var(--rail);overflow:hidden;margin-top:14px}
  .upbar i{display:block;height:100%;border-radius:2px;background:var(--teal);transition:width .3s}
  .upbar.indet i{width:32%;transition:none;animation:indet 1.2s ease-in-out infinite}
  @keyframes indet{0%{margin-left:-32%}100%{margin-left:100%}}
  .upline{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--slate);font-variant-numeric:tabular-nums;flex-wrap:wrap}
  .upline b{color:var(--deep)}
  .upline .up{margin-left:auto;display:flex;gap:8px;align-items:center}
  .upmini{height:30px;border-radius:999px;padding:0 13px;background:var(--card);color:var(--deep);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;box-shadow:var(--soft)}
  .upmini:hover{color:var(--teal)}
  .upmini.pr{background:var(--teal);color:var(--inkfill);box-shadow:var(--glow)}
  .upmini.dgr{color:var(--notif-red)}
  .uppause{margin-top:10px;border-radius:12px;background:color-mix(in srgb,var(--gold) 14%,transparent);padding:10px 12px;font-size:12px;font-weight:600;color:var(--deep);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .why{margin-top:10px;text-align:left;border-radius:14px;background:var(--card);box-shadow:var(--soft);padding:0 14px}
  .why summary{list-style:none;display:flex;align-items:center;gap:8px;height:42px;font-size:12px;font-weight:700;color:var(--deep);cursor:pointer}
  .why summary::-webkit-details-marker{display:none}
  .why summary .chevR{margin-left:auto;transition:transform .2s}
  .why[open] summary .chevR{transform:rotate(-90deg)}
  .why p{font-size:12px;line-height:1.65;color:var(--slate);padding:0 0 13px}
  /* moderation notice + reviewer note callout */
  .modnote{display:flex;gap:10px;align-items:flex-start;border-radius:16px;background:color-mix(in srgb,var(--gold) 10%,transparent);padding:12px 14px;font-size:12.5px;font-weight:500;line-height:1.6;color:var(--deep);margin-bottom:16px}
  .modnote svg{flex:none;margin-top:1px;color:color-mix(in srgb,var(--gold) 70%,var(--inkdark))}
  .revnote{display:flex;gap:12px;align-items:flex-start;border-radius:16px;background:color-mix(in srgb,var(--notif-red) 8%,var(--card));padding:14px 16px;margin-bottom:16px}
  .revnote .ri{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--notif-red) 14%,transparent);color:var(--notif-red);display:flex;align-items:center;justify-content:center;flex:none}
  .revnote b{display:block;font-size:12.5px;font-weight:700;color:var(--notif-red)}
  .revnote p{margin-top:4px;font-size:13px;line-height:1.6;color:var(--deep)}
  .revnote .rw{margin-top:6px;font-size:11px;color:var(--placeholder);font-weight:500}
  .expbanner{display:flex;gap:10px;align-items:center;border-radius:16px;background:color-mix(in srgb,var(--notif-red) 9%,transparent);padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--deep);margin-bottom:16px}
  .expbanner svg{flex:none;color:var(--notif-red)}
  .expbanner button{margin-left:auto;flex:none}
  /* episode rows inside show editor */
  .eperow{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .2s}
  .eperow+.eperow{border-top:1px solid var(--rail)}
  .eperow:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .eperow .th{width:64px;height:36px;border-radius:9px;object-fit:cover;flex:none;background:linear-gradient(165deg,#1F4A52,#08151A)}
  .eperow .et{flex:1;min-width:0}
  .eperow .et b{display:block;font-size:13.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .eperow .et small{display:flex;gap:7px;align-items:center;margin-top:3px;font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums;flex-wrap:wrap}
  .plybtn{width:36px;height:36px;border-radius:50%;background:var(--card);box-shadow:var(--soft);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .plybtn:hover{transform:scale(1.06)}
  .plybtn:disabled{color:var(--iconoff);box-shadow:none;background:var(--herowash);cursor:default;transform:none}
  /* preview player creator chrome */
  .pvRibbon{position:absolute;right:14px;top:12px;z-index:4}
  .pvWarn{position:absolute;left:16px;right:16px;bottom:74px;z-index:4;border-radius:12px;background:rgba(232,180,34,.16);backdrop-filter:blur(6px);padding:9px 12px;font-size:11.5px;font-weight:600;line-height:1.55;color:#F3D37A;display:flex;gap:8px;align-items:flex-start}
  .pvWarn svg{flex:none;margin-top:1px;color:var(--gold)}
  .pvWarn[hidden]{display:none}
  .pvMid{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px 22px 66px;color:rgba(246,229,211,.85)}
  .pvMid .spin{width:26px;height:26px;border-width:3px;border-color:rgba(123,202,176,.25);border-top-color:var(--seafoam)}
  .pvMid b{font-size:14px;font-weight:700;color:#F6E5D3}
  .pvMid small{font-size:12px;line-height:1.6;max-width:380px;color:rgba(246,229,211,.65)}
  .pvMid .rp2{height:40px;border-radius:999px;background:var(--teal);color:var(--inkfill);font-family:inherit;font-size:12.5px;font-weight:700;padding:0 18px;cursor:pointer;box-shadow:var(--glow)}
  .pvMid[hidden]{display:none}
  .stMedia .stCtl.dis,.stMedia.hov .stCtl.dis{opacity:.35;pointer-events:none}
  @media (max-width:719px){.pvMid{gap:7px;padding:14px 14px 62px}.pvMid .spin{width:20px;height:20px}.pvMid b{font-size:12.5px}.pvMid small{font-size:10.5px;line-height:1.45;max-width:300px}
    .csh{display:block;padding:13px 12px}
    .csh .cs1{float:left;width:52px;height:52px;margin:1px 12px 0 0}
    .csh .cmid{overflow:hidden;padding-right:36px;min-width:0}
    .csh .ct{display:block}
    .csh .cx{display:inline;font-size:11.5px;line-height:1.55}
    .csh .cx .dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--placeholder);margin:0 6px;vertical-align:middle}
    .csh .attn{display:inline-flex;margin-left:2px}
    .csh .cx .dt{white-space:nowrap}
    .csh .cright{display:flex;margin-left:0;margin-top:6px;clear:none}
    .csh .ovbtn{position:absolute;top:11px;right:8px}}
  /* private preview modal */
  .prvBanner{display:flex;align-items:center;gap:10px;border-radius:16px 16px 0 0;background:color-mix(in srgb,var(--gold) 14%,transparent);padding:12px 16px;font-size:12.5px;font-weight:700;color:var(--deep)}
  .ownchip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;border-radius:8px;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);padding:4px 9px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  /* phone retune for the creator surfaces */
  @media (max-width:719px){
    .crcols{grid-template-columns:1fr;gap:20px}
    .cside{position:static;order:-1}
    .crhead{width:100%;margin-left:0}
    .crnew{flex:1;justify-content:center}
    .crghost{flex:1;justify-content:center}
    .cform{padding:18px 15px}
    .dz1{max-width:150px}
    .crFootPhone{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:5;background:linear-gradient(180deg,transparent,var(--card) 34%);padding:12px 0 6px;margin-top:6px}
  }
  /* dusk: dashed rails already solid; add the inset hairline family to new raised surfaces */
  html[data-theme="dusk"] .cwrap,html[data-theme="dusk"] .cform,html[data-theme="dusk"] .upcard,
  html[data-theme="dusk"] .modnote,html[data-theme="dusk"] .revnote,html[data-theme="dusk"] .expbanner,
  html[data-theme="dusk"] .why,html[data-theme="dusk"] .offbanner,html[data-theme="dusk"] .cmenu{
    box-shadow:inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .ovbtn,html[data-theme="dusk"] .plybtn,html[data-theme="dusk"] .upmini,
  html[data-theme="dusk"] .seg,html[data-theme="dusk"] .stp{
    box-shadow:0 10px 24px rgba(4,10,12,.5),inset 0 0 0 1px var(--rail)}
/* ---------- shows-v3: host rows, live badge, host profile, episode info sheet, player host line ---------- */
  .shcard .ho{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;padding:0 0 6px;text-align:left;cursor:pointer;color:var(--slate)}
  .shcard .ho .hav{flex:none;width:24px;height:24px;border-radius:50%;overflow:hidden;display:block}
  .shcard .ho .hav img{width:24px;height:24px;object-fit:cover;display:block}
  .shcard .ho b{font-size:12px;font-weight:600;color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .shcard .ho:hover b{color:var(--deep)}
  .shcard .ho>svg:last-child,.sdHost>svg:last-child,.hpLive>svg:last-child{margin-left:auto;color:var(--iconoff);flex:none}
  .art:has(.lvb) .prchip{right:66px}
  .lvb{position:absolute;right:8px;top:8px;z-index:2;height:22px;border-radius:8px;background:var(--gold);color:var(--badge-ink);
    display:flex;align-items:center;gap:5px;padding:0 8px;font-size:9.5px;font-weight:700;letter-spacing:.06em;border:0;cursor:pointer;font-family:inherit}
  .lvb i{width:6px;height:6px;border-radius:50%;background:var(--badge-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--badge-ink) 22%,transparent)}
  .sdHost{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:10px 0 4px;text-align:left;color:var(--slate);font-family:inherit}
  .sdHost .hav{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:block}
  .sdHost .hav img{width:40px;height:40px;object-fit:cover;display:block}
  .sdHost .htx b{display:block;font-size:15px;font-weight:700;color:var(--deep);display:flex;align-items:center;gap:6px}
  .sdHost .htx small{display:block;font-size:12.5px;color:var(--slate);margin-top:1px}
  .sdHost .chevg{margin-left:auto;color:var(--iconoff)}
  .hpHead{display:flex;gap:18px;align-items:center}
  .hpAv{flex:none;width:96px;height:96px;border-radius:50%;overflow:hidden;box-shadow:0 10px 22px rgba(13,27,30,.16)}
  .hpAv img{width:96px;height:96px;object-fit:cover;display:block}
  .hpTx h1{font-size:23px;font-weight:700;color:var(--deep);display:flex;align-items:center;gap:8px;letter-spacing:-.3px}
  .hpHandle{font-size:13.5px;font-weight:600;color:var(--teal);margin-top:2px}
  .hpBio{margin-top:8px;max-width:560px}
  .hpBio p{font-size:13.5px;line-height:1.65;color:var(--slate)}
  .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hpStats{font-size:12.5px;color:var(--slate);margin:14px 0 0;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:9px}
  .hpStats b{color:var(--deep);font-weight:700}
  .hpLive{display:flex;align-items:center;gap:13px;width:100%;border:0;cursor:pointer;background:var(--card);box-shadow:var(--soft);
    border-radius:16px;padding:12px 14px;margin-top:18px;text-align:left;font-family:inherit}
  .hpLive img{width:76px;height:52px;object-fit:cover;border-radius:10px;flex:none}
  .hpLive .lvp{flex:none;height:22px;border-radius:8px;background:var(--gold);color:var(--badge-ink);display:flex;align-items:center;gap:5px;padding:0 8px;font-size:9.5px;font-weight:700;letter-spacing:.06em}
  .hpLive .lvp i{width:6px;height:6px;border-radius:50%;background:var(--badge-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--badge-ink) 22%,transparent)}
  .hpLive .lvtx{flex:1;min-width:0}
  .hpLive .lvtx b{display:block;font-size:13.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hpLive .lvtx small{display:block;font-size:11.5px;color:var(--slate);margin-top:2px}
  .hpLive .chevg{margin-left:auto;color:var(--iconoff)}
  .artt .cini{margin:0 auto}
  .artt .hnm{display:block;font-size:11.5px;font-weight:500;color:var(--slate);margin-top:7px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row .aa .holink{border:0;background:none;color:var(--teal);font:inherit;padding:0;cursor:pointer}
  .du .dusub{display:block;font-size:11px;font-weight:500;color:var(--placeholder);margin-top:2px}
  .eprow .epinfo{margin-top:8px;width:34px;height:34px;border-radius:50%;background:var(--card);box-shadow:var(--soft);color:var(--slate);
    display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;transition:transform .2s,color .2s}
  .eprow:hover .epinfo{transform:scale(1.06);color:var(--teal)}
  .stInfo{width:38px;height:38px;border-radius:50%;border:none;background:rgba(8,21,26,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:10px;backdrop-filter:blur(6px)}
  .stHostLine{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--slate);font-size:12.5px;font-weight:600;padding:2px 0 0;margin:15px 20px 0;width:calc(100% - 40px);text-align:left;font-family:inherit}
  .stHostLine[hidden]{display:none}
  .stHostLine .cini,.stHostLine img{border-radius:7px}
  .stHostLine img{width:22px;height:22px;object-fit:cover;flex:none}
  .stHostLine em{font-style:normal;font-weight:500;color:var(--placeholder);font-size:11px;margin-left:2px}
  .eipHead{display:flex;gap:14px;align-items:flex-start}
  .eipArt{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}
  .eipHt{min-width:0;flex:1}
  .eipKind{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--placeholder);margin-bottom:4px}
  .eipT{font-size:15.5px;font-weight:700;color:var(--deep);line-height:1.3}
  .eipS{font-size:12.5px;color:var(--slate);margin-top:3px}
  .eipHost{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:7px 0 0;cursor:pointer;color:var(--teal);font-size:12.5px;font-weight:600;font-family:inherit}
  .eipHost .cini,.eipHost img{border-radius:7px}
  .eipHost img{width:24px;height:24px;object-fit:cover}
  .eipDesc{font-size:13.5px;line-height:1.7;color:var(--deep);margin:16px 0 0}
  .eipGrid{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;margin:18px 0}
  .eipGrid dt{font-size:10.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--placeholder)}
  .eipGrid dd{font-size:14px;font-weight:600;color:var(--deep);margin-top:2px;font-variant-numeric:tabular-nums}
  .eipAct{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 20px}
  .eipCmt{border-top:1px solid var(--rail);padding-top:16px;margin-bottom:22px}
  .cmtSign{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border-radius:12px;border:0;cursor:pointer;
    background:var(--herowash);color:var(--deep);font:inherit;font-size:13px;font-weight:600;margin-bottom:14px}
  .msbtn{display:none}
  @media (max-width:719px){
    .msbtn{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
      background:var(--card);box-shadow:var(--soft);color:var(--teal);font-weight:600;font-size:13px;font-family:inherit;margin:0 0 16px}
    .sdHost{padding-top:6px}}
/* ================= public profile (Profile Pass rev 2026-09-15) =================
   Ported verbatim from design/concept-v5/revisions/2026-09-15-profile-pass/index.html
   (CSS lines 1091-1244 + live-host/replay-host button resets 227-228, 295-298).
   New surface, rev 8-app language: no borders on cards/tiles/controls, tonal
   containment, teal working color, gold signal only, tabular-nums, dusk tokens. */
  /* ================= public profile (Project 1. NEW surface, rev 8-app language:
     no borders on cards/tiles/controls, tonal containment, teal working color,
     gold signal only, Poppins, tabular-nums on every numeral, dusk via tokens) ================= */
  /* top chrome = the global utility cluster; this pane reserves clearance below it */
  .pf-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;max-width:1120px;margin:0 auto;padding:100px 30px 140px}
  .pf-main{min-width:0;display:flex;flex-direction:column;gap:32px}
  /* hero: small logo -> big avatar -> handle + bio, top to bottom (per the header redesign) */
  .pf-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 6px 0}
  .pf-av{position:relative;width:136px;height:136px;border-radius:50%;overflow:hidden;background:var(--floatg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:46px;font-weight:700;
    box-shadow:0 0 0 3.5px var(--card),0 0 0 6px color-mix(in srgb,var(--teal) 42%,transparent),var(--soft2)}
  .pf-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pf-name{margin-top:18px;font-size:26px;font-weight:700;letter-spacing:-.5px;color:var(--inkdark);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-wrap:balance}
  .pf-kindchip{height:22px;border-radius:7px;background:color-mix(in srgb,var(--gold) 18%,transparent);color:color-mix(in srgb,var(--gold) 62%,var(--inkdark));display:inline-flex;align-items:center;padding:0 8px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .pf-handle{margin-top:5px;font-size:14px;font-weight:600;color:var(--teal)}
  .pf-bio{margin-top:10px;max-width:520px;font-size:13.5px;line-height:1.65;color:var(--slate);text-wrap:pretty}
  .pf-meta{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;font-size:12px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .pf-meta .mdot{width:3px;height:3px;border-radius:50%;background:var(--placeholder);flex:none}
  .pf-social{margin-top:12px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
  .pf-social a{display:inline-flex;align-items:center;gap:7px;height:32px;max-width:220px;border-radius:999px;background:color-mix(in srgb,var(--herowash) 60%,var(--card));padding:0 13px;font-size:11.5px;font-weight:600;color:var(--deep);text-decoration:none;transition:transform .2s var(--ease-spring)}
  .pf-social a:hover{transform:translateY(-2px)}
  .pf-social .sic{display:inline-flex;flex:none;color:var(--teal)}
  .pf-social .slb{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pf-actions{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
  /* reserved space only: the follow mechanism is a separate scoped build */
  .pf-follow-res{height:44px;border-radius:999px;background:var(--herowash);color:var(--placeholder);font-size:13.5px;font-weight:700;padding:0 26px;display:inline-flex;align-items:center;gap:8px;cursor:not-allowed;font-family:inherit;border:0}
  .pf-edit{height:44px;border-radius:999px;background:var(--card);box-shadow:var(--soft);color:var(--deep);font-size:13px;font-weight:600;padding:0 18px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;border:0;transition:transform .2s var(--ease-spring)}
  .pf-edit:hover{transform:translateY(-2px);color:var(--teal)}
  .pf-counts{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;font-size:12.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums}
  .pf-counts b{color:var(--deep);font-weight:700}
  .pf-counts .mdot{width:3px;height:3px;border-radius:50%;background:var(--placeholder);flex:none}
  /* followers row (visual placement per the reference's "New Followers" rail, relabeled "Followers") */
  .pf-folhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
  .pf-folhead h2{font-size:15px;font-weight:700;color:var(--deep);letter-spacing:-.2px}
  .pf-all{color:var(--teal);font-size:12.5px;font-weight:700;cursor:pointer;background:none;font-family:inherit;padding:8px 2px;border:0;border-radius:8px}
  .pf-all:hover{text-decoration:underline}
  .pf-folhead .since{font-size:12px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .pf-folrow{display:flex;gap:14px;flex-wrap:wrap}
  .pf-folv{display:flex;flex-direction:column;align-items:center;gap:7px;width:64px;flex:none;background:none;border:0;padding:2px 0;cursor:default;font-family:inherit}
  .pf-folav{position:relative;width:52px;height:52px;border-radius:50%;overflow:hidden;box-shadow:var(--soft);background:var(--floatg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;transition:transform .2s var(--ease-spring)}
  .pf-folv:hover .pf-folav{transform:translateY(-3px)}
  .pf-folav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pf-folv .nm{font-size:10.5px;font-weight:500;color:var(--slate);max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* content strip: one tile per uploaded content, the table of contents of the profile */
  .pf-sec>.secHead{margin-bottom:14px}
  .pf-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:none}
  .pf-rail::-webkit-scrollbar{display:none}
  .pf-item{flex:none;width:172px;scroll-snap-align:start;cursor:pointer;background:none;border:0;padding:0;text-align:left;font-family:inherit;color:inherit}
  .pf-item .im{display:block;position:relative;height:200px;border-radius:14px;overflow:hidden;box-shadow:var(--soft2);transition:transform .3s var(--ease-spring),box-shadow .25s}
  .pf-item .tt,.pf-item .mt{display:block}
  .pf-item .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .pf-item:hover .im{transform:translateY(-4px)}
  .pf-item[aria-pressed="true"] .im{box-shadow:0 0 0 2.5px var(--teal),0 14px 26px rgba(0,119,139,.28)}
  html[data-theme="dusk"] .pf-item[aria-pressed="true"] .im{box-shadow:0 0 0 2.5px var(--teal),0 14px 26px rgba(4,10,12,.55)}
  .pf-item .tt{font-size:13.5px;font-weight:600;color:var(--deep);margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
  .pf-item .mt{font-size:11.5px;font-weight:500;color:var(--placeholder);margin-top:3px;font-variant-numeric:tabular-nums}
  .pf-item[aria-pressed="true"] .tt{color:var(--teal)}
  .pf-kindtag{position:absolute;left:8px;top:8px;z-index:2;height:20px;border-radius:7px;background:rgba(8,21,26,.62);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;gap:5px;padding:0 8px;font-size:9.5px;font-weight:700;letter-spacing:.06em}
  /* episode list for the selected content, newest-first default with a real sort toggle */
  .pf-epwrap{display:flex;flex-direction:column;gap:2px}
  .pf-eprow{display:flex;gap:14px;align-items:center;padding:11px 12px;border-radius:14px;cursor:pointer;transition:background .2s;border:0;background:none;width:100%;text-align:left;font-family:inherit;color:inherit}
  .pf-eprow:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .pf-eprow .im{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;flex:none;box-shadow:var(--soft);background:var(--floatg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
  .pf-eprow .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pf-eprow .tx{flex:1;min-width:0}
  .pf-eprow .tt,.pf-eprow .aa{display:block}
  .pf-eprow .tt{font-size:14.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-eprow .aa{font-size:12.5px;color:var(--slate);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-eprow .rt{font-size:12px;font-weight:500;color:var(--slate);text-align:right;font-variant-numeric:tabular-nums;flex:none;padding-left:8px}
  .pf-eprow .rt small{display:block;color:var(--placeholder);margin-top:2px}
  .pf-sort{display:inline-flex;align-items:center;gap:7px;height:36px;border-radius:999px;background:var(--card);box-shadow:var(--soft);padding:0 15px;font-size:11.5px;font-weight:700;color:var(--teal);cursor:pointer;font-family:inherit;border:0;letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:transform .2s var(--ease-spring)}
  .pf-sort:hover{transform:translateY(-2px)}
  .pf-sort .ord{display:inline-flex;transition:transform .25s var(--ease-spring)}
  .pf-sort.asc .ord{transform:rotate(180deg)}
  /* SUGGESTED sidebar (flagged as a suggestion in the delivery notes, not a locked requirement):
     derivable engagement stats only, no moderation surface, desktop >=1081px */
  .pf-side{display:flex;flex-direction:column;gap:18px;padding-top:56px;min-width:0}
  .pf-card{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:20px;padding:18px 18px 12px}
  html[data-theme="dusk"] .pf-card{box-shadow:inset 0 0 0 1px var(--rail)}
  .pf-card h3{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);text-transform:uppercase;margin:0 2px 6px}
  .pf-stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 2px}
  .pf-stat+.pf-stat{border-top:1px solid var(--rail)}
  .pf-stat b{font-size:19px;font-weight:800;color:var(--deep);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
  .pf-stat span{font-size:12px;font-weight:500;color:var(--slate)}
  .pf-latest{display:flex;gap:11px;align-items:center;padding:12px 2px;border-top:1px solid var(--rail)}
  .pf-latest .im{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none;position:relative;background:var(--floatg)}
  .pf-latest .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pf-latest .tx{min-width:0}
  .pf-latest b{display:block;font-size:12.5px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-latest small{display:block;font-size:11px;color:var(--placeholder);margin-top:2px;font-variant-numeric:tabular-nums}
  /* all-followers modal rows */
  .fmhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:4px}
  .fmhead h2{font-size:18px;font-weight:700;color:var(--deep);letter-spacing:-.3px}
  .fmhead small{font-size:12px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .fmrow{display:flex;align-items:center;gap:12px;padding:12px 4px}
  .fmrow+.fmrow{border-top:1px solid var(--rail)}
  .fmrow .im{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--floatg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
  .fmrow .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .fmrow .tx{flex:1;min-width:0}
  .fmrow b{display:block;font-size:14px;font-weight:600;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fmrow small{display:block;font-size:12px;color:var(--slate);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fmrow .since{margin-left:auto;flex:none;padding-left:10px;font-size:11.5px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  /* edit profile (Fix 3): form column + live public-profile preview column, same system */
  .epwrap{max-width:980px}
  .epgrid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:28px;align-items:start}
  .epform{padding:24px 22px}
  .epreview,.eppreview{min-width:0}
  .eppreview h3{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);text-transform:uppercase;margin:0 4px 10px}
  .eppanel{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:20px;padding:22px 16px 24px}
  html[data-theme="dusk"] .eppanel{box-shadow:inset 0 0 0 1px var(--rail)}
  .eppanel .pf-av{width:84px;height:84px;font-size:28px}
  .eppanel .pf-name{margin-top:14px;font-size:18px;letter-spacing:-.3px}
  .eppanel .pf-handle{font-size:12.5px;margin-top:3px}
  .eppanel .pf-bio{margin-top:8px;font-size:12px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .eppanel .pf-social{margin-top:10px;gap:6px}
  .eppanel .pf-social a{height:28px;font-size:10.5px;padding:0 10px;max-width:180px}
  /* social links editor rows */
  .socHead{margin:26px 2px 2px}
  .socHead b{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
  .fRow select.socSel{width:124px}
  input.socUrl,input.socName{flex:1;min-width:0}
  .socDel{flex:none;width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--notif-red) 10%,transparent);color:var(--notif-red);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;border:0;transition:background .2s}
  .socDel:hover{background:color-mix(in srgb,var(--notif-red) 18%,transparent)}
  .socAdd{display:inline-flex;align-items:center;gap:8px;height:40px;margin-top:10px;border-radius:999px;background:var(--herowash);color:var(--teal);font-size:12.5px;font-weight:700;padding:0 16px;cursor:pointer;font-family:inherit;border:0;transition:transform .2s var(--ease-spring)}
  .socAdd:hover{transform:translateY(-2px)}
  .socAdd svg{color:var(--teal)}
  .epEmpty{color:var(--placeholder)}
  .epnote{margin:10px 4px 0;font-size:11px;line-height:1.6;color:var(--placeholder)}
  .pfat{flex:none;align-self:center;height:46px;display:inline-flex;align-items:center;padding:0 2px;font-size:13.5px;font-weight:600;color:var(--slate)}
  .fRow #pfUser{flex:1;min-width:0}
  @media (max-width:1080px){
    .epgrid{grid-template-columns:1fr}
    .eppreview{order:2}
  }
  @media (max-width:719px){
    .epform{padding:20px 16px}
  }
  /* host pane (Shows) -> full profile link (additive entry point, MODIFIED region) */
  .hpFull{display:inline-flex;align-items:center;gap:6px;margin-top:14px;height:36px;border-radius:999px;background:var(--card);box-shadow:var(--soft);color:var(--teal);font-size:12px;font-weight:700;padding:0 14px;cursor:pointer;font-family:inherit;border:0;transition:transform .2s var(--ease-spring)}
  .hpFull:hover{transform:translateY(-2px)}
  @media (max-width:1080px){
    .pf-wrap{grid-template-columns:1fr;padding:78px 22px 130px}
    .pf-side{display:none}
  }
  @media (max-width:719px){
    /* phone: the cluster is sticky in normal flow above the pane, so no clearance needed */
    .pf-wrap{padding:14px 14px 140px}
    .pf-av{width:118px;height:118px;font-size:40px}
    .pf-name{font-size:22px}
    .pf-item{width:148px}
    .pf-item .im{height:172px}
  }
  @media (prefers-reduced-motion:reduce){
    .pf-main *,.pf-side *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  }
  /* live tile host row as a button (od_id live-host-link) */
  .lvtile .hr.lhost{border:0;background:none;padding:0;width:100%;text-align:left;cursor:pointer;font-family:inherit;color:inherit;border-radius:8px}
  .lvtile .hr.lhost:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  /* replay modal host row as a button (od_id replay-host-link) */
  .rpHostB{display:flex;align-items:center;gap:10px;border:0;background:none;padding:2px 4px;margin:-2px -4px;width:100%;text-align:left;cursor:pointer;font-family:inherit;color:inherit;border-radius:10px}
  .rpHostB:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
  .rpHostB:disabled{cursor:default}
  .rpHostB svg{flex:none;color:var(--teal)}

  /* ---------- M3 live room overlay (PB-005 GO, 2026-09-20) ---------- */
  .lrpan{max-width:960px}
  /* 2026-09-26 owner: "keep the actual aspect ratio of the video, whatever it
     was recorded in". The stage takes the SHAPE of the stream: cr-trtc.js sets
     --lr-ar (width/height) on #liveRoom from the playing <video>'s intrinsic
     size. Default .5625 = 9:16 — TUILiveKit phone broadcasts are portrait
     (the web receives the mix at 720x1280), so the stage doesn't jump when
     the first frame lands. The old fixed 16:9 box inside the 560px panel
     turned a portrait stream into a crop of its middle third. */
  .lrstage{position:relative;width:100%;background:#000;border-radius:16px 16px 0 0;overflow:hidden;aspect-ratio:var(--lr-ar,.5625);display:flex;align-items:center;justify-content:center}
  /* desktop: the panel shrink-wraps the stream-shaped stage. --lr-h is the
     stage's height budget = the panel minus ~290px for the body below
     (avatar, title, meta, status note, Leave room — 272px measured in a
     real join) so the whole room fits without a
     scrollbar; never wider than 960px, never narrower than the wrapped chrome
     rows need (320px). On short screens the floor wins and the stage
     letterboxes a little instead (video is contain, never cropped). The
     budget uses the panel's REAL cap, min(88vh,880px). width:100% on the
     stage is load-bearing: with aspect-ratio + a clamping max-height, an
     auto width would shrink to keep the ratio and leave a gap in the panel. */
  @media (min-width:720px){
    #liveRoom{--lr-h:min(calc(min(88vh,880px) - 290px),860px)}
    #liveRoom .lvpan{width:max(320px,min(calc(100vw - 56px),960px,calc(var(--lr-h) * var(--lr-ar,.5625))))}
    .lrstage{max-height:var(--lr-h)}
  }
  /* phones: the panel is already full-screen; a portrait stage must not push
     the bottom chrome row (chat input) off-screen */
  @media (max-width:719px){
    .lrstage{max-height:100vh;max-height:100svh}
  }
  /* TRTC v5 renders its OWN <video> inside the #lrVideo container div (see
     overlays.blade.php). The container must own the stage box so the SDK can
     measure it; the SDK-created video fills it, letterboxed. !important is
     load-bearing: the room engine's core switches AUDIENCE views to fill
     (SwitchFillModeForAudience → setRemoteRenderParams → the SDK writes an
     INLINE object-fit:cover on its <video>), and a plain stylesheet rule
     loses to an inline style — that inline cover is what showed the owner a
     "super zoomed in" crop (2026-09-26). Never crop, never stretch. */
  .lrvideo{position:absolute;inset:0;background:#000}
  .lrvideo video{width:100%;height:100%;object-fit:contain!important;background:#000}
  .lrcover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,10,14,.92)}
  .lrsph{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--teal);animation:lrspin 1s linear infinite}
  @keyframes lrspin{to{transform:rotate(360deg)}}
  .lrlive{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--badge-ink);font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:999px}
  .lrlive i{width:7px;height:7px;border-radius:50%;background:var(--badge-ink);animation:pulse 1.6s infinite}
  .lrBody{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
  .lrAv{width:44px;height:44px;border-radius:14px;overflow:hidden;background:var(--rail);display:flex;align-items:center;justify-content:center;font-weight:700}
  .lrAv img{width:100%;height:100%;object-fit:cover}
  /* hidden-state guards (2026-09-23 black-video fix): an authored display rule
     beats the UA [hidden]{display:none}, so cover.hidden=true never actually
     hid the opaque .lrcover — it stayed painted over the successfully
     rendering video (and .lrlive's LIVE badge showed while connecting).
     Scoped to the live-room components only; no global [hidden] rule. */
  .lrcover[hidden],.lrlive[hidden],.lrsph[hidden],.lrended[hidden]{display:none!important}
  /* persistent stream-ended panel (mobile NvmStreamEndedPanel dark-variant
     parity: deep-teal→near-black radial vignette, warm text, light pill) */
  .lrended{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(120% 105% at 50% -5%,#1f4a52 0%,#0c1518 72%)}
  .lrendedIn{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:440px}
  .lrendedIc{color:#f5f1ea;opacity:.9;margin-bottom:4px}
  .lrendedT{font-size:21px;font-weight:800;color:#f5f1ea;margin:0}
  .lrendedM{font-size:13px;line-height:1.55;color:rgba(245,241,234,.72);margin:0}
  .lrendedBtn{margin-top:14px;min-width:210px;height:48px;border:none;border-radius:999px;background:#f4f4f4;color:#3a3838;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform .2s var(--ease-spring)}
  .lrendedBtn:hover{transform:translateY(-2px)}
  .lrendedBtn.ghost{background:rgba(255,255,255,.1);color:#f5f1ea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  .lrendedBtn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  /* SOT §101.5 (owner 2026-10-26): when a stream ends the room becomes a
     centred popup card, the same on desktop and phones, whatever shape the
     stream had. Only the ended card shows: no video box, no room chrome, no
     second copy of the message and button in the body below. */
  #liveRoom.lrEndedOn .lvpan{width:min(440px,calc(100vw - 32px));height:auto;max-height:calc(100vh - 32px);border-radius:24px;overflow:hidden}
  #liveRoom.lrEndedOn .lrstage{aspect-ratio:auto;max-height:none;border-radius:24px}
  #liveRoom.lrEndedOn .lrstage>:not(.lrended){display:none!important}
  #liveRoom.lrEndedOn .lrended{position:relative;inset:auto;padding:46px 28px 38px}
  #liveRoom.lrEndedOn .lrBody{display:none}
  @media (max-width:719px){#liveRoom.lrEndedOn{padding:16px}}
  /* ---------- in-room chrome (2026-09-24 mobile-parity port) ----------
     Over-video overlay rows. pointer-events:none on the wrapper so blank-video
     clicks reach the stage (chrome toggle); interactive children re-enable it.
     .lrhide = the mobile "hidden" chrome state (nvm_live_chrome_controller
     :126-143): single tap toggles, NO auto-hide timer anywhere. */
  .lrchrome{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
  .lrtop,.lrbottom{display:flex;align-items:center;gap:8px;padding:10px 12px;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
  .lrtop{background:linear-gradient(180deg,rgba(4,8,11,.62),rgba(4,8,11,0))}
  .lrbottom{background:linear-gradient(0deg,rgba(4,8,11,.62),rgba(4,8,11,0))}
  .lrchrome.lrhide .lrtop,.lrchrome.lrhide .lrbottom{opacity:0;visibility:hidden}
  .lrtopsp,.lrbotsp{flex:1}
  /* top row on narrow stages (portrait streams, phones): the chips WRAP inside
     their own box while #lrExit stays the row's last item, pinned top-right.
     The chip box is at least exit-tall with its lines centred, so a single
     line sits level with the exit exactly as the old one-line row did. */
  .lrtop{align-items:flex-start}
  .lrtopchips{flex:1 1 auto;min-width:0;min-height:44px;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:6px 8px}
  .lridchip{display:inline-flex;align-items:center;gap:7px;pointer-events:auto;background:rgba(8,21,26,.55);backdrop-filter:blur(8px);border-radius:999px;padding:4px 10px 4px 4px;color:#f5f1ea;font-size:12px;font-weight:600;max-width:46%}
  .lridchip i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#08151a;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:11px}
  .lridchip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lrmode{display:inline-flex;align-items:center;background:rgba(8,21,26,.55);backdrop-filter:blur(8px);color:rgba(245,241,234,.85);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:600}
  .lrstat{display:inline-flex;align-items:center;gap:5px;background:rgba(8,21,26,.55);backdrop-filter:blur(8px);color:rgba(245,241,234,.9);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
  .lrstat svg{opacity:.85}
  .lricbtn{pointer-events:auto;flex:none;width:44px;height:44px;border-radius:50%;border:none;background:rgba(8,21,26,.55);backdrop-filter:blur(8px);color:#f5f1ea;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s var(--ease-spring)}
  .lricbtn:hover{transform:scale(1.06)}
  .lricbtn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  /* floating hearts — Tencent's web LikeAnimation (matching iOS
     GiftPlayView): coloured half-transparent heart, white outline, soft
     glow; cr-trtc.js drives position/scale/opacity per frame. The layer is a
     direct child of .lrchrome so hearts keep playing with the chrome hidden. */
  .lrlikefx{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
  .lrlikefx i{position:absolute;left:0;top:0;display:block;line-height:0;will-change:transform,opacity;filter:drop-shadow(0 0 2px rgba(255,255,255,.6))}
  /* ---------- live chat (2026-09-25 engine migration) ----------
     Barrage list mirrors mobile live_uikit_barrage 3.0.x display: translucent
     glass pills (radius 14, 12px w700 white, `name: text`), anchor gets a tag
     (barrage_item_widget.dart). Avatar + timestamp are the web contract's
     additions. The list layer is pointer-events:none so blank clicks between
     pills still hit the stage and toggle the chrome (mobile parity); the
     pills themselves re-enable it. Bottom-anchored + scrollable; hidden with
     the rest of the chrome on a blank-stage tap. */
  .lrchat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 12px;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
  .lrchat::-webkit-scrollbar{display:none}
  .lrchrome.lrhide .lrchat{opacity:0;visibility:hidden}
  .lrchatItem{flex:none;pointer-events:auto;display:flex;align-items:center;gap:6px;max-width:78%;background:rgba(8,21,26,.55);backdrop-filter:blur(8px);border-radius:14px;padding:4px 9px 4px 5px;color:#f5f1ea;font-size:12px;font-weight:700;line-height:1.35}
  .lrchatAv{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(245,241,234,.18);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:10px;overflow:hidden}
  .lrchatAv img{width:100%;height:100%;object-fit:cover}
  .lrchatTxt{word-break:break-word}
  .lrchatEmo{display:inline-block;width:20px;height:20px;vertical-align:-5px;margin:0 1px;object-fit:contain}
  .lrchatTag{display:inline-block;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;background:var(--gold);color:var(--badge-ink);border-radius:7px;padding:1px 6px;margin-right:6px;vertical-align:1px}
  .lrchatT{flex:none;font-size:9.5px;font-weight:500;color:rgba(245,241,234,.55);margin-left:6px;font-variant-numeric:tabular-nums}
  .lrchatbar{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;max-width:420px;pointer-events:auto;background:rgba(8,21,26,.55);backdrop-filter:blur(8px);border-radius:999px;padding:0 5px 0 14px}
  /* single-line contenteditable composer: text + inline emoji images */
  .lrchatIn{flex:1;min-width:0;background:none;border:0;outline:none;color:#f5f1ea;font-family:inherit;font-size:12.5px;font-weight:600;line-height:20px;padding:11px 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:text;-webkit-user-select:text;user-select:text}
  .lrchatIn::-webkit-scrollbar{display:none}
  .lrchatIn:empty::before{content:attr(data-placeholder);color:rgba(245,241,234,.6);font-weight:600;pointer-events:none}
  .lrchatIn[aria-disabled="true"]{opacity:.55;cursor:default}
  .lrchatIn .lrchatEmo{width:18px;height:18px;vertical-align:-4px}
  .lrchatEmoBtn{flex:none;width:30px;height:30px;border-radius:50%;border:none;background:none;color:rgba(245,241,234,.85);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  .lrchatEmoBtn:hover,.lrchatEmoBtn[aria-expanded="true"]{color:#f5f1ea;background:rgba(245,241,234,.12)}
  .lrchatEmoBtn:disabled{opacity:.45;cursor:default;background:none}
  .lrchatEmoBtn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  /* the app's barrage emoji panel: a glass grid above the bottom bar */
  .lremoji{position:absolute;left:12px;right:12px;bottom:66px;z-index:3;max-width:420px;max-height:196px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto;background:rgba(8,21,26,.86);backdrop-filter:blur(10px);border-radius:16px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .lremojiGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px}
  .lremojiGrid button{width:100%;height:38px;border:0;border-radius:10px;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  .lremojiGrid button:hover,.lremojiGrid button:focus-visible{background:rgba(245,241,234,.14);outline:none}
  .lremojiGrid img{width:26px;height:26px;object-fit:contain;pointer-events:none}
  .lrchrome.lrhide .lremoji{display:none}
  /* narrow stages (the desktop portrait stage is ~320px): compact the bottom
     row so the composer keeps a usable width beside emoji + send + 3 icons */
  .lrchrome{container-type:inline-size}
  @container (max-width: 380px){
    .lrbottom{gap:6px;padding:10px}
    .lrbottom .lricbtn{width:36px;height:36px}
    .lrchatbar{gap:4px;padding:0 4px 0 10px}
    .lrchatEmoBtn,.lrchatSend{width:28px;height:28px}
    .lremoji{left:10px;right:10px;bottom:58px}
  }
  .lrchatSend{flex:none;width:30px;height:30px;border-radius:50%;border:none;background:var(--gold);color:var(--badge-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s var(--ease-spring)}
  .lrchatSend:hover{transform:scale(1.06)}
  .lrchatSend:disabled{opacity:.45;cursor:default;transform:none}
  .lrchatSend:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .lrchatIn:focus-visible{outline:none}
  .lrreconnect{position:absolute;top:64px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(8,21,26,.72);backdrop-filter:blur(8px);border-radius:14px;padding:10px 14px;color:#f5f1ea;pointer-events:none}
  .lrreconnect b{display:block;font-size:12.5px;font-weight:700}
  .lrreconnect small{display:block;font-size:11px;color:rgba(245,241,234,.75)}
  .lrreconnectsph{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(245,241,234,.25);border-top-color:var(--gold);animation:lrspin 1s linear infinite}
  /* hidden-state guards for the new display-authored chrome elements (same
     pattern as the .lrcover/.lrlive guard above) */
  .lrreconnect[hidden],.lrsheet[hidden],.lrstat[hidden],.lrmode[hidden],.lricbtn[hidden],.lremoji[hidden]{display:none!important}
  /* report sheet over the room */
  .lrsheet{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background:rgba(4,8,11,.55);padding:18px}
  .lrsheetCard{width:min(420px,100%);background:var(--card);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;color:var(--deep);box-shadow:var(--glowbig)}
  .lrsheetCard h3{margin:0;font-size:17px;font-weight:800}
  .lrsheetSub{margin:0;font-size:12px;color:var(--slate)}
  .lrsheetChips{display:flex;flex-wrap:wrap;gap:8px}
  .lrsheetChips .chip{border:1px solid var(--line);background:transparent;color:var(--deep);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer}
  .lrsheetChips .chip.on{background:var(--teal);border-color:var(--teal);color:#08151a}
  .lrsheetTxt{min-height:74px;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;font-size:13px;color:var(--deep);background:transparent}
  .lrsheetBtns{display:flex;gap:10px;justify-content:flex-end}
  .lrsheetBtns .lrendedBtn{margin-top:0;min-width:110px;height:42px;font-size:13.5px}
  .lrsheetBtns .lrendedBtn:disabled{opacity:.45;cursor:default;transform:none}
  /* the ghost button was styled for the dark ended panel (light text): on
     the sheets' light card it vanished — Report's Cancel and the host's
     "Keep streaming" (found 2026-09-27 in the host screenshots) */
  .lrsheetBtns .lrendedBtn.ghost{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 1.5px var(--line)}
  /* ── web broadcasting (2026-09-27): the HOST's controls in the same live
     room — same glass pills, same sheet card; nothing here renders for a
     viewer (every host element starts [hidden]). */
  .lrendpill{pointer-events:auto;flex:none;height:34px;padding:0 15px;margin-right:6px;border:none;border-radius:999px;background:var(--notif-red);color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:transform .2s var(--ease-spring)}
  .lrendpill:hover{transform:translateY(-1px)}
  .lrendpill:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .lricbtn .lrslash{display:none}
  .lricbtn.off{background:rgba(214,69,65,.86)}
  .lricbtn.off .lrslash{display:inline}
  .lrendedBtn.lrdanger{background:var(--notif-red);color:#fff}
  .lrdevLbl{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--slate)}
  .lrdevLbl select{height:40px;border-radius:12px;border:1.5px solid var(--rail);background:var(--card);color:var(--deep);font-family:inherit;font-size:12.5px;padding:0 10px}
  /* Debate Mode stage (web host, 2026-09-28) — minimal, same tokens as the
     device sheet; the owner restyles it in Open Design */
  .lricbtn{position:relative}
  .lrbadge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--notif-red);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
  .lrstageH{margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
  .lrstageList{display:flex;flex-direction:column;gap:8px;max-height:30vh;overflow:auto}
  .lrstageEmpty{margin:0;font-size:12.5px;color:var(--slate)}
  .lrstageRow{display:flex;align-items:center;gap:10px}
  .lrstageRow img,.lrstageRow .lrstageAv{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--rail);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--deep)}
  .lrstageRow b{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lrstageRow button{flex:none;height:32px;padding:0 12px;border-radius:999px;border:none;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--teal);color:#fff}
  .lrstageRow button.ghost{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 1.5px var(--line)}
  .lrstageRow button:disabled{opacity:.45;cursor:default}
  /* Debate stage (web host, 2026-09-28): the guest layer covers the stage
     and cr-trtc.js layoutStage() places the host's #lrVideo and every guest
     tile in the app's own Debate arrangement (left/top/width/height in %).
     With guests on stage the tiles fill and crop like the app's Debate
     tiles; the host alone is never cropped (.lrvideo stays contain). */
  .lrguests{position:absolute;inset:0;z-index:2;pointer-events:none}
  .lrguest{position:absolute;overflow:hidden;background:#0c1518;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
  .lrguest .lrguestV{position:absolute;inset:0}
  .lrguest .lrguestV video{width:100%;height:100%;object-fit:cover!important}
  .lrguest.novideo .lrguestV{visibility:hidden}
  .lrguest .lrguestPh{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;font-size:22px;font-weight:800}
  .lrguest.novideo .lrguestPh{display:flex}
  /* names sit at the top of a tile (the chat bar and buttons own the bottom
     edge); a tile on the stage's top edge drops below the top chips */
  .lrguest .lrguestN{position:absolute;left:8px;top:8px;z-index:1;max-width:calc(100% - 16px);box-sizing:border-box;padding:3px 9px;border-radius:999px;background:rgba(4,8,11,.55);font-size:11px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lrguest.lrtop .lrguestN{top:58px}
  .lrguest.nomic .lrguestN::after{content:" · mic off";font-weight:600;opacity:.85}
  .lrstage[data-tiles] .lrvideo video{object-fit:cover!important}
  .lrtimebanner{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);background:rgba(8,21,26,.74);backdrop-filter:blur(8px);color:#f5f1ea;border-radius:999px;padding:9px 16px;font-size:13px;pointer-events:none;white-space:nowrap}
  .lrtimebanner svg{flex:none;color:var(--gold)}
  .lrtimebanner.urgent svg{color:var(--notif-red)}
  .lrtimebanner b{overflow:hidden;text-overflow:ellipsis}
  .lrcountdown{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none}
  .lrcountdown small{background:rgba(8,21,26,.74);backdrop-filter:blur(8px);color:#f5f1ea;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700}
  .lrcountdown b{width:124px;height:124px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,21,26,.74);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 2.5px var(--gold);color:#fff;font-size:54px;font-weight:800;font-variant-numeric:tabular-nums}
  .lrendpill[hidden],.lrtimebanner[hidden],.lrcountdown[hidden]{display:none!important}
  .glAudioHint{flex:1 1 100%;font-size:11.5px;color:var(--slate);line-height:1.5}
  .glAudioHint[hidden]{display:none}
  /* true fullscreen on the stage container (Fullscreen API, not a CSS hack).
     Chrome stays inside .lrstage so every control remains positioned and
     clickable; aspect-ratio releases so the video owns the screen. */
  #lrStage:fullscreen{width:100vw;height:100vh;max-height:100vh;aspect-ratio:auto;border-radius:0;background:#000}
  #lrStage:-webkit-full-screen{width:100vw;height:100vh;max-height:100vh;aspect-ratio:auto;border-radius:0;background:#000}

  /* ---------- sideways rows (Wave 2, 2026-10-02) ----------
     Owner: chips "cut off" with no way to scroll on a computer. The rows keep their
     native finger swipe; a mouse can now drag them (app.js hsDrag), arrows appear on
     hover where there is more, the cut edge fades, and the long filter rows get a
     "View all" button beside them (shown only while the row overflows). */
  .hsWrap{display:flex;align-items:flex-start;gap:8px;min-width:0}
  .hsWrap>.nprow{flex:0 1 auto;min-width:0}
  .hsWrap>#genreRow{flex:1 1 auto}
  .facets>.hsWrap{flex:1 1 auto}
  .chipAll{flex:none;gap:6px;font-weight:600;color:var(--teal);border-color:var(--teal)}
  .chipAll:hover{color:var(--teal);background:var(--herowash)}
  .chipAll[hidden]{display:none}
  .chipAll svg{flex:none}
  @media (hover:hover) and (pointer:fine){.hsOn{cursor:grab}}
  .hsDrag{scroll-snap-type:none !important;user-select:none;-webkit-user-select:none}
  .hsDrag,.hsDrag *{cursor:grabbing !important}
  .hsOn.fadeR:not(.fadeL){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .hsOn.fadeL:not(.fadeR){-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
  .hsOn.fadeL.fadeR{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
  .hsArrow{position:fixed;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
           background:var(--card);color:var(--inkdark);border:1.5px solid var(--rail);box-shadow:0 6px 16px rgba(13,27,30,.18);cursor:pointer}
  .hsArrow:hover{color:var(--teal);border-color:var(--teal)}
  .hsArrow[hidden]{display:none}
  @media (max-width:719px){.hsWrap .chipAll{height:34px;font-size:12.5px;padding:0 14px;border-radius:12px}}

  /* ---------- comment threads + My Shows comments inbox (Wave 3, 2026-10-02) ----------
     Owner: "a reply button under every comment". Reply / Delete sit under each comment;
     replies indent under their thread; the creator's own comments carry a Creator badge. */
  .cmtList .cbody{flex:1}
  .cav img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
  .chead{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
  .chead time{margin-left:0}
  .ccre{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--inkfill);background:var(--teal);border-radius:6px;padding:2px 6px;align-self:center}
  .cat{color:var(--teal);font-weight:600}
  .cacts{display:flex;align-items:center;gap:4px;margin:4px 0 0 -8px;flex-wrap:wrap}
  .cact{height:28px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--slate);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
  .cact:hover,.cact:focus-visible{background:var(--herowash);color:var(--teal)}
  .cact.cdanger{color:#C0392B}
  .cdelq{font-size:12px;color:var(--deep);padding:0 4px 0 8px}
  .crply{margin:8px 0 4px}
  .crply input{height:38px}
  .crply .cmtPost{height:38px;padding:0 14px}
  .cthr{display:inline-flex;align-items:center;height:28px;margin:2px 0 0 -8px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--teal);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
  .cthr:hover,.cthr:focus-visible{background:var(--herowash)}
  .cthr:disabled{opacity:.5;cursor:default}
  .creps:not(:empty){display:flex;flex-direction:column;gap:11px;margin-top:10px}
  .crep .cav{width:26px;height:26px;font-size:10px}
  .cisub{font-size:13px;color:var(--slate);margin:-6px 0 18px;line-height:1.55}
  .ciList{max-height:none;overflow:visible;gap:12px}
  .ciRow{background:var(--card);border-radius:16px;box-shadow:inset 0 0 0 1px var(--rail);padding:14px 16px}
  .cimeta{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;color:var(--slate)}
  .cimeta img,.cimeta .ciart{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;background:var(--herowash);color:var(--teal)}
  .cion{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cion b{color:var(--deep);font-weight:600}
  .cistate{flex:none;font-size:11px;font-weight:700;border-radius:8px;padding:3px 8px;background:color-mix(in srgb,var(--gold) 26%,var(--card));color:var(--badge-ink)}
  .cistate.done{background:var(--herowash);color:var(--teal)}
  .cibadge{min-width:18px;height:18px;border-radius:9px;background:var(--teal);color:var(--inkfill);font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;margin-left:6px}
  .cibadge[hidden]{display:none}

  /* ---------- profile: Follow / Following, follower counts and lists (Wave 3, 2026-10-02) ---------- */
  .pf-follow{height:44px;border-radius:999px;background:var(--teal);color:var(--inkfill);font-family:inherit;font-size:13.5px;font-weight:700;padding:0 26px;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;box-shadow:0 8px 18px rgba(0,119,139,.28);transition:background .2s,color .2s,box-shadow .2s}
  .pf-follow:hover{filter:brightness(1.05)}
  .pf-follow.on{background:var(--herowash);color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal)}
  .pf-follow:focus-visible,.pf-cnt:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .pf-cnt{background:none;border:0;padding:2px 0;font:inherit;font-size:12.5px;font-weight:500;color:var(--slate);cursor:pointer;border-radius:6px}
  .pf-cnt b{color:var(--deep);font-weight:700}
  .pf-cnt:hover{color:var(--teal)}
  .pf-folnone{font-size:13px;color:var(--placeholder);margin:2px 0 6px}
  .pf-folv[data-prof]{cursor:pointer}
  button.fmrow{width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer;border-radius:12px}
  button.fmrow:hover{background:var(--herowash)}
  .fmrow .since{flex:none;font-size:11.5px;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .fmtabs{margin:10px 0 6px;flex-wrap:nowrap}
  .fmnone{padding:14px 4px}
  /* the Followers window had no inner space: names, tabs and dates ran into its rounded edges (owner 2026-10-17) */
  #followersPan{padding:22px 22px 12px}
  @media (max-width:719px){#followersPan{padding:20px 16px 12px}}
  /* .lvref sets display, which beat the hidden attribute (Wave 1 fixed #eipMore alone): hidden means hidden */
  .lvref[hidden]{display:none}

  /* ---------- comment likes, sort, report + star ratings (Wave 3b, 2026-10-02) ---------- */
  .cact.cvote{display:inline-flex;align-items:center;gap:5px;padding:0 7px}
  .cact.cvote svg{flex:none}
  .cact.cvote.on{color:var(--teal)}
  .cact.cvote.on svg{fill:color-mix(in srgb,var(--teal) 22%,transparent)}
  .cact.cvote span{font-variant-numeric:tabular-nums}
  .cmtHead .csort{margin-left:auto;display:inline-flex;gap:2px;background:var(--herowash);border-radius:10px;padding:3px}
  .csort button{height:26px;padding:0 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--slate);cursor:pointer}
  .csort button.on{background:var(--card);color:var(--teal);box-shadow:0 2px 6px rgba(13,27,30,.08)}
  /* ---------- star ratings, the design's anatomy (rev 8-app, SOT §64): gold = signal only; fractional fill via a
     clipped overlay; one line under every rated card; the big average line + "Rate this show" on the show page ---------- */
  .stx{position:relative;display:inline-flex;flex:none;line-height:0}
  .stx>span{display:flex;gap:2px;flex:none}
  .stx .b{color:var(--rail)}
  .stx .f{position:absolute;left:0;top:0;bottom:0;overflow:hidden;color:var(--gold)}
  .stx svg{display:block;flex:none}
  .shcard .rt{margin-top:5px;display:flex;align-items:center;gap:6px;white-space:nowrap}
  .shcard .rt .avg{font-size:11.5px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums}
  .shcard .rt .cnt{font-size:11px;font-weight:500;color:var(--placeholder);font-variant-numeric:tabular-nums}
  .sdRate{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .sdRate .big{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1;color:var(--inkdark);font-variant-numeric:tabular-nums}
  .sdRate .cnt{font-size:12.5px;font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums}
  .rate{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .rate .rlab{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--placeholder);margin-right:2px}
  .rst{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--rail);border-radius:12px;font-family:inherit;transition:color .2s,transform .2s var(--ease-spring)}
  .rst.lit{color:var(--gold)}
  @media (hover:hover){.rst:hover{transform:scale(1.12)}}
  .rst:active{transform:scale(.94)}
  .rst:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
  .rate .ym{font-size:12.5px;font-weight:500;color:var(--slate)}
  .rate .ym b{color:var(--deep);font-weight:700;font-variant-numeric:tabular-nums}
  /* the rate prompt's "Rate it" lands here: the stars glow for a moment */
  @keyframes rateGlow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
  .rate.ask{border-radius:14px;animation:rateGlow 1.2s ease-out 2}

  /* ---------- library: Favorites sections + Recently Played (Wave 4, 2026-10-02) ---------- */
  .libsec{margin:0 0 30px}
  .libhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:12.5px;color:var(--placeholder)}
  .librow{cursor:pointer}
  .librow .mi img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
  .libkind{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--teal);background:var(--herowash);border-radius:6px;padding:1px 6px;margin-right:2px}
  .libx{flex:none;width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--placeholder);font-size:18px;line-height:1;cursor:pointer}
  .libx:hover,.libx:focus-visible{background:var(--herowash);color:var(--deep)}
  .libgrid{margin-top:4px}
  #rpSaveBtn.on,#pjSave.on{color:var(--teal);border-color:var(--teal)}
  #rpSaveBtn.on svg,#pjSave.on svg{fill:color-mix(in srgb,var(--teal) 25%,transparent)}
  .librow>div{flex:1;min-width:0}

  /* ---------- the bell: replies and new followers (Wave 5a, 2026-10-02) ---------- */
  .ntrow{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 10px;border:0;border-radius:14px;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit}
  .ntrow+.ntrow{margin-top:4px}
  .ntrow:hover,.ntrow:focus-visible{background:var(--herowash)}
  .ntrow.unread{background:color-mix(in srgb,var(--teal) 9%,var(--card));box-shadow:inset 3px 0 0 var(--teal)}
  .ntrow .cav{width:38px;height:38px}
  .nttx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .nttx b{font-size:13.5px;font-weight:600;color:var(--deep);line-height:1.35}
  .nttx small{font-size:12.5px;color:var(--slate);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .nttx time{font-size:11px;color:var(--placeholder)}

  /* ---------- browse tiles without a flag (a language or country with no image yet): initials on teal (SOT §64) ---------- */
  .btile .btfb{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:18px;background:linear-gradient(135deg,var(--teal),var(--deep));color:#fff;font-size:24px;font-weight:700;letter-spacing:1px}

  /* ---------- the "rate it" prompt after an episode (SOT §64) ---------- */
  #rateAsk .lvpan{padding:26px 24px 22px;text-align:center;max-width:400px;width:min(400px,calc(100vw - 56px))}
  #rateAsk .raArt{width:76px;height:76px;border-radius:18px;object-fit:cover;display:block;margin:0 auto 14px;box-shadow:var(--soft2);background:var(--herowash)}
  #rateAsk .raArt[hidden]{display:none}
  #raTitle{font-size:17px;font-weight:700;color:var(--deep);line-height:1.35}
  #raText{font-size:13.5px;color:var(--slate);margin-top:8px;line-height:1.6}
  #rateAsk .raStars{display:flex;justify-content:center;gap:4px;margin:14px 0 2px;color:var(--gold)}
  #rateAsk .raAct{display:flex;gap:10px;margin-top:18px}
  /* Wave 3 (SOT §84): Streaming Usage pools, from the approved prototype */
  .pools{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .pools .unum{font-size:44px}
  .bnote{font-size:11.5px;font-weight:500;color:var(--placeholder);line-height:1.6}
  @media (max-width:719px){.pools{grid-template-columns:1fr}}

  /* ---------- Wave 4 (SOT §85): Subscriptions, the billing sheet, plan changes, Billing History ----------
     Copied from the approved monetization design (Design/carib-radio-web-app, SOT §79.1). Stripe draws the
     card fields inside #crbCard; #crbWallets holds Apple Pay / Google Pay when the browser has them. */
  .pgrid.p3{grid-template-columns:repeat(3,1fr)}
  .plancard .price{margin-top:12px;font-size:26px;font-weight:800;letter-spacing:-.6px;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1}
  .plancard .price small{font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--slate);margin-left:5px}
  .plancard .sp{flex:1}
  .plancard .pillgo,.plancard .pilltonal{margin-top:18px;height:46px;border-radius:14px;font-size:13.5px}
  .softsell .plancard .pillgo{max-width:none;margin:18px 0 0}
  .plancard.cur{box-shadow:inset 0 0 0 2px var(--teal)}
  .plancard .curchip{margin-top:18px;justify-content:center;height:46px;border-radius:14px}
  .bsec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 4px 0;flex-wrap:wrap}
  .bsec h3{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--placeholder);text-transform:uppercase}
  .bsec small{font-size:12px;font-weight:500;color:var(--slate)}
  .planrow{display:flex;align-items:center;gap:13px;min-height:64px;padding:12px 16px}
  .planrow+.planrow{border-top:1px solid var(--rail)}
  .planrow .ai{width:40px;height:40px;border-radius:13px;background:var(--card);box-shadow:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--teal);flex:none}
  .planrow .atx{flex:1;min-width:0}
  .planrow b{display:block;font-size:14.5px;font-weight:600;color:var(--deep)}
  .planrow small{display:block;margin-top:2px;font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums;line-height:1.45}
  .planrow .pacts2{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
  .planrow .amt{font-size:14px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums}
  /* a cover in a list row (Purchases, podcast subscriptions); undo the volume knob's .thumb (SOT §87.3) */
  .planrow .thumb{position:static;left:auto;top:auto;transform:none;border:0;background:var(--herowash);pointer-events:auto;width:52px;height:52px;border-radius:12px;object-fit:cover;flex:none;box-shadow:var(--soft)}
  .st-fail{background:color-mix(in srgb,var(--notif-red) 14%,transparent);color:var(--notif-red)}
  .storebtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  .storebtns .pjShare{width:auto;flex:1;min-width:150px;margin-top:0}
  #billSheet .lvpan{width:min(520px,calc(100vw - 56px));padding:26px 24px 22px}
  .bsTitle{font-size:21px;font-weight:700;letter-spacing:-.3px;color:var(--inkdark);padding-right:44px;line-height:1.3}
  .bsSub{margin-top:6px;font-size:13px;line-height:1.6;color:var(--slate)}
  .bsSum{margin-top:16px}
  .bsSum .krow dt{flex:1 1 auto;min-width:0}
  .bsSum .krow dd{flex:0 1 auto;max-width:62%;overflow-wrap:normal}
  .krow.tot dt,.krow.tot dd{color:var(--deep);font-weight:700}
  .bsPay{margin-top:18px}
  .bsPay .seg{display:flex;width:100%}
  .bsPay .seg button{flex:1;justify-content:center}
  .wallets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .wallets .soc{margin-top:0;height:46px}
  .bsPay .auDiv{margin:16px 0 4px}
  /* PayPal's own buttons (SDK v6 web components), stacked full width like the design's PayPal pane */
  .ppBtns{display:flex;flex-direction:column;gap:10px;margin-top:12px;min-height:46px}
  .ppBtns>*{display:block;width:100%}
  .bsPay.isBusy{opacity:.55;pointer-events:none}
  .payNote{margin-top:12px;font-size:11px;font-weight:500;color:var(--placeholder);line-height:1.55;display:flex;gap:8px;align-items:flex-start}
  .payNote svg{flex:none;margin-top:1px;width:14px;height:14px}
  .bsLegal{margin-top:14px;font-size:11.5px;font-weight:500;color:var(--placeholder);line-height:1.6;text-align:center}
  .bsCta{margin-top:16px}
  .bsBusy{display:flex;align-items:center;justify-content:center;gap:10px}
  .bsBusy .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
  .chgPair{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:16px}
  .chgTile{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:16px;padding:14px}
  .chgTile small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--placeholder);text-transform:uppercase}
  .chgTile b{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--deep);line-height:1.3}
  .chgTile span{display:block;margin-top:4px;font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums}
  .chgTile.to{box-shadow:inset 0 0 0 2px var(--teal)}
  .chgArrow{color:var(--teal);display:flex;justify-content:center}
  .savedPay{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--herowash);font-size:13px;font-weight:600;color:var(--deep)}
  .savedPay svg{color:var(--teal);flex:none}
  .savedPay button{margin-left:auto;color:var(--teal);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
  #crbWallets{margin-top:14px}
  #crbWallets[hidden],#crbOr[hidden]{display:none}
  #crbCard{margin-top:14px;min-height:56px}
  #billSheet .auErr{margin-top:14px}
  @media (max-width:1080px){.pgrid.p3{grid-template-columns:1fr 1fr}}
  @media (max-width:719px){
    .pgrid.p3{grid-template-columns:1fr}
    .chgPair{grid-template-columns:1fr}
    .chgArrow{transform:rotate(90deg)}
    #billSheet .lvpan{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;padding:22px 18px 20px}
    .planrow{flex-wrap:wrap}
    .planrow .pacts2{width:100%;justify-content:flex-start;padding-left:53px}
  }
  html[data-theme="dusk"] .chgTile,html[data-theme="dusk"] .savedPay{box-shadow:inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .planrow .ai{box-shadow:0 10px 24px rgba(4,10,12,.5),inset 0 0 0 1px var(--rail)}
  html[data-theme="dusk"] .chgTile.to,html[data-theme="dusk"] .plancard.cur{box-shadow:inset 0 0 0 2px var(--teal)}
  /* My Shows hosting meters (monetization Wave 6, SOT §86), the approved prototype's rules */
  .meters{background:color-mix(in srgb,var(--herowash) 60%,var(--card));border-radius:20px;padding:18px 18px 16px;margin-top:22px}
  .meters .mtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .meters .mtop b{font-size:14px;font-weight:700;color:var(--deep)}
  .meters .mtop .upmini{margin-left:auto}
  .meter{margin-top:14px}
  .meter .ml{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:600;color:var(--deep);font-variant-numeric:tabular-nums}
  .meter .ml span{color:var(--slate);font-weight:500}
  .meter .ubar{margin-top:8px;height:6px}
  .meters .bnote{margin-top:14px}
  html[data-theme="dusk"] .meters{box-shadow:inset 0 0 0 1px var(--rail)}
  /* pay per view (monetization Wave 7, SOT §87), the approved prototype's rules */
  .shcard .prchip.price,.shcard .prchip.own{width:auto;padding:0 8px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .shcard .prchip.price{color:var(--deep)}
  .shcard .prchip.own{color:var(--teal)}
  .ppvHead{display:flex;gap:14px;align-items:center;margin-top:2px;padding-right:40px}
  .ppvHead img{width:96px;height:96px;border-radius:14px;object-fit:cover;box-shadow:var(--soft);flex:none}
  .ppvHead .pp1{min-width:0}
  .ppvHead .pp1 b{display:block;font-size:17px;font-weight:700;color:var(--deep);line-height:1.3}
  .ppvHead .pp1 small{display:block;margin-top:4px;font-size:12px;color:var(--slate)}
  .ppvPrice{margin-top:8px;font-size:24px;font-weight:800;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1}
  .ppvTerms{margin-top:14px;border-radius:14px;background:var(--herowash);padding:12px 14px;font-size:11.5px;line-height:1.6;color:var(--slate)}
  html[data-theme="dusk"] .ppvTerms{box-shadow:inset 0 0 0 1px var(--rail)}
  /* Wave 9 (SOT §93; design: .sdLinks, .lnkRow, .pf-promo): links under a description, the editor's link rows,
     the public profile's business promotion card */
  .sdLinks{margin-top:14px;display:flex;flex-direction:column;gap:10px}
  .sdLinks a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--teal);text-decoration:none;overflow-wrap:anywhere}
  .sdLinks a svg{flex:none}
  .sdLinks a:hover{text-decoration:underline}
  .sdLinks .disc{display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:var(--slate);line-height:1.5}
  .lnkRow{border-radius:16px;background:color-mix(in srgb,var(--herowash) 60%,var(--card));padding:2px 16px 14px;margin-top:10px}
  .lnkRow .glTog{margin-top:14px}
  .lnkRow .lnkHid{display:block;margin-top:10px;font-size:11.5px;font-weight:600;color:var(--notif-red)}
  .pf-promo{margin:16px auto 0;max-width:520px;border-radius:18px;background:color-mix(in srgb,var(--herowash) 60%,var(--card));padding:14px 16px;text-align:left;display:flex;gap:14px;align-items:center}
  .pf-promo .tx{flex:1;min-width:0}
  .pf-promo small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--placeholder);text-transform:uppercase}
  .pf-promo p{margin-top:4px;font-size:13px;line-height:1.55;color:var(--deep);overflow-wrap:anywhere}
  .pf-promo .upmini{flex:none;display:inline-flex;align-items:center;text-decoration:none}
  @media (max-width:719px){.pf-promo{flex-wrap:wrap}.pf-promo .upmini{margin-left:auto}}
  html[data-theme="dusk"] .lnkRow,html[data-theme="dusk"] .pf-promo{box-shadow:inset 0 0 0 1px var(--rail)}