/* /university/vibe-coder/watch/watch.css
 *
 * Production styles for the Netflix-style University viewer.
 * Extracted from pb-branch/_design-spec/university-videos-{top,viewer}.jsx
 * inline styles. BEM-y class names. Per-Part flavor flows from
 * --part-accent on .watch-part wrapper; component descendants read it.
 *
 * prefers-reduced-motion halts hero animations.
 */

/* ── Tokens (mirror site palette where useful) ────────────────────────── */
:root {
  --watch-bg: #03050a;
  --watch-fg: #ffffff;
  --watch-fg-dim: rgba(255, 255, 255, 0.7);
  --watch-fg-faint: rgba(255, 255, 255, 0.45);
  --watch-fg-mute: rgba(255, 255, 255, 0.18);
  --watch-border: rgba(255, 255, 255, 0.1);
  --watch-cyan: #00f4ff;
  --watch-magenta: #d580ff;
  --watch-green: #00ff88;
  --watch-yellow: #ffe600;
  --watch-pink: #ff5b88;
  --watch-orange: #ff8800;
  --watch-font-display: 'Rajdhani', 'Inter Tight', 'Inter', system-ui, sans-serif;
  --watch-font-mono: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
  --part-accent: var(--watch-cyan);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--watch-bg);
  color: var(--watch-fg);
  font-family: var(--watch-font-display);
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background: url('/assets/img/persona-experimenters.png') center / cover no-repeat;
  filter: blur(40px) saturate(1.1);
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 244, 255, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(3, 5, 10, 0.6) 0%, rgba(3, 5, 10, 0.92) 100%);
  pointer-events: none;
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }

@keyframes watchGridPan {
  from { background-position: 0 0; }
  to   { background-position: 256px 256px; }
}
@keyframes watchOrbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-8vw, 4vh) scale(1.05); }
  100% { transform: translate(4vw, -2vh) scale(0.95); }
}
@keyframes watchLivePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* No `isolation: isolate` here: the fullscreen PlayerOverlay / ArticleOverlay
   live inside .watch-root and need their z-index: 1100 to clear the global
   site header (z-index: 1000). An isolated context would trap that 1100
   inside .watch-root's own stacking context — the header would then show
   through and clip the top of the video, which was the reported bug. The
   body::before/::after backdrop pseudos already use position:fixed +
   z-index:-1, so they stay behind regardless. */
.watch-root { min-height: 100vh; }

/* ── Top bar (3-track switcher) ───────────────────────────────────────── */
.watch-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(180deg, rgba(7, 8, 13, 0.92) 0%, rgba(7, 8, 13, 0.55) 100%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 244, 255, 0.15);
  gap: 1rem;
}
.watch-brand {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-family: var(--watch-font-mono); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.72rem; color: rgba(0, 244, 255, 0.85);
}
.watch-brand-title {
  font-family: var(--watch-font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--watch-fg); text-transform: none; letter-spacing: 0.02em;
}
.watch-tracks-nav { display: flex; gap: 0.4rem; align-items: center; }
.watch-track-btn {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--watch-font-display); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.watch-track-btn:hover { border-color: rgba(255, 255, 255, 0.45); }
.watch-track-btn.is-active {
  color: var(--watch-bg);
  background: var(--track-accent, var(--watch-cyan));
  border-color: var(--track-accent, var(--watch-cyan));
}
.watch-track-btn-eyebrow {
  font-family: var(--watch-font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.watch-track-btn.is-active .watch-track-btn-eyebrow { color: rgba(3, 5, 10, 0.6); }
.watch-topbar-search {
  font-family: var(--watch-font-mono); font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.4rem 0.85rem; border-radius: 2px;
  display: none; /* hidden until search is wired */
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.watch-hero {
  position: relative;
  height: clamp(540px, 78vh, 760px);
  background:
    radial-gradient(ellipse at 80% 50%, color-mix(in srgb, var(--part-accent) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--part-accent) 4%, var(--watch-bg)) 0%, var(--watch-bg) 100%);
  overflow: hidden; color: var(--watch-fg); isolation: isolate;
}
.watch-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--hero-art, none);
  background-size: cover;
  /* top-right pin: Mark's face stays in frame when the hero height shrinks
     on responsive resize — the bottom of the scene gets cropped, never the
     top half where his face lives. */
  background-position: top right;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 800px) {
  .watch-hero::before { background-position: top right; opacity: 0.7; }
}
.watch-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  animation: watchGridPan 30s linear infinite;
}
.watch-hero-scan {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}
.watch-hero-orb {
  position: absolute;
  width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px;
  border-radius: 50%; left: 40%; top: -25%;
  background: radial-gradient(circle, color-mix(in srgb, var(--part-accent) 20%, transparent) 0%, transparent 60%);
  filter: blur(40px); pointer-events: none;
  animation: watchOrbDrift 18s ease-in-out infinite alternate;
}
.watch-hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 13, 0) 0%, rgba(7, 8, 13, 0) 40%, rgba(7, 8, 13, 0.9) 92%, rgba(7, 8, 13, 1) 100%),
    linear-gradient(90deg, rgba(3, 5, 10, 0.95) 0%, rgba(3, 5, 10, 0.75) 30%, rgba(3, 5, 10, 0.25) 55%, transparent 75%);
}
@media (max-width: 800px) {
  .watch-hero-vignette {
    background:
      linear-gradient(180deg, rgba(7, 8, 13, 0.2) 0%, rgba(7, 8, 13, 0.6) 45%, rgba(7, 8, 13, 0.95) 80%, rgba(7, 8, 13, 1) 100%);
  }
}
/* Wider canvas → the title doesn't need the full left third dimmed.
   Soften the side gradient (lower start opacity, earlier fade) so Mark
   and the scene breathe further left as the page widens. The H1
   text-shadow + dim top-down fade keep the title readable. */
@media (min-width: 1400px) {
  .watch-hero-vignette {
    background:
      linear-gradient(180deg, rgba(7, 8, 13, 0) 0%, rgba(7, 8, 13, 0) 50%, rgba(7, 8, 13, 0.85) 92%, rgba(7, 8, 13, 1) 100%),
      linear-gradient(90deg, rgba(3, 5, 10, 0.85) 0%, rgba(3, 5, 10, 0.55) 22%, rgba(3, 5, 10, 0.15) 42%, transparent 62%);
  }
}
@media (min-width: 1800px) {
  .watch-hero-vignette {
    background:
      linear-gradient(180deg, rgba(7, 8, 13, 0) 0%, rgba(7, 8, 13, 0) 55%, rgba(7, 8, 13, 0.8) 92%, rgba(7, 8, 13, 1) 100%),
      linear-gradient(90deg, rgba(3, 5, 10, 0.7) 0%, rgba(3, 5, 10, 0.4) 16%, rgba(3, 5, 10, 0.1) 34%, transparent 52%);
  }
}
.watch-hero-body {
  position: relative;
  max-width: 1480px; margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(2rem, 4vw, 3.5rem);
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.watch-hero-num {
  font-family: var(--watch-font-mono); font-size: 0.78rem;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--part-accent); opacity: 0.9; margin-bottom: 0.5rem;
}
.watch-hero-title {
  font-family: var(--watch-font-display);
  font-size: clamp(2.5rem, 5.5vw, 5.4rem);
  font-weight: 700; color: var(--watch-fg);
  line-height: 0.98; letter-spacing: -0.015em;
  max-width: 14ch; margin: 0;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.watch-hero-subtitle {
  font-family: var(--watch-font-display);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400; margin-top: 0.5rem; max-width: 36ch;
}
.watch-hero-synopsis {
  font-family: var(--watch-font-display);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5; margin-top: 1.25rem; max-width: 60ch;
}
.watch-hero-meta {
  display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
  margin-top: 1.4rem;
  font-family: var(--watch-font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7);
}
.watch-hero-pip {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); margin-right: 0.5rem;
  vertical-align: middle;
}
.watch-hero-rating { color: var(--part-accent); }
.watch-hero-ctas { display: flex; gap: 0.75rem; margin-top: 1.6rem; flex-wrap: wrap; }
.watch-cta-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  background: var(--watch-fg); color: var(--watch-bg);
  font-family: var(--watch-font-display); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.02em; border-radius: 2px;
  box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--part-accent) 80%, transparent);
}
.watch-cta-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--watch-fg);
  font-family: var(--watch-font-display); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.02em; border-radius: 2px;
  backdrop-filter: blur(8px);
}
.watch-hero-badges {
  position: absolute; top: 1.5rem; right: 1.5rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end;
  max-width: 60%;
  font-family: var(--watch-font-mono); font-size: 0.65rem;
  letter-spacing: 0.1em; z-index: 2;
}
.watch-hero-badge {
  padding: 0.25rem 0.55rem;
  background: rgba(7, 8, 13, 0.7); backdrop-filter: blur(6px);
  white-space: nowrap;
  border: 1px solid var(--part-accent);
  color: var(--part-accent);
}
.watch-hero-badge.is-trailer { border-color: #ff3344; color: #ff3344; }
.watch-hero-badge.is-warn    { border-color: var(--watch-yellow); color: var(--watch-yellow); }
.watch-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #ff3344; margin-right: 0.4rem; vertical-align: middle;
  box-shadow: 0 0 8px #ff3344;
  animation: watchLivePulse 1.6s ease-in-out infinite;
}

/* Part progress strip below the hero. */
.watch-part-progress {
  max-width: 1480px; margin: 0 auto;
  padding: 1.25rem 1.5rem 0;
  display: flex; gap: 1rem; align-items: center;
}
.watch-part-progress-label {
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); white-space: nowrap;
}
.watch-part-progress-bar {
  flex: 1; height: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.watch-part-progress-fill {
  height: 100%; background: var(--part-accent);
  box-shadow: 0 0 12px var(--part-accent);
  transition: width 0.3s;
}

/* ── Part lane (per-Part intro band + scroller) ───────────────────────── */
.watch-lanes { max-width: 1480px; margin: 0 auto; padding: 0 1.5rem; }
.watch-part-section {
  position: relative;
  margin-top: 2.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  scroll-margin-top: 80px;
}
/* Topmost Part = the one the hero already announces. Drop the duplicate
   intro banner; the episodes below stay so users can jump straight into
   them without scrolling past a redundant header. */
.watch-part-section--current > .watch-part-intro { display: none; }
.watch-part-section--current { margin-top: 1rem; padding-top: 0; border-top: 0; }
/* Completed Parts (every lesson >80% watched) dim so unfinished work
   above the fold is always the visual emphasis. */
.watch-part-section--complete { opacity: 0.7; }
.watch-part-section--complete:hover { opacity: 1; transition: opacity 0.2s; }
.watch-part-intro {
  position: relative;
  min-height: 220px;
  padding: 2rem 1.75rem 1.75rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, color-mix(in srgb, var(--part-accent) 6%, transparent) 0%, rgba(7, 8, 13, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  isolation: isolate;
}
.watch-part-intro::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--hero-art, none);
  background-size: cover;
  /* Mark's face sits roughly y=15-50% in every source. The part-intro
     containers are short (~220-300px), so cover-scaling makes only a
     thin horizontal band visible. `right 30%` lands that band on his
     face — `top` shows only hair, `center` shows mouth/chest. */
  background-position: right 30%;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.watch-part-intro-vignette {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 8, 13, 0.35) 75%, rgba(7, 8, 13, 0.9) 100%),
    linear-gradient(90deg, rgba(3, 5, 10, 0.92) 0%, rgba(3, 5, 10, 0.7) 30%, rgba(3, 5, 10, 0.2) 55%, transparent 75%);
}
.watch-part-intro-scan, .watch-part-intro-body { z-index: 2; }
@media (max-width: 800px) {
  .watch-part-intro::before { background-position: right 30%; opacity: 0.55; }
  .watch-part-intro-vignette {
    background:
      linear-gradient(180deg, rgba(7, 8, 13, 0.2) 0%, rgba(7, 8, 13, 0.55) 45%, rgba(7, 8, 13, 0.95) 80%, rgba(7, 8, 13, 1) 100%);
  }
}
/* Wider canvas → let the part scene breathe further left, same as the
   hero. Title still pops via text-shadow + the dim top-down fade. */
@media (min-width: 1400px) {
  .watch-part-intro-vignette {
    background:
      linear-gradient(180deg, transparent 0%, rgba(7, 8, 13, 0.3) 78%, rgba(7, 8, 13, 0.85) 100%),
      linear-gradient(90deg, rgba(3, 5, 10, 0.82) 0%, rgba(3, 5, 10, 0.5) 22%, rgba(3, 5, 10, 0.12) 42%, transparent 62%);
  }
}
@media (min-width: 1800px) {
  .watch-part-intro-vignette {
    background:
      linear-gradient(180deg, transparent 0%, rgba(7, 8, 13, 0.25) 80%, rgba(7, 8, 13, 0.8) 100%),
      linear-gradient(90deg, rgba(3, 5, 10, 0.68) 0%, rgba(3, 5, 10, 0.36) 16%, rgba(3, 5, 10, 0.08) 34%, transparent 52%);
  }
}
.watch-part-intro-scan {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.watch-part-intro-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
}
.watch-part-num {
  font-family: var(--watch-font-mono); font-size: 0.72rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--part-accent); opacity: 0.95; margin-bottom: 0.4rem;
}
.watch-part-title {
  font-family: var(--watch-font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700; color: var(--watch-fg);
  line-height: 1.04; letter-spacing: -0.01em;
  margin: 0; max-width: 20ch;
}
.watch-part-subtitle {
  font-family: var(--watch-font-display);
  font-size: 1rem; color: rgba(255, 255, 255, 0.78);
  margin-top: 0.45rem; max-width: 40ch;
}
.watch-part-synopsis {
  font-family: var(--watch-font-display);
  font-size: 0.92rem; color: rgba(255, 255, 255, 0.65);
  line-height: 1.55; margin-top: 0.9rem; max-width: 55ch;
}
.watch-part-intro-right {
  display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-end;
}
.watch-stat-row { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.watch-stat {
  padding: 0.35rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--part-accent) 40%, transparent);
  background: rgba(7, 8, 13, 0.55); backdrop-filter: blur(6px);
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; color: var(--part-accent);
  white-space: nowrap;
}
.watch-stat-val {
  color: var(--watch-fg); font-family: var(--watch-font-display); font-weight: 700;
  font-size: 0.95rem; margin-right: 0.35rem;
}
.watch-kinds { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 0.4rem; }
.watch-kind-chip {
  font-family: var(--watch-font-mono); font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  color: var(--kind-color, var(--part-accent));
  border: 1px solid color-mix(in srgb, var(--kind-color, var(--part-accent)) 33%, transparent);
}
.watch-start-cta {
  font-family: var(--watch-font-display); font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 0.9rem;
  background: var(--part-accent); color: var(--watch-bg);
  border-radius: 2px;
  box-shadow: 0 6px 18px -10px var(--part-accent);
}
.watch-lane-count {
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4); letter-spacing: 0.05em;
  padding: 0 0 0.5rem;
}

/* ── Episode scroller + cards ─────────────────────────────────────────── */
.watch-scroller {
  display: flex; gap: 0.85rem; overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.watch-episode {
  flex: 0 0 280px;
  display: flex; flex-direction: column;
}
.watch-episode-button {
  display: block; width: 100%; padding: 0; text-align: left;
  cursor: pointer;
  transition: transform 0.2s;
}
.watch-episode-button:hover { transform: translateY(-2px); }
.watch-episode-button:hover .watch-episode-play { opacity: 1; }
.watch-episode-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--watch-bg);
}
.watch-episode-thumb video,
.watch-episode-thumb img,
.watch-episode-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.watch-episode-thumb.has-cover .watch-episode-thumb-overlay {
  background: linear-gradient(180deg, rgba(7, 8, 13, 0.15) 0%, transparent 35%, rgba(7, 8, 13, 0.9) 100%);
}
.watch-episode-thumb-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--kind-color, var(--part-accent)) 33%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--kind-color, var(--part-accent)) 13%, transparent) 0%, color-mix(in srgb, var(--kind-color-deep, var(--part-accent)) 53%, transparent) 100%);
}
.watch-episode-thumb-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
}
.watch-episode-thumb-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--watch-font-mono); font-size: 3.4rem;
  color: var(--kind-color, var(--part-accent)); opacity: 0.25;
  filter: drop-shadow(0 0 12px var(--kind-color, var(--part-accent)));
  pointer-events: none;
}
.watch-episode-thumb-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(7, 8, 13, 0.85) 100%);
}
.watch-episode-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(7, 8, 13, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  display: flex; align-items: center; justify-content: center;
  color: var(--watch-fg); font-size: 1.1rem;
  opacity: 0; transition: opacity 0.2s;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.watch-episode-index {
  position: absolute; top: 0.55rem; left: 0.65rem;
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.15rem 0.4rem;
  background: rgba(7, 8, 13, 0.7); backdrop-filter: blur(4px);
}
.watch-episode-tag {
  position: absolute; top: 0.55rem; right: 0.65rem;
  font-family: var(--watch-font-mono); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  background: rgba(7, 8, 13, 0.7);
  border: 1px solid var(--tag-color, var(--watch-yellow));
  color: var(--tag-color, var(--watch-yellow));
}
.watch-episode-shared {
  position: absolute; top: 0.55rem; left: 0.65rem;
  font-family: var(--watch-font-mono); font-size: 0.58rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  background: rgba(7, 8, 13, 0.75); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.7);
}
.watch-episode-bottom {
  position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.6rem;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.watch-episode-kind {
  font-family: var(--watch-font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  background: rgba(7, 8, 13, 0.7); backdrop-filter: blur(6px);
  border: 1px solid var(--kind-color, var(--part-accent));
  color: var(--kind-color, var(--part-accent));
}
.watch-episode-dur {
  font-family: var(--watch-font-mono); font-size: 0.72rem;
  background: rgba(7, 8, 13, 0.85);
  padding: 0.2rem 0.45rem;
}
.watch-episode-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255, 255, 255, 0.12);
}
.watch-episode-progress-bar {
  height: 100%;
  background: var(--kind-color, var(--part-accent));
  box-shadow: 0 0 8px var(--kind-color, var(--part-accent));
  transition: width 0.3s;
}
.watch-episode-meta { padding: 0.5rem 0.1rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.watch-episode-title {
  font-family: var(--watch-font-display); font-size: 0.92rem;
  font-weight: 600; color: var(--watch-fg); line-height: 1.3;
  min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.watch-episode-metaline {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--watch-font-mono); font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5); letter-spacing: 0.04em;
}
.watch-episode-metaline-sep { opacity: 0.4; }
.watch-episode-metaline-grow { flex: 1; }
.watch-chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.1rem 0.35rem;
  font-family: var(--watch-font-mono); font-size: 0.6rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.watch-chip.is-on {
  color: var(--chip-color);
  border-color: color-mix(in srgb, var(--chip-color) 53%, transparent);
  background: color-mix(in srgb, var(--chip-color) 7%, transparent);
}
.watch-chip--quiz.is-on { --chip-color: var(--watch-magenta); }
.watch-chip--quiz.is-on.is-passed { --chip-color: var(--watch-green); }
.watch-chip--quiz.is-on.is-retry  { --chip-color: var(--watch-yellow); }
.watch-chip--quiz.is-on:hover {
  background: color-mix(in srgb, var(--chip-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--chip-color) 75%, transparent);
}
button.watch-chip { cursor: pointer; font-family: var(--watch-font-mono); }
.watch-chip--pdf.is-on  { --chip-color: var(--watch-yellow); }
.watch-chip--read.is-on { --chip-color: var(--part-accent, var(--watch-cyan)); }
.watch-chip--read.is-on:hover {
  background: color-mix(in srgb, var(--chip-color) 18%, transparent);
  border-color: var(--chip-color);
}

/* ── Continue banner per Part ───────────────────────────────────────────── */
.watch-continue-banner {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 1rem;
  margin: 0 1.5rem 0.5rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--part-accent) 14%, transparent),
    color-mix(in srgb, var(--part-accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--part-accent) 40%, transparent);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--watch-font-mono); font-size: 0.78rem;
}
.watch-continue-banner:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--part-accent) 22%, transparent),
    color-mix(in srgb, var(--part-accent) 8%, transparent));
  border-color: color-mix(in srgb, var(--part-accent) 65%, transparent);
}
.watch-continue-icon {
  color: var(--part-accent); font-size: 0.9rem; line-height: 1;
}
.watch-continue-label {
  color: var(--part-accent); letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.66rem;
}
.watch-continue-title {
  color: var(--watch-fg);
  font-family: var(--watch-font-display);
  font-weight: 600;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.watch-continue-pct {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem; letter-spacing: 0.06em;
}

/* ── Article overlay (read-mode lens on the lesson HTML) ─────────────────
   Shares the fullscreen overlay shape with the player, but the article fills
   the main column instead of the video. Sidebar carries the quiz/PDF/play
   actions. Same fetch+strip primitive (LessonNotesPanel) renders the body. */
.watch-article-root {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.watch-article-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  height: 100vh; height: 100dvh;
  max-height: 100vh; max-height: 100dvh;
  overflow: hidden;
}
.watch-article-main {
  display: flex; flex-direction: column;
  background: #03050a;
  min-width: 0; min-height: 0;
  overflow-y: auto;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.watch-article-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 0.85rem;
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(7, 8, 13, 0.96), rgba(7, 8, 13, 0.78));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--watch-border);
}
.watch-article-prose {
  padding: 1.25rem 1.5rem 2.5rem;
  max-width: 78ch;
  margin: 0 auto;
  width: 100%;
}
.watch-article-prose .watch-fs-panel-content {
  /* Reuse the notes-panel typography rules without the side-panel padding. */
  padding: 0;
}
.watch-article-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  border-top: 1px solid var(--watch-border);
  position: sticky; bottom: 0;
  background: rgba(7, 8, 13, 0.95);
  backdrop-filter: blur(8px);
  font-family: var(--watch-font-mono); font-size: 0.74rem;
}
.watch-article-foot > div:first-child {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1;
}
.watch-article-sidebar {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.2rem 1rem;
  background: #07090f;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
}
.watch-article-sidebar-eyebrow {
  font-family: var(--watch-font-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--part-accent);
  margin-bottom: 0.2rem;
}
.watch-article-sidebar-empty {
  font-family: var(--watch-font-mono); font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  padding: 0.6rem 0;
}
.watch-article-sidebar .watch-cta-primary,
.watch-article-sidebar .watch-cta-secondary {
  text-align: left;
  width: 100%;
}

@media (max-width: 900px) {
  .watch-article-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .watch-article-sidebar {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: row; flex-wrap: wrap;
    max-height: 35vh;
  }
  .watch-article-sidebar .watch-cta-primary,
  .watch-article-sidebar .watch-cta-secondary {
    flex: 1 1 45%; min-width: 140px;
    text-align: center;
  }
}
.watch-pending-banner {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.3rem;
  font-family: var(--watch-font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--watch-yellow);
}

/* ── Fullscreen player (Netflix/Hulu shape) + side panel (Twitch-chat) ─── */
.watch-fs-root {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.watch-fs-scrim {
  position: absolute; inset: 0;
  background: transparent;
  border: 0;
  z-index: 0;
  cursor: default;
}
.watch-fs-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  /* Explicit single-row track at viewport height. Without this, the grid's
     implicit row defaulted to `auto`, so the row grew to fit the notes
     panel's full lesson HTML (~6000px). The video stage inherited that
     height, leaving the <video> rendered thousands of pixels below the
     visible viewport — invisible to the user but technically "playing." */
  grid-template-rows: 100vh;
  grid-template-rows: 100dvh;
  height: 100vh; height: 100dvh;
  max-height: 100vh; max-height: 100dvh;
  background: #000;
  transition: grid-template-columns 0.25s ease;
  overflow: hidden;
}
.watch-fs-grid.is-panel-closed {
  grid-template-columns: 1fr 0px;
}

/* Stage (video) */
.watch-fs-stage {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: #000;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.watch-fs-grid.is-panel-closed .watch-fs-stage { border-right: 0; }
.watch-fs-stage-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(7, 8, 13, 0.85), rgba(7, 8, 13, 0));
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  pointer-events: none;
}
.watch-fs-stage-head > * { pointer-events: auto; }
.watch-fs-eyebrow {
  font-family: var(--watch-font-mono); font-size: 0.65rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--part-accent);
}
.watch-fs-title {
  font-family: var(--watch-font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--watch-fg); margin-top: 0.25rem;
  max-width: 60ch;
}
.watch-fs-head-actions { display: flex; gap: 0.4rem; }
.watch-fs-icon-btn {
  font-family: var(--watch-font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(7, 8, 13, 0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.45rem 0.7rem;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.watch-fs-icon-btn:hover {
  background: rgba(7, 8, 13, 0.75);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--watch-fg);
}
.watch-fs-close { font-size: 1rem; padding: 0.45rem 0.65rem; line-height: 1; }

.watch-fs-video-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.watch-fs-video {
  width: 100%; height: 100%; max-width: 100%;
  object-fit: contain;
  background: #000;
}

.watch-fs-stage-foot {
  /* SITS BELOW THE VIDEO — not absolute. Previously absolute over the bottom
   * of the video, which let the static progress bar pass clicks through to
   * the native <video> scrubber underneath, so clicking near the right edge
   * of the bar (aiming to scrub) silently seeked the video to the end. */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.25rem;
  background: rgba(7, 8, 13, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}
.watch-fs-stage-foot > div:first-child {
  display: flex; align-items: center; gap: 0.7rem;
  flex: 1;
  font-family: var(--watch-font-mono); font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.85);
}
.watch-fs-prog-pct {
  color: var(--part-accent);
  letter-spacing: 0.06em;
  min-width: 3em;
}
.watch-fs-prog-bar {
  flex: 1; max-width: 320px;
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  display: inline-block;
}
.watch-fs-prog-fill {
  display: block; height: 100%;
  background: var(--part-accent);
  box-shadow: 0 0 10px var(--part-accent);
  transition: width 0.3s;
}
.watch-fs-foot-link {
  font-family: var(--watch-font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--part-accent);
}
.watch-fs-foot-link:hover { text-decoration: underline; }

/* Panel (lesson HTML) */
.watch-fs-panel {
  display: flex; flex-direction: column;
  min-width: 0;
  background: #03050a;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.watch-fs-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--watch-border);
  background: rgba(7, 8, 13, 0.6);
}
.watch-fs-panel-eyebrow {
  font-family: var(--watch-font-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--part-accent);
}
.watch-fs-panel-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 4rem;
  color: #e8eaf0;
  font-family: var(--watch-font-display);
  font-size: 0.95rem;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.watch-fs-panel-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  font-family: var(--watch-font-mono); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4); text-align: center;
}
.watch-fs-panel-empty > :first-child { font-size: 2rem; opacity: 0.5; }

/* Sanitized lesson HTML — keep selectors scoped to the panel so we don't
   leak styles into the rest of the watch UI. */
.watch-fs-panel-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.watch-fs-panel-content h1,
.watch-fs-panel-content h2,
.watch-fs-panel-content h3,
.watch-fs-panel-content h4 {
  color: #fff;
  font-family: var(--watch-font-display);
  letter-spacing: -0.005em;
  font-weight: 700;
  line-height: 1.2;
}
.watch-fs-panel-content h1 { font-size: 1.5rem; margin: 0 0 0.85rem; }
.watch-fs-panel-content h2 {
  font-size: 1.15rem; margin: 1.6rem 0 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--part-accent);
}
.watch-fs-panel-content h3 { font-size: 1rem; margin: 1.1rem 0 0.5rem; color: rgba(255, 255, 255, 0.9); }
.watch-fs-panel-content h4 { font-size: 0.9rem; margin: 0.9rem 0 0.4rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.05em; }
.watch-fs-panel-content p,
.watch-fs-panel-content li {
  color: rgba(232, 234, 240, 0.88);
  margin: 0.5rem 0;
}
.watch-fs-panel-content ul,
.watch-fs-panel-content ol { padding-left: 1.25rem; margin: 0.5rem 0; }
.watch-fs-panel-content li { margin: 0.35rem 0; }
.watch-fs-panel-content strong { color: #fff; font-weight: 600; }
.watch-fs-panel-content em { color: rgba(255, 255, 255, 0.95); font-style: normal; border-bottom: 1px dotted rgba(255, 255, 255, 0.3); }
.watch-fs-panel-content code {
  font-family: var(--watch-font-mono);
  font-size: 0.85em;
  background: rgba(0, 244, 255, 0.08);
  color: #c8f7ff;
  border: 1px solid rgba(0, 244, 255, 0.18);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
}
.watch-fs-panel-content pre {
  background: rgba(0, 244, 255, 0.05);
  border: 1px solid rgba(0, 244, 255, 0.18);
  padding: 0.85rem;
  overflow-x: auto;
  font-family: var(--watch-font-mono);
  font-size: 0.82rem;
  color: #c8f7ff;
  margin: 0.7rem 0;
  border-radius: 2px;
}
.watch-fs-panel-content pre code {
  background: none; border: 0; padding: 0; color: inherit;
}
.watch-fs-panel-content a { color: var(--part-accent); }
.watch-fs-panel-content a:hover { text-decoration: underline; }
.watch-fs-panel-content img,
.watch-fs-panel-content video {
  max-width: 100%; height: auto;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0.7rem 0;
}
.watch-fs-panel-content blockquote {
  border-left: 3px solid var(--part-accent);
  padding: 0.3rem 0 0.3rem 0.85rem;
  margin: 0.7rem 0;
  color: rgba(232, 234, 240, 0.78); font-style: italic;
}
.watch-fs-panel-content hr {
  border: 0; height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 1.2rem 0;
}
.watch-fs-panel-content table {
  border-collapse: collapse; width: 100%; margin: 0.7rem 0;
  font-size: 0.85rem;
}
.watch-fs-panel-content th,
.watch-fs-panel-content td {
  text-align: left; padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.watch-fs-panel-content th { color: var(--part-accent); font-weight: 600; font-family: var(--watch-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* Hide modules-grid / module-card chrome if any leaked through. */
.watch-fs-panel-content .modules-grid,
.watch-fs-panel-content .module-card { display: block; border: 0; padding: 0; background: none; margin: 0.5rem 0; }
.watch-fs-panel-content .module-header,
.watch-fs-panel-content .module-number { display: none; }

@media (max-width: 900px) {
  /* YouTube-style: video locked at the top in a 16:9 box that's capped at
     half-viewport height, so on landscape phones / short windows the notes
     panel below it always gets real estate and the video never overflows. */
  .watch-fs-grid {
    grid-template-columns: 1fr;
    grid-template-rows: min(56.25vw, 50vh) minmax(0, 1fr);
  }
  .watch-fs-grid.is-panel-closed {
    grid-template-rows: 1fr 0;
  }
  .watch-fs-stage {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .watch-fs-video-wrap {
    width: 100%; height: 100%;
    flex: 1;
  }
  .watch-fs-panel {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 0;
    overflow: hidden; /* iframe owns its own scroll */
  }
  .watch-fs-title { font-size: 1rem; max-width: 22ch; }
  .watch-fs-stage-head { padding: 0.7rem 0.85rem; }
  .watch-fs-stage-foot { padding: 0.6rem 0.85rem; }
  .watch-fs-prog-bar { max-width: none; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.watch-footer {
  padding: 2rem 1.5rem 3rem; text-align: center;
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35); letter-spacing: 0.1em;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Single-row topbar — eyebrow + 3 track pills share the row so the chrome
     is ~40px tall instead of the wrapped-to-two-rows ~94px it was before.
     Pairs with the page-meta hide in index.html: combined nav goes from
     ~204px to ~108px on a 540-wide mobile viewport. */
  .watch-topbar {
    flex-wrap: nowrap; gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    align-items: center;
  }
  .watch-brand { flex: 0 0 auto; }
  .watch-brand-title { font-size: 0.95rem; }
  .watch-tracks-nav { flex: 1 1 auto; justify-content: flex-end; gap: 0.3rem; }
  .watch-track-btn { padding: 0.35rem 0.55rem; font-size: 0.78rem; }
  .watch-hero { height: clamp(420px, 70vh, 620px); }
  .watch-hero-body { padding: clamp(2rem, 5vw, 3rem) 1rem 1.5rem; }
  .watch-part-intro { padding: 1.5rem 1.1rem 1.25rem; }
  .watch-part-intro-body { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .watch-part-intro-right { align-items: flex-start; }
  .watch-stat-row, .watch-kinds { justify-content: flex-start; }
  .watch-lanes { padding: 0 1rem; }
  .watch-episode { flex-basis: 240px; }
  .watch-hero-badges { right: 1rem; }
}
@media (max-width: 560px) {
  .watch-episode { flex-basis: 80vw; }
  .watch-track-btn-eyebrow { display: none; }
  /* "Tracks" label drops at the narrowest widths — the three pills are
     self-explanatory and the saved ~70px keeps everything on one row. */
  .watch-brand { display: none; }
  .watch-tracks-nav { justify-content: space-between; }
  .watch-track-btn { flex: 1 1 0; justify-content: center; padding: 0.35rem 0.3rem; font-size: 0.74rem; }
}

/* ── Player foot actions (quiz + lesson link) ───────────────────────────── */
.watch-fs-foot-actions {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
}
.watch-fs-foot-link--cta {
  font-family: var(--watch-font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--part-accent);
  background: color-mix(in srgb, var(--part-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--part-accent) 55%, transparent);
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.watch-fs-foot-link--cta:hover {
  background: color-mix(in srgb, var(--part-accent) 22%, transparent);
}

/* ── Quiz overlay ───────────────────────────────────────────────────────── */
.watch-quiz-root {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(2, 3, 8, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.watch-quiz-root .watch-fs-scrim {
  position: absolute; inset: 0; z-index: 0;
  background: transparent; border: 0; cursor: default;
}
.watch-quiz-card {
  position: relative; z-index: 1;
  width: min(640px, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.5rem 1.75rem 1.4rem;
  background: linear-gradient(180deg, rgba(14, 18, 30, 0.95) 0%, rgba(7, 8, 13, 0.95) 100%);
  border: 1px solid color-mix(in srgb, var(--part-accent) 30%, rgba(255,255,255,0.08));
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
              0 0 36px color-mix(in srgb, var(--part-accent) 22%, transparent);
}
.watch-quiz-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.watch-quiz-eyebrow {
  font-family: var(--watch-font-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--part-accent);
}
.watch-quiz-progress {
  margin-top: 0.25rem;
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  color: var(--watch-fg-faint);
}
.watch-quiz-progress-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.watch-quiz-progress-fill {
  height: 100%;
  background: var(--part-accent);
  box-shadow: 0 0 10px var(--part-accent);
  transition: width 0.3s;
}
.watch-quiz-title {
  font-family: var(--watch-font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--watch-fg);
  margin-bottom: 0.6rem;
}
.watch-quiz-q {
  font-family: var(--watch-font-display); font-size: 1.05rem; font-weight: 500;
  color: var(--watch-fg);
  line-height: 1.4;
  margin-bottom: 1rem;
}
.watch-quiz-choices {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-bottom: 0.95rem;
}
.watch-quiz-choice {
  display: flex; align-items: center; gap: 0.75rem;
  text-align: left;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  color: var(--watch-fg-dim);
  font-family: var(--watch-font-display); font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.2s;
}
.watch-quiz-choice:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: color-mix(in srgb, var(--part-accent) 45%, rgba(255,255,255,0.12));
  color: var(--watch-fg);
}
.watch-quiz-choice.is-picked {
  background: color-mix(in srgb, var(--part-accent) 12%, transparent);
  border-color: var(--part-accent);
  color: var(--watch-fg);
}
.watch-quiz-choice.is-correct {
  background: color-mix(in srgb, var(--watch-green) 14%, transparent);
  border-color: var(--watch-green);
  color: var(--watch-fg);
}
.watch-quiz-choice.is-wrong {
  background: color-mix(in srgb, var(--watch-pink) 14%, transparent);
  border-color: var(--watch-pink);
  color: var(--watch-fg);
}
.watch-quiz-choice.is-dim { opacity: 0.45; }
.watch-quiz-choice:disabled { cursor: default; }
.watch-quiz-choice-key {
  flex: 0 0 1.4rem; height: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--watch-font-mono); font-size: 0.7rem; font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.watch-quiz-choice-text { flex: 1; }

.watch-quiz-explain {
  margin-bottom: 0.95rem;
  padding: 0.7rem 0.85rem;
  font-family: var(--watch-font-display); font-size: 0.85rem;
  line-height: 1.5;
  border-left: 2px solid;
  background: rgba(255, 255, 255, 0.03);
  color: var(--watch-fg-dim);
}
.watch-quiz-explain.is-ok  { border-color: var(--watch-green); }
.watch-quiz-explain.is-no  { border-color: var(--watch-pink); }
.watch-quiz-explain strong {
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-right: 0.4rem;
}
.watch-quiz-explain.is-ok strong { color: var(--watch-green); }
.watch-quiz-explain.is-no strong { color: var(--watch-pink); }

.watch-quiz-foot {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin-top: 0.4rem;
}
.watch-quiz-foot .watch-cta-primary { padding: 0.6rem 1rem; font-size: 0.8rem; }
.watch-quiz-foot .watch-cta-primary:disabled { opacity: 0.4; cursor: default; }
.watch-quiz-error {
  font-family: var(--watch-font-display); color: var(--watch-fg-dim);
  margin: 0.5rem 0 1rem;
}

/* Summary screen */
.watch-quiz-card--summary { text-align: left; }
.watch-quiz-card--summary.is-passed { border-color: color-mix(in srgb, var(--watch-green) 55%, transparent); }
.watch-quiz-card--summary.is-retry  { border-color: color-mix(in srgb, var(--watch-yellow) 55%, transparent); }
.watch-quiz-score {
  display: flex; align-items: baseline; gap: 0.85rem;
  margin: 0.6rem 0 0.4rem;
}
.watch-quiz-score-num {
  font-family: var(--watch-font-display); font-size: 3.2rem; font-weight: 700;
  color: var(--part-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.watch-quiz-card--summary.is-passed .watch-quiz-score-num { color: var(--watch-green); }
.watch-quiz-card--summary.is-retry  .watch-quiz-score-num { color: var(--watch-yellow); }
.watch-quiz-score-frac {
  font-family: var(--watch-font-mono); font-size: 0.95rem;
  color: var(--watch-fg-faint);
}
.watch-quiz-verdict {
  font-family: var(--watch-font-mono); font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--watch-fg-dim);
  margin-bottom: 1.1rem;
}
.watch-quiz-card--summary.is-passed .watch-quiz-verdict { color: var(--watch-green); }
.watch-quiz-card--summary.is-retry  .watch-quiz-verdict { color: var(--watch-yellow); }
.watch-quiz-review {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.watch-quiz-review-row {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-family: var(--watch-font-display); font-size: 0.85rem;
  color: var(--watch-fg-dim);
  line-height: 1.4;
}
.watch-quiz-review-glyph {
  font-family: var(--watch-font-mono); font-size: 0.9rem;
  flex: 0 0 1rem;
}
.watch-quiz-review-row.is-ok .watch-quiz-review-glyph { color: var(--watch-green); }
.watch-quiz-review-row.is-no .watch-quiz-review-glyph { color: var(--watch-pink); }

@media (max-width: 560px) {
  .watch-quiz-card { padding: 1.15rem 1.15rem 1.1rem; }
  .watch-quiz-q { font-size: 1rem; }
  .watch-quiz-score-num { font-size: 2.4rem; }
}

/* ── Cert chip (module quiz) ──────────────────────────────────────────── */
.watch-chip--cert {
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 224, 102, 0.32);
  background: rgba(255, 224, 102, 0.06);
  color: rgba(255, 224, 102, 0.78);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.watch-chip--cert.is-on:hover {
  background: rgba(255, 224, 102, 0.15);
  border-color: rgba(255, 224, 102, 0.55);
  color: #fff7d0;
}
.watch-chip--cert.is-passed {
  background: rgba(255, 200, 60, 0.18);
  border-color: rgba(255, 200, 60, 0.6);
  color: #fff5cf;
}
.watch-chip--cert.is-retry {
  background: rgba(255, 107, 107, 0.10);
  border-color: rgba(255, 107, 107, 0.45);
  color: #ffb8b8;
}

/* ── Certificate overlay ─────────────────────────────────────────────── */
.watch-cert-root {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.92);
  padding: 1.5rem;
  overflow: auto;
}
.watch-cert-scrim {
  position: fixed; inset: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.watch-cert-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
}
/* Pure-CSS cert card. Per-track accent flows through --part-accent.
 * Layered background:
 *   1. radial top-glow in track accent
 *   2. corner accent radials
 *   3. faint dot pattern via repeating-radial-gradient
 *   4. dark navy base gradient
 * Frame: dual border (outer hairline + inset accent line) + 4 corner
 * brackets drawn in inline SVG. No raster dependency. */
.watch-cert-card {
  --cert-bg-dark: #02050d;
  --cert-bg-deep: #060b18;
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,
      color-mix(in srgb, var(--part-accent, #00f4ff) 18%, transparent),
      transparent 70%),
    radial-gradient(circle at 18% 88%,
      color-mix(in srgb, var(--part-accent, #00f4ff) 8%, transparent),
      transparent 45%),
    radial-gradient(circle at 82% 12%,
      color-mix(in srgb, var(--part-accent, #00f4ff) 6%, transparent),
      transparent 40%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px,
      transparent 1px, transparent 22px),
    linear-gradient(160deg, var(--cert-bg-dark) 0%, var(--cert-bg-deep) 100%);
  border: 1px solid color-mix(in srgb, var(--part-accent, #00f4ff) 55%, transparent);
  box-shadow:
    inset 0 0 0 8px rgba(0, 0, 0, 0.35),
    inset 0 0 0 9px color-mix(in srgb, var(--part-accent, #00f4ff) 70%, transparent),
    inset 0 0 0 10px rgba(255, 255, 255, 0.06),
    0 30px 80px -20px rgba(0, 0, 0, 0.85),
    0 0 60px -10px color-mix(in srgb, var(--part-accent, #00f4ff) 45%, transparent);
}
/* Ghibli scene backdrop — sits under the freehand chrome */
.watch-cert-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Darkening + vignette overlay so the cert text always reads, regardless
 * of how bright the underlying Ghibli scene paints. The radial center
 * keeps the safe-zone darker than the edges; the linear bottom-darken
 * keeps the footer meta readable; the track tint preserves identity. */
.watch-cert-bg-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(2, 5, 13, 0.78) 0%,
      rgba(2, 5, 13, 0.62) 55%,
      rgba(2, 5, 13, 0.30) 100%),
    linear-gradient(180deg,
      rgba(2, 5, 13, 0.20) 0%,
      rgba(2, 5, 13, 0.10) 40%,
      rgba(2, 5, 13, 0.55) 100%),
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--part-accent, #00f4ff) 8%, transparent) 0%,
      transparent 70%);
  z-index: 1;
  pointer-events: none;
}
/* Barely-there scanlines — adds depth without competing with the text */
.watch-cert-card::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent 3px,
    rgba(255, 255, 255, 0.012) 3px, rgba(255, 255, 255, 0.012) 4px);
  pointer-events: none;
  z-index: 2;
}
/* Corner brackets — 4 L-shapes in track accent, drawn in SVG, scaled */
.watch-cert-corners {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
  stroke: var(--part-accent, #00f4ff);
  stroke-width: 0.4;
  stroke-linecap: square;
  fill: none;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--part-accent, #00f4ff) 50%, transparent));
}
/* PB seal — small circular monogram under the eyebrow */
.watch-cert-seal {
  width: 56px; height: 56px;
  margin: 0.4rem auto 0.8rem;
  opacity: 0.92;
}
.watch-cert-seal-svg {
  width: 100%; height: 100%;
  stroke: var(--part-accent, #00f4ff);
  stroke-width: 1.2;
  fill: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--part-accent, #00f4ff) 60%, transparent));
}
.watch-cert-seal-svg text {
  fill: #fff;
  font-family: var(--watch-font-mono, 'Share Tech Mono', monospace);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  stroke: none;
}
/* Per-track accent overrides — keep the cert visually consistent with the
 * track's color identity instead of whatever --part-accent was set by the
 * caller (which inherits from whichever Part the user was on). */
.watch-cert-card--vibe-coder      { --part-accent: #00f4ff; }
.watch-cert-card--vibe-management { --part-accent: #ffe600; }
.watch-cert-card--field-guides    { --part-accent: #00ff88; }
.watch-cert-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 7% 10%;
  z-index: 4;
  color: #f3f7ff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.watch-cert-eyebrow {
  font-family: var(--watch-font-mono); font-size: 0.85rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--part-accent, #00f4ff);
  margin-bottom: 0.85rem;
  opacity: 0.95;
}
.watch-cert-headline {
  font-family: var(--watch-font-display, 'Rajdhani', sans-serif);
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 1.2rem;
}
.watch-cert-presented,
.watch-cert-for {
  font-family: var(--watch-font-mono); font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.4rem 0 0.55rem;
}
.watch-cert-name {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  border: 0;
  background: transparent;
  padding: 0 0.4em;
  margin: 0.1rem 0 0.4rem;
  cursor: text;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.watch-cert-name:hover { border-bottom-color: rgba(255, 255, 255, 0.32); }
.watch-cert-name-input {
  text-align: center;
  outline: 0;
  border-bottom-color: var(--part-accent, #00f4ff);
}
.watch-cert-divider {
  width: clamp(140px, 30%, 320px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--part-accent, #00f4ff), transparent);
  margin: 0.85rem 0 0.55rem;
  opacity: 0.85;
}
.watch-cert-module {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  max-width: 90%;
}
.watch-cert-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem;
  justify-content: center; align-items: center;
  font-family: var(--watch-font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.watch-cert-meta-sep { opacity: 0.5; }
.watch-cert-actions {
  display: flex; gap: 0.6rem;
  margin-top: 1.5rem;
  z-index: 2;
}

/* Print scope — when the cert is open, body has .pb-cert-printable; the
   print sheet flattens everything except the cert card to give the user a
   clean printable artifact. */
@media print {
  body.pb-cert-printable * { visibility: hidden !important; }
  body.pb-cert-printable .watch-cert-root,
  body.pb-cert-printable .watch-cert-root * { visibility: visible !important; }
  body.pb-cert-printable .watch-cert-root {
    position: absolute; inset: 0;
    background: #fff !important;
    padding: 0;
  }
  body.pb-cert-printable .watch-cert-scrim,
  body.pb-cert-printable .watch-cert-actions { display: none !important; }
  body.pb-cert-printable .watch-cert-stage { max-width: none; width: 100%; }
  body.pb-cert-printable .watch-cert-card { box-shadow: none; border-radius: 0; }
}

@media (max-width: 700px) {
  .watch-cert-content { padding: 7% 8%; }
  .watch-cert-divider { margin: 0.55rem 0 0.4rem; }
  .watch-cert-meta { font-size: 0.62rem; }
}

/* ── Track cert banner — slim page-top alert ──────────────────────────────
 * Sits just below TopBar, above the Part hero. Spans full page width.
 * Subtle accent-tinted strip with inline icon + title + sub + CTA.
 * Earned state flips to a solid accent fill so the achievement reads at
 * a glance. */
.watch-track-cert {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem 1.25rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--part-accent, #00f4ff) 16%, rgba(5, 6, 12, 0.95)) 0%,
    rgba(5, 6, 12, 0.95) 60%,
    color-mix(in srgb, var(--part-accent, #00f4ff) 6%, rgba(5, 6, 12, 0.95)) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--part-accent, #00f4ff) 40%, transparent);
  position: relative;
  z-index: 5;
}
/* Top hair-line accent for the alert affordance */
.watch-track-cert::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--part-accent, #00f4ff), transparent);
  opacity: 0.7;
}
.watch-track-cert.is-earned {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--part-accent, #00f4ff) 28%, rgba(5, 6, 12, 0.95)) 0%,
    color-mix(in srgb, var(--part-accent, #00f4ff) 12%, rgba(5, 6, 12, 0.95)) 100%);
  border-bottom-color: color-mix(in srgb, var(--part-accent, #00f4ff) 70%, transparent);
}
.watch-track-cert-icon {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--part-accent, #00f4ff) 60%, transparent));
}
.watch-track-cert-body {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 0.65rem;
  overflow: hidden;
}
.watch-track-cert-title {
  font-family: var(--watch-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.watch-track-cert-sub {
  font-family: var(--watch-font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.watch-track-cert-cta {
  flex: 0 0 auto;
  white-space: nowrap;
  background: color-mix(in srgb, var(--part-accent, #00f4ff) 18%, transparent);
  color: var(--part-accent, #00f4ff);
  border: 1px solid color-mix(in srgb, var(--part-accent, #00f4ff) 55%, transparent);
  font-family: var(--watch-font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.watch-track-cert-cta:hover {
  background: color-mix(in srgb, var(--part-accent, #00f4ff) 36%, transparent);
  border-color: var(--part-accent, #00f4ff);
  color: #fff;
}
.watch-track-cert.is-earned .watch-track-cert-cta {
  background: var(--part-accent, #00f4ff);
  color: #050517;
  border-color: var(--part-accent, #00f4ff);
}
@media (max-width: 640px) {
  .watch-track-cert {
    padding: 0.5rem 0.85rem;
    gap: 0.6rem;
  }
  .watch-track-cert-body {
    flex-direction: column; align-items: flex-start; gap: 0.05rem;
  }
  .watch-track-cert-title { font-size: 0.72rem; }
  .watch-track-cert-sub { font-size: 0.66rem; }
  .watch-track-cert-cta {
    font-size: 0.68rem;
    padding: 0.4rem 0.7rem;
  }
}

/* ── Watch-access gate (anonymous + no email captured) ───────────────────── */
.watch-gate-root {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(3, 5, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.watch-gate-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: 2rem 1.75rem 1.5rem;
  background: linear-gradient(135deg, #0a0b10, #16182a);
  border: 1px solid rgba(0, 244, 255, 0.35);
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 60px -10px rgba(0, 244, 255, 0.18);
  color: #e0e0e0;
  font-family: var(--watch-font, 'Rajdhani', sans-serif);
}
.watch-gate-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #8a8aa0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.watch-gate-close:hover,
.watch-gate-close:focus-visible {
  color: #00f4ff;
  border-color: rgba(0, 244, 255, 0.45);
  background: rgba(0, 244, 255, 0.06);
  outline: none;
}
.watch-gate-eyebrow {
  font-family: var(--watch-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00f4ff;
  margin-bottom: 0.5rem;
}
.watch-gate-title {
  font-family: var(--watch-font, 'Rajdhani', sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
.watch-gate-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin: 0 0 1.2rem;
}
.watch-gate-form { margin: 0 0 1rem; }
.watch-gate-label {
  display: block;
  font-family: var(--watch-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00ff88;
  margin-bottom: 0.35rem;
}
.watch-gate-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(7, 8, 13, 0.92);
  border: 1px solid rgba(0, 244, 255, 0.35);
  color: #fff;
  font-family: var(--watch-font, 'Rajdhani', sans-serif);
  font-size: 1rem;
  border-radius: 3px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.watch-gate-input:focus {
  border-color: #00f4ff;
  box-shadow: 0 0 0 2px rgba(0, 244, 255, 0.2);
}
.watch-gate-error {
  margin: 0.5rem 0 0;
  font-family: var(--watch-font-mono);
  font-size: 0.82rem;
  color: #ff6b6b;
}
.watch-gate-submit {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  background: linear-gradient(90deg, #9d00ff, #ff00a0);
  color: #fff;
  border: 0;
  border-radius: 3px;
  font-family: var(--watch-font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.watch-gate-submit:hover { transform: translateY(-1px); }
.watch-gate-submit[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.watch-gate-alt {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.watch-gate-alt-btn {
  background: transparent;
  border: 1px solid rgba(0, 244, 255, 0.4);
  color: #00f4ff;
  font-family: var(--watch-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}
.watch-gate-alt-btn:hover {
  background: rgba(0, 244, 255, 0.08);
  transform: translateY(-1px);
}
.watch-gate-alt-btn--trial {
  border-color: rgba(255, 230, 0, 0.5);
  color: #ffe600;
}
.watch-gate-alt-btn--trial:hover { background: rgba(255, 230, 0, 0.08); }
.watch-gate-fine {
  margin: 1rem 0 0;
  font-family: var(--watch-font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}