/* ============================================================
   FlixHeaven — style.css   ·   "GLASS" minimal-futuristic theme
   Frosted glass · calm · spacious · restrained accent
   (class hooks + CSS vars kept in sync with app.js / watch.js)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ── Base (deep blue-charcoal, not flat black) ── */
  --bg:        #0a0a12;
  --bg2:       #0e0f18;
  --bg3:       #14151f;   /* card / raised */
  --bg4:       #1b1d29;

  /* ── Glass tokens ── */
  --glass:     rgba(255,255,255,.06);
  --glass-2:   rgba(255,255,255,.09);
  --glass-3:   rgba(255,255,255,.13);
  --glass-hi:  rgba(255,255,255,.10);   /* top-edge highlight */
  --hairline:  rgba(255,255,255,.10);
  --hairline-2:rgba(255,255,255,.16);
  --border:    rgba(255,255,255,.10);   /* legacy alias */
  --blur:      saturate(180%) blur(26px);

  /* ── Accent (indigo → violet, present but tasteful) ── */
  --accent:    #8b8cff;
  --accent-2:  #aab0ff;
  --accent-ink:#0a0a12;
  --accent-soft: rgba(139,140,255,.16);
  --accent-grad: linear-gradient(135deg, #6f8bff 0%, #8b7bff 48%, #c08cf0 100%);
  --accent-glow: rgba(123,124,246,.45);
  --accent-line: rgba(139,140,255,.5);
  /* ambient wash behind the glass — retinted per theme by theme.js */
  --amb-1:     rgba(111,139,255,.24);
  --amb-2:     rgba(192,140,240,.20);
  --amb-3:     rgba(111,139,255,.13);
  --hero-glow: rgba(123,124,246,.18);
  /* logo — halo arcs and the six samples "Heaven" is coloured from */
  --halo:        #aab0ff;
  --halo-dim:    #5e618c;
  --halo-glow:   rgba(170,176,255,.95);
  --halo-glow-2: rgba(139,140,255,.55);
  --halo-pool:   rgba(170,176,255,.42);
  --lm0: #7488ff; --lm1: #7e83ff; --lm2: #877dff;
  --lm3: #967efc; --lm4: #a784f7; --lm5: #b889f2;
  /* legacy aliases kept so nothing referencing them breaks */
  --accent2:   #aab0ff;
  --purple:    #8b7bff;
  --purple2:   #c08cf0;
  --pink:      #f0a6d6;

  --gold:      #f7c65a;   /* warm amber — ratings */
  --green:     #56d67f;   /* positive figures */
  --red:       #ff7a8a;   /* negative figures */
  --gold2:     #ffd777;

  /* ── Text ── */
  --text:      #f5f7fc;
  --text2:     #aab2c6;
  --text3:     #737b90;

  /* ── Shape & depth ── */
  --radius:      16px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --card-w:      166px;
  /* Watch column width. Also bounded by viewport HEIGHT so a 16:9 player plus
     its control bar always fits on screen; +56px covers the 28px gutters. */
  --watch-max:   min(1620px, 94vw, calc((100vh - 170px) * 16 / 9 + 56px));
  --shadow:    0 40px 90px -32px rgba(0,0,0,.8), 0 12px 30px -12px rgba(0,0,0,.55);
  --shadow-sm: 0 16px 40px -18px rgba(0,0,0,.6);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}

/* Ambient colored background — gives glass something to refract */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 48% at 10% -6%,  var(--amb-1) 0%, transparent 60%),
    radial-gradient(52% 48% at 94% 2%,   var(--amb-2) 0%, transparent 60%),
    radial-gradient(70% 55% at 50% 110%, var(--amb-3) 0%, transparent 62%),
    radial-gradient(38% 40% at 100% 58%, rgba(64,204,192,.07) 0%, transparent 60%),
    linear-gradient(180deg, transparent 52%, rgba(0,0,0,.42) 100%);
}
/* Fine grain texture so empty areas don't read as flat black */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#main, .watch-page-main, .auth-card, #header { position: relative; z-index: 1; }

.hidden { display: none !important; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; color: inherit; }
img { display: block; }
::selection { background: rgba(139,155,255,.3); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); background-clip: padding-box; }

/* ============================================================
   Header
   ============================================================ */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 14px 32px;
  transition: background .35s, backdrop-filter .35s, border-color .35s, padding .35s;
  border-bottom: 1px solid transparent;
}
#header.scrolled {
  background: rgba(11,12,20,.62);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom-color: var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -14px rgba(0,0,0,.6);
  padding-top: 10px; padding-bottom: 10px;
}
.header-left  { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }

/* Logo */
.logo, a.logo {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.012em;
  color: var(--text); cursor: pointer; user-select: none; white-space: nowrap;
  transition: opacity .2s;
}
/* Heaven used to be one gradient clipped to the whole word. Each letter now
   moves independently, which takes it out of the parent's text clip, so each
   carries its own sample of that gradient instead (set inline as --c). */
.logo-mark { color: var(--c, #8b7bff); }

/* Every glyph is its own box so the wave can stagger them F -> n. It runs on
   click only — hovering lights the halo but leaves the letters alone. */
.logo-l { display: inline-block; transform: translateY(0); }
.logo.lift .logo-l, .auth-site-logo.lift .logo-l {
  animation: logoLift 1.15s linear;
  animation-delay: calc(var(--i) * 34ms);
}
@keyframes logoLift {
  0%   { transform: translateY(0);    animation-timing-function: cubic-bezier(.34,1.4,.5,1); }
  30%  { transform: translateY(-4px); animation-timing-function: linear; }
  73%  { transform: translateY(-4px); animation-timing-function: cubic-bezier(.4,0,.55,1); }
  100% { transform: translateY(0); }
}
/* The i in Flix is U+0131 (dotless) and wears a halo instead of a tittle.
   Two arcs — the far one dimmed — so it reads as a ring in perspective
   rather than a flat oval. Drawn, not an image, so it stays crisp anywhere. */
.logo-i { position: relative; display: inline-block; }
.halo-far  { stroke: var(--halo-dim); }
.halo-near { stroke: var(--halo); }
.logo-halo {
  position: absolute; left: 50%; top: -.41em;
  transform: translateX(-50%) rotate(0deg);
  overflow: visible; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}

/* ── Heavenly hover ──────────────────────────────────────────
   The halo tips and blooms, a warm light pools under it, and the letters
   lift in turn from the F through to the n. */
.logo, a.logo, .auth-site-logo { position: relative; isolation: isolate; }

/* light pooling around the halo */
.logo-i::after {
  content: ''; position: absolute; left: 50%; top: -.62em;
  width: 2.4em; height: 1.5em; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--halo-pool), transparent 72%);
  opacity: 0; pointer-events: none; z-index: -1;
  transition: opacity .35s ease;
}
.logo:hover .logo-i::after, a.logo:hover .logo-i::after { opacity: 1; }

.logo:hover .logo-halo, a.logo:hover .logo-halo {
  transform: translateX(-50%) rotate(10deg) translateY(-1.5px);
  filter: drop-shadow(0 0 5px var(--halo-glow)) drop-shadow(0 0 13px var(--halo-glow-2));
}
.logo-halo { transition: transform .35s cubic-bezier(.2,.8,.3,1), filter .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .logo-halo { transition: none; }
  .logo.lift .logo-l, .auth-site-logo.lift .logo-l { animation: none; }
}


/* Notifications */
/* Same 40px circle as the collapsed search, so the header cluster stays even */
.notif-wrap { position: relative; flex-shrink: 0; }
.notif-btn {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: rgba(14,16,24,.55); border: 1px solid var(--hairline); color: var(--text2);
  cursor: pointer; transition: background .25s, border-color .25s, color .25s;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.notif-btn:hover, .notif-wrap.open .notif-btn { background: rgba(24,27,38,.7); border-color: var(--hairline-2); color: var(--text); }
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--accent-grad); border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
}

.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 340px; max-height: min(430px, 70vh); display: flex; flex-direction: column;
  background: rgba(16,17,25,.96); border: 1px solid var(--hairline-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: notifIn .18s cubic-bezier(.2,.7,.2,1);
}
@keyframes notifIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--hairline); flex-shrink: 0;
}
.notif-head strong { font-size: 14px; }
.notif-mark { background: none; border: none; color: var(--text3); font-family: inherit; font-size: 12px; cursor: pointer; transition: color .18s; }
.notif-mark:hover { color: var(--accent-2); }
.notif-list { overflow-y: auto; padding: 6px; }
.notif-empty { padding: 30px 18px; text-align: center; font-size: 13px; color: var(--text3); line-height: 1.6; }

.notif-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 10px; background: none;
  font-family: inherit; text-align: left; cursor: pointer; transition: background .16s;
}
.notif-row:hover { background: var(--glass); }
.notif-row.unread { background: var(--accent-soft); }
.notif-row.unread:hover { background: var(--accent-soft); filter: brightness(1.2); }
.notif-thumb {
  width: 38px; height: 54px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  background: var(--bg4); display: grid; place-items: center; color: var(--text3); font-size: 15px;
}
.notif-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notif-text { min-width: 0; flex: 1; }
.notif-text strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-text small { display: block; font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.notif-when { font-size: 10.5px; color: var(--text3); flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.notif-row.unread .notif-when { color: var(--accent-2); }

@media (max-width: 560px) {
  /* The bell sits mid-cluster, so anchoring the panel to it pushes a 340px
     card off the left edge. Pin it to the viewport instead. */
  .notif-panel { position: fixed; top: 62px; left: 14px; right: 14px; width: auto; }
}

/* Search */
/* Collapsed to a circle in the control cluster; widens into a field on focus */
.search-wrap {
  display: flex; align-items: center; justify-content: flex-end;
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(14,16,24,.55); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); overflow: hidden;
  transition: width .32s cubic-bezier(.2,.8,.3,1), border-color .25s, background .25s, box-shadow .25s;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.search-wrap:hover { background: rgba(24,27,38,.7); border-color: var(--hairline-2); }
.search-wrap.expanded { width: 268px; justify-content: flex-start; background: rgba(24,27,38,.78); border-color: var(--hairline-2); }
#searchInput {
  background: none; border: none; outline: none; color: var(--text);
  font-size: 13.5px; font-family: inherit;
  width: 0; padding: 0; opacity: 0; transition: width .32s cubic-bezier(.2,.8,.3,1), opacity .2s, padding .32s;
}
.search-wrap.expanded #searchInput { width: 208px; padding: 9px 6px 9px 17px; opacity: 1; }
#searchInput::placeholder { color: var(--text3); }
.search-icon-btn { background: none; border: none; color: var(--text2); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: color .2s; }
.search-icon-btn:hover { color: var(--text); }

/* Discord + online */

/* Sign-in / account pill */
.guest-pill {
  display: inline-flex; align-items: center; gap: 9px; height: 40px;
  padding: 0 16px 0 13px; border-radius: var(--radius-pill);
  background: rgba(14,16,24,.55); border: 1px solid var(--hairline);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: all .2s; white-space: nowrap;
}
.guest-pill:hover { background: rgba(24,27,38,.75); border-color: var(--hairline-2); }
.guest-icon { display: flex; color: var(--text2); }
.guest-pill:hover .guest-icon { color: var(--text); }
.online-indicator {
  display: flex; align-items: center; gap: 7px; padding: 7px 14px;
  background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
}
.online-dot { width: 7px; height: 7px; background: #56d67f; border-radius: 50%; box-shadow: 0 0 0 3px rgba(86,214,127,.16); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.online-text { font-size: 12px; color: var(--text2); font-weight: 500; white-space: nowrap; }
#onlineCount { color: var(--text); font-weight: 600; }

/* User pill */
.user-pill { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--radius-pill); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), #6f7ff0); color: #0a0b0f;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 500; color: var(--text2); }
.user-signout-btn { font-size: 12px; padding: 6px 13px; }
.user-signin-btn  { font-size: 13px; padding: 9px 20px; }

/* ============================================================
   Buttons — pill, minimal
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; border: 1px solid transparent;
  font-family: inherit; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s, opacity .2s, color .2s;
}
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 8px 24px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); filter: brightness(1.06); }
.btn-secondary { background: var(--glass-2); color: var(--text); border-color: var(--hairline); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--glass-hi); }
.btn-secondary:hover { background: var(--glass-3); border-color: var(--hairline-2); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text2); border-color: var(--hairline); }
.btn-ghost:hover { color: var(--text); border-color: var(--hairline-2); background: var(--glass); }
.btn-ghost.in-list { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-soft); }

/* ============================================================
   Hero — full-bleed, minimal
   ============================================================ */
.hero { position: relative; height: 60vh; min-height: 440px; max-height: 620px; display: flex; align-items: flex-end; padding: 0 40px 48px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #241d44 0%, #171634 45%, #0d0c1c 100%);
  background-size: cover; background-position: center 16%;
  transition: opacity .6s ease;
}
/* ── Hero trailer: muted YouTube backdrop, cropped to fill ── */
/* visibility flips instantly in both directions while opacity only fades IN, so a
   player that stops is pulled off screen before any overlay can be seen */
.hero-trailer { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s; pointer-events: none !important; user-select: none; }
.hero-trailer.is-on { opacity: 1; visibility: visible; }
.hero-trailer iframe {
  position: absolute; top: 50%; left: 50%;
  /* Every dimension is 2.2x life size and then scaled back down by the same
     factor, so the rendered geometry is unchanged (2.2 x .659 = 1.45, the crop
     that keeps YouTube's title bar and control strip outside the hero).
     The point is that YouTube lays its player out against the LARGE size: its
     centre play/pause indicator is close to a fixed pixel size, so shrinking
     the whole thing afterwards leaves that button far smaller on screen. */
  width: 220vw; height: 123.75vw;             /* 16:9 keyed off width… */
  min-width: 391.1vh; min-height: 220%;       /* …then off height, so it always covers */
  border: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.659);
}
.hero-mute {
  position: absolute; right: 40px; bottom: 48px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10,10,18,.5); border: 1px solid var(--hairline-2); color: var(--text);
  cursor: pointer; transition: all .2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-mute:hover { background: rgba(10,10,18,.75); border-color: var(--text3); transform: scale(1.06); }

.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 1%, rgba(10,10,18,.5) 32%, rgba(10,10,18,.05) 66%),
    linear-gradient(to right, rgba(10,10,18,.8) 0%, rgba(10,10,18,.32) 46%, transparent 76%);
}
.hero::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 65%; height: 72%; pointer-events: none;
  background: radial-gradient(68% 82% at 22% 100%, var(--hero-glow) 0%, transparent 70%);
}
.hero-content { position: relative; z-index: 2; max-width: 620px; animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline); color: var(--text2);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; padding: 6px 13px; border-radius: var(--radius-pill); text-transform: uppercase;
}
.hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 66px); font-weight: 700; line-height: 1.02;
  margin-bottom: 18px; letter-spacing: -.02em;
}
/* With artwork the heading holds an image instead of text, so drop the leading
   the type size would otherwise reserve. */
.hero-content h1.has-logo { line-height: 0; }
.hero-logo {
  display: block; width: auto; height: auto;
  max-width: min(520px, 88%); max-height: clamp(84px, 11vw, 150px);
  object-fit: contain; filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
}
@media (max-width: 700px) { .hero-logo { max-width: 78%; max-height: 84px; } }

.hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; font-size: 13.5px; color: var(--text2); }
.hero-meta .star { color: var(--gold); font-weight: 600; }
.hero-meta > span { display: inline-flex; align-items: center; }
.hero-meta > span + span::before { content: '·'; margin-right: 10px; color: var(--text3); }
.hero-desc { font-size: 16px; color: var(--text2); line-height: 1.6; margin-bottom: 30px; max-width: 90%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-btns { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
/* icon-only + / check, sized to match the text buttons beside it */
/* Square box + 50% radius = a true circle, matching the 44px height the
   text buttons get from their padding. */
/* One height for the whole row — Play and Details were 43px and 41px, so the
   circle had nothing consistent to match. */
.hero-btns .btn { min-height: 44px; }

/* The hero uses the poster control, so undo its absolute positioning and
   hover-to-reveal, and scale it up to sit beside the text buttons. */
.hero-wl-host { display: inline-flex; flex-shrink: 0; }
/* .card-wl sets position:absolute later in the file, so this needs the extra
   specificity to win — otherwise the control pins to the hero's corner. */
.hero-wl-host .card-wl.hero-wl-ctrl { position: static; top: auto; right: auto; left: auto; }
.hero-wl-host .card-wl-btn {
  width: 44px; height: 44px; opacity: 1; padding: 0; border-radius: 50%;
  background: var(--glass-2); border: 1px solid var(--hairline-2); color: var(--text);
}
.hero-wl-host .card-wl-btn:hover { background: var(--glass-3); transform: none; }
.hero-wl-host .card-wl-btn svg { width: 20px; height: 20px; }
.hero-wl-host .card-wl.in-list .card-wl-btn { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.hero-wl-host .cw-pen { display: none; }
.hero-wl-host .cw-plus { display: flex; }
#heroContent { transition: opacity .45s ease; }
#heroBg { transition: opacity .45s ease; }
.hero-dots { display: flex; gap: 8px; margin-top: 26px; }
.hero-dot { width: 22px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); border: none; cursor: pointer; transition: all .35s ease; padding: 0; }
.hero-dot.active { width: 40px; background: var(--text); }

/* ============================================================
   Rows + cards
   ============================================================ */
main { padding-top: 0; }
.rows-area { padding: 24px 0 54px; margin-top: 0; position: relative; z-index: 3; }
.row-section { margin-bottom: 28px; padding: 0 40px; }
.row-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 13px; color: var(--text); }
.slider-outer { position: relative; }
.card-row { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 2px 6px; scrollbar-width: none; }
.card-row::-webkit-scrollbar { display: none; }
.slide-btn {
  position: absolute; top: calc(50% - 24px); transform: translateY(-50%);
  z-index: 10; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hairline); background: rgba(10,11,15,.55); color: var(--text);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all .2s; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); opacity: 0;
}
.slider-outer:hover .slide-btn { opacity: 1; }
.slide-btn:hover { background: rgba(20,22,30,.9); border-color: var(--hairline-2); }
.slide-btn.left  { left: -12px; }
.slide-btn.right { right: -12px; }

/* Card = poster + caption below (always visible, minimal) */
/* min-width:0 stops a long .card-title (white-space:nowrap) from inflating
   the flex item past its basis and scaling the whole card up. */
.card { flex: 0 0 var(--card-w); min-width: 0; cursor: pointer; position: relative; background: none; border: none; }
.card .poster {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background: var(--bg3); border: 1px solid var(--hairline);
  aspect-ratio: 2/3; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.card:hover .poster { transform: translateY(-6px); box-shadow: 0 24px 46px -18px rgba(0,0,0,.75), 0 0 34px -10px var(--accent-glow); border-color: var(--hairline-2); }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg3); transition: transform .5s ease; }
.card:hover .card-img { transform: scale(1.05); }
.card-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%; aspect-ratio: 2/3;
  background: linear-gradient(155deg, var(--bg3), var(--bg4));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px; font-size: 12.5px; color: var(--text3); text-align: center; line-height: 1.4;
}
.card-placeholder .ph-icon { font-size: 26px; opacity: .7; }
.card-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10,11,15,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; padding-left: 3px;
  opacity: 0; transition: opacity .3s, transform .3s; z-index: 2;
}
.card:hover .card-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.card-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(10,11,15,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text2); font-size: 9px; font-weight: 600; letter-spacing: .1em;
  padding: 4px 8px; border-radius: 6px; text-transform: uppercase; border: 1px solid var(--hairline);
}
.card-info { padding: 11px 2px 2px; }
.card-title { font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { font-size: 12px; color: var(--text3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.card-sub .star { color: var(--gold); }

/* Continue-watching progress + remove buttons */
.continue-bar-bg { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.14); z-index: 2; }
.continue-bar { height: 100%; background: var(--accent); }
.continue-remove-btn, .watchlist-remove-btn {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(10,11,15,.6); border: 1px solid var(--hairline-2);
  color: var(--text); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .2s; opacity: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.card:hover .continue-remove-btn, .card:hover .watchlist-remove-btn { opacity: 1; }
.continue-remove-btn:hover, .watchlist-remove-btn:hover { background: rgba(240,120,120,.85); border-color: transparent; color: #fff; }

/* ============================================================
   Page views (Movies / TV / Watchlist / Search)
   ============================================================ */
.page-view { padding: 94px 0 56px; animation: fadeUp .5s ease both; }
.page-header { padding: 0 40px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.page-header h1 { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.genre-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.genre-pill { padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--glass); color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; }
.genre-pill:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.genre-pill.active { background: var(--accent-grad); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 6px 18px -8px var(--accent-glow); }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 22px 16px; padding: 0 40px; }
.content-grid .card { flex: none; width: 100%; }
.empty-msg { text-align: center; color: var(--text3); font-size: 15px; padding: 80px 40px; }

/* Pagination */
.pagination-wrap, .load-more-wrap { display: flex; justify-content: center; padding: 40px 0 20px; }
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.page-btn { min-width: 40px; height: 40px; padding: 0 12px; background: var(--glass); border: 1px solid var(--hairline); border-radius: 12px; color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .18s; }
.page-btn:hover:not(.disabled):not(.active) { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.page-btn.active { background: var(--accent-grad); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 6px 18px -8px var(--accent-glow); }
.page-btn.disabled { opacity: .3; cursor: default; }
.page-ellipsis { color: var(--text3); padding: 0 4px; }
.page-info { font-size: 12px; color: var(--text3); margin-left: 12px; }
.load-more-btn { padding: 13px 40px; }

/* ============================================================
   Modal — glass
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(6,7,10,.62); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  position: relative; background: rgba(20,22,32,.72);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 24px; border: 1px solid var(--hairline-2);
  max-width: 900px; width: 100%; max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  animation: slideUp .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.modal-close-btn {
  position: absolute; top: 16px; right: 16px; z-index: 12;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10,11,15,.5); border: 1px solid var(--hairline); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: all .2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-close-btn:hover { background: rgba(20,22,30,.92); border-color: var(--text3); transform: rotate(90deg) scale(1.05); }
.modal-backdrop { position: absolute; inset: 0 0 auto 0; height: 320px; overflow: hidden; background: linear-gradient(135deg, #14151d, #0f1017); background-size: cover; background-position: center 28%; }
.modal-backdrop::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14,15,22,.30) 0%, rgba(14,15,22,.62) 55%, rgba(16,17,25,1) 100%),
    linear-gradient(to right, rgba(14,15,22,.72) 0%, rgba(14,15,22,.10) 60%); }

.modal-kicker {
  position: absolute; top: 22px; left: 26px; z-index: 4;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62);
}

.modal-scroll-body { overflow-y: auto; flex: 1; position: relative; z-index: 2; }
.modal-main { display: flex; gap: 30px; padding: 92px 34px 0; position: relative; }
.modal-poster { width: 182px; flex-shrink: 0; aspect-ratio: 2/3; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--hairline-2); box-shadow: 0 30px 60px -22px rgba(0,0,0,.95); align-self: flex-start; }
.modal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 72px; }

.modal-logo { margin-bottom: 16px; }
.modal-logo-img { max-width: min(360px, 100%); max-height: 108px; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.7)); }
.modal-title { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.06;
  letter-spacing: -.022em; text-shadow: 0 2px 16px rgba(0,0,0,.6); }

.modal-facts { display: flex; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--text2); margin-bottom: 26px; }
.mf-dot { margin: 0 10px; color: var(--text3); opacity: .7; }
.mf-match { font-weight: 700; color: var(--green); }
.mf-match.is-ok  { color: var(--gold); }
.mf-match.is-bad { color: var(--red); }
.mf-cert { border: 1px solid var(--hairline-2); border-radius: 5px; padding: 1px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text); }
.mf-star { color: var(--gold); font-weight: 600; }

/* ── Action buttons ── */
.modal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px;
  border-radius: var(--radius-pill); border: 1px solid transparent; font-family: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .18s; white-space: nowrap; }
.mb-play { background: #fff; color: #0a0b0f; }
.mb-play:hover { background: rgba(255,255,255,.86); }
.mb-list { background: rgba(30,33,45,.9); border-color: var(--hairline-2); color: var(--text); }
.mb-list:hover { background: rgba(44,48,64,.95); }
.mb-icon { width: 44px; padding: 0; background: rgba(30,33,45,.9); border-color: var(--hairline-2); color: var(--text); }
.mb-icon:hover { background: rgba(44,48,64,.95); }
.mb-icon.hidden { display: none; }
.mb-caret { opacity: .7; transition: transform .18s; }

.mb-listwrap { position: relative; }
.mb-listwrap.open .mb-caret { transform: rotate(180deg); }
.mb-listwrap.in-list .mb-list { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.mb-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 168px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--bg4); border: 1px solid var(--hairline-2); border-radius: 13px;
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top left;
  transition: opacity .15s ease, transform .16s cubic-bezier(.2,.8,.3,1), visibility .16s; }
.mb-listwrap.open .mb-menu { opacity: 1; visibility: visible; transform: none; }

/* ── Lower sheet ── */
.modal-sheet { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 34px;
  padding: 30px 34px 34px; margin-top: 28px; border-top: 1px solid var(--hairline); }
.ms-label { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); margin-bottom: 9px; }
.ms-label:empty { display: none; }
.ms-side .ms-label:not(:first-child) { margin-top: 20px; }
.ms-value { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.55; }
.ms-value:empty { display: none; }
.modal-desc { font-size: 14.5px; color: var(--text2); line-height: 1.72; }

@media (max-width: 900px) {
  .modal-main { flex-direction: column; gap: 18px; padding: 150px 20px 0; }
  .modal-poster { width: 122px; }
  .modal-info { padding-top: 0; }
  .modal-title { font-size: 26px; }
  .modal-logo-img { max-height: 78px; }
  .modal-sheet { grid-template-columns: minmax(0,1fr); gap: 22px; padding: 24px 20px 28px; margin-top: 22px; }
  .modal-backdrop { height: 250px; }
}

/* Episode selector */
/* ── Season / episode pickers ── */
.episode-selector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin-bottom: 22px; }
.ep-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ep-label { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.ep-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ep-pick { position: relative; }
.ep-trigger { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--bg3); border: 1px solid var(--hairline); border-radius: 11px; color: var(--text); padding: 10px 13px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .16s, background .16s; }
.ep-trigger:hover { background: var(--bg4); border-color: var(--hairline-2); }
.ep-pick.open .ep-trigger { border-color: var(--accent); background: var(--bg4); }
.ep-trigger.is-busy { color: var(--text3); cursor: default; }
.ep-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-caret { flex: 0 0 auto; opacity: .6; transition: transform .18s; }
.ep-pick.open .ep-caret { transform: rotate(180deg); }

.ep-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--bg4); border: 1px solid var(--hairline-2); border-radius: 13px; box-shadow: 0 24px 48px -20px rgba(0,0,0,.85); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center; transition: opacity .15s ease, transform .16s cubic-bezier(.2,.8,.3,1), visibility .16s; }
.ep-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.ep-menu::-webkit-scrollbar { width: 8px; }
.ep-menu::-webkit-scrollbar-thumb { background: var(--glass-3); border-radius: 999px; }
.ep-menu { scrollbar-width: thin; scrollbar-color: var(--glass-3) transparent; }

/* flex: 0 0 auto — in a max-height flex column the items otherwise shrink
   below their line height and the labels get sliced in half */
.ep-option { flex: 0 0 auto; min-height: 0; text-align: left; background: none; border: none; color: var(--text2); font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.35; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-option:hover { background: var(--glass-2); color: var(--text); }
.ep-option.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

/* Skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--bg3); }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.6s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-card { flex: 0 0 var(--card-w); aspect-ratio: 2/3; border-radius: var(--radius-card); }

/* ============================================================
   Watch page
   ============================================================ */
.watch-page-body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; }
.watch-main { padding-top: 78px; display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 78px); width: 100%; }
.stage { width: 100%; display: flex; justify-content: center; padding: 24px 0 0; }
.player-shell { width: 100%; max-width: var(--watch-max); padding: 0 28px; }
.watch-frame-wrap { width: 100%; aspect-ratio: 16/9; height: auto; background: #000; overflow: hidden; position: relative; border: 1px solid var(--hairline); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; }
.watch-frame-wrap iframe { width: 100%; height: 100%; display: block; border: 0; }
/* Native "Flex" player (our worker + hls.js) fills the same frame as the embed. */
.watch-frame-wrap video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.native-note {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 80%; text-align: center; line-height: 1.5;
  color: #e6e9ef; font-size: 14px; font-weight: 600;
  background: rgba(0, 0, 0, .6); padding: 12px 18px; border-radius: 12px;
  pointer-events: none; z-index: 2;
}
.src-menu-head-alt { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hairline); }
/* Without these the author aspect-ratio wins over the UA's :fullscreen rule and
   the player sits in a 16/9 band instead of filling the screen. */
.watch-frame-wrap:fullscreen,
.watch-frame-wrap:-webkit-full-screen {
  aspect-ratio: auto; width: 100%; height: 100%;
  border: none; border-radius: 0; background: #000;
}
/* Fallback path: the whole page went fullscreen, so strip it back to the
   player and pin the controls to the bottom. */
body.fs-page #header,
body.fs-page .watch-content,
body.fs-page .watch-episodes,
body.fs-page .src-bar { display: none !important; }
body.fs-page .watch-main { padding: 0; }
body.fs-page .stage { padding: 0; }
body.fs-page .player-shell { max-width: none; padding: 0; }
body.fs-page .watch-frame-wrap {
  aspect-ratio: auto; height: 100vh; width: 100vw;
  border: none; border-radius: 0;
}
body.fs-page .player-ctrl-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  border-radius: 0; border-left: none; border-right: none;
}
.watch-content { width: 100%; max-width: var(--watch-max); margin: 0 auto; padding: 26px 28px 90px; display: flex; flex-direction: column; gap: 30px; }
/* "You're Watching" bubble in the header. Both sides flex so it sits dead
   centre; the dot is driven by the player's own reports (nwState in watch.js). */
.watch-page-body .header-left,
.watch-page-body .header-right { flex: 1 1 0; min-width: auto; }   /* never narrower than the logo / Home */
.now-watching {
  --nw: var(--text3);
  --nw-ramp: linear-gradient(90deg, var(--lm0), var(--lm2), var(--lm5));
  position: relative;
  display: flex; align-items: center; gap: 18px; min-width: 0; max-width: 560px;
  padding: 6px 16px 6px 22px;
  background: var(--glass); border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 22px -8px var(--halo-glow-2);
}
/* Outline in the logo's "Heaven" colours. Masked to a ring so the glass inside
   stays see-through, and theme.js retints --lm0..5 so it follows the theme. */
.now-watching::before {
  content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: var(--nw-ramp);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.now-watching[data-state="playing"] { --nw: var(--green); }
.now-watching[data-state="paused"]  { --nw: var(--gold); }
.now-watching[data-state="error"],
.now-watching[data-state="stalled"],
.now-watching[data-state="offline"] { --nw: var(--red); }
/* Set like the wordmark: "You're Watching" is the white Flix half, the title
   is the gradient Heaven half. */
.nw-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; font-family: var(--font-display); font-weight: 700; letter-spacing: -.012em; }
.nw-eyebrow { font-size: 12.5px; color: var(--text); white-space: nowrap; }
.nw-title { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: 15px; }
.nw-quote { display: flex; min-width: 0; background: var(--nw-ramp); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nw-quote::before { content: '\201C'; }
.nw-quote::after  { content: '\201D'; }
.nw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-ep { flex: none; font-size: 12px; font-weight: 500; color: var(--text2); }
.nw-ep:empty { display: none; }
.nw-status { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 48px; }
.nw-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--nw); transition: background .3s; }
.nw-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--nw); opacity: .2; transition: background .3s; }
.nw-label { font-size: 10.5px; font-weight: 600; color: var(--nw); white-space: nowrap; transition: color .3s; }
.now-watching[data-state="playing"] .nw-dot::after { animation: nwPing 1.8s ease-out infinite; }
.now-watching[data-state="loading"] .nw-dot { animation: pulse 1.4s ease-in-out infinite; }
@keyframes nwPing { from { transform: scale(.7); opacity: .55; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nw-dot, .nw-dot::after { animation: none !important; } }
@media (max-width: 560px) {
  /* Logo, bubble and Home share ~340px here, so the bubble tightens up and the
     title truncates rather than riding over the logo. */
  .watch-page-body #header { gap: 10px; }
  .watch-home-btn { padding: 8px 13px; }
  .now-watching { gap: 10px; padding: 5px 12px 5px 15px; }
  .nw-eyebrow { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .nw-title { font-size: 13px; }
  .nw-status { min-width: 0; }
  /* dot only; the word stays for screen readers */
  .nw-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.watch-back-btn, .watch-home-btn { font-size: 13px; }

/* Player mini bar */
.player-ctrl-bar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline); border-top: none; padding: 8px 12px; border-radius: 0 0 var(--radius) var(--radius); }
.pctrl-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--text2); font-size: 12.5px; font-weight: 500; padding: 7px 11px; border-radius: 9px; cursor: pointer; transition: all .18s; white-space: nowrap; font-family: inherit; }
.pctrl-btn:hover { background: var(--glass-2); color: var(--text); }
.pctrl-sep { width: 1px; height: 18px; background: var(--hairline); margin: 0 6px; flex-shrink: 0; }
/* the reload icon turns once, so a retry on an already-dead stream still
   registers as something having happened */
@keyframes pctrlSpin { to { transform: rotate(360deg); } }
.pctrl-btn.pctrl-spin svg { animation: pctrlSpin .7s cubic-bezier(.3,.6,.3,1); }
@media (prefers-reduced-motion: reduce) { .pctrl-btn.pctrl-spin svg { animation: none; } }

/* AutoNext overlay */
#anOv { position: fixed; bottom: 88px; right: 24px; z-index: 999; animation: fadeIn .3s ease; }
.an-box { background: rgba(18,20,27,.86); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline-2); border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow); min-width: 220px; }
.an-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--text3); text-transform: uppercase; margin-bottom: 7px; }
.an-msg { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.an-btns { display: flex; gap: 8px; }
.an-play, .an-cancel { padding: 8px 16px !important; font-size: 13px !important; }

/* Focus / theater mode */

/* Controls bar */
.watch-controls-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline); border-radius: 0 0 var(--radius) var(--radius); padding: 12px 16px; margin-bottom: 14px; }

/* Shared player controls */
.ctrl-group { display: flex; align-items: center; gap: 10px; }
.ctrl-label { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--text3); text-transform: uppercase; }
.ctrl-label-note { font-size: 9px; font-weight: 500; color: var(--text3); opacity: .65; text-transform: none; }
.btn-group { display: flex; gap: 5px; flex-wrap: wrap; }
.ctrl-btn { background: var(--glass); border: 1px solid var(--hairline); color: var(--text2); padding: 7px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .18s; position: relative; z-index: 10; font-family: inherit; }
.ctrl-btn:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.ctrl-btn.active { background: var(--accent-grad); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px var(--accent-glow); }
.ctrl-btn.dub-active { background: linear-gradient(135deg, #f0a6d6, #c08cf0); border-color: transparent; color: #fff; font-weight: 600; }
.ctrl-help-text { margin-left: auto; font-size: 12px; color: var(--text3); line-height: 1.4; max-width: 300px; text-align: right; }
.ctrl-help-text p { margin: 0; }
.ctrl-help-text a { color: var(--accent-2); transition: color .2s; }
.ctrl-help-text a:hover { color: var(--text); text-decoration: underline; }

/* Legacy player overlay */
.player-overlay { position: fixed; inset: 0; z-index: 300; background: #000; display: flex; flex-direction: column; }
.player-overlay.hidden { display: none; }
.player-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: rgba(10,11,15,.9); border-bottom: 1px solid var(--hairline); gap: 20px; flex-wrap: wrap; }
.player-title { font-size: 14px; font-weight: 500; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.player-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.player-close-btn { background: var(--glass-2); border: 1px solid var(--hairline); color: var(--text); padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.player-close-btn:hover { background: var(--glass-3); }
.player-overlay iframe { flex: 1; width: 100%; border: none; }

/* Legacy episode/info panels */
.watch-episode-panel { margin-bottom: 20px; background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px; }
.watch-ep-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--text); }
.watch-ep-controls { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ep-input-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.ep-input-group label { font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--text3); text-transform: uppercase; }
.ep-input-group select { background: var(--bg3); color: var(--text); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; appearance: none; font-family: inherit; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7aebf' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 17px; padding-right: 34px; }
.ep-input-group select:hover, .ep-input-group select:focus { outline: none; border-color: var(--hairline-2); }
.ep-play-btn { flex-shrink: 0; white-space: nowrap; min-width: 110px; height: 42px; }
.watch-info-section { background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 24px; }
.watch-info-inner { display: flex; gap: 24px; }
.watch-info-poster { width: 100px; flex-shrink: 0; border-radius: 12px; object-fit: cover; align-self: flex-start; box-shadow: var(--shadow-sm); }
.watch-info-text { flex: 1; min-width: 0; }
.watch-info-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.watch-info-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.watch-info-meta span { font-size: 13px; color: var(--text2); background: var(--glass); border: 1px solid var(--hairline); padding: 4px 12px; border-radius: var(--radius-pill); }
.watch-info-meta .wi-rating { color: var(--gold); }
.watch-info-overview { font-size: 14px; color: var(--text2); line-height: 1.65; }

/* Comments */
.watch-section-heading { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 20px; color: var(--text); }
.watch-comments-section { margin-bottom: 40px; }
.comment-signin-msg { background: var(--glass); border: 1px solid var(--hairline); border-radius: 14px; padding: 20px 24px; font-size: 14px; color: var(--text2); margin-bottom: 20px; }
.comment-signin-msg a { color: var(--accent-2); }
.comment-form { background: var(--glass); border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 20px; margin-bottom: 24px; }
.comment-form-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.comment-form-user { font-size: 14px; font-weight: 600; color: var(--text); }
.comment-textarea { width: 100%; background: var(--glass); border: 1px solid var(--hairline); border-radius: 12px; color: var(--text); font-size: 14px; resize: vertical; padding: 12px 14px; min-height: 90px; font-family: inherit; transition: border-color .2s; }
.comment-textarea:focus { outline: none; border-color: var(--hairline-2); }
.comment-form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.comment-char-count { font-size: 12px; color: var(--text3); }
.comment-card { background: var(--glass); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; transition: border-color .2s; }
.comment-card:hover { border-color: var(--hairline-2); }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(150deg, var(--accent), #6f7ff0); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #0a0b0f; flex-shrink: 0; }
.comment-username { font-size: 13px; font-weight: 600; color: var(--text); }
.comment-time { font-size: 12px; color: var(--text3); margin-left: 2px; }
.comment-delete-btn { margin-left: auto; background: none; border: none; color: var(--text3); font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: all .2s; }
.comment-delete-btn:hover { color: #f08787; background: rgba(240,135,135,.12); }
.comment-body { font-size: 14px; color: var(--text2); line-height: 1.6; white-space: pre-wrap; }
.comments-loading, .comments-empty, .comments-error { font-size: 14px; color: var(--text3); padding: 24px 0; text-align: center; }

/* Seasons */
.seasons-section { width: 100%; padding: 16px; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline); border-radius: var(--radius); }
.seasons-header-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.seasons-header { font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .1em; }
.seasons-nav-btns { display: flex; gap: 8px; }
.seasons-nav-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--glass); border: 1px solid var(--hairline); color: var(--text2); font-size: 14px; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.seasons-nav-btn:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.seasons-row { width: 100%; display: flex; }
.seasons-list { display: flex; gap: 10px; overflow-x: auto; width: 100%; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.seasons-list::-webkit-scrollbar { display: none; }
.season-btn { flex-shrink: 0; padding: 16px 22px; background: var(--glass); border: 1px solid var(--hairline); border-radius: 12px; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 132px; }
.season-btn:hover { border-color: var(--hairline-2); background: var(--glass-2); }
.season-btn.active { background: var(--text); border-color: transparent; color: #0a0b0f; }
.season-btn.active .season-btn-count { color: rgba(10,11,15,.6); }
.season-btn-title { font-weight: 600; font-size: 14px; }
.season-btn-count { font-size: 12.5px; color: var(--text3); font-weight: 500; }

/* Watch grid layouts */
.watch-layout { width: 100%; display: flex; flex-direction: column; }
.watch-tv-grid { display: grid; grid-template-columns: 264px 1fr 320px; gap: 18px; padding: 20px; max-width: 1760px; margin: 0 auto; width: 100%; }
.watch-movie-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; padding: 20px; max-width: 1500px; margin: 0 auto; width: 100%; }
.watch-tv-sidebar-left { display: flex; flex-direction: column; gap: 14px; height: 600px; min-width: 0; }
.watch-tv-poster { width: 100%; flex: 1; border-radius: var(--radius); overflow: hidden; background: var(--bg3); box-shadow: var(--shadow-sm); border: 1px solid var(--hairline); }
.watch-tv-poster img { width: 100%; height: 100%; object-fit: cover; }
.watch-tv-info { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px; flex-shrink: 0; overflow-y: auto; }
.watch-tv-info h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--text); line-height: 1.3; letter-spacing: -.01em; }
.meta-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; gap: 12px; }
.meta-row:last-child { border-bottom: none; }
.meta-label { color: var(--text3); font-weight: 500; text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; flex-shrink: 0; }
.meta-value { color: var(--text2); font-weight: 500; text-align: right; }
.meta-value .star { color: var(--gold); }
.watch-tv-center { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.watch-tv-sidebar-right { display: flex; flex-direction: column; gap: 12px; height: 600px; min-width: 0; }
.episodes-header { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.episodes-header h3 { font-size: 12px; font-weight: 600; margin: 0; color: var(--text2); text-transform: uppercase; letter-spacing: .1em; }
.episodes-header select { background: var(--bg3); color: var(--text); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .2s; appearance: none; font-family: inherit; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7aebf' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 30px; }
.episodes-header select:hover, .episodes-header select:focus { outline: none; border-color: var(--hairline-2); }
.episodes-list { display: flex; flex-direction: column; gap: 6px; background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px; flex: 1; overflow-y: auto; }
.episodes-list::-webkit-scrollbar { width: 6px; }
.episodes-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.ep-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: all .18s; flex-wrap: wrap; }
.ep-item:hover { background: var(--glass-2); }
.ep-item.active { background: var(--glass-2); border-color: var(--hairline-2); }
.ep-num { font-weight: 600; color: var(--text3); font-size: 12px; min-width: 26px; text-align: center; }
.ep-item.active .ep-num, .ep-item:hover .ep-num { color: var(--accent-2); }
.ep-title { flex: 1; color: var(--text2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-item.active .ep-title, .ep-item:hover .ep-title { color: var(--text); }

/* ── Watch page (rebuilt): sources · head · episode cards ── */
/* ── Source bar (compact player header: identity left, controls right) ── */
/* z-index is required, not cosmetic: backdrop-filter makes this a stacking
   context, so the dropdown's z-index is scoped inside the bar. Without a
   z-index here the bar resolves to 0 and later siblings (the episode rail,
   the info panel) paint straight over the open menu. */
.src-bar { position: relative; z-index: 30; display: flex; align-items: center; gap: 14px; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; }
.src-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.src-ident-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-ident-sub { font-size: 12px; color: var(--text3); white-space: nowrap; }
.src-ident-sub:empty { display: none; }
.src-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.src-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--glass); border: 1px solid var(--hairline); color: var(--text2); font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 8px 13px; border-radius: var(--radius-pill); cursor: pointer; transition: all .18s; white-space: nowrap; }
.src-pill:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.src-pill-icon { padding: 8px; }
.src-caret { transition: transform .18s; opacity: .7; }

.src-select { position: relative; }
.src-select.open > .src-pill { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.src-select.open .src-caret { transform: rotate(180deg); }
.src-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 248px; display: flex; flex-direction: column; gap: 2px; padding: 7px;
  background: linear-gradient(180deg, var(--bg4) 0%, var(--bg3) 100%);
  border: 1px solid var(--hairline-2); border-radius: 16px;
  box-shadow: 0 26px 52px -20px rgba(0,0,0,.85), inset 0 1px 0 var(--glass-hi);
  /* animated in/out — visibility keeps it out of the tab order while closed */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.3,1), visibility .18s;
}
.src-select.open .src-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.src-menu-head { padding: 5px 10px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }

.src-menu-item {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; padding: 8px 10px; border-radius: 11px;
  font-family: inherit; cursor: pointer; transition: background .14s, color .14s;
  color: var(--text2);
}
.src-menu-item:hover { background: var(--glass-2); color: var(--text); }
.src-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.smi-num {
  flex: 0 0 22px; height: 22px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--hairline); border-radius: 7px;
  font-size: 10.5px; font-weight: 700; color: var(--text3); transition: all .14s;
}
.smi-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.smi-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.smi-host { font-size: 10.5px; font-weight: 500; color: var(--text3); line-height: 1.2; }
.smi-check { margin-left: auto; flex: 0 0 auto; opacity: 0; color: var(--accent-2); transition: opacity .14s; }

.src-menu-item.active { background: var(--accent-soft); color: var(--text); }
.src-menu-item.active .smi-num { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px -5px var(--accent-glow); }
.src-menu-item.active .smi-name { color: var(--accent-2); }
.src-menu-item.active .smi-check { opacity: 1; }

/* Sub/Dub reuses the server dropdown, minus the numbered badge */
.src-menu-lang { width: 208px; }
.src-menu-lang .src-menu-item { gap: 8px; }

.src-menu-note { margin-top: 5px; padding: 9px 10px 3px; border-top: 1px solid var(--hairline); font-size: 11px; line-height: 1.5; color: var(--text3); }
.src-menu-note a { color: var(--accent-2); }
.src-menu-note a:hover { text-decoration: underline; }

.src-pill:disabled { opacity: .4; cursor: not-allowed; }
.src-pill:disabled:hover { background: var(--glass); color: var(--text2); border-color: var(--hairline); }

/* Poster and copy share the top row; Details spans both columns beneath them,
   so it starts at the left edge and fills the space under the poster. */
.watch-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: start; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px 32px 26px; overflow: hidden; background: var(--bg2); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-sm); }

/* Backdrop wash — the still sits behind the panel, scrimmed so text stays legible */
.watch-hero-bg { position: absolute; inset: -1px; z-index: 0; background-size: cover; background-position: center 18%; transform: scale(1.04); }
.watch-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,18,.97) 0%, rgba(10,10,18,.93) 34%, rgba(10,10,18,.74) 68%, rgba(10,10,18,.62) 100%); }
/* second scrim: the lower half holds dense text, so fade the still out under it */
.watch-head::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,18,0) 0%, rgba(10,10,18,.42) 42%, rgba(10,10,18,.9) 100%); }
/* Every real child must sit above .watch-head::before, the backdrop scrim —
   it reaches 90% opacity at the bottom and will swallow anything beneath it. */
.watch-head-poster, .watch-head-info, .watch-facts { position: relative; z-index: 1; }

.watch-head-poster { grid-column: 1; grid-row: 1; width: 184px; border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline-2); background: var(--bg3); align-self: flex-start; box-shadow: 0 30px 60px -24px rgba(0,0,0,.95); transition: transform .3s ease; }
.watch-head-poster:hover { transform: translateY(-4px) scale(1.012); }
.watch-head-poster img { width: 100%; display: block; aspect-ratio: 2/3; object-fit: cover; }
.watch-head-info { grid-column: 2; grid-row: 1; min-width: 0; }

.watch-title { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -.025em; line-height: 1.04; margin-bottom: 7px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.watch-tagline { font-size: 14.5px; font-style: italic; color: var(--accent-2); opacity: .9; margin-bottom: 18px; line-height: 1.45; }
.watch-tagline:empty { display: none; }

/* ── Score ring + one-line hard facts ── */
.watch-key { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.watch-score { position: relative; width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; }
.watch-score.is-empty { display: none; }
.watch-score svg { position: absolute; inset: 0; }
.ws-track { stroke: rgba(255,255,255,.10); }
.ws-bar { stroke: var(--green); transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.3,1); }
.watch-score.is-ok  .ws-bar { stroke: var(--gold); }
.watch-score.is-bad .ws-bar { stroke: var(--red); }
.ws-num { position: relative; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.ws-pct { font-size: 10px; vertical-align: super; margin-left: 1px; opacity: .75; }
.wk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.watch-quick { font-size: 14px; font-weight: 500; color: var(--text2); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.wq-dot { margin: 0 9px; color: var(--text3); opacity: .6; }
.wq-cert { border: 1px solid var(--hairline-2); border-radius: 5px; padding: 1px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--text); }

.watch-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.watch-meta:empty { display: none; }
.wm-chip { font-size: 12px; font-weight: 500; color: var(--text2); background: var(--glass); border: 1px solid var(--hairline); padding: 5px 12px; border-radius: var(--radius-pill); transition: all .16s; }
.wm-chip:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.watch-overview { font-size: 14.5px; color: var(--text2); line-height: 1.72; max-width: 72ch; }

/* ── Trailer + external links ── */
.watch-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.watch-links:empty { display: none; }
.wl-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--glass); color: var(--text2); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all .18s; }
.wl-btn:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); transform: translateY(-1px); }
.wl-btn.wl-primary { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px var(--accent-glow); }
.wl-btn.wl-primary:hover { filter: brightness(1.08); color: #fff; }

/* ── Details: headline numbers as cards, the rest as labelled rows ── */
.watch-facts { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.watch-facts:empty { display: none; }
.wf-head { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; }

.wf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 216px)); justify-content: start; gap: 10px; margin-bottom: 20px; }
.wf-stat { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; background: var(--bg3); border: 1px solid var(--hairline); border-radius: 13px; transition: border-color .18s, transform .18s; }
.wf-stat:hover { border-color: var(--hairline-2); transform: translateY(-2px); }
.wf-stat-label { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text3); }
.wf-stat-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
.wf-stat-sub { font-size: 11px; color: var(--text3); }
.wf-stat.is-pos .wf-stat-value { color: var(--green); }
.wf-stat.is-neg .wf-stat-value { color: var(--red); }

/* Flow the fact rows into columns on wide screens — one long stack wasted the
   width and made the panel far taller than it needed to be. */
.wf-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); column-gap: 44px; }
.wf-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hairline); }
/* uniform dividers — with multiple columns a first-child exception looks broken */
.wf-row-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); }
.wf-row-label svg { flex: 0 0 auto; opacity: .65; }
.wf-row-value { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.5; }

.watch-episodes { display: flex; flex-direction: column; }
.episodes-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.watch-h2 { position: relative; padding-left: 14px; font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.watch-h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 2px; background: var(--accent-grad); }
.season-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.season-tab { padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--glass); color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; }
.season-tab:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.season-tab.active { background: var(--accent-grad); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px var(--accent-glow); }
.seasons-loading, .episodes-loading { color: var(--text3); font-size: 13px; padding: 4px 2px; }

/* Horizontal rail — episodes scroll sideways instead of pushing the page down */
/* No scroll-snap: it re-aligns every programmatic scroll, which swallowed
   small wheel deltas entirely and fought the drag handler. */
.episodes-grid { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; scroll-behavior: auto; overscroll-behavior-x: contain; cursor: grab; }
/* Scrollbar hidden — the rail is driven by wheel and drag */
.episodes-grid::-webkit-scrollbar { display: none; }
.episodes-grid { scrollbar-width: none; -ms-overflow-style: none; }
/* While dragging: kill snap (it fights the pointer), text selection and native image drag */
.episodes-grid.is-grabbing { cursor: grabbing; user-select: none; }
.episodes-grid img { -webkit-user-drag: none; user-select: none; }
.ep-card { flex: 0 0 268px; display: flex; flex-direction: column; text-align: left; background: var(--glass); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .22s, background .22s, border-color .22s, box-shadow .22s; padding: 0; color: inherit; font-family: inherit; }
.ep-card:hover { background: var(--glass-2); border-color: var(--hairline-2); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.ep-card.active { border-color: transparent; background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent), 0 12px 28px -14px var(--accent-glow); }
.ep-thumb { position: relative; aspect-ratio: 16/9; background: var(--bg3); overflow: hidden; }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ep-card:hover .ep-thumb img { transform: scale(1.05); }
.ep-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text3); }
.ep-thumb-badge { position: absolute; top: 8px; left: 8px; background: rgba(10,11,15,.72); color: var(--text); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ep-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(10,11,15,.55); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; padding-left: 2px; opacity: 0; transition: opacity .25s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ep-card:hover .ep-play { opacity: 1; }
.ep-card.active .ep-play { opacity: 1; background: var(--accent); border-color: transparent; color: #0a0b0f; }
.ep-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ep-card-title { font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-card-meta { font-size: 11.5px; color: var(--text3); }

/* Cast row */
.watch-cast, .watch-recs { display: flex; flex-direction: column; }
.watch-cast .watch-h2, .watch-recs .watch-h2 { margin-bottom: 16px; }
.cast-row { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.cast-row::-webkit-scrollbar { display: none; }
.cast-card { flex: 0 0 128px; background: var(--glass); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.cast-card:hover { transform: translateY(-4px); border-color: var(--hairline-2); box-shadow: var(--shadow-sm); }
.cast-photo { width: 100%; aspect-ratio: 1/1.16; overflow: hidden; background: var(--bg3); }
.cast-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; transition: transform .45s ease; }
.cast-card:hover .cast-photo img { transform: scale(1.06); }
.cast-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; color: var(--text3); background: linear-gradient(150deg, var(--bg3), var(--bg4)); }
.cast-body { padding: 10px 12px 13px; }
.cast-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-role { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* Recommendations grid (reuses .card) */
.recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 22px 16px; }
.recs-grid .card { flex: none; width: 100%; }

@media (max-width: 640px) {
  /* No vw cap on phones — the 14px gutters are the whole margin budget */
  .player-shell, .watch-content { max-width: 100%; }
  .player-shell { padding: 0 14px; }
  .watch-content { padding: 20px 14px 70px; gap: 24px; }
  .hero-trailer, .hero-mute { display: none; }
  .watch-head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 20px; }
  .watch-head-poster, .watch-head-info { grid-column: 1; }
  .watch-head-info { grid-row: 2; }
  .watch-facts { grid-row: 3; margin-top: 4px; }
  .wf-row { grid-template-columns: 1fr; gap: 3px; }
  .wf-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .watch-head-poster { width: 120px; }
  .watch-title { font-size: 26px; }
  .episodes-grid { gap: 11px; }
  .ep-card { flex-basis: 210px; }
  .recs-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 12px; }
  .cast-card { flex-basis: 112px; }
  .watch-key { gap: 12px; }
}

/* ============================================================
   Auth pages
   ============================================================ */
.auth-page-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 96px 0 48px; background: radial-gradient(62% 46% at 50% -4%, var(--amb-1) 0%, transparent 62%), radial-gradient(52% 42% at 100% 100%, var(--amb-2) 0%, transparent 60%), var(--bg); }
.auth-site-logo { position: fixed; top: 22px; left: 32px; z-index: 3; display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: .04em; color: var(--text); }
.auth-card { position: relative; background: rgba(20,22,32,.66); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline-2); border-radius: 24px; padding: 40px 40px 34px; width: 100%; max-width: 420px; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); }
.auth-tabs { display: flex; gap: 4px; background: var(--glass); border-radius: var(--radius-pill); padding: 5px; margin-bottom: 26px; border: 1px solid var(--hairline); }
.auth-tab { flex: 1; padding: 10px; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text2); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; font-family: inherit; }
.auth-tab.active { background: var(--accent-grad); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px var(--accent-glow); }
.auth-form { display: flex; flex-direction: column; gap: 13px; }
.auth-form.hidden { display: none; }
.auth-input { width: 100%; padding: 14px 16px; background: var(--glass); border: 1px solid var(--hairline); border-radius: 12px; color: var(--text); font-size: 14px; outline: none; transition: border .18s, box-shadow .18s; font-family: inherit; }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-input::placeholder { color: var(--text3); }
.auth-submit-btn { width: 100%; padding: 14px; font-size: 15px; margin-top: 4px; }
.auth-hint { color: var(--text2); font-size: 13px; text-align: center; line-height: 1.5; margin-bottom: 2px; }
.auth-success { background: rgba(86,214,127,.1); border: 1px solid rgba(86,214,127,.3); border-radius: 12px; padding: 12px 14px; color: #7ee6a0; font-size: 13px; margin-bottom: 6px; }
.auth-error { background: rgba(240,135,135,.1); border: 1px solid rgba(240,135,135,.32); border-radius: 12px; padding: 12px 14px; color: #f3a0a0; font-size: 13px; margin-bottom: 6px; }

/* ── Sign-in page ──────────────────────────────────────────────
   Two panels in one pane: what the account is for on the left, the form on
   the right. reset.html and verify.html have no .auth-shell, so they keep
   the plain centred card. */
.auth-shell {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr;
  width: min(940px, 100% - 40px);
  background: rgba(18,20,30,.7); border: 1px solid var(--hairline-2);
  border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
/* inside the shell the card is a panel, not a card of its own */
.auth-shell .auth-card {
  background: none; border: none; box-shadow: none; border-radius: 0;
  max-width: none; padding: 38px 38px 34px; backdrop-filter: none;
}

.auth-brand {
  position: relative; padding: 44px 38px; display: flex; flex-direction: column;
  justify-content: center; gap: 26px; border-right: 1px solid var(--hairline);
  background:
    radial-gradient(100% 78% at -6% -12%, var(--accent-soft) 0%, transparent 64%),
    radial-gradient(88% 68% at 106% 110%, var(--amb-2) 0%, transparent 64%),
    linear-gradient(158deg, rgba(255,255,255,.04) 0%, transparent 52%);
  overflow: hidden;
}
/* An oversized halo bleeding off the corner - the brand mark used as texture
   rather than another logo. */
.auth-brand::after {
  content: ""; position: absolute; right: -70px; bottom: -96px;
  width: 300px; height: 300px; border-radius: 50%;
  border: 13px solid var(--halo-pool); opacity: .3;
  transform: rotate(-18deg) scaleY(.4); pointer-events: none;
}
.auth-brand-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text3);
}
.auth-brand h1 {
  font-family: var(--font-display); font-size: 31px; line-height: 1.16;
  font-weight: 700; letter-spacing: -.022em; color: var(--text);
}
.auth-brand h1 em { font-style: normal; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-points { display: flex; flex-direction: column; gap: 15px; }
.auth-point { display: flex; align-items: flex-start; gap: 12px; }
.auth-point svg { flex: 0 0 17px; margin-top: 1px; color: var(--accent-2); }
.auth-point span { font-size: 13.5px; line-height: 1.45; color: var(--text2); }

/* ── Form ── */
.auth-head { margin-bottom: 22px; }
.auth-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.018em; }
.auth-head p  { margin-top: 5px; font-size: 13px; color: var(--text3); line-height: 1.5; }

/* Floating label: the placeholder is a single space, so :placeholder-shown
   tells us whether the field is empty without any script. */
.af { position: relative; }
.af .auth-input { padding: 21px 16px 9px; }
.af .auth-input:not([type=password]) { padding-right: 16px; }
.af label {
  position: absolute; left: 17px; top: 15px; pointer-events: none;
  font-size: 14px; color: var(--text3);
  transition: top .16s ease, font-size .16s ease, color .16s ease;
}
.af .auth-input:focus + label,
.af .auth-input:not(:placeholder-shown) + label { top: 7px; font-size: 10.5px; letter-spacing: .04em; }
.af .auth-input:focus + label { color: var(--accent-2); }

.af-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: none; border-radius: 9px;
  color: var(--text3); cursor: pointer; transition: color .18s, background .18s;
}
.af-eye:hover { color: var(--text); background: var(--glass-2); }
.af:has(.af-eye) .auth-input { padding-right: 48px; }

.auth-alt { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--text3); }
.auth-alt a { color: var(--text2); text-decoration: none; border-bottom: 1px solid var(--hairline-2); padding-bottom: 1px; transition: color .18s, border-color .18s; }
.auth-alt a:hover { color: var(--accent-2); border-color: var(--accent); }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; width: min(430px, 100% - 32px); }
  .auth-brand { display: none; }
  .auth-shell .auth-card { padding: 32px 26px 28px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1400px) {
  .watch-tv-grid { grid-template-columns: 220px 1fr 290px; gap: 16px; padding: 16px; }
  .watch-movie-grid { grid-template-columns: 260px 1fr; gap: 16px; padding: 16px; }
  .watch-tv-sidebar-left, .watch-tv-sidebar-right { max-height: calc(100vh - 120px); }
}
@media (max-width: 1024px) {
  .watch-tv-grid, .watch-movie-grid { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .watch-tv-sidebar-left { display: grid; grid-template-columns: 140px 1fr; gap: 14px; max-height: unset; height: auto; }
  .watch-tv-poster { aspect-ratio: 2/3; }
  .watch-tv-info { display: flex; flex-direction: column; }
  .watch-tv-center { order: -1; }
  .watch-tv-sidebar-right { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: unset; height: auto; gap: 8px; }
  .ep-item { flex-direction: column; padding: 10px; gap: 5px; text-align: center; }
  .ep-num { width: 100%; }
  .ep-title { width: 100%; white-space: normal; font-size: 11.5px; line-height: 1.3; }
}
@media (max-width: 900px) {
  :root { --card-w: 150px; }

  /* Browse header → two rows: [logo | actions] on top, full-width search below.
     display:contents dissolves .header-left so the logo and search become
     direct flex children of the header, letting search wrap to its own row
     instead of being crushed to a few pixels on the shared top row.
     Scoped to :not(.watch-page-body) so the watch page's single-row header
     (logo + centered title + Home) is left untouched. */
  #header { padding: 10px 16px; }
  /* One clean row: logo left, search + account right. Nav links are hidden —
     the bottom dock already covers navigation on small screens. */
  body:not(.watch-page-body) #header { flex-wrap: nowrap; column-gap: 12px; padding-left: 18px; padding-right: 18px; }
  body:not(.watch-page-body) .online-indicator { display: none; }
  #searchInput { font-size: 16px; }   /* 16px stops iOS zoom-on-focus */
  /* Tablet widths have room for the logo and a full-size field side by side. */
  .search-wrap.expanded { width: 268px; }

  .hero { padding: 0 22px 56px; height: 84vh; }
  .row-section, .page-header, .content-grid { padding-left: 22px; padding-right: 22px; }
  .modal-backdrop { height: 210px; }
  .modal-main { flex-direction: column; padding: 0 18px 22px; gap: 16px; margin-top: -80px; }
  .modal-info { padding-top: 0; }
  .modal-poster { width: 116px; }
  .episode-selector { grid-template-columns: minmax(0, 1fr); }
  .page-view { padding-top: 118px; }          /* clear the taller two-row header */
}
@media (max-width: 560px) {
  /* Below this the expanded field and the ~156px wordmark cannot share a row,
     so the logo steps aside for as long as the search is open. */
  #header.searching .logo { display: none; }
  #header.searching .header-right { flex: 1 1 auto; }
  .search-wrap.expanded { flex: 1 1 auto; width: auto; min-width: 0; }
  .search-wrap.expanded #searchInput { flex: 1 1 auto; width: 100%; min-width: 0; padding: 9px 6px 9px 15px; }

  .hero-desc { display: none; }
  .content-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px 12px; }
  .page-header h1 { font-size: 27px; }
}
@media (max-width: 700px) {
  .auth-card { padding: 30px 22px; margin: 0 16px; }
  .auth-site-logo { left: 20px; }
  .watch-below { padding: 0 12px 40px; }
  .watch-info-inner { flex-direction: column; }
  .user-name { display: none; }
  .watch-frame-wrap { height: 240px; }
}
@media (max-width: 560px) {
  /* Four controls plus a title won't share one row — stack them. */
  .src-bar { flex-wrap: wrap; gap: 10px; padding: 11px 12px; }
  .src-ident { width: 100%; }
  .src-actions { width: 100%; margin-left: 0; }
  /* The select sits mid-row, so a menu right-aligned to it runs off-screen.
     Anchor to the bar instead and let it span the available width. */
  .src-select { position: static; }
  .src-menu { width: min(248px, 100%); }
  .src-ident-title { font-size: 13.5px; }
  .src-ident-sub { font-size: 11px; }
  .src-actions { gap: 6px; }
  .src-pill { padding: 7px 10px; font-size: 11.5px; }
  #srcShareLabel { display: none; }   /* icon-only Share on narrow screens */
  #srcShareBtn { padding: 7px; }
}

@media (max-width: 480px) {
  .player-title { max-width: 140px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   SETTINGS PANEL
   ============================================================ */
.settings-overlay { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4,5,8,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fadeIn .2s ease; }
.settings-box {
  position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr);
  width: 100%; max-width: 900px; height: min(760px, 88vh);
  background: var(--bg2); border: 1px solid var(--hairline-2); border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow);
  animation: slideUp .32s cubic-bezier(.2,.7,.2,1);
}
.settings-close {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--hairline); color: var(--text);
  cursor: pointer; transition: all .2s;
}
.settings-close:hover { background: var(--glass-3); border-color: var(--hairline-2); transform: rotate(90deg); }

/* ── Sidebar ── */
.settings-side { display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--hairline); min-width: 0; }
.settings-me { display: flex; align-items: center; gap: 11px; padding: 20px 18px; border-bottom: 1px solid var(--hairline); }
.settings-me-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--hairline); color: var(--text2); flex-shrink: 0; }
.settings-me-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.settings-me-text strong { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-me-text small { font-size: 11.5px; color: var(--text3); }

.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 0; flex: 1; overflow-y: auto; }
.settings-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 10px; cursor: pointer;
  padding: 10px 12px; font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--text2); transition: background .15s, color .15s;
}
.settings-nav-item svg { flex-shrink: 0; opacity: .75; }
.settings-nav-item:hover { background: var(--glass); color: var(--text); }
.settings-nav-item.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.settings-nav-item.active svg { opacity: 1; }
/* Discord keeps its brand mark and colour, active or not */
.settings-nav-item.is-brand svg { color: #5865F2; opacity: 1; }
.settings-nav-item.is-brand.active { background: rgba(88,101,242,.14); color: #9aa4ff; }

.settings-side-foot { padding: 12px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.settings-foot-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text2); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.settings-foot-link:hover { background: var(--glass); color: var(--text); }
.settings-lang { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 2px; }
.settings-lang-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text3); }
.settings-lang-sel { width: 100%; background: var(--bg3); border: 1px solid var(--hairline); border-radius: 10px; color: var(--text2); padding: 9px 11px; font-size: 13px; font-family: inherit; outline: none; cursor: pointer; transition: border-color .18s, color .18s; }
.settings-lang-sel:hover { color: var(--text); border-color: var(--hairline-2); }
.settings-lang-sel:focus { border-color: var(--accent); color: var(--text); }
.settings-lang-sel option { background: var(--bg3); color: var(--text); }

/* ── Main pane ── */
.settings-main { padding: 30px 32px; overflow-y: auto; min-width: 0; }
.settings-title { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-right: 36px; }
.settings-count {
  flex-shrink: 0; margin-top: 6px; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--glass); border: 1px solid var(--hairline);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2);
}

/* ── Appearance: theme picker ── */
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px 16px; }
.th-card {
  display: block; width: 100%; padding: 0; border: none; background: none;
  font-family: inherit; text-align: left; cursor: pointer;
}
/* The ring lives on a wrapper so the swatch keeps its own corner radius. */
.th-prev {
  display: block; position: relative; height: 108px; border-radius: 12px; overflow: hidden;
  background: var(--th-grad); box-shadow: 0 8px 22px -12px rgba(0,0,0,.9);
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .18s, transform .18s;
}
.th-card:hover .th-prev { transform: translateY(-2px); outline-color: var(--hairline-2); }
.th-card.active .th-prev { outline-color: #fff; }
/* A miniature of the app: title bar, sidebar, content panel, accent dot. */
.th-prev i { position: absolute; display: block; border-radius: 4px; background: rgba(255,255,255,.30); }
.th-bar   { left: 12px; top: 12px;  width: 40px; height: 6px; }
.th-side  { left: 12px; top: 26px;  width: 26px; bottom: 14px; border-radius: 7px; background: rgba(255,255,255,.16) !important; }
.th-panel { left: 46px; top: 26px;  right: 12px; bottom: 14px; border-radius: 8px; background: rgba(255,255,255,.13) !important; }
.th-dot   { left: 58px; bottom: 26px; width: 11px; height: 11px; border-radius: 50% !important; background: var(--th-accent) !important; }

.th-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.th-name { font-size: 13.5px; color: var(--text2); }
.th-card.active .th-name { color: var(--text); font-weight: 600; }
.th-chip { width: 8px; height: 8px; border-radius: 50%; background: var(--th-accent); flex-shrink: 0; }
.th-tick { width: 17px; height: 17px; flex-shrink: 0; color: var(--text); }

@media (max-width: 560px) {
  .th-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; }
  .th-prev { height: 88px; }
}
.settings-sub { font-size: 13px; color: var(--text3); margin: 4px 0 22px; line-height: 1.5; max-width: 70ch; }
.settings-body { display: flex; flex-direction: column; gap: 16px; }

.st-profile { position: relative; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg3); overflow: hidden; }
.st-profile-cover { height: 92px; background: linear-gradient(120deg, var(--bg4), var(--bg3)); border-bottom: 1px solid var(--hairline); }
.st-profile-avatar { position: absolute; top: 46px; left: 22px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--bg4); border: 3px solid var(--bg3); color: var(--text3); }
.st-profile-info { padding: 34px 22px 20px; }
.st-profile-info h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.st-profile-info p { font-size: 13px; color: var(--text3); margin: 2px 0 12px; }
.st-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--hairline); font-size: 12px; color: var(--text2); }
.st-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.st-badge.st-badge-ok::before { background: var(--green); }

.st-card { border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg3); padding: 20px 22px; }
.st-card-title { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.st-spark { color: var(--gold); }
.st-card-text { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin: 7px 0 0; max-width: 62ch; }
.st-card-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-2); background: var(--glass-2); color: var(--text); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: all .18s; }
.st-card-actions .st-btn { margin-top: 0; }
.st-btn:hover { background: var(--glass-3); }
.st-btn-primary { background: var(--text); color: var(--bg); border-color: transparent; }
.st-btn-primary:hover { filter: brightness(.92); background: var(--text); color: var(--bg); }
.st-btn-danger { border-color: rgba(255,122,138,.35); color: var(--red); background: rgba(255,122,138,.08); }
.st-btn-danger:hover { background: rgba(255,122,138,.16); }
.st-link { font-size: 13px; color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }
.st-link:hover { color: var(--text); }
.st-empty { font-size: 13.5px; color: var(--text3); }

.st-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }

/* Settings > General — icon tile, copy, switch */
.st-row { display: flex; align-items: flex-start; gap: 15px; padding: 19px 20px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg3); }
.st-row-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--hairline); color: var(--text2); }
.st-row-text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.st-row-text strong { font-size: 15px; font-weight: 600; color: var(--text); }
.st-row-text small { font-size: 12.5px; color: var(--text3); line-height: 1.55; max-width: 58ch; }
.st-row .st-switch { margin-top: 3px; }
.st-switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--hairline-2); background: var(--bg4); cursor: pointer; transition: background .2s, border-color .2s; }
.st-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text3); transition: transform .2s, background .2s; }
.st-switch.on { background: var(--accent-soft); border-color: var(--accent); }
.st-switch.on span { transform: translateX(18px); background: var(--accent-2); }

.st-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--bg3); }
.st-list-row { display: flex; align-items: center; gap: 13px; padding: 11px 15px; border-top: 1px solid var(--hairline); }
.st-list-row:first-child { border-top: none; }
.st-list-thumb { width: 38px; height: 56px; border-radius: 7px; overflow: hidden; background: var(--bg4); display: grid; place-items: center; color: var(--text3); font-size: 13px; flex-shrink: 0; }
.st-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-list-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-list-text strong { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-list-text small { font-size: 11.5px; color: var(--text3); }

@media (max-width: 760px) {
  .settings-overlay { padding: 0; }
  .settings-box { grid-template-columns: minmax(0, 1fr); height: 100%; max-width: none; border-radius: 0; border: none; }
  .settings-side { border-right: none; border-bottom: 1px solid var(--hairline); }
  .settings-nav { flex-direction: row; overflow-x: auto; padding: 10px 12px; gap: 6px; }
  .settings-nav-item { white-space: nowrap; }
  .settings-side-foot { display: none; }
  .settings-main { padding: 22px 18px; }
  .settings-head { padding-right: 44px; }
}

/* ============================================================
   BOTTOM DOCK
   ============================================================ */
.dock {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 95;
  display: flex; align-items: center; gap: 5px; padding: 8px;
  border-radius: var(--radius-pill);
  background: rgba(13,15,23,.72); border: 1px solid var(--hairline-2);
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 26px 54px -20px rgba(0,0,0,.92), inset 0 1px 0 var(--glass-hi);
}
.dock-btn {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; color: var(--text3);
  cursor: pointer; transition: color .2s, background .2s, border-color .2s, box-shadow .25s;
}
.dock-btn:hover { color: var(--text); background: var(--glass-2); }
.dock-btn.active {
  color: var(--text); background: var(--glass-3); border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.07), 0 10px 26px -10px var(--accent-glow);
}
.dock-sep { width: 1px; height: 22px; background: var(--hairline); margin: 0 4px; flex-shrink: 0; }

/* Keep the last row of content clear of the dock */
body:not(.watch-page-body) #main { padding-bottom: 104px; }

@media (max-width: 560px) {
  .dock { bottom: 14px; gap: 2px; padding: 6px; }
  .dock-btn { width: 38px; height: 38px; }
  .dock-sep { margin: 0 2px; }
  body:not(.watch-page-body) #main { padding-bottom: 86px; }
}

/* ── Genre tiles ── */
.genre-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; padding: 0 40px 44px; }
.genre-tiles.hidden { display: none; }

.genre-tile {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; min-height: 108px; padding: 16px 18px;
  border-radius: 16px; border: 1px solid var(--hairline);
  background: linear-gradient(145deg, var(--g1) 0%, var(--g2) 100%);
  color: #fff; font-family: var(--font-display); font-size: 17.5px; font-weight: 700;
  letter-spacing: -.015em; text-align: left; cursor: pointer;
  display: flex; align-items: flex-end;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
/* Darkening veil keeps the label legible on the lighter palettes */
.genre-tile::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(6,7,12,.30) 0%, rgba(6,7,12,.72) 100%);
  transition: opacity .22s ease;
}
.genre-tile:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.32); box-shadow: 0 18px 34px -18px rgba(0,0,0,.95); }
.genre-tile:hover::before { opacity: .78; }
.genre-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.gt-glyph {
  position: absolute; z-index: -1; top: -14px; right: -14px;
  width: 92px; height: 92px; color: #fff; opacity: .26;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.genre-tile:hover .gt-glyph { transform: rotate(-8deg) scale(1.1); opacity: .38; }
.gt-name { position: relative; text-shadow: 0 2px 10px rgba(0,0,0,.55); }

@media (max-width: 900px) { .genre-tiles { padding: 0 24px 34px; } }
@media (max-width: 560px) {
  .genre-tiles { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 11px; padding: 0 22px 28px; }
  .genre-tile { min-height: 88px; font-size: 15px; padding: 13px 14px; }
  .gt-glyph { width: 70px; height: 70px; top: -10px; right: -10px; }
}

/* ── Card watchlist (+) control ── */
.card-wl { position: absolute; top: 8px; right: 8px; z-index: 6; }
.card-wl-btn {
  /* flex, not grid: with a pencil AND a caret, grid stacks them in two rows */
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 2px;
  background: rgba(10,11,15,.62); border: 1px solid var(--hairline-2); color: var(--text);
  cursor: pointer; padding: 0; opacity: 0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.card-wl-btn svg { width: 15px; height: 15px; transition: transform .22s ease; }
.card:hover .card-wl-btn, .card-wl.open .card-wl-btn { opacity: 1; }
.card-wl-btn:hover { background: rgba(20,22,32,.92); transform: scale(1.08); }
/* Saved titles keep the control visible and flip the + into a check */
.card-wl.in-list .card-wl-btn { opacity: 1; background: var(--accent); border-color: transparent; color: #0a0b0f; }
.card-wl.in-list .card-wl-btn svg { transform: rotate(45deg); }
.card-wl.open .card-wl-btn svg { transform: rotate(135deg); }

.card-wl-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 300;
  min-width: 146px; display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: var(--bg4); border: 1px solid var(--hairline-2); border-radius: 12px;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  transition: opacity .15s ease, transform .16s cubic-bezier(.2,.8,.3,1), visibility .16s;
}
.card-wl-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.wl-opt {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  background: none; border: none; border-radius: 8px; cursor: pointer;
  padding: 8px 10px; text-align: left; font-family: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--text2);
  transition: background .13s, color .13s;
}
.wl-opt:hover { background: var(--glass-2); color: var(--text); }
.wl-opt.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.wl-tick { width: 13px; height: 13px; flex: 0 0 13px; opacity: 0; }
.wl-menu-head { padding: 5px 10px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.wl-remove { margin-top: 3px; border-top: 1px solid var(--hairline); border-radius: 0 0 8px 8px; padding-top: 9px; color: var(--red); }
.wl-remove:hover { background: rgba(255,122,138,.12); color: var(--red); }
.wl-opt.active .wl-tick { opacity: 1; }

/* Touch devices have no hover, so the control is always shown */
@media (hover: none) { .card-wl-btn { opacity: 1; } }

/* ── Watchlist page ── */
/* Stack: heading, then the filter row (page-header is a flex row by default) */
.wl-header { display: block; }
.wl-header h1 { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.wl-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.wl-pill {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px;
  border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  background: var(--glass); color: var(--text2);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .18s;
}
.wl-pill svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
.wl-pill:hover { background: var(--glass-2); color: var(--text); border-color: var(--hairline-2); }
.wl-pill.active { background: #fff; border-color: transparent; color: #0a0b0f; }
.wl-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--glass-2); color: var(--text2);
  font-size: 12px; font-weight: 700;
}
.wl-pill.active .wl-count { background: rgba(10,11,15,.12); color: #0a0b0f; }

/* On this page the control is always visible and sits top-left, showing
   which list the title is in rather than a bare + */
.wl-card .card-wl { top: 10px; left: 10px; right: auto; }
/* the badge lives top-left too — move it aside so the two don't overlap */
.wl-card .card-badge { left: auto; right: 10px; }
.wl-card .card-wl-btn { opacity: 1; }
/* Pencil on the watchlist page, + everywhere else — swapped in CSS so the button does not
   need to know which page it is on. */
.cw-plus, .cw-pen { display: flex; align-items: center; justify-content: center; }
.cw-pen { display: none; }
.wl-card .cw-plus { display: none; }
.wl-card .cw-pen { display: flex; }
.wl-card .card-wl.in-list .card-wl-btn svg { transform: none; }
.wl-card .card-wl.in-list .card-wl-btn { background: rgba(10,11,15,.72); border-color: var(--hairline-2); color: var(--text); }
.wl-card .card-wl.in-list .card-wl-btn svg { transform: none; }
.wl-card .card-wl-menu { left: 0; right: auto; transform-origin: top left; }

.wl-pill-new { border-style: dashed; color: var(--text3); }
.wl-pill-new:hover:not(:disabled) { color: var(--text); border-style: solid; }
.wl-pill-new:disabled { opacity: .45; cursor: not-allowed; }
.wl-sep { width: 1px; height: 22px; background: var(--hairline-2); align-self: center; margin: 0 2px; }
.wl-mini { height: 42px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  background: none; color: var(--text3); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; }
.wl-mini:hover { color: var(--text); border-color: var(--hairline-2); background: var(--glass); }
.wl-mini-danger:hover { color: var(--red); border-color: rgba(255,122,138,.4); background: rgba(255,122,138,.1); }

.wl-newform { display: inline-flex; align-items: center; gap: 8px; }
.wl-newinput { height: 42px; padding: 0 15px; min-width: 170px; border-radius: var(--radius-pill);
  background: var(--bg3); border: 1px solid var(--accent); color: var(--text);
  font-family: inherit; font-size: 14px; outline: none; }
.wl-newinput::placeholder { color: var(--text3); }
.wl-newgo { height: 42px; padding: 0 18px; border-radius: var(--radius-pill); border: none;
  background: #fff; color: #0a0b0f; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.wl-newgo:hover { background: rgba(255,255,255,.86); }
.wl-newcancel { height: 42px; padding: 0 15px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  background: none; color: var(--text3); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .18s; }
.wl-newcancel:hover { color: var(--text); border-color: var(--hairline-2); background: var(--glass); }

@media (max-width: 560px) {
  .wl-header h1 { font-size: 30px; }
  .wl-pill { height: 38px; padding: 0 14px; font-size: 13px; }
}