:root{
    --ink:#0D130E;
    --panel:#17201A;
    --panel-2:#1C271E;
    --text:#F4F7F1;
    --muted:#9BAE95;
    --leaf-light:#62E390;
    --leaf:#1ED760;
    --leaf-deep:#1DB954;
    --gold:#E8B85C;
    --gold-deep:#C99A3E;
    /* --app-shortfall: set by layout-guard.js (always 0 now).
       --safe-bottom: space bottom controls must clear. */
    --app-shortfall:0px;
    /* Where top UI starts: 46px in a browser, safe-area + 12px when installed */
    --top-safe:46px;
    --safe-bottom:max(env(safe-area-inset-bottom, 0px), var(--app-shortfall, 0px));
    /* Skeleton shades (white overlays, so they work on every dark background) */
    --skeleton-base:rgba(255,255,255,0.06);
    --skeleton-shimmer:rgba(255,255,255,0.14);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

  /* Text-selection deterrent (protect.js); text fields stay selectable */
  html.protected,
  html.protected body{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  html.protected input,
  html.protected textarea,
  html.protected [contenteditable="true"]{
    -webkit-user-select:text;
    user-select:text;
  }
  html.protected img,
  html.protected video{
    -webkit-user-drag:none;
  }

  /* Maintenance scene, ported from maintenance.html.
     Its custom properties are renamed --mt-* and every rule is scoped under .maintenance-screen. */
  .maintenance-screen{
    --mt-paper:#141613;
    --mt-ink:#ecece6;
    --mt-muted:#a3a79f;
    --mt-green:#25c561;
    --mt-green-deep:#1a9e4c;
    --mt-spark:#f7941d;
    --mt-metal:#5c6368;

    position:fixed;inset:0;
    background:var(--mt-paper);
    color:var(--mt-ink);
    font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    display:grid;
    place-items:center;
    padding-top:calc(env(safe-area-inset-top,0px) + 24px);
    padding-left:20px;
    padding-right:20px;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px);
    overflow:hidden;
  }
  /* Scene scaled to 0.64x the original */
  .maintenance-screen main{
    width:100%;
    max-width:435px;
    text-align:center;
  }
  .maintenance-screen .scene{
    width:64%;
    height:auto;
    display:block;
    overflow:visible;
    margin:0 auto;
  }
  .maintenance-screen h1{
    font-size:clamp(1.12rem, 0.77rem + 1.53vw, 1.66rem);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.1;
    margin:5px 0 7px;
    font-variation-settings:"opsz" 96;
  }
  .maintenance-screen p{
    font-size:0.67rem;
    line-height:1.55;
    color:var(--mt-muted);
    max-width:42ch;
    margin:0 auto 18px;
  }
  .maintenance-screen button{
    font:inherit;
    font-weight:600;
    font-size:0.64rem;
    color:#fff;
    background:var(--mt-green-deep);
    border:1.6px solid var(--mt-ink);
    border-radius:999px;
    padding:7px 16px;
    cursor:pointer;
    box-shadow:1.9px 1.9px 0 var(--mt-ink);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .maintenance-screen button:hover{ transform:translate(-1px, -1px); box-shadow:2.5px 2.5px 0 var(--mt-ink); }
  .maintenance-screen button:active{ transform:translate(2px, 2px); box-shadow:0.66px 0.66px 0 var(--mt-ink); }
  .maintenance-screen button:focus-visible{ outline:3px solid var(--mt-green); outline-offset:4px; }

  /* SVG ink styles */
  .maintenance-screen .ink{ stroke:var(--mt-ink); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
  .maintenance-screen .fill-paper{ fill:var(--mt-paper); }
  .maintenance-screen .fill-ink{ fill:var(--mt-ink); }
  .maintenance-screen .fill-metal{ fill:var(--mt-metal); }
  .maintenance-screen .no-fill{ fill:none; }

  /* ============ Loading states (app + admin) ============
     Pulse for general waits, orbit dots for Bunny processing. Logo is NARRAVA_LOGO_SVG. */
  .narrava-loading-block{
    display:flex;flex-direction:column;align-items:center;
    gap:14px;
    padding:40px 20px;
  }
  .narrava-loading-label{
    font-size:12.5px;color:var(--muted);letter-spacing:.2px;
  }
  /* Load failed state (narravaLoadFailedHtml) */
  .narrava-load-failed-text{
    font-size:13px;color:var(--text);text-align:center;
    max-width:220px;
  }
  .narrava-loader{
    position:relative;width:64px;height:64px;
    display:flex;align-items:center;justify-content:center;
  }
  .narrava-mark-icon{
    width:32px;height:32px;
    position:relative;z-index:2;
    display:block;
  }
  /* Variant: gentle pulse — general purpose */
  .narrava-loader-pulse .pulse-ring{
    position:absolute;width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    opacity:0;
    animation:narrava-pulse 1.8s ease-out infinite;
  }
  .narrava-loader-pulse .pulse-ring .narrava-mark-icon{
    width:100%;height:100%;
  }
  .narrava-loader-pulse .pulse-ring.delay{ animation-delay:.9s; }
  .narrava-loader-pulse > .narrava-mark-icon{ animation:narrava-breathe 1.8s ease-in-out infinite; }
  @keyframes narrava-pulse{
    0%{ transform:scale(.7); opacity:.55; }
    100%{ transform:scale(1.7); opacity:0; }
  }
  @keyframes narrava-breathe{
    0%,100%{ transform:scale(.92); }
    50%{ transform:scale(1.04); }
  }
  /* Reduced motion: drop the pulse rings, keep an opacity pulse */
  @media (prefers-reduced-motion: reduce){
    .narrava-loader-pulse .pulse-ring{ display:none; }
    .narrava-loader-pulse > .narrava-mark-icon{ animation:narrava-mark-fade 1.8s ease-in-out infinite; }
  }
  @keyframes narrava-mark-fade{
    0%,100%{ opacity:.55; }
    50%{ opacity:1; }
  }
  /* Variant: orbit dots — Bunny Stream processing wait */
  .narrava-loader-orbit .orbit{
    position:absolute;inset:0;
    animation:narrava-orbit-spin 1.4s linear infinite;
  }
  .narrava-loader-orbit .dot{
    position:absolute;width:6px;height:6px;border-radius:50%;
    background:var(--leaf-light);
    top:50%;left:50%;
    transform-origin:0 0;
  }
  .narrava-loader-orbit .dot:nth-child(1){ transform:rotate(0deg) translate(29px) translate(-3px,-3px); background:var(--leaf); }
  .narrava-loader-orbit .dot:nth-child(2){ transform:rotate(120deg) translate(29px) translate(-3px,-3px); opacity:.7; }
  .narrava-loader-orbit .dot:nth-child(3){ transform:rotate(240deg) translate(29px) translate(-3px,-3px); opacity:.4; }
  @keyframes narrava-orbit-spin{ to{ transform:rotate(360deg); } }

  /* Small Bunny processing notice */
  .narrava-processing-toast{
    position:fixed;left:50%;bottom:28px;
    transform:translateX(-50%) translateY(20px);
    display:flex;align-items:center;gap:10px;
    background:var(--panel);border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:10px 16px 10px 10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.45);
    opacity:0;pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
    z-index:400;
    max-width:min(92vw,380px);
  }
  .narrava-processing-toast.show{
    opacity:1;transform:translateX(-50%) translateY(0);
  }
  .narrava-processing-toast .narrava-loader{ width:36px;height:36px;flex-shrink:0; }
  .narrava-processing-toast .narrava-mark-icon{ width:18px;height:18px; }
  .narrava-processing-toast .narrava-loader-orbit .dot{ width:4px;height:4px; }
  .narrava-processing-toast .narrava-loader-orbit .dot:nth-child(1){ transform:rotate(0deg) translate(16px) translate(-2px,-2px); }
  .narrava-processing-toast .narrava-loader-orbit .dot:nth-child(2){ transform:rotate(120deg) translate(16px) translate(-2px,-2px); }
  .narrava-processing-toast .narrava-loader-orbit .dot:nth-child(3){ transform:rotate(240deg) translate(16px) translate(-2px,-2px); }
  .narrava-processing-toast-text{
    font-size:12.5px;color:var(--text);line-height:1.4;
  }

  /* ============ Skeleton loading states ============
     .skeleton-block sets only background/animation; stack it on a real class for sizing. */
  .skeleton-block{
    background-color:var(--skeleton-base);
    background-image:linear-gradient(100deg, transparent 30%, var(--skeleton-shimmer) 50%, transparent 70%);
    background-size:200% 100%;
    background-position:200% 0;
    animation:skeleton-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes skeleton-shimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-50% 0; }
  }
  .skeleton-circle{ border-radius:50%; }
  .skeleton-pill{ border-radius:20px; }
  .skeleton-text{ border-radius:4px; }
  @media (prefers-reduced-motion: reduce){
    .skeleton-block{
      animation:skeleton-fade 1.8s ease-in-out infinite;
      background-image:none;
    }
  }
  @keyframes skeleton-fade{
    0%,100%{ opacity:.55; }
    50%{ opacity:.85; }
  }
  /* One faint logo per page, fixed to the viewport */
  .skeleton-logo-overlay{
    position:fixed;inset:0;
    display:flex;align-items:center;justify-content:center;
    opacity:.5;
    pointer-events:none;
    z-index:300;
  }

  /* Form controls don't inherit font-family by default */
  button,input,select,textarea{font-family:inherit;}
  html,body{margin:0;padding:0;overflow-x:hidden;}
  /* overscroll-behavior-y on <html> only: on <body> it killed the mouse wheel on admin pages */
  html{overscroll-behavior-y:none;}
  /* Page canvas colour (otherwise white strips show under the home indicator) */
  html{background:var(--ink);}
  body{
    background:transparent;
    font-family:'Montserrat',sans-serif;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100%;
    padding:24px 10px 36px;
  }
  .stage{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    width:100%;
  }
  .phone{
    position:relative;
    width:340px;
    max-width:92vw;
    aspect-ratio:340/706;
    background:var(--ink);
    border-radius:44px;
    border:6px solid #04070A;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
    overflow:hidden;
    touch-action:pan-y;
  }
  .notch{
    position:absolute;
    top:10px;left:50%;
    transform:translateX(-50%);
    width:104px;height:22px;
    background:#04070A;
    border-radius:14px;
    z-index:50;
  }
  .statusbar{
    position:absolute;
    top:0;left:0;right:0;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 22px 0;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.3px;
    z-index:40;
    color:#fff;
    pointer-events:none;
  }
  .statusbar .icons{display:flex;gap:5px;align-items:center;}

  .feed{
    position:absolute;
    inset:0;
    overflow:hidden;
  }
  /* The feed's own swipe replaces native touch handling (stops pull-to-refresh).
     On the feed's visible parts, not .feed, so the sheets inside it still scroll. */
  .feed-stage > *,
  .feed > .actionrail,
  .feed > .info{
    touch-action:none;
  }
  .bgvideo{
    position:absolute;
    inset:-6%;
    transition:background 0.5s ease;
    animation:drift 9s ease-in-out infinite alternate;
  }
  @keyframes drift{
    0%{transform:scale(1.04) translate(0,0);}
    100%{transform:scale(1.12) translate(-1.5%,-1%);}
  }
  /* No drift zoom on a real video */
  .bgvideo.has-video{
    inset:0;
    animation:none;
  }
  /* Loader while an episode's video gets ready */
  .bgvideo-loading{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel);
  }
  .bgvideo iframe,
  .bgvideo video{
    width:100%;
    height:100%;
    border:0;
    display:block;
    object-fit:cover;
  }

  /* Off-screen preload host (clipped, not display:none, so it isn't throttled) */
  .preload-host{
    position:fixed;
    top:0;left:0;
    width:1px;height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
  }
  .preload-host iframe,
  .preload-host video{
    width:340px;height:706px;
    border:0;
  }

  /* Watching: hide the browsing chrome. The tap target, .epbadge and .unlock stay. */
  .feed.watching .topbar,
  .feed.watching .spine,
  .feed.watching .pager,
  .feed.watching .vignette{
    display:none;
  }
  .feed.watching .continue{
    display:none;
  }
  /* Chrome group (title, synopsis, action rail, scrub bar): hidden together by .chrome-hidden */
  .feed.watching.chrome-hidden .title,
  .feed.watching.chrome-hidden .synopsis,
  .feed.watching.chrome-hidden .actionrail{
    display:none;
  }

  .vignette{
    position:absolute;inset:0;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(168, 168, 168, 0) 40%, rgba(13, 19, 14, 0.118) 100%),
      radial-gradient(120% 60% at 50% 100%, rgba(13,19,14,0.15) 0%, rgba(13, 19, 14, 0.489) 100%);
    pointer-events:none;
  }

  /* Full-video tap target; also shields the video so swipes reach the page */
  .playpulse{
    position:absolute;
    inset:0;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    z-index:30;
  }
  .playpulse-icon{
    width:64px;height:64px;
    border-radius:50%;
    background:rgba(13,19,14,0.35);
    border:1.5px solid rgba(245,247,241,0.55);
    display:flex;align-items:center;justify-content:center;
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .feed.paused .playpulse-icon{opacity:1;}
  .playpulse-icon svg{width:22px;height:22px;fill:#fff;margin-left:3px;}

  .spine{
    position:absolute;
    top:calc(var(--top-safe) + 50px);bottom:150px;left:9px;
    width:6px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    z-index:35;
  }
  .tick{
    width:6px;height:6px;
    border-radius:2px;
    background:rgba(244,247,241,0.16);
    transition:all 0.3s ease;
  }
  .tick.watched{background:rgba(98,227,144,0.55);}
  .tick.current{
    width:6px;height:16px;
    background:var(--gold);
    box-shadow:0 0 8px rgba(232,184,92,0.7);
  }

  .topbar{
    position:absolute;
    top:var(--top-safe);left:22px;right:22px;
    padding-left:44px; /* room for .mutebtn */
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:40;
  }
  .brand{
    display:flex;align-items:center;gap:7px;
  }
  .brand img{width:22px;height:22px;object-fit:contain;display:block;}
  .logo{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:19px;
    letter-spacing:1px;
    color:#fff;
  }
  .coins{
    display:flex;align-items:center;gap:5px;
    background:rgba(13,19,14,0.55);
    border:1px solid rgba(232,184,92,0.4);
    padding:5px 10px 5px 7px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
  }
  .coins svg{width:14px;height:14px;}


  /* Mute button, top-left of the stage in both states */
  .mutebtn{
    position:absolute;
    top:calc(var(--top-safe) - 3px);left:22px;
    width:34px;height:34px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(13,19,14,0.55);
    border:1px solid rgba(244,247,241,0.25);
    color:#fff;
    padding:0;
    cursor:pointer;
    z-index:45;
    touch-action:none;
  }
  .mutebtn svg{width:18px;height:18px;}
  .mutebtn .mute-icon-off{display:none;}
  .mutebtn.muted .mute-icon-on{display:none;}
  .mutebtn.muted .mute-icon-off{display:block;}
  .mutebtn:active{transform:scale(0.92);}

  .pager{
    position:absolute;
    top:calc(var(--top-safe) + 36px);left:22px;
    display:flex;gap:5px;
    z-index:40;
  }
  .pdot{
    width:16px;height:3px;
    border-radius:2px;
    background:rgba(244,247,241,0.28);
    cursor:pointer;
    transition:all 0.25s ease;
  }
  .pdot.active{width:26px;background:var(--leaf);}

  .actionrail{
    position:absolute;
    right:14px;bottom:calc(36px + var(--safe-bottom));
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    z-index:40;
  }
  .avatar{
    width:40px;height:40px;
    border-radius:50%;
    background:var(--panel-2);
    border:2px solid var(--leaf);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    margin-bottom:2px;
    overflow:hidden;
  }
  .avatar img{width:66%;height:66%;object-fit:contain;}
  .raction{
    background:none;border:none;
    display:flex;flex-direction:column;
    align-items:center;gap:3px;
    color:var(--text);
    font-size:11px;font-weight:700;
    cursor:pointer;
    padding:0;
  }
  .raction svg{width:26px;height:26px;transition:transform 0.15s ease;}
  .raction:active svg{transform:scale(0.82);}
  .raction.liked svg{fill:var(--leaf-light);stroke:var(--leaf-light);}
  .raction.saved svg{fill:var(--leaf-light);stroke:var(--leaf-light);}
  .pulse{animation:pulsepop 0.35s ease;}
  @keyframes pulsepop{
    0%{transform:scale(1);}
    35%{transform:scale(1.35);}
    100%{transform:scale(1);}
  }

  /* Feed scrub bar (part of the chrome group; only with a real video) */
  .video-controls{
    display:none;
    position:absolute;
    left:16px;right:16px;
    bottom:calc(16px + var(--safe-bottom));
    z-index:40;
    align-items:center;
    gap:10px;
    touch-action:none;
  }
  .feed.watching .video-controls.has-video{
    display:flex;
  }
  .feed.watching.chrome-hidden .video-controls{
    display:none;
  }
  .scrub-range{
    flex:1;
    -webkit-appearance:none;
    appearance:none;
    height:4px;
    border-radius:2px;
    background:rgba(244,247,241,0.28);
    outline:none;
    cursor:pointer;
  }
  .scrub-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:13px;height:13px;
    border-radius:50%;
    background:var(--leaf-light);
    box-shadow:0 1px 4px rgba(0,0,0,0.5);
  }
  .scrub-range::-moz-range-thumb{
    width:13px;height:13px;
    border:none;
    border-radius:50%;
    background:var(--leaf-light);
    box-shadow:0 1px 4px rgba(0,0,0,0.5);
  }
  /* Episode length at the end of the scrub bar */
  .scrub-duration{
    flex-shrink:0;
    font-size:11.5px;font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--text);
    text-shadow:0 1px 3px rgba(0,0,0,0.7);
    pointer-events:none;
  }
  .scrub-duration:empty{display:none;}
  .scrub-range::-webkit-slider-runnable-track{
    height:4px;
    border-radius:2px;
    background:linear-gradient(to right, var(--leaf-light) var(--scrub-pct, 0%), rgba(244,247,241,0.28) 0);
  }
  .info{
    position:absolute;
    left:22px;right:66px;
    bottom:calc(24px + var(--safe-bottom));
    z-index:40;
  }
  /* Same bottom offsets browsing and watching, so nothing jumps on entry */
  .epbadge{
    display:inline-block;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:0.5px;
    color:var(--gold);
    background:rgba(232,184,92,0.12);
    border:1px solid rgba(232,184,92,0.4);
    padding:3px 9px;
    border-radius:5px;
    cursor:pointer;
    margin-bottom:9px;
  }
  .title{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:26px;
    line-height:1.03;
    letter-spacing:0.5px;
    margin:0 0 8px;
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,0.4);
  }
  .synopsis{
    font-size:13px;
    line-height:1.45;
    color:var(--muted);
    margin:0 0 12px;
    max-width:230px;
  }
  .ctarow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .continue{
    background:var(--leaf);
    color:#0D130E;
    border:none;
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:13px;
    padding:10px 16px;
    border-radius:10px;
    cursor:pointer;
    letter-spacing:0.2px;
  }
  .continue:active{background:var(--leaf-deep); color:#0D130E;}
  .unlock{
    background:rgba(232,184,92,0.14);
    border:1px solid rgba(232,184,92,0.55);
    color:var(--gold);
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:12px;
    padding:10px 12px;
    border-radius:10px;
    cursor:pointer;
    display:flex;align-items:center;gap:5px;
    white-space:nowrap;
  }
  /* Only while the current episode is locked */
  .unlock.hidden{display:none;}
  .unlock svg{width:13px;height:13px;}

  .bottomnav{
    position:absolute;
    left:0;right:0;bottom:0;
    height:calc(78px + var(--safe-bottom));
    padding-bottom:var(--safe-bottom);
    background:rgba(23,32,26,0.92);
    backdrop-filter:blur(6px);
    border-top:1px solid rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:space-around;
    z-index:45;
  }
  .navitem{
    display:flex;flex-direction:column;
    align-items:center;gap:4px;
    font-size:10.5px;
    font-weight:700;
    color:var(--muted);
    cursor:pointer;
  }
  .navitem svg{width:21px;height:21px;}
  .navitem.active{color:var(--leaf-light);}

  /* Hide the bottom nav on the feed (mobile) */
  body.feed-active .bottomnav{
    display:none;
  }

  /* Bottom sheets (comments, episode grid) */
  .sheet-backdrop{
    position:absolute;inset:0;
    background:rgba(4,7,5,0.6);
    opacity:0;pointer-events:none;
    transition:opacity 0.3s ease;
    z-index:85;
  }
  .sheet-backdrop.open{opacity:1;pointer-events:auto;}
  .sheet{
    position:absolute;
    left:0;right:0;bottom:0;
    height:72%;
    background:var(--panel-2);
    border-top:1px solid rgba(255,255,255,0.08);
    border-radius:22px 22px 0 0;
    transform:translateY(102%);
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1);
    z-index:90;
    padding:10px 18px calc(18px + var(--safe-bottom));
    display:flex;
    flex-direction:column;
  }
  .sheet.open{transform:translateY(0);}
  .sheet-handle{
    width:36px;height:4px;
    background:rgba(255,255,255,0.2);
    border-radius:3px;
    margin:4px auto 12px;
  }
  .sheet-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:12px;
  }
  .sheet-header h3{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:18px;
    letter-spacing:0.5px;
    margin:0;
    color:#fff;
  }
  .sheet-close{
    background:rgba(255,255,255,0.08);
    border:none;color:var(--text);
    width:26px;height:26px;border-radius:50%;
    cursor:pointer;font-size:13px;
    display:flex;align-items:center;justify-content:center;
  }
  .region-btn{
    flex:1;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:var(--muted);
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:12px;
    padding:9px 6px;
    border-radius:10px;
    cursor:pointer;
  }
  .region-btn.active{
    background:rgba(30,215,96,0.16);
    border-color:var(--leaf);
    color:var(--leaf-light);
  }
  .packages{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:14px;
  }
  .pkg{
    position:relative;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:10px 8px;
    text-align:left;
    cursor:pointer;
    color:var(--text);
  }
  .pkg-coins{
    display:flex;align-items:center;gap:5px;
    font-weight:800;font-size:14px;margin-bottom:2px;
  }
  .pkg-coins svg{width:15px;height:15px;flex-shrink:0;}
  .pkg-label{
    font-size:10.5px;font-weight:700;
    color:var(--gold);
    margin-bottom:4px;
  }
  .pkg:hover:not(:disabled){border-color:var(--gold);}
  .pkg:disabled,.region-btn:disabled{opacity:0.5;cursor:default;}
  .pkg-price{
    font-size:12px;color:var(--muted);font-weight:600;
  }
  .toast{
    position:absolute;
    top:calc(var(--top-safe) + 50px);left:50%;
    transform:translateX(-50%) translateY(-12px);
    background:rgba(23,32,26,0.96);
    border:1px solid rgba(30,215,96,0.5);
    color:var(--leaf-light);
    font-size:12.5px;font-weight:700;
    padding:9px 16px;
    border-radius:999px;
    z-index:99;
    opacity:0;
    pointer-events:none;
    transition:all 0.3s ease;
    white-space:nowrap;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .caption{
    font-size:12.5px;
    color:rgba(244,247,241,0.5);
    text-align:center;
    max-width:340px;
    line-height:1.5;
    padding:0 8px;
  }
  .caption b{color:rgba(244,247,241,0.78);}

  .ctarow.hidden{display:none;}

  .screen-hidden{display:none !important;}

  /* Home / Discover screen */
  .discover{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .discover-header{
    padding:calc(var(--top-safe) + 4px) 18px 0;
  }
  .discover-search{
    display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    padding:9px 12px;
  }
  .discover-search svg{width:16px;height:16px;flex-shrink:0;stroke:var(--muted);}
  .discover-search input{
    flex:1;min-width:0;
    background:none;border:none;outline:none;
    color:var(--text);
    font-family:'Montserrat',sans-serif;font-size:13px;
  }
  .discover-search input::placeholder{color:var(--muted);}

  /* Desktop hero, hidden on mobile */
  .discover-hero{
    display:none;
  }

  /* Mobile floating Continue Watching bar (Home only, needs .show) */
  .cw-float{
    display:none;
    position:absolute;
    left:12px;right:12px;
    bottom:calc(90px + var(--safe-bottom));
    z-index:46;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:14px;
    background:rgba(20,26,21,0.92);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
  }
  body.discover-active .cw-float.show{
    display:flex;
  }
  .cw-float-thumb{
    width:40px;height:56px;
    border-radius:6px;
    object-fit:cover;
    background:var(--panel-2);
    flex-shrink:0;
    display:block;
  }
  .cw-float-info{
    flex:1;min-width:0;
  }
  .cw-float-title{
    font-size:12.5px;font-weight:700;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cw-float-ep{
    font-size:11px;color:var(--muted);margin-top:2px;
  }
  .cw-float-continue{
    flex-shrink:0;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    font-family:'Montserrat',sans-serif;
    font-weight:700;font-size:12px;
    padding:7px 14px;
    border-radius:999px;
    cursor:pointer;
  }
  .cw-float-close{
    flex-shrink:0;
    width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;
    color:var(--muted);
    cursor:pointer;
  }
  .cw-float-close svg{width:14px;height:14px;}

  /* Install popup (pwa-install.js) */
  .pwa-modal-backdrop{
    position:fixed;inset:0;
    background:rgba(4,7,5,0.7);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    box-sizing:border-box;
    opacity:0;pointer-events:none;
    transition:opacity 0.25s ease;
    z-index:130;
  }
  .pwa-modal-backdrop.open{opacity:1;pointer-events:auto;}
  .pwa-modal{
    position:relative;
    width:100%;
    max-width:340px;
    background:var(--panel-2);
    border:1px solid rgba(232,184,92,0.3);
    border-radius:20px;
    padding:32px 26px 26px;
    box-shadow:0 24px 60px rgba(0,0,0,0.5);
    text-align:center;
    transform:translateY(10px);
    transition:transform 0.25s ease;
  }
  .pwa-modal-backdrop.open .pwa-modal{transform:translateY(0);}
  .pwa-modal-close{
    position:absolute;
    top:14px;right:14px;
    width:30px;height:30px;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
  }
  .pwa-modal-close svg{width:15px;height:15px;}
  .pwa-modal-icon{
    width:72px;height:72px;
    margin:0 auto 18px;
    display:block;
    object-fit:contain;
  }
  .pwa-modal-title{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:20px;
    color:#fff;
    margin:0 0 10px;
  }
  .pwa-modal-message{
    font-size:14px;
    line-height:1.5;
    color:var(--muted);
    margin:0 0 26px;
  }
  .pwa-modal-message-ios{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
  }
  .pwa-modal-message-ios svg{width:16px;height:16px;flex-shrink:0;color:var(--gold);}
  .pwa-modal-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .pwa-modal-btn-primary{
    width:100%;
    background:var(--leaf);
    color:#0D130E;
    border:none;
    font-family:'Montserrat',sans-serif;
    font-weight:800;font-size:14.5px;
    padding:13px;
    border-radius:12px;
    cursor:pointer;
  }
  .pwa-modal-btn-primary:active{background:var(--leaf-deep); color:#0D130E;}
  .pwa-modal-btn-secondary{
    width:100%;
    background:none;
    color:var(--muted);
    border:1px solid rgba(255,255,255,0.14);
    font-family:'Montserrat',sans-serif;
    font-weight:700;font-size:14px;
    padding:12px;
    border-radius:12px;
    cursor:pointer;
  }
  .pwa-modal-btn-secondary:active{background:rgba(255,255,255,0.06);}

  /* Profile install button */
  .profile-install-btn{
    flex-shrink:0;
    margin-left:auto;   /* far end of the header row */
    min-height:40px;
    display:flex;align-items:center;gap:6px;
    background:rgba(232,184,92,0.14);
    border:1px solid rgba(232,184,92,0.4);
    color:var(--gold);
    font-family:'Montserrat',sans-serif;
    font-weight:800;font-size:11.5px;
    padding:8px 12px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
  }
  .profile-install-btn svg{width:14px;height:14px;flex-shrink:0;}

  .discover-tabs{
    display:flex;gap:8px;
    padding:14px 18px 10px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .discover-tabs::-webkit-scrollbar{display:none;}
  .dtab{
    flex-shrink:0;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:var(--muted);
    font-family:'Montserrat',sans-serif;
    font-weight:700;font-size:12px;
    padding:8px 14px;border-radius:999px;
    cursor:pointer;
  }
  .dtab.active{
    background:rgba(30,215,96,0.16);
    border-color:var(--leaf);
    color:var(--leaf-light);
  }

  .discover-body{
    flex:1;
    overflow-y:auto;
    padding:6px 18px 96px;
  }

  .discover-note{
    font-size:12px;
    color:var(--muted);
    text-align:center;
    padding:6px 4px 14px;
    line-height:1.4;
  }

  .genre-chips{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-bottom:14px;
  }
  .genre-chip{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:var(--muted);
    font-family:'Montserrat',sans-serif;
    font-weight:600;font-size:12px;
    padding:7px 12px;border-radius:999px;
    cursor:pointer;
  }
  .genre-chip.active{
    background:rgba(30,215,96,0.16);
    border-color:var(--leaf);
    color:var(--leaf-light);
  }

  .poster-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  /* Mobile Popular layout: 2 feature cards, 3-column grid of 9, then 2 columns */
  .discover-feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:14px;
  }
  .discover-grid-tight{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:7px;
    margin-bottom:14px;
  }
  .discover-grid-roomy{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }
  .poster-card{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    aspect-ratio:2/3;
    background:var(--panel-2);
    cursor:pointer;
  }
  .poster-card img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .poster-card .poster-title{
    position:absolute;left:0;right:0;bottom:0;
    padding:20px 8px 8px;
    font-size:12px;font-weight:800;color:#fff;
    background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    line-height:1.25;
  }
  .poster-card.locked .poster-title{color:rgba(255,255,255,0.7);}
  .poster-card .poster-lock{
    position:absolute;top:6px;right:6px;
    width:24px;height:24px;border-radius:50%;
    background:rgba(4,7,5,0.65);
    display:flex;align-items:center;justify-content:center;
  }
  .poster-card .poster-lock svg{width:12px;height:12px;}
  /* Rank badge + view count (Rankings tab, desktop Top shelf) */
  .poster-card .poster-rank-meta{
    position:absolute;top:6px;left:6px;right:6px;
    display:flex;align-items:center;gap:5px;
    pointer-events:none;
  }
  .poster-card .poster-rank{
    flex-shrink:0;
    min-width:24px;height:24px;padding:0 6px;
    border-radius:999px;
    background:rgba(4,7,5,0.72);
    color:var(--text);
    font-family:'Montserrat',sans-serif;
    font-size:12px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
  }
  .poster-card .poster-rank.top{background:var(--gold);color:#0D130E;}
  .poster-card .poster-views{
    min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    height:20px;line-height:20px;padding:0 8px;
    border-radius:999px;
    background:rgba(4,7,5,0.65);
    color:var(--text);
    font-size:10.5px;font-weight:700;
  }

  .discover-empty{
    text-align:center;
    color:var(--muted);
    font-size:13px;
    padding:40px 20px;
  }

  /* Desktop shelves and the "back to shelves" link, hidden on mobile */
  .discover-shelves{
    display:none;
  }
  .shelf-back-btn{
    display:none;
  }

  /* Library screen (auto-fill grid gets more columns on desktop) */
  .library{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .library-header{
    padding:calc(var(--top-safe) + 4px) 18px 10px;
  }
  .library-title{
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:20px;
    color:var(--text);
  }
  .library-body{
    flex:1;
    overflow-y:auto;
    padding:6px 18px 96px;
  }
  .library-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:12px;
  }
  /* History screen */
  .library-header.has-back{
    display:flex;align-items:center;gap:8px;
  }
  .library-back{
    width:34px;height:34px;margin-left:-8px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:50%;
    color:var(--text);cursor:pointer;
  }
  .library-back svg{width:22px;height:22px;}
  .history-list{
    display:flex;flex-direction:column;gap:10px;
    max-width:720px;
  }
  .history-row{
    display:flex;align-items:center;gap:12px;
    width:100%;padding:8px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
    color:var(--text);text-align:left;
    font-family:inherit;cursor:pointer;
  }
  .history-cover{
    flex-shrink:0;
    width:54px;aspect-ratio:2/3;
    border-radius:8px;overflow:hidden;
    background:var(--panel-2);
  }
  .history-cover img{width:100%;height:100%;object-fit:cover;display:block;}
  .history-info{flex:1;min-width:0;}
  .history-title{
    font-size:14px;font-weight:800;line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .history-ep{margin-top:4px;font-size:12px;font-weight:600;color:var(--leaf-light);}
  .history-date{flex-shrink:0;font-size:11.5px;color:var(--muted);}
  /* Downloads screen */
  .downloads-wrap{max-width:720px;}
  .downloads-offline-note{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;padding:10px 12px;
    border-radius:12px;
    background:rgba(232,184,92,0.1);border:1px solid rgba(232,184,92,0.4);
    color:var(--gold);font-size:12.5px;font-weight:700;
  }
  .downloads-offline-note svg{width:18px;height:18px;flex-shrink:0;}
  .downloads-summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;margin-bottom:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
  }
  .downloads-summary-label{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
  .downloads-summary-value{margin-top:4px;font-size:20px;font-weight:800;color:var(--text);}
  .downloads-summary-sub{margin-top:2px;font-size:11.5px;color:var(--muted);}
  .downloads-summary .downloads-delete-all{margin-top:0;flex-shrink:0;}
  .downloads-group{margin-bottom:18px;}
  .downloads-group-title{
    margin:0 0 8px;
    font-size:13px;font-weight:800;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .download-row{
    display:flex;align-items:center;gap:6px;
    padding:8px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
  }
  .download-play{
    flex:1;min-width:0;
    display:flex;align-items:center;gap:12px;
    background:none;border:none;padding:0;
    color:var(--text);text-align:left;
    font-family:inherit;cursor:pointer;
  }
  div.download-play{cursor:default;}
  .download-meta{margin-top:4px;font-size:11.5px;color:var(--muted);}
  .download-job.failed .download-meta{color:#F2A0A0;white-space:normal;}
  .download-progress{
    margin-top:8px;height:4px;border-radius:2px;
    background:rgba(255,255,255,0.1);overflow:hidden;
  }
  .download-progress span{display:block;height:100%;background:var(--leaf);transition:width 0.3s ease;}
  .download-delete{
    flex-shrink:0;
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:50%;
    color:var(--muted);cursor:pointer;
  }
  .download-delete:hover{color:#F2A0A0;}
  .download-delete svg{width:20px;height:20px;}
  .download-job-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
  .download-job-actions .download-retry{margin-top:0;padding:8px 14px;}
  .auth-submit.download-confirm-delete{background:#E07070;}
  .auth-submit.download-confirm-delete:active:not(:disabled){background:#C85A5A;}
  /* Download action: hidden must beat display:flex */
  .raction[hidden], .watch-action[hidden]{display:none !important;}
  .raction-download[data-state="downloaded"] svg{stroke:var(--leaf-light);}
  .raction-download[data-state="downloading"] svg,
  .raction-download[data-state="queued"] svg,
  .watch-action-download[data-state="downloading"] svg,
  .watch-action-download[data-state="queued"] svg{animation:downloadPulse 1.2s ease-in-out infinite;}
  .raction-download[data-state="failed"] svg{stroke:#F2A0A0;}
  @keyframes downloadPulse{0%,100%{opacity:1;}50%{opacity:0.45;}}
  @media (prefers-reduced-motion: reduce){
    .raction-download svg, .watch-action-download svg{animation:none !important;}
  }
  .downloaded-art-blank{width:100%;height:100%;background:var(--panel-2);}
  /* Offline start: Home shows only this */
  body.app-offline .discover-hero,
  body.app-offline .discover-shelves,
  body.app-offline .shelf-back-btn,
  body.app-offline .discover-tabs,
  body.app-offline .discover-body,
  body.app-offline .discover-header,
  body.app-offline .cw-float{display:none !important;}
  .offline-home{display:none;}
  body.app-offline .offline-home{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    min-height:60vh;padding:40px 24px;
  }
  .offline-home-icon{
    width:64px;height:64px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(232,184,92,0.12);color:var(--gold);
  }
  .offline-home-icon svg{width:32px;height:32px;}
  .offline-home-title{margin:16px 0 0;font-size:22px;font-weight:800;color:var(--text);}
  .offline-home-text{margin:8px 0 0;max-width:320px;font-size:13.5px;line-height:1.5;color:var(--muted);}
  .reconnect-bar{
    position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top, 0px));
    transform:translateX(-50%);
    z-index:9000;
    display:flex;align-items:center;gap:12px;
    padding:8px 8px 8px 16px;border-radius:24px;
    background:var(--panel-2);border:1px solid rgba(255,255,255,0.12);
    color:var(--text);font-size:13px;font-weight:700;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
  }
  .reconnect-bar button{
    background:var(--leaf);color:#0D130E;border:none;
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:12.5px;
    padding:7px 14px;border-radius:18px;cursor:pointer;
  }
  .membership-reason{margin-bottom:14px;}
  /* Help & Feedback screen */
  .help-list{max-width:420px;}
  .help-card{padding:14px 16px 16px;}
  .help-card-head{
    display:flex;align-items:center;gap:12px;
    font-family:'Montserrat',sans-serif;
    font-weight:700;font-size:13.5px;
    color:var(--text);
  }
  .help-email{
    margin:12px 0 0;
    font-size:15px;font-weight:700;
    color:var(--text);
    overflow-wrap:anywhere;
  }
  .help-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
  .help-actions .pill-cta-btn{text-decoration:none;}
  .help-secondary-btn{
    margin-top:14px;
    background:none;
    border:1px solid rgba(255,255,255,0.18);
    color:var(--text);
    font-family:'Montserrat',sans-serif;
    font-weight:700;font-size:13px;
    padding:9px 20px;
    border-radius:24px;
    cursor:pointer;
  }
  .help-about-name{margin-top:12px;font-size:18px;font-weight:800;color:var(--text);}
  .help-about-line{margin-top:4px;font-size:13px;color:var(--text);line-height:1.45;}
  .help-about-meta{margin-top:8px;font-size:12px;color:var(--muted);}
  /* Small pill button (Library log in, load retry) */
  .pill-cta-btn{
    display:inline-block;
    margin-top:14px;
    background:var(--leaf);
    color:#0D130E;
    border:none;
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:13px;
    padding:10px 22px;
    border-radius:24px;
    cursor:pointer;
  }

  /* Profile screen */
  .profile{
    position:absolute;
    inset:0;
    overflow-y:auto;
    box-sizing:border-box;
    padding:calc(var(--top-safe) + 4px) 18px 96px;
  }
  .profile-panel{
    width:100%;
    max-width:420px;
    margin:0 auto;
  }

  .profile-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
  }
  .profile-avatar{
    width:56px;height:56px;
    flex-shrink:0;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);
  }
  .profile-avatar svg{width:28px;height:28px;}
  .profile-id{min-width:0;}
  .profile-email{
    font-size:15px;
    font-weight:800;
    color:var(--text);
    word-break:break-all;
  }
  .profile-login-row{
    display:flex;align-items:center;gap:6px;
    background:none;border:none;
    color:var(--text);
    font-family:'Montserrat',sans-serif;
    font-weight:800;font-size:16px;
    padding:0;cursor:pointer;
  }
  .profile-login-row svg{width:16px;height:16px;color:var(--muted);}

  .profile-banner{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;
    background:linear-gradient(120deg, rgba(232,184,92,0.18), rgba(30,215,96,0.14));
    border:1px solid rgba(232,184,92,0.35);
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:16px;
    cursor:pointer;
    text-align:left;
    color:var(--text);
  }
  .profile-banner-title{
    font-weight:800;font-size:14px;color:var(--gold);
    margin-bottom:2px;
  }
  .profile-banner-sub{
    font-size:11.5px;color:var(--muted);
  }
  .profile-banner svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;}

  .profile-features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-bottom:20px;
  }
  .profile-feature{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:12px 4px;
    font-size:10.5px;
    font-weight:700;
    color:var(--muted);
    text-align:center;
  }
  .profile-feature svg{width:18px;height:18px;color:var(--leaf-light);}
  /* Feature tiles are buttons, reset to look like the old divs */
  button.profile-feature{font-family:inherit;line-height:inherit;cursor:pointer;}

  .profile-menu{
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    margin-bottom:16px;
    overflow:hidden;
  }
  .profile-row{
    display:flex;align-items:center;gap:12px;
    width:100%;
    background:none;border:none;
    border-bottom:1px solid rgba(255,255,255,0.06);
    color:var(--text);
    font-family:'Montserrat',sans-serif;
    font-weight:700;font-size:13.5px;
    padding:14px 16px;
    cursor:pointer;
    text-align:left;
    text-decoration:none;
    box-sizing:border-box;
  }
  .profile-row:last-child{border-bottom:none;}
  .profile-row-icon{
    display:flex;flex-shrink:0;color:var(--leaf-light);
  }
  .profile-row-icon svg{width:19px;height:19px;}
  .profile-row-label{flex:1;min-width:0;}
  .profile-row-value{
    color:var(--gold);
    font-weight:800;
    margin-right:2px;
  }
  .profile-row-chevron{
    display:flex;flex-shrink:0;color:var(--muted);
  }
  .profile-row-chevron svg{width:15px;height:15px;}

  /* Desktop Watch page (only the info column scrolls) */
  .watch{
    position:absolute;
    inset:0;
    overflow:hidden;
  }

  /* Watch page comment drawer, hidden elsewhere */
  .watch-comments-backdrop{
    display:none;
  }

  /* ============ Comments (mobile sheet + desktop drawer) ============ */
  .cmt-count{
    font-size:13px;font-weight:700;color:var(--muted);
    margin-left:4px;
  }
  .cmt-empty{
    text-align:center;color:var(--muted);font-size:13px;padding:30px 10px;
  }
  .cmt-row{
    display:flex;gap:10px;
    padding:12px 0;
  }
  .cmt-avatar{
    width:32px;height:32px;border-radius:50%;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:13px;
    font-family:'Montserrat',sans-serif;
  }
  .cmt-reply .cmt-avatar{ width:26px;height:26px;font-size:11px; }
  .cmt-main{ flex:1; min-width:0; }
  .cmt-meta{
    display:flex;align-items:baseline;gap:8px;
    margin-bottom:2px;
  }
  .cmt-name{
    font-size:12.5px;font-weight:700;color:#fff;
  }
  .cmt-time{
    font-size:11px;color:var(--muted);
  }
  .cmt-body-text{
    font-size:13px;color:var(--text);line-height:1.45;
    word-break:break-word;
  }
  .cmt-mention{
    color:var(--leaf-light);font-weight:700;
  }
  .cmt-actions{
    display:flex;align-items:center;gap:14px;
    margin-top:6px;
  }
  .cmt-like{
    display:flex;align-items:center;gap:5px;
    background:none;border:none;color:var(--muted);
    font-size:12px;cursor:pointer;padding:0;
  }
  .cmt-like svg{width:15px;height:15px;}
  .cmt-like.liked{color:var(--leaf-light);}
  .cmt-like.liked svg{fill:var(--leaf-light);}
  .cmt-reply-btn,
  .cmt-delete-btn{
    background:none;border:none;color:var(--muted);
    font-size:12px;font-weight:700;cursor:pointer;padding:0;
  }
  .cmt-reply-btn:hover{color:#fff;}
  .cmt-delete-btn{color:#F2A0A0;}
  .cmt-delete-btn:hover{color:#ff8f8f;}
  .cmt-delete-confirm{
    font-size:12px;color:var(--muted);
    display:flex;align-items:center;gap:6px;
  }
  .cmt-delete-yes{
    color:#F2A0A0;font-weight:700;background:none;border:none;cursor:pointer;font-size:12px;padding:0;
  }
  .cmt-delete-no{
    color:var(--muted);background:none;border:none;cursor:pointer;font-size:12px;padding:0;
  }
  /* One .cmt-replies per parent with visible children, so each line branches from its parent.
     Small 10px step so deep threads fit on a phone. */
  .cmt-root-replies{
    margin-top:4px;
  }
  .cmt-replies{
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,0.08);
  }
  .cmt-replies-toggle{
    display:flex;align-items:center;gap:4px;
    background:none;border:none;color:var(--leaf-light);
    font-size:12px;font-weight:700;cursor:pointer;
    padding:6px 0;
  }
  .cmt-replies-toggle svg{width:13px;height:13px;transition:transform 0.2s ease;}
  .cmt-replies-toggle.expanded svg{transform:rotate(180deg);}
  .cmt-load-more{
    display:block;
    background:none;border:none;color:var(--muted);
    font-size:12px;font-weight:700;cursor:pointer;
    padding:6px 0 6px 0;
    text-decoration:underline;
  }
  .cmt-load-more:hover{color:var(--text);}
  .cmt-reply-box{
    display:flex;gap:8px;margin-top:8px;
  }
  .cmt-reply-input{
    flex:1;min-width:0;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    padding:8px 10px;
    color:var(--text);
    font-size:12.5px;font-family:inherit;
  }
  .cmt-reply-post,
  .cmt-reply-cancel{
    background:none;border:none;
    font-size:12px;font-weight:700;cursor:pointer;
    padding:0 4px;
  }
  .cmt-reply-post{color:var(--leaf-light);}
  .cmt-reply-cancel{color:var(--muted);}
  .cmt-composer{
    display:flex;gap:10px;align-items:center;
    flex-shrink:0;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .cmt-composer-input{
    flex:1;min-width:0;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    padding:10px 14px;
    color:var(--text);
    font-size:13px;font-family:inherit;
  }
  .cmt-composer-post{
    background:var(--leaf);
    border:none;color:#0D130E;
    font-weight:700;font-size:13px;
    padding:9px 16px;border-radius:999px;
    cursor:pointer;
    flex-shrink:0;
  }
  .cmt-composer-post:hover{background:var(--leaf-light);}

  /* Mobile sheet: only the body scrolls */
  .cmt-body{
    flex:1;overflow-y:auto;
    overscroll-behavior:contain; /* don't hand the scroll on to the page */
    padding:4px 0 10px;
  }

  /* Episode jump grid (5 columns) */
  .epgrid-body{
    flex:1;overflow-y:auto;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:8px;
    padding:4px 0 10px;
  }
  .epgrid-cell{
    position:relative;
    height:48px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;
    color:var(--text);
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
  }
  .epgrid-cell.active{
    background:var(--leaf);
    border-color:var(--leaf);
    color:#0D130E;
  }
  .epgrid-cell.locked{color:var(--muted);}
  .epgrid-cell-lock{
    position:absolute;
    top:4px;left:5px;
    width:11px;height:11px;
    color:var(--muted);
  }

  /* Log In / Sign Up popup */
  .auth-modal-backdrop{
    position:fixed;inset:0;
    background:rgba(4,7,5,0.65);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    box-sizing:border-box;
    opacity:0;pointer-events:none;
    transition:opacity 0.25s ease;
    z-index:120;
  }
  .auth-modal-backdrop.open{opacity:1;pointer-events:auto;}
  .auth-modal{
    position:relative;
    width:100%;
    max-width:320px;
    transform:translateY(10px);
    transition:transform 0.25s ease;
  }
  .auth-modal-backdrop.open .auth-modal{transform:translateY(0);}
  .auth-modal-close{
    position:absolute;
    top:-12px;right:-8px;
    width:28px;height:28px;
    border-radius:50%;
    background:var(--panel);
    border:1px solid rgba(255,255,255,0.12);
    color:var(--text);
    font-size:12px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    z-index:2;
  }
  .auth-card{
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:24px 22px;
  }
  .auth-title{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:22px;
    letter-spacing:0.5px;
    color:#fff;
    margin:0 0 16px;
  }
  .auth-error{
    display:none;
    font-size:12.5px;
    line-height:1.4;
    color:#F2A0A0;
    background:rgba(242,160,160,0.1);
    border:1px solid rgba(242,160,160,0.35);
    border-radius:8px;
    padding:9px 11px;
    margin-bottom:14px;
  }
  .auth-error.show{display:block;}
  .auth-error.note{
    color:var(--leaf-light);
    background:rgba(30,215,96,0.12);
    border-color:rgba(30,215,96,0.4);
  }
  .auth-label{
    display:block;
    font-size:11.5px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin:0 0 6px;
  }
  .auth-input{
    display:block;
    width:100%;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:14px;
    color:var(--text);
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    box-sizing:border-box;
  }
  .auth-input:focus{
    outline:none;
    border-color:var(--leaf);
  }
  .auth-submit{
    width:100%;
    background:var(--leaf);
    color:#0D130E;
    border:none;
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:14px;
    padding:12px;
    border-radius:10px;
    cursor:pointer;
  }
  .auth-submit:disabled{
    opacity:0.6;
    cursor:default;
  }
  .auth-submit:active:not(:disabled){
    background:var(--leaf-deep);
    color:#0D130E;
  }
  .auth-switch{
    text-align:center;
    font-size:12.5px;
    color:var(--muted);
    margin-top:16px;
  }
  /* Forgot password link and hint (auth.js) */
  .auth-forgot{
    display:flex;
    justify-content:flex-end;
    margin:-6px 0 14px;
  }
  .auth-hint{
    font-size:12.5px;
    line-height:1.45;
    color:var(--muted);
    margin:-6px 0 14px;
  }
  /* Get Coins sheet and unlock prompt (coins.js) */
  .coin-modal{max-width:380px;}
  .coin-card{max-height:calc(100vh - 60px);overflow-y:auto;}
  .coin-card .auth-title,.unlock-card .auth-title{font-size:19px;margin-bottom:8px;}
  .coin-balance-line{
    font-size:12.5px;color:var(--muted);
    margin-bottom:14px;
  }
  .coin-balance-line b{color:var(--gold);}
  .coin-currency{
    display:grid;grid-template-columns:1fr 1fr;
    gap:6px 8px;margin-bottom:14px;
  }
  .coin-currency-note{
    grid-column:1;
    font-size:10.5px;line-height:1.35;
    color:var(--muted);
  }
  .coin-sheet-hint{
    text-align:center;font-size:11px;color:var(--muted);
  }
  .coin-sheet-loading{display:flex;justify-content:center;padding:24px 0;}
  .coin-status{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-top:14px;
    font-size:13px;font-weight:700;line-height:1.4;
    text-align:center;
    color:var(--text);
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    padding:11px 12px;
  }
  .coin-spinner{
    width:16px;height:16px;flex-shrink:0;
    border:2px solid rgba(255,255,255,0.18);
    border-top-color:var(--leaf);
    border-radius:50%;
    animation:coin-spin 0.8s linear infinite;
  }
  @keyframes coin-spin{to{transform:rotate(360deg);}}
  .coin-status.ok{color:var(--leaf-light);background:rgba(30,215,96,0.12);border-color:rgba(30,215,96,0.4);}
  .coin-status.warn{color:var(--gold);background:rgba(232,184,92,0.1);border-color:rgba(232,184,92,0.4);}
  .coin-status.error{color:#F2A0A0;background:rgba(242,160,160,0.1);border-color:rgba(242,160,160,0.35);}
  .unlock-sub{font-size:13px;color:var(--text);margin:0 0 6px;}
  .unlock-cancel{
    width:100%;margin-top:8px;
    background:none;border:1px solid rgba(255,255,255,0.14);
    color:var(--text);
    font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;
    padding:11px;border-radius:10px;cursor:pointer;
  }
  /* Watch-ads section of the unlock prompt */
  .unlock-ads{margin-top:14px;}
  .unlock-ads-or{
    display:flex;align-items:center;gap:10px;
    font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px;
  }
  .unlock-ads-or::before,.unlock-ads-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.12);}
  .unlock-ads-goal{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:4px;}
  .unlock-ads-progress{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
  .unlock-ads-note{font-size:13px;line-height:1.45;color:var(--gold);}
  .unlock-ads-btn{
    width:100%;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:rgba(232,184,92,0.12);border:1px solid rgba(232,184,92,0.5);
    color:var(--gold);
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;
    padding:12px;border-radius:10px;cursor:pointer;
  }
  .unlock-ads-btn:disabled{opacity:0.6;cursor:default;}
  .unlock-ads .coin-status{margin-top:10px;}
  /* Watch page: player area for a locked episode */
  .watch-locked{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    color:var(--gold);
    text-align:center;
  }
  .watch-locked svg{width:40px;height:40px;}
  .watch-locked-title{font-size:16px;font-weight:800;color:var(--text);}
  .watch-locked-btn{
    background:rgba(232,184,92,0.14);
    border:1px solid rgba(232,184,92,0.55);
    color:var(--gold);
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:13.5px;
    padding:11px 18px;border-radius:10px;cursor:pointer;
  }
  .watch-locked-btn:hover{background:rgba(232,184,92,0.24);}

  /* Membership screen and VIP */
  .dtab[hidden],.vip-badge[hidden]{display:none !important;}
  .vip-badge{
    display:inline-block;vertical-align:middle;
    background:linear-gradient(135deg,#F2CB78,#C99A3E);
    color:#2a1a05;
    font-family:'Montserrat',sans-serif;font-weight:900;
    font-size:10px;letter-spacing:0.8px;line-height:1;
    padding:3px 6px;border-radius:5px;
  }
  .profile-id:has(.vip-badge:not([hidden])){display:flex;align-items:center;gap:8px;}
  .profile-id .vip-badge{flex-shrink:0;}
  .membership-wrap{max-width:520px;padding-bottom:28px;}
  .membership-status{
    background:rgba(232,184,92,0.08);
    border:1px solid rgba(232,184,92,0.4);
    border-radius:14px;
    padding:16px;
    margin-bottom:18px;
  }
  .membership-status-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);}
  .membership-status-plan{font-size:20px;font-weight:800;color:#fff;margin:4px 0;}
  .membership-status-until{font-size:13.5px;font-weight:700;color:var(--gold);margin-bottom:10px;}
  .membership-included{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
  .membership-included li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);}
  .membership-included svg{width:16px;height:16px;color:var(--leaf);flex-shrink:0;}
  .membership-heading{font-size:15px;font-weight:800;color:#fff;margin:0 0 10px;}
  .membership-note{font-size:12.5px;color:var(--muted);margin:-4px 0 12px;}
  .membership-wrap > .coin-status{margin:0 0 14px;}
  .membership-plans{display:flex;flex-direction:column;gap:10px;}
  .membership-plan{
    display:flex;align-items:center;gap:12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:13px 14px;
  }
  .membership-plan-text{flex:1;min-width:0;}
  .membership-plan-name{font-size:15px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .membership-vip-label{
    font-size:10px;font-weight:800;color:var(--gold);
    border:1px solid rgba(232,184,92,0.55);
    border-radius:999px;padding:2px 7px;
  }
  .membership-plan-days{font-size:12px;color:var(--muted);margin:3px 0;}
  .membership-plan-price{font-size:14px;font-weight:800;color:var(--text);}
  .membership-plan-btn{
    flex-shrink:0;
    background:var(--leaf);color:#0D130E;border:none;
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;
    padding:10px 16px;border-radius:10px;cursor:pointer;
  }
  .membership-plan-btn:disabled{opacity:0.5;cursor:default;}
  .vip-card{
    display:flex;align-items:center;gap:12px;
    background:rgba(232,184,92,0.08);
    border:1px solid rgba(232,184,92,0.45);
    border-radius:14px;
    padding:14px;
    margin-bottom:14px;
  }
  .vip-card > svg{width:30px;height:30px;flex-shrink:0;}
  .vip-card-text{flex:1;min-width:0;}
  .vip-card-title{font-size:14.5px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .vip-card-btn{
    flex-shrink:0;
    background:var(--gold);color:#2a1a05;border:none;
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:12.5px;
    padding:9px 14px;border-radius:10px;cursor:pointer;
  }

  .auth-link{
    background:none;
    border:none;
    padding:0;
    color:var(--leaf-light);
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:12.5px;
    cursor:pointer;
    text-decoration:underline;
  }

  /* Phones / narrow windows: fill the viewport, no phone frame */
  /* Installed app: page starts below the status bar, so top UI needs only the safe area + a margin */
  @media (max-width: 600px){
    html.standalone-app{ --top-safe:calc(env(safe-area-inset-top, 0px) + 12px); }
  }
  @media (max-width: 600px){
    body{
      padding:0;
      min-height:100vh;
      min-height:100dvh;
    }
    .phone{
      /* Pinned to all four edges (100vh / 100dvh can fall short on an installed iPhone) */
      position:fixed;
      top:0;left:0;right:0;
      bottom:calc(-1 * var(--app-shortfall, 0px));   /* 0 normally (layout-guard.js) */
      width:auto;
      max-width:none;
      height:auto;
      aspect-ratio:auto;
      border:none;
      border-radius:0;
      box-shadow:none;
      padding:env(safe-area-inset-top) env(safe-area-inset-right) var(--safe-bottom) env(safe-area-inset-left);
    }
    .notch,
    .statusbar,
    .caption{
      display:none;
    }
  }

  /* Desktop top bar (>= 900px) */
  .topbar-desktop{
    display:none;
  }
  .topbar-logo{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:20px;
    letter-spacing:1px;
    color:#fff;
    flex-shrink:0;
  }
  .topbar-nav{
    display:flex;
    align-items:center;
    gap:28px;
  }
  .topbar-link{
    background:none;
    border:none;
    color:var(--muted);
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:14px;
    padding:8px 0;
    cursor:pointer;
  }
  .topbar-link:hover{color:var(--text);}
  .topbar-link.active{color:var(--leaf-light);}
  .topbar-link:disabled{cursor:default;opacity:0.45;}
  .topbar-link:disabled:hover{color:var(--muted);}
  .topbar-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto;
  }
  .topbar-icon-btn{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    flex-shrink:0;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:50%;
    color:var(--text);
    cursor:pointer;
  }
  .topbar-icon-btn svg{width:18px;height:18px;}
  .topbar-icon-btn:hover{background:rgba(255,255,255,0.1);}
  .topbar-topup-btn{
    background:var(--leaf);
    color:#0D130E;
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:13.5px;
    padding:9px 20px;
    border-radius:22px;
    border:none;
    cursor:pointer;
    flex-shrink:0;
  }
  .topbar-topup-btn:hover{background:var(--leaf-light);}

  /* Desktop search takes over the nav row */
  .topbar-search-bar{
    display:none;
  }
  .topbar-search-input-wrap{
    display:flex;align-items:center;gap:10px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:10px;
    padding:12px 16px;
    width:100%;
  }
  .topbar-search-input-wrap input{
    flex:1;background:none;border:none;outline:none;
    color:var(--text);font-family:'Montserrat',sans-serif;font-size:15px;
  }
  .topbar-search-input-wrap input::placeholder{color:var(--muted);}
  .topbar-search-clear{
    display:none;
    background:none;border:none;color:var(--muted);cursor:pointer;
  }
  .topbar-search-input-wrap.has-text .topbar-search-clear{display:flex;}
  .topbar-search-bar-icon{
    display:flex;flex-shrink:0;color:var(--muted);
  }
  /* Search backdrop, desktop only */
  .topbar-search-backdrop{
    display:none;
  }
  /* Search results grid */
  .topbar-search-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px 32px;
  }
  .search-grid-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:none;
    border:none;
    padding:0;
    text-align:left;
    cursor:pointer;
    font-family:'Montserrat',sans-serif;
  }
  /* Fixed card shape whatever the cover's proportions */
  .search-grid-thumb{
    position:relative;
    width:84px;
    flex-shrink:0;
    aspect-ratio:2/3;
    border-radius:8px;
    overflow:hidden;
    background:var(--panel-2);
  }
  .search-grid-thumb img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .search-grid-info{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
    padding-top:2px;
  }
  .search-grid-title{
    font-size:14px;
    font-weight:700;
    color:var(--text);
    line-height:1.3;
  }
  .search-grid-tags{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .search-grid-tag{
    background:rgba(255,255,255,0.08);
    color:var(--muted);
    font-size:10.5px;
    font-weight:600;
    padding:3px 8px;
    border-radius:999px;
  }
  .topbar-search-empty{
    color:var(--muted);
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    padding:20px 4px;
    grid-column:1/-1;
  }

  /* .feed-stage: things drawn on the video. display:contents except on desktop For You. */
  .feed-stage{
    display:contents;
  }

  /* Desktop shell for both screens: top bar on top, no phone frame */
  @media (min-width: 900px){
    body{
      padding:0;
    }
    .stage{
      position:relative;
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:0;
      width:100%;
      height:100vh;
      height:100dvh;
    }
    .topbar-desktop{
      display:flex;
      flex-direction:column;
      width:100%;
      flex-shrink:0;
      background:var(--panel);
      border-bottom:1px solid rgba(255,255,255,0.06);
      box-sizing:border-box;
      z-index:20;
    }
    .topbar-desktop-inner{
      display:flex;
      align-items:center;
      gap:32px;
      width:100%;
      height:64px;
      flex-shrink:0;
      padding:0 32px;
      box-sizing:border-box;
    }
    /* Home: top bar overlays the hero */
    body.discover-active .topbar-desktop{
      position:fixed;
      top:0;left:0;right:0;
      background:linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
      border-bottom:none;
      transition:background 0.25s ease, border-color 0.25s ease;
    }
    /* Solid top bar once scrolled past the hero */
    body.discover-active.discover-scrolled .topbar-desktop{
      background:var(--panel);
      border-bottom:1px solid rgba(255,255,255,0.06);
    }
    /* Search takeover: input row replaces the nav row */
    .topbar-desktop-inner.search-hidden{
      display:none;
    }
    .topbar-search-bar.open{
      display:flex;
      align-items:center;
      width:100%;
      height:64px;
      padding:0 32px;
      box-sizing:border-box;
    }
    .topbar-search-bar .topbar-search-input-wrap{
      max-width:640px;
      margin:0 auto;
    }
    .topbar-search-backdrop.open{
      display:block;
      position:fixed;
      inset:0;
      z-index:15;
      background:rgba(4,7,5,0.75);
    }
    .topbar-search-results-panel{
      margin:64px auto 0;
      width:100%;
      max-width:900px;
      max-height:calc(100vh - 64px);
      max-height:calc(100dvh - 64px);
      overflow-y:auto;
      background:var(--panel);
      padding:28px 32px 40px;
      box-sizing:border-box;
      border-radius:0 0 14px 14px;
    }
    .caption{
      display:none;
    }
    .phone{
      width:auto;
      max-width:none;
      flex:1;
      min-width:0;
      min-height:0;
      height:auto;
      aspect-ratio:auto;
      border:none;
      border-radius:0;
      box-shadow:none;
    }
    .notch,
    .statusbar,
    .bottomnav,
    .cw-float,
    .cw-float.show,
    body.discover-active .cw-float.show{
      display:none;
    }

    /* ----- Home: desktop layout ----- */

    /* Content column capped at 1400px, centered */
    body.discover-active .discover-tabs,
    body.discover-active .discover-body{
      width:100%;
      max-width:1400px;
      margin:0 auto;
      box-sizing:border-box;
    }

    /* No always-visible search bar on desktop */
    body.discover-active .discover-header{
      display:none;
    }

    /* ----- Hero: full-bleed banner with a thumbnail filmstrip ----- */
    body.discover-active .discover-hero{
      display:block;
      position:relative;
      width:100%;
      height:560px;
      overflow:hidden;
      /* Don't let flexbox shrink the hero to nothing */
      flex-shrink:0;
    }
    body.discover-active .discover-hero-bg{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center 22%;
    }
    body.discover-active .discover-hero::after{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(90deg, rgba(13,19,14,0.95) 0%, rgba(13,19,14,0.6) 36%, rgba(13,19,14,0.1) 62%, rgba(13,19,14,0.55) 100%),
        linear-gradient(0deg, rgba(13,19,14,0.9) 0%, rgba(13,19,14,0) 42%);
      pointer-events:none;
    }
    body.discover-active .discover-hero-content{
      position:absolute;
      left:0;right:0;bottom:0;
      z-index:2;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      padding:0 44px 40px;
      gap:30px;
    }
    body.discover-active .discover-hero-left{
      max-width:560px;
      transition:opacity 0.25s ease;
    }
    body.discover-active .hero-title{
      font-family:'Montserrat',sans-serif;
      font-weight:800;
      font-size:36px;
      line-height:1.16;
      letter-spacing:0.3px;
      color:#fff;
      margin:0 0 14px;
      text-shadow:0 2px 14px rgba(0,0,0,0.5);
    }
    body.discover-active .hero-tags{
      display:flex;gap:10px;margin-bottom:14px;
    }
    body.discover-active .hero-tag{
      background:var(--leaf);
      color:#0D130E;
      font-family:'Montserrat',sans-serif;
      font-weight:700;
      font-size:12px;
      padding:6px 14px;
      border-radius:6px;
    }
    body.discover-active .hero-synopsis{
      font-size:14px;
      line-height:1.55;
      color:var(--muted);
      margin:0 0 22px;
      max-width:520px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    body.discover-active .hero-play{
      display:flex;align-items:center;gap:8px;
      background:var(--leaf);
      color:#0D130E;
      border:none;
      font-family:'Montserrat',sans-serif;
      font-weight:800;
      font-size:14px;
      padding:12px 22px;
      border-radius:26px;
      cursor:pointer;
      transition:background 0.15s ease;
    }
    body.discover-active .hero-play:hover{
      background:var(--leaf-light);
    }

    /* Filmstrip swaps the hero content; "Watch Now" opens the series */
    body.discover-active .hero-carousel-wrap{
      position:relative;
      display:flex;align-items:center;gap:8px;
      flex-shrink:0;
    }
    /* Shows exactly 4 thumbnails */
    body.discover-active .hero-carousel-viewport{
      width:490px;
      overflow:hidden;
    }
    body.discover-active .hero-carousel-track{
      display:flex;gap:12px;
      transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    body.discover-active .hero-thumb{
      width:112px;
      flex-shrink:0;
      cursor:pointer;
      border-radius:8px;
      overflow:hidden;
      border:2px solid transparent;
      position:relative;
      background:var(--panel-2);
      transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    body.discover-active .hero-thumb img{
      width:100%;height:160px;object-fit:cover;display:block;
    }
    body.discover-active .hero-thumb .hero-thumb-title{
      position:absolute;left:0;right:0;bottom:0;
      padding:7px 6px 6px;
      font-family:'Montserrat',sans-serif;
      font-weight:700;
      font-size:10px;
      line-height:1.25;
      color:#fff;
      background:linear-gradient(0deg, rgba(0,0,0,0.88), rgba(0,0,0,0));
    }
    body.discover-active .hero-thumb.active{
      border-color:var(--leaf-light);
      transform:translateY(-3px);
      box-shadow:0 8px 20px rgba(0,0,0,0.5);
    }
    body.discover-active .hero-thumb:hover{
      transform:translateY(-5px) scale(1.04);
      box-shadow:0 10px 24px rgba(0,0,0,0.55);
      z-index:3;
    }
    body.discover-active .hero-carousel-next{
      width:34px;height:34px;
      border-radius:50%;
      background:rgba(0,0,0,0.65);
      border:1px solid rgba(255,255,255,0.2);
      color:#fff;
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;
      cursor:pointer;
      transition:background 0.15s ease;
    }
    body.discover-active .hero-carousel-next:hover{
      background:rgba(0,0,0,0.85);
    }
    body.discover-active .discover-tabs{
      padding:22px 44px 16px;
      overflow-x:visible;
    }
    body.discover-active .dtab{
      font-size:13px;
      padding:9px 18px;
    }
    body.discover-active .discover-body{
      padding:6px 44px 60px;
    }
    body.discover-active .discover-note{
      text-align:left;
      font-size:13px;
    }
    body.discover-active .genre-chips{
      margin-bottom:20px;
    }
    body.discover-active .poster-grid,
    /* Desktop: the Popular tab uses the normal uniform grid */
    body.discover-active .discover-feature-row,
    body.discover-active .discover-grid-tight,
    body.discover-active .discover-grid-roomy{
      grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
      gap:22px;
      margin-bottom:0;
    }
    body.discover-active .poster-card .poster-title{
      font-size:13px;
      padding:26px 10px 10px;
    }

    /* Shelves by default; "View all" shows the tabs+grid expanded with a back link */
    /* The whole Home screen scrolls as one page */
    body.discover-active .discover{
      overflow-y:auto;
      overflow-x:hidden;
    }
    body.discover-active .discover-shelves{
      display:flex;
      flex-direction:column;
      gap:36px;
      width:100%;
      max-width:1400px;
      margin:0 auto;
      /* clears the fixed 64px bar */
      padding:84px 44px 60px;
      box-sizing:border-box;
    }
    body.discover-active .discover-tabs,
    body.discover-active .discover-body{
      display:none;
    }
    body.discover-active.discover-expanded .discover-shelves{
      display:none;
    }
    body.discover-active.discover-expanded .discover-tabs{
      display:flex;
    }
    body.discover-active.discover-expanded .discover-body{
      display:block;
    }
    body.discover-active.discover-expanded .shelf-back-btn{
      display:inline-flex;
      align-items:center;
      gap:6px;
      width:fit-content;
      margin:20px 0 0 44px;
      padding:9px 16px;
      background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:999px;
      color:var(--text);
      font-family:'Montserrat',sans-serif;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
    }
    body.discover-active.discover-expanded .shelf-back-btn:hover{
      border-color:rgba(255,255,255,0.3);
    }

    .shelf-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:16px;
      margin-bottom:14px;
    }
    .shelf-title-group{
      display:flex;
      align-items:baseline;
      gap:10px;
      flex-wrap:wrap;
    }
    .shelf-title{
      font-family:'Montserrat',sans-serif;
      font-weight:800;
      font-size:21px;
      letter-spacing:0.3px;
      color:#fff;
      margin:0;
    }
    .shelf-caption{
      font-size:12px;
      color:var(--muted);
    }
    .shelf-viewall{
      font-size:13px;
      font-weight:700;
      color:var(--leaf-light);
      cursor:pointer;
      background:none;
      border:none;
      white-space:nowrap;
      font-family:'Montserrat',sans-serif;
      padding:0;
      flex-shrink:0;
    }
    .shelf-viewall:hover{
      text-decoration:underline;
    }
    /* Lets the arrows sit over the row's edges */
    .shelf-row-wrap{
      position:relative;
    }
    .shelf-row{
      display:flex;
      gap:24px;
      overflow-x:auto;
      padding-bottom:8px;
      /* Hide the scrollbar (Firefox and Chrome) */
      scrollbar-width:none;
    }
    .shelf-row::-webkit-scrollbar{display:none;}
    /* Shelf arrows: show on hover, hidden at either end */
    .shelf-arrow{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:34px;height:34px;
      border-radius:50%;
      background:rgba(0,0,0,0.65);
      border:1px solid rgba(255,255,255,0.2);
      color:#fff;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;
      z-index:2;
      opacity:0;
      transition:background 0.15s ease, opacity 0.15s ease;
      pointer-events:none;
    }
    .shelf-row-wrap:hover .shelf-arrow{
      opacity:1;
      pointer-events:auto;
    }
    .shelf-arrow:hover{background:rgba(0,0,0,0.85);}
    .shelf-arrow.hide{display:none;}
    .shelf-arrow-left{left:-6px;}
    .shelf-arrow-right{right:-6px;}
    .shelf-arrow svg{width:16px;height:16px;}
    /* 259x345 cards, 24px gap */
    .shelf-row .poster-card{
      flex:0 0 259px;
      width:259px;
      aspect-ratio:259/345;
      transition:transform 0.22s ease, box-shadow 0.22s ease;
    }
    .shelf-row .poster-card:hover{
      transform:translateY(-8px) scale(1.06);
      box-shadow:0 16px 34px rgba(0,0,0,0.6);
      z-index:5;
    }
    /* Shelf titles show on hover only */
    .shelf-row .poster-card .poster-title{
      opacity:0;
      transition:opacity 0.22s ease;
    }
    .shelf-row .poster-card:hover .poster-title{
      opacity:1;
    }

    /* ----- For You: desktop layout -----
       Video as a centered panel, actions and info beside it */
    body.feed-active #feed{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:44px;
      padding:0 44px;
      box-sizing:border-box;
    }
    body.feed-active .feed-stage{
      display:block;
      position:relative;
      flex-shrink:0;
      width:auto;
      height:min(82vh, 780px);
      aspect-ratio:340/706;
      overflow:hidden;
      box-shadow:0 20px 60px -20px rgba(0,0,0,0.6);
    }
    /* Anchored to the bottom, not centered */
    body.feed-active .actionrail{
      position:static;
      right:auto;
      bottom:auto;
      flex-shrink:0;
      align-self:flex-end;
      margin-bottom:64px;
    }
    body.feed-active .info{
      position:static;
      left:auto;
      right:auto;
      bottom:auto;
      width:min(320px, 26vw);
      max-width:360px;
      flex-shrink:0;
      align-self:flex-end;
      margin-bottom:64px;
    }
    body.feed-active .info .title{
      font-size:34px;
    }
    body.feed-active .info .synopsis{
      max-width:none;
      font-size:14px;
    }
    /* Desktop For You keeps its simple look: info panel hidden while watching */
    body.feed-active .feed.watching .epbadge,
    body.feed-active .feed.watching .unlock{
      display:none;
    }

    /* ----- Watch page (desktop) -----
       Fixed back button, full-height video, fixed-width scrolling info column */
    .watch-back{
      position:absolute;
      top:24px;left:24px;
      z-index:5;
      width:44px;height:44px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(0,0,0,0.5);
      border:1px solid rgba(255,255,255,0.15);
      border-radius:50%;
      color:#fff;
      cursor:pointer;
    }
    .watch-back:hover{background:rgba(0,0,0,0.7);}
    .watch-back svg{width:22px;height:22px;}

    .watch-layout{
      display:flex;
      height:100%;
      padding:0 44px;
      box-sizing:border-box;
    }
    .watch-player{
      flex:1;
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .watch-player-box{
      height:100%;
      aspect-ratio:340/706;
      overflow:hidden;
      background:#000;
      position:relative;
    }
    /* Mute button in the video's top-left corner */
    .watch-player-box .mutebtn{
      top:14px;left:14px;
    }
    .watch-player-inner{
      width:100%;height:100%;
      position:relative;
    }
    .watch-player-inner iframe,
    .watch-player-inner video{
      width:100%;height:100%;border:none;display:block;object-fit:cover;
    }
    /* Shown only while paused */
    .watch-video-controls{
      display:none;
      position:absolute;
      left:16px;right:16px;
      bottom:16px;
      z-index:20;
      align-items:center;
      gap:10px;
    }
    .watch-player-box.has-video.paused .watch-video-controls{
      display:flex;
    }
    /* Loader while the episode's video gets ready */
    .watch-player-loading{
      position:absolute;inset:0;
      display:flex;align-items:center;justify-content:center;
      background:#000;
    }
    .watch-player-inner:empty::before{
      content:"Select an episode to play";
      display:flex;
      align-items:center;
      justify-content:center;
      height:100%;
      color:var(--muted);
      font-family:'Montserrat',sans-serif;
      font-size:13px;
      text-align:center;
      padding:0 20px;
      box-sizing:border-box;
    }

    /* 480px info column (this is what scrolls) */
    .watch-info{
      flex-shrink:0;
      width:480px;
      height:100%;
      overflow-y:auto;
      box-sizing:border-box;
      padding:32px 8px 60px 40px;
    }
    .watch-breadcrumb{
      font-family:'Montserrat',sans-serif;
      font-weight:600;
      font-size:12px;
      color:var(--muted);
      margin-bottom:18px;
    }
    .watch-breadcrumb span{color:var(--text);}
    .watch-title{
      font-family:'Montserrat',sans-serif;
      font-weight:800;
      font-size:20px;
      color:#fff;
      margin:0 0 18px;
      line-height:1.3;
    }
    .watch-tags{
      display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;
    }
    .watch-tag{
      background:var(--leaf);
      color:#0D130E;
      font-family:'Montserrat',sans-serif;
      font-weight:700;
      font-size:12px;
      padding:5px 12px;
      border-radius:999px;
    }
    /* Action row with counts */
    .watch-actions{
      display:flex;
      justify-content:space-around;
      padding:16px 0;
      margin-bottom:22px;
      border-top:1px solid rgba(255,255,255,0.08);
      border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .watch-action{
      display:flex;flex-direction:column;align-items:center;gap:6px;
      background:none;
      border:none;
      color:var(--muted);
      font-family:'Montserrat',sans-serif;
      font-weight:600;
      font-size:12px;
      cursor:pointer;
    }
    .watch-action svg{width:22px;height:22px;}
    .watch-action:hover{color:var(--text);}
    .watch-action.active{color:var(--leaf-light);}
    .watch-action.active svg{fill:var(--leaf-light);}

    /* Range tabs (long series only) */
    .watch-ep-ranges{
      display:flex;gap:18px;
      margin-bottom:16px;
    }
    .watch-ep-ranges:empty{display:none;margin:0;}
    .watch-range-tab{
      background:none;border:none;
      color:var(--muted);
      font-family:'Montserrat',sans-serif;
      font-weight:700;
      font-size:13px;
      padding:0 0 6px;
      cursor:pointer;
      border-bottom:2px solid transparent;
    }
    .watch-range-tab.active{color:var(--leaf-light);border-bottom-color:var(--leaf);}

    /* 6 columns, ~62x46 cells */
    .watch-episode-grid{
      display:grid;
      grid-template-columns:repeat(6, 1fr);
      gap:6px;
    }
    .watch-ep-card{
      position:relative;
      height:46px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:6px;
      color:var(--text);
      font-family:'Montserrat',sans-serif;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
    }
    .watch-ep-card:hover{border-color:var(--leaf);}
    .watch-ep-card.active{
      background:var(--leaf);
      border-color:var(--leaf);
      color:#0D130E;
    }
    .watch-ep-card.locked{
      color:var(--muted);
    }
    .watch-ep-card.locked:hover{border-color:var(--gold);}
    /* Lock badge in the corner; number stays visible */
    .watch-ep-card-lock{
      position:absolute;
      top:3px;left:4px;
      width:10px;height:10px;
      color:var(--muted);
    }

    /* Comment drawer slides in from the right */
    .watch-comments-backdrop.open{
      display:block;
      position:fixed;
      inset:0;
      z-index:30;
      background:rgba(4,7,5,0.6);
    }
    .watch-comments-panel{
      position:absolute;
      top:0;right:0;bottom:0;
      width:420px;
      max-width:90vw;
      background:var(--panel);
      display:flex;
      flex-direction:column;
      box-shadow:-16px 0 40px rgba(0,0,0,0.5);
    }
    .watch-comments-header{
      display:flex;align-items:center;justify-content:space-between;
      flex-shrink:0;
      padding:22px 24px;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .watch-comments-header h3{
      margin:0;
      font-family:'Montserrat',sans-serif;
      font-weight:800;
      font-size:16px;
      color:#fff;
    }
    .watch-comments-close{
      display:flex;align-items:center;justify-content:center;
      width:28px;height:28px;
      background:none;
      border:none;
      color:var(--muted);
      cursor:pointer;
    }
    .watch-comments-close:hover{color:#fff;}
    .watch-comments-close svg{width:18px;height:18px;}
    .watch-comments-body{
      flex:1;
      overflow-y:auto;
      padding:24px;
    }
    /* Composer padding for the drawer */
    .watch-comments-panel .cmt-composer{
      padding:14px 24px;
    }
  }