/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #0b0b0f;
  color: #f4f4f5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, button { font-family: inherit; }
.hidden { display: none !important; }

:root {
  --accent: #e50914;
  --accent-2: #ff2a36;
  --bg: #0b0b0f;
  --bg-2: #15151c;
  --bg-3: #1f1f29;
  --text: #f4f4f5;
  --text-dim: #b3b3bb;
  --text-muted: #7a7a85;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  --nav-h: 68px;
  --bottom-nav-h: 64px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* ============ Top navigation ============ */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: linear-gradient(180deg, rgba(11,11,15,0.96) 0%, rgba(11,11,15,0.8) 60%, rgba(11,11,15,0) 100%);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.topnav.scrolled {
  background: rgba(11, 11, 15, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand { display: flex; align-items: center; transition: transform 0.2s ease; }
.brand:hover { transform: translateY(-1px); }
.brand-text {
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 24px;
  background: linear-gradient(135deg, #ff5760 0%, #e50914 50%, #8b0612 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(229, 9, 20, 0.25);
}
.brand-text.small { font-size: 18px; letter-spacing: 1px; }
.nav-links { display: flex; gap: 24px; flex: 1; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  position: relative;
  padding: 8px 0;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 12px; }
/* Nav search is now just a magnifier button that opens the full-screen overlay.
   No inline input, and NO expand-to-pill on focus — the old :focus-within width
   expansion turned the button into an empty 280px bar on click (the reported bug). */
.search-form {
  display: flex;
  align-items: center;
  width: 40px;
}
.search-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: pointer;
}
.search-toggle:focus,
.search-toggle:active { background: rgba(255, 255, 255, 0.08); outline: none; }
@media (hover: hover) {
  .search-toggle:hover { background: rgba(255, 255, 255, 0.08); }
}
.menu-toggle { display: none; }

/* ============ Mobile drawer ============ */
.mobile-drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(11, 11, 15, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 99;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-drawer.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer a, .mobile-drawer .link-btn {
  padding: 14px 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.mobile-drawer a:last-of-type { border-bottom: none; }
.link-btn { color: var(--accent); font-weight: 500; cursor: pointer; }

/* ============ Bottom nav (mobile) ============ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: rgba(11, 11, 15, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  transition: color 0.2s;
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.active { color: var(--accent); }

/* ============ App container ============ */
.app {
  min-height: 100vh;
  padding-top: var(--nav-h);
  padding-bottom: 80px;
}

/* ============ Hero ============ */
.hero {
  position: relative;
  width: 100%;
  height: min(85vh, 780px);
  min-height: 520px;
  margin-top: calc(-1 * var(--nav-h));
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: transform, opacity;
}
.hero-bg.active {
  opacity: 1;
  animation: kenburns 18s ease-out both;
}
@keyframes kenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.13) translate3d(-1.5%, -1%, 0); }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,11,15,0.4) 0%, rgba(11,11,15,0) 28%, rgba(11,11,15,0.55) 72%, var(--bg) 100%),
    linear-gradient(90deg, rgba(11,11,15,0.94) 0%, rgba(11,11,15,0.55) 48%, rgba(11,11,15,0.15) 100%);
  z-index: 1;
}
.hero-content {
  position: absolute;
  bottom: 100px;
  left: 0; right: 0;
  padding: 0 64px;
  max-width: 720px;
  z-index: 2;
  animation: heroFadeIn 0.8s ease;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-logo {
  max-width: 320px;
  max-height: 160px;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
}
.hero-title {
  /* Fills the wide .hero-content column (set below) and sized so even a long
     title wraps in ~2 lines instead of a cramped 5-line stack. Full title shows
     (no truncation). */
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 16px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.hero-rank {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hero-rank-num {
  background: linear-gradient(135deg, #ff2a36, #b00710);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.6px;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
}
.hero-meta .badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.hero-meta .badge-type { background: rgba(229, 9, 20, 0.85); color: #fff; }
.hero-meta .badge-mature {
  border: 1px solid rgba(255,255,255,0.4);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}
.hero-meta .badge-quality {
  border: 1px solid rgba(255,255,255,0.4);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #fff;
}
.hero-meta .rating { color: #ffc83d; font-weight: 600; }
.hero-genres {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.hero-genres .sep { color: rgba(255,255,255,0.45); }
.hero-overview {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: #fff;
  color: #000;
}
.btn-primary:hover { background: rgba(255, 255, 255, 0.85); box-shadow: 0 6px 24px rgba(255,255,255,0.15); }
.btn-secondary {
  background: rgba(109, 109, 110, 0.6);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: rgba(109, 109, 110, 0.8); }
.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-2); box-shadow: 0 6px 24px rgba(229, 9, 20, 0.4); }
.btn-ghost {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  padding: 10px 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ghost:hover { border-color: #fff; background: rgba(0,0,0,0.7); }
.hero-content { z-index: 2; }

.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.hero-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  transition: background 0.2s, width 0.3s, border-radius 0.3s;
}
.hero-dots button.active { background: var(--accent); width: 26px; border-radius: 5px; }

/* ============ Sections / rows ============ */
.section {
  padding: 16px 0;
  margin: 0 0 32px;
}
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 64px;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
}
.section-link {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}
.section-link:hover { color: var(--text); }

.row-wrap {
  position: relative;
  padding: 0 64px;
}
.row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 8px 0 12px;
}
.row::-webkit-scrollbar { display: none; }
.row-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: calc(100% - 16px);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.row-wrap:hover .row-arrow { opacity: 1; }
.row-arrow:hover { background: rgba(0, 0, 0, 0.85); }
.row-arrow.left { left: 16px; border-radius: 0 6px 6px 0; }
.row-arrow.right { right: 16px; border-radius: 6px 0 0 6px; }

/* ============ Cards ============ */
.card {
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 220px);
  scroll-snap-align: start;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s 0.3s;
  background: var(--bg-2);
  aspect-ratio: 2 / 3;
}
.card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s 0s;
}
.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.95;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-3);
}
.card .card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
}
.card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.card:hover .card-overlay {
  opacity: 1;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.95) 100%);
}
.card-overlay-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: auto; /* push info to bottom, buttons to top */
  margin-top: 4px;
  margin-left: 4px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
}
.card:hover .card-overlay-actions {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease 0.12s, transform 0.25s ease 0.12s;
}
.card-overlay-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-dim);
}
.card-meta .rating { color: #ffc83d; font-weight: 700; }
.card-pill-tiny {
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text);
  line-height: 1.5;
}
.card-overlay-genres {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.card:hover .card-overlay-genres {
  max-height: 16px;
  opacity: 1;
}

/* Action buttons inside the card overlay */
.card-action {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(40, 40, 40, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  text-decoration: none;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card-action:hover {
  border-color: #fff;
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.08);
}
.card-action-play {
  background: #fff;
  border-color: #fff;
  color: #000;
  font-size: 11px;
}
.card-action-play:hover { background: #e6e6e6; color: #000; transform: scale(1.08); }
.card-action.is-active {
  background: #fff;
  border-color: #fff;
  color: #000;
}
.card-rank {
  position: absolute;
  bottom: -8px; left: -10px;
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* "Top 10" style row gives extra width per card */
.row.top10 .card {
  margin-left: 60px;
}
.row.top10 .card:first-child { margin-left: 50px; }


/* Genre pill shortcut bar */
.genre-section {
  padding: 8px 0 8px;
  margin-bottom: 24px;
}
.genre-pills-wrap {
  padding: 0 64px;
  overflow-x: auto;
  scrollbar-width: none;
}
.genre-pills-wrap::-webkit-scrollbar { display: none; }
/* When the genre row is wrapped in .row-wrap (for the hover scroll arrows), the
   .row-wrap owns the side padding — zero the scroller's own horizontal padding at
   EVERY breakpoint (higher specificity beats the base + mobile rules) so it isn't
   double-indented. */
.row-wrap > .genre-pills-wrap { padding-left: 0; padding-right: 0; }
/* The shared .row-arrow pins its top to a ~220px poster's mid-height; the genre
   tiles are only ~86px tall, so center the arrows on the genre row instead. */
.genre-section .row-arrow { top: 50%; }
.genre-pills {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  min-width: max-content;
}
.genre-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.genre-pill:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(229,9,20,0.18), rgba(229,9,20,0.05));
  border-color: rgba(229, 9, 20, 0.5);
  transform: translateY(-1px);
}
.genre-pill-icon {
  font-size: 15px;
  line-height: 1;
  filter: grayscale(0.1);
}

/* Continue Watching cards */
.continue-row {
  align-items: stretch;
}
.continue-card {
  flex: 0 0 auto;
  width: clamp(260px, 22vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.continue-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}
.continue-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  /* Default placeholder so an entry without artwork still looks intentional
     while we backfill it from TMDB in the background. */
  background-image:
    radial-gradient(120% 80% at 30% 30%, rgba(229, 9, 20, 0.35) 0%, rgba(229, 9, 20, 0) 55%),
    linear-gradient(135deg, #2a1226 0%, #16161f 65%, #0d0d13 100%);
  background-color: var(--bg-3);
  cursor: pointer;
  transition: background-size 0.45s ease;
}
.continue-link.has-bg {
  background-size: cover;
}
.continue-card:hover .continue-link.has-bg {
  background-size: 108%;
}
.continue-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}
.continue-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  border: 1px solid rgba(229, 9, 20, 0.5);
  backdrop-filter: blur(4px);
  text-transform: uppercase;
}
.continue-watched {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
  pointer-events: none;
}
.continue-watched strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.continue-watched span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
}
.continue-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  transition: transform 0.2s, background 0.2s;
  z-index: 2;
}
.continue-play:hover { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.continue-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
}
.continue-card:hover .continue-remove { opacity: 1; }
.continue-remove:hover { background: var(--accent); transform: scale(1.1); }
.continue-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 2;
}
.continue-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.6);
}
.continue-info { padding: 10px 12px 12px; }
.continue-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.continue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.continue-meta .continue-ep {
  background: rgba(229, 9, 20, 0.18);
  color: #ff8189;
  border: 1px solid rgba(229, 9, 20, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
}
.continue-meta .rating { color: #ffc83d; font-weight: 600; }

/* ============ Grid (browse all) ============ */
.grid-page { padding: 0 64px 64px; }

/* Hero banner header for grid pages — extends behind the fixed navbar */
.grid-hero {
  position: relative;
  margin: calc(-1 * var(--nav-h)) -64px 32px;
  padding: calc(var(--nav-h) + 56px) 64px 38px;
  border-bottom: 1px solid var(--border);
  background-color: #0d0d13;
  overflow: hidden;
  isolation: isolate;
}
.grid-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center 30%;
  filter: blur(2px) saturate(1.05);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: -2;
  transform: scale(1.05);
}
.grid-hero.has-bg::before { opacity: 0.55; }
.grid-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,15,0.65) 0%, rgba(11,11,15,0.85) 60%, rgba(11,11,15,1) 100%),
    radial-gradient(900px 320px at 8% 30%, rgba(229,9,20,0.18) 0%, transparent 65%);
  z-index: -1;
}
.grid-hero.accent-tv::after {
  background:
    linear-gradient(180deg, rgba(11,11,15,0.65) 0%, rgba(11,11,15,0.85) 60%, rgba(11,11,15,1) 100%),
    radial-gradient(900px 320px at 8% 30%, rgba(99, 102, 241, 0.22) 0%, transparent 65%);
}
.grid-hero.accent-trending::after {
  background:
    linear-gradient(180deg, rgba(11,11,15,0.65) 0%, rgba(11,11,15,0.85) 60%, rgba(11,11,15,1) 100%),
    radial-gradient(900px 320px at 8% 30%, rgba(255, 138, 32, 0.25) 0%, transparent 65%);
}
.grid-hero.accent-gold::after {
  background:
    linear-gradient(180deg, rgba(11,11,15,0.65) 0%, rgba(11,11,15,0.85) 60%, rgba(11,11,15,1) 100%),
    radial-gradient(900px 320px at 8% 30%, rgba(255, 200, 61, 0.22) 0%, transparent 65%);
}
.grid-hero.accent-upcoming::after {
  background:
    linear-gradient(180deg, rgba(11,11,15,0.65) 0%, rgba(11,11,15,0.85) 60%, rgba(11,11,15,1) 100%),
    radial-gradient(900px 320px at 8% 30%, rgba(70, 211, 105, 0.22) 0%, transparent 65%);
}
.grid-hero.accent-live::after {
  background:
    linear-gradient(180deg, rgba(11,11,15,0.65) 0%, rgba(11,11,15,0.85) 60%, rgba(11,11,15,1) 100%),
    radial-gradient(900px 320px at 8% 30%, rgba(229, 9, 20, 0.30) 0%, transparent 65%);
}
.grid-hero-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -40px;
  top: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 9, 20, 0.35) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}
.grid-hero.accent-tv .grid-hero-glow { background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, transparent 65%); }
.grid-hero.accent-trending .grid-hero-glow { background: radial-gradient(circle, rgba(255, 138, 32, 0.4) 0%, transparent 65%); }
.grid-hero.accent-gold .grid-hero-glow { background: radial-gradient(circle, rgba(255, 200, 61, 0.4) 0%, transparent 65%); }
.grid-hero.accent-upcoming .grid-hero-glow { background: radial-gradient(circle, rgba(70, 211, 105, 0.4) 0%, transparent 65%); }
.grid-hero.accent-live .grid-hero-glow { background: radial-gradient(circle, rgba(229, 9, 20, 0.45) 0%, transparent 65%); }
.grid-hero-inner {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grid-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.grid-hero.accent-tv .grid-hero-eyebrow { color: #818cf8; }
.grid-hero.accent-trending .grid-hero-eyebrow { color: #ffa654; }
.grid-hero.accent-gold .grid-hero-eyebrow { color: #ffc83d; }
.grid-hero.accent-upcoming .grid-hero-eyebrow { color: #46d369; }
.grid-hero.accent-live .grid-hero-eyebrow {
  color: #ff5760;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.grid-hero.accent-live .grid-hero-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5760;
  box-shadow: 0 0 0 3px rgba(255, 87, 96, 0.25);
  animation: pulse-dot 1.6s ease-out infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(255, 87, 96, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(255, 87, 96, 0); }
}
.grid-hero-title {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -1px;
  margin: 0;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.grid-hero-sub {
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--text-dim);
  line-height: 1.55;
  margin: 4px 0 0;
  max-width: 720px;
}

/* ===== movy.sx-style browse page: collage hero + landscape grid ===== */
.grid-hero {
  min-height: 320px;
  display: flex;
  align-items: flex-end;
}
.grid-hero-inner { max-width: 620px; }
/* fanned poster collage in the upper-right */
.grid-hero-collage {
  position: absolute;
  top: -8%; right: -2%;
  width: 64%; height: 122%;
  display: flex;
  gap: 12px;
  transform: rotate(-9deg);
  transform-origin: top right;
  pointer-events: none;
  z-index: 0;
}
.gh-poster {
  flex: 0 0 auto;
  width: 15.5%;
  min-width: 122px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
  align-self: flex-start;
}
.gh-poster:nth-child(even) { margin-top: 40px; }
.grid-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--bg) 12%, rgba(11,11,15,0.74) 40%, rgba(11,11,15,0.14) 72%, transparent 100%),
    linear-gradient(0deg, var(--bg) 1%, transparent 52%);
  pointer-events: none;
}
.grid-hero-inner { position: relative; z-index: 2; }
.grid-hero-title { position: relative; padding-left: 18px; }
.grid-hero-title::before {
  content: '';
  position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 5px; border-radius: 3px;
  background: var(--accent);
}
.grid-hero.accent-tv .grid-hero-title::before { background: #818cf8; }
.grid-hero.accent-trending .grid-hero-title::before { background: #ffa654; }
.grid-hero.accent-gold .grid-hero-title::before { background: #ffc83d; }
.grid-hero.accent-upcoming .grid-hero-title::before { background: #46d369; }
.grid-hero.accent-live .grid-hero-title::before { background: #ff5760; }
.grid-hero-sub { padding-left: 18px; }

/* landscape 16:9 backdrop grid */
.browse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 18px;
  margin-top: 6px;
}
/* min-width:0 lets long, unbreakable titles ellipsize instead of blowing out the track */
.lcard { display: flex; flex-direction: column; color: var(--text); min-width: 0; }
.lcard-body { min-width: 0; }
.lcard-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #12151c;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lcard:hover .lcard-thumb { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.55); }
.lcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcard-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px; font-weight: 700; font-size: 14px;
  color: var(--text-muted);
  background: linear-gradient(135deg, #1b2130, #0f131a);
}
.lcard-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(0,0,0,0.6); color: #fff;
  backdrop-filter: blur(4px);
}
.lcard-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.18s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.4));
}
.lcard-play svg { width: 44px; height: 44px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.lcard:hover .lcard-play { opacity: 1; }
.lcard-body { padding-top: 9px; }
.lcard-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lcard-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 3px; font-size: 12.5px; color: var(--text-dim);
}
.lcard-meta .lcard-rating { color: #ff3b44; font-weight: 700; }
.lcard-meta > span + span::before { content: '·'; margin-right: 8px; opacity: 0.5; }
@media (max-width: 1200px) { .browse-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .lcard-title { font-size: 13.5px; }
  .lcard-meta { font-size: 11.5px; gap: 6px; }
  .lcard-meta > span + span::before { margin-right: 6px; }
  .grid-hero-collage { width: 82%; opacity: 0.9; }
  .gh-poster { min-width: 96px; }
}

/* movy-style filter bar: pill dropdowns (Genres / Years) + sort on the right */
.browse-filters {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 22px 0 26px; flex-wrap: wrap;
}
.bf-group { display: flex; gap: 10px; flex-wrap: wrap; }
.bf-group-right { margin-left: auto; }
.bf-dd { position: relative; }
.bf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.bf-btn:hover { background: rgba(255,255,255,0.1); }
.bf-btn.has-value { border-color: rgba(229,9,20,0.55); color: #fff; }
.bf-caret { font-size: 11px; opacity: 0.65; transition: transform 0.15s; }
.bf-dd.open .bf-caret { transform: rotate(180deg); }
.bf-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 190px; max-height: 340px; overflow-y: auto;
  padding: 6px; border-radius: 12px;
  background: #141821; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  display: none;
}
.bf-menu-right { left: auto; right: 0; }
.bf-dd.open .bf-menu { display: block; }
.bf-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 8px;
  background: transparent; border: none; color: var(--text-dim);
  font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.bf-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.bf-item.is-active { color: #fff; background: rgba(229,9,20,0.18); font-weight: 600; }

/* Trending row on the browse page — align to the grid-page gutters */
.browse-trending { margin: 18px 0 4px; }
.browse-trending .section-header,
.browse-trending .row-wrap { padding-left: 0; padding-right: 0; }

/* Rich filter bar — segmented tabs + scrollable genre chips */
.filter-bar-rich {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.sort-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  align-self: flex-start;
}
.sort-tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.sort-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.sort-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #ff2a36, #b00710);
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.genre-chips-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent);
}
.genre-chips-wrap::-webkit-scrollbar { display: none; }
.genre-chips {
  display: inline-flex;
  gap: 8px;
  padding: 2px 4px;
  min-width: max-content;
}
.genre-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.genre-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.genre-chip.is-active {
  background: #fff;
  border-color: #fff;
  color: #000;
  font-weight: 700;
}

/* Legacy (kept for any non-rich filter bars) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.filter-bar select {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}
.filter-bar select:focus { border-color: var(--accent); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.grid .card { width: 100%; }
.load-more {
  display: block;
  margin: 32px auto 0;
  padding: 14px 36px;
  background: var(--bg-3);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.load-more:hover { background: #2a2a36; }
.load-more:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ Details page ============ */
.details {
  position: relative;
  min-height: 100vh;
  margin-top: calc(-1 * var(--nav-h));
}
.details-hero {
  position: relative;
  height: min(92vh, 1100px); /* near full-screen cinematic hero */
  min-height: 560px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate; /* contain the hero-trailer / scrim / content stack */
  overflow: hidden;
}
.details-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* above the trailer video, below the content */
  background: linear-gradient(180deg, rgba(11,11,15,0.55) 0%, rgba(11,11,15,0.2) 40%, rgba(11,11,15,0.85) 80%, var(--bg) 100%);
  pointer-events: none;
}
/* Moving trailer background (muted YouTube embed, desktop only) */
.hero-trailer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.hero-trailer.playing { opacity: 1; }
/* Mute/unmute control over the trailer (movy-style). Fades in with the trailer. */
.hero-mute {
  position: absolute;
  top: calc(var(--nav-h) + 14px);
  right: 20px;
  z-index: 3;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.4s ease, background 0.15s;
}
.hero-mute.show { opacity: 1; pointer-events: auto; }
.hero-mute:hover { background: rgba(0, 0, 0, 0.72); }
.hero-mute svg { width: 21px; height: 21px; display: block; }
/* Direct IMDB .mp4 in a <video> — object-fit cover fills the hero at any aspect
   (portrait mobile or wide desktop), overflow clipped by .hero-trailer.
   scale(1.4) crops the black letterbox bars baked onto scope (2.39:1) trailers,
   the same trick movy.sx uses (object-fit alone can't remove baked-in bars). */
.hero-trailer-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.4);
  border: 0;
  pointer-events: none;   /* never interactive — pure background */
}
.details-hero-content {
  position: absolute;
  bottom: 60px;
  left: 0; right: 0;
  padding: 0 64px;
  max-width: 900px;
  z-index: 2;
}
.details-hero-content h1 {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.08;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
/* Title-treatment logo (TMDB /images/logos) shown in place of the text title */
.details-hero-content h1.has-logo { text-shadow: none; line-height: 1; }
.details-hero-content h1.has-logo .title-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(460px, 78vw);
  max-height: 200px;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.65));
}
/* Home hero: logo swapped in for .hero-title text (reuses .hero-logo sizing) */
.hero-title--logo { text-shadow: none; line-height: 1; display: block; overflow: visible; -webkit-line-clamp: unset; }
.hero-title--logo .hero-logo { margin: 0; }
.details-tagline { font-size: 18px; font-style: italic; color: var(--text-dim); margin: 0 0 16px; }
.details-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.details-meta .pill {
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.details-meta .rating-big {
  color: #ffc83d;
  font-weight: 700;
  font-size: 16px;
}
.details-overview {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 24px;
  max-width: 720px;
  /* Teaser in the hero — keep it short so a long title + synopsis don't push the
     title up under the nav. Full synopsis still lives below the fold. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.details-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.details-body { padding: 40px 64px; min-width: 0; }
.details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  margin-bottom: 48px;
}
.details-grid > * { min-width: 0; }
.info-list { display: grid; gap: 14px; font-size: 14px; }
.info-list dt { color: var(--text-muted); font-weight: 500; margin-bottom: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.info-list dd { margin: 0; color: var(--text); }

/* Cast */
.cast-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 16px;
}
.cast-row::-webkit-scrollbar { display: none; }
.cast-card { flex: 0 0 130px; text-align: center; }
.cast-card img {
  width: 130px; height: 130px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  background: var(--bg-3);
}
.cast-card .name { font-size: 13px; font-weight: 600; margin: 4px 0 2px; }
.cast-card .role { font-size: 12px; color: var(--text-dim); }

/* Episodes */
.season-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.season-picker select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.episodes { display: grid; gap: 12px; }
.episode {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: 10px;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.episode:hover { background: var(--bg-3); }
.episode:active { transform: scale(0.99); }
.episode-still {
  width: 200px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-3);
}
.episode-info h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.episode-info .num { color: var(--text-muted); font-weight: 500; margin-right: 6px; }
.episode-info p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode-info .meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.episode-play {
  background: var(--accent);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.episode-play:hover { transform: scale(1.1); }

/* ============ Player modal ============ */
.player-modal {
  position: fixed;
  inset: 0;
  /* iOS Safari: the URL bar resizes the visual viewport, so `inset: 0` alone
     can leave the iframe overshooting and the player-bar hidden behind the
     dynamic toolbar. Pin height to the small viewport unit where supported. */
  height: 100vh;
  height: 100svh;
  width: 100vw;
  background: #000;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.25s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.player-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.player-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-controls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.player-btn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  transition: background 0.2s;
  white-space: nowrap;
}
.player-btn:hover { background: rgba(255,255,255,0.2); }
.player-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.player-select {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  max-width: 160px;
}
.player-select option { background: #1a1a1a; color: #fff; }
.player-close {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(229, 9, 20, 0.85);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  transition: background 0.2s, transform 0.15s;
}
.player-close:hover { background: var(--accent); transform: scale(1.05); }
.player-frame {
  flex: 1;
  position: relative;
  background: #000;
}
.player-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.player-error {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(140% 100% at 50% 0%, rgba(229, 9, 20, 0.18) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.95) 100%);
  z-index: 4;
}
.player-error.visible { display: flex; }
.player-error-card {
  max-width: 440px;
  text-align: center;
  background: rgba(20, 20, 26, 0.92);
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.player-error-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 800;
}
.player-error-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 18px;
}
.player-error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ Setup modal ============ */
.setup-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.setup-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(160deg, #1a1a24 0%, #0f0f15 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.setup-logo {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #ff2a36 0%, #b00710 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 24px;
}
.setup-card h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.setup-card p { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.setup-card a { color: var(--accent); }
.setup-card input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  margin-bottom: 14px;
  transition: border-color 0.2s, background 0.2s;
}
.setup-card input:focus { border-color: var(--accent); background: rgba(255,255,255,0.08); }
.setup-card .btn { width: 100%; padding: 14px; }
.setup-card small { display: block; margin-top: 14px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }

/* ============ Loader ============ */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 40px 0;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============ Empty / error ============ */
.empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-dim);
}
.empty h3 { font-size: 22px; margin: 0 0 8px; color: var(--text); }
.empty p { margin: 0 0 16px; }

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 20, 28, 0.97);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 1500;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ Static pages (about, privacy, terms, contact) ============ */
.static-page {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 24px) 24px 48px;
}
.static-hero {
  margin-bottom: 32px;
}
.static-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
.static-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}
.static-body { display: grid; gap: 24px; }
.static-section h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.static-section p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
}
.static-foot {
  margin: 40px 0 0;
}
@media (max-width: 480px) {
  .static-page { padding: calc(var(--nav-h) + 12px) 16px 32px; }
  .static-hero { margin-bottom: 24px; }
  .static-lead { font-size: 15px; }
  .static-section h2 { font-size: 16px; }
  .static-section p { font-size: 14px; }
}

/* ============ Sponsors ============ */
.sponsors-section .section-header { margin-bottom: 18px; }
.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 64px;
}
.sponsors-grid-page {
  padding: 0;
  margin: 8px 0 8px;
}
.sponsor-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.sponsor-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.sponsor-media {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
.sponsor-media img {
  max-width: 78%;
  max-height: 70%;
  object-fit: contain;
}
.sponsor-media-light {
  background: #ffffff;
}
.sponsor-media-light img {
  max-width: 82%;
  max-height: 64%;
}
.sponsor-media-empty {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, rgba(255,255,255,0.04) 12px 24px),
    var(--bg-3);
}
.sponsor-placeholder-icon {
  font-size: 34px;
  opacity: 0.35;
  filter: grayscale(1);
}
.sponsor-media-cta {
  background: linear-gradient(135deg, rgba(229,9,20,0.18), rgba(255,42,54,0.06));
}
.sponsor-logo-text {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
  text-transform: uppercase;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  padding: 10px 18px;
  border-radius: 10px;
}
.sponsor-body {
  padding: 12px 14px;
  text-align: center;
}
.sponsor-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}
.sponsor-card-cta .sponsor-name { color: var(--accent-2); }
.sponsor-card:hover .sponsor-name { color: var(--text); }

@media (max-width: 720px) {
  .sponsors-grid { padding: 0 16px; }
}
@media (max-width: 560px) {
  .sponsors-grid { grid-template-columns: 1fr; }
}

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--border);
  background: #08080c;
  padding: 28px 64px;
  margin-top: 48px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-brand { text-decoration: none; }
.footer-tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  font-size: 13px;
}
.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--text); }
.footer-copy {
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
@media (max-width: 820px) {
  .site-footer { padding: 24px 24px 28px; }
  .footer-top { flex-direction: column; gap: 6px; }
  .footer-links { gap: 14px 18px; }
}
@media (max-width: 480px) {
  .site-footer { padding: 22px 16px 24px; }
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .nav-inner { padding: 0 24px; gap: 20px; }
  .nav-links { gap: 18px; }
  .hero-content, .details-hero-content, .section-header, .row-wrap, .site-footer, .genre-pills-wrap { padding-left: 24px; padding-right: 24px; }
  .grid-page { padding-left: 24px; padding-right: 24px; padding-top: 0; }
  .details-body { padding: 32px 24px; }
  .details-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .grid-hero {
    margin-left: -24px;
    margin-right: -24px;
    padding: calc(var(--nav-h) + 36px) 24px 26px;
  }
}

@media (max-width: 820px) {
  :root { --nav-h: 54px; }
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; gap: 4px; }
  /* Compact mobile header: smaller logo + tighter action icons. */
  .search-toggle { width: 36px; height: 36px; }
  .search-toggle svg { width: 19px; height: 19px; }
  .grid-page { padding: 0 24px 48px; }
  .grid-hero {
    padding: calc(var(--nav-h) + 28px) 24px 22px;
    margin-bottom: 20px;
  }
  .grid-hero-glow { width: 160px; height: 160px; right: -30px; top: -30px; }
  .sort-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sort-tabs::-webkit-scrollbar { display: none; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .menu-toggle:active { background: rgba(255,255,255,0.08); }
  .menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .bottom-nav { display: flex; }
  .app { padding-bottom: calc(var(--bottom-nav-h) + 24px); }
  .hero { height: min(90vh, 640px); min-height: 460px; }
  .hero-content { bottom: 80px; padding: 0 24px; }
  .hero-dots { left: 0; right: 0; bottom: 22px; justify-content: center; }
  .details-hero-content { bottom: 40px; padding: 0 24px; }
  /* movy.sx-style mobile hero: the IMDB trailer FILLS the hero (logo + actions
     overlaid). object-fit:cover on .hero-trailer-video handles the portrait crop. */
  .details-hero { height: 72vh; min-height: 480px; max-height: 660px; }
  /* Transparent over the top of the trailer, darkening toward the logo/buttons. */
  .details-hero::after {
    background: linear-gradient(180deg,
      rgba(11,11,15,0.2) 0%,
      rgba(11,11,15,0) 30%,
      rgba(11,11,15,0.5) 64%,
      rgba(11,11,15,0.95) 88%,
      var(--bg) 100%);
  }
  .episode { grid-template-columns: 130px 1fr; gap: 12px; padding: 10px; }
  .episode-still { width: 130px; }
  .episode-play { display: none; }
  .player-bar { padding: 10px 14px; }
  .player-controls { gap: 6px; }
  .player-btn { padding: 7px 10px; font-size: 12px; }
  .player-select { font-size: 12px; padding: 7px 8px; max-width: 110px; }
  .player-title { font-size: 14px; }
  .card { width: 130px; }
  .row.top10 .card { margin-left: 36px; }
  .card-rank { font-size: 78px; -webkit-text-stroke-width: 2px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .row-arrow { display: none; }
  .brand-text { font-size: 17px; letter-spacing: 0.8px; }
  /* Continue cards smaller on mobile */
  .continue-card { width: 240px; }
  .continue-play { width: 46px; height: 46px; font-size: 18px; }
  .continue-remove { opacity: 1; } /* always show on touch */
  /* Genre pills tighter */
  .genre-pill { padding: 7px 13px; font-size: 12px; }
  .genre-pills-wrap { padding-left: 16px; padding-right: 16px; }
  /* Hero rank chip a bit smaller */
  .hero-rank { font-size: 11px; gap: 8px; margin-bottom: 8px; }
  .hero-rank-num { font-size: 11px; padding: 3px 8px; }
  .hero-meta { gap: 8px; font-size: 13px; }
  .hero-genres { font-size: 12px; gap: 6px; }
  .btn-ghost { width: 42px; height: 42px; font-size: 18px; padding: 6px 10px; }
  .site-footer { padding: 24px 24px 32px; }
  .toast { bottom: calc(var(--bottom-nav-h) + 16px); }
}

@media (max-width: 480px) {
  :root { --nav-h: 52px; }
  .brand-text { font-size: 15px; letter-spacing: 0.5px; }
  .nav-inner { padding: 0 12px; gap: 8px; }
  .hero-content, .details-hero-content { padding: 0 16px; }
  .section-header, .row-wrap { padding-left: 16px; padding-right: 16px; }
  .genre-pills-wrap { padding: 0 12px; }
  .grid-page { padding: 0 16px 32px; }
  .grid-hero {
    margin-left: -16px;
    margin-right: -16px;
    padding: calc(var(--nav-h) + 22px) 16px 18px;
  }
  .grid-hero-eyebrow { font-size: 10px; letter-spacing: 1.6px; }
  .grid-hero-title { font-size: 30px; line-height: 1.05; }
  .grid-hero-sub { font-size: 13px; line-height: 1.5; margin-top: 2px; }
  .sort-tab { padding: 7px 13px; font-size: 12px; }
  .genre-chip { padding: 5px 12px; font-size: 12px; }
  .details-body { padding: 24px 16px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn, .details-actions .btn { padding: 10px 18px; font-size: 14px; }
  .hero-actions .btn-ghost { padding: 6px 10px; }
  .card { width: 120px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
  .continue-card { width: 220px; }
  .episode { grid-template-columns: 100px 1fr; }
  .episode-still { width: 100px; }
  .player-controls .player-btn { display: none; }
  .player-bar { padding: 8px 10px; }
  .nav-actions { gap: 6px; }
  .hero-meta { font-size: 12px; gap: 6px; }
  .hero-meta .badge,
  .hero-meta .badge-mature,
  .hero-meta .badge-quality { font-size: 10px; padding: 2px 6px; }
  .genre-pill { padding: 6px 12px; font-size: 12px; }
  .genre-pill-icon { font-size: 13px; }
}


/* Touch devices: disable hover scale and show simplified always-on overlay */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
  .card-overlay {
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.92) 100%);
  }
  .card-overlay-actions { display: none; }
  .card-overlay-genres { display: none; }
  .continue-card:hover { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
}

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

/* ===== Frimovi native player (hls.js) ===== */
.player-frame { position: relative; background:#000; }
.fx-video { width:100%; height:100%; display:block; background:#000; object-fit:contain; }
.fx-video.hidden, #player-iframe.hidden { display:none !important; }
.player-frame.fx-nocursor { cursor:none; }

/* spinner */
.fx-spinner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:5; }
.fx-spinner.hidden { display:none; }
.fx-spin { width:54px; height:54px; border-radius:50%; border:4px solid rgba(255,255,255,.18); border-top-color:#e50914; animation:fx-rot .8s linear infinite; }
@keyframes fx-rot { to { transform:rotate(360deg); } }

/* center play/replay */
.fx-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6;
  width:76px; height:76px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .2s ease; }
.fx-center:hover { background:#e50914; transform:translate(-50%,-50%) scale(1.06); }
.fx-center.hidden { display:none; }
.fx-center svg { width:38px; height:38px; fill:currentColor; margin-left:3px; }

/* controls bar */
.fx-controls { position:absolute; left:0; right:0; bottom:0; z-index:7; padding:8px 14px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
  opacity:1; transition:opacity .25s ease; user-select:none; }
.fx-controls.fx-hidden { opacity:0; pointer-events:none; }
.fx-controls.hidden { display:none; }

/* seek bar */
.fx-seek { position:relative; height:16px; margin:0 2px 4px; cursor:pointer; display:flex; align-items:center; }
.fx-seek::before { content:""; position:absolute; left:0; right:0; height:4px; border-radius:3px; background:rgba(255,255,255,.28); transition:height .1s; }
.fx-seek:hover::before { height:6px; }
.fx-buffered, .fx-played { position:absolute; height:4px; border-radius:3px; top:50%; transform:translateY(-50%); pointer-events:none; }
.fx-seek:hover .fx-buffered, .fx-seek:hover .fx-played { height:6px; }
.fx-buffered { background:rgba(255,255,255,.42); width:0; }
.fx-played { background:#e50914; width:0; z-index:1; }
.fx-scrub { position:absolute; top:50%; left:0; width:13px; height:13px; border-radius:50%; background:#e50914; transform:translate(-50%,-50%); z-index:2; box-shadow:0 0 0 3px rgba(229,9,20,.28); opacity:0; transition:opacity .12s; pointer-events:none; }
.fx-seek:hover .fx-scrub { opacity:1; }
.fx-seek-hit { position:absolute; inset:-8px 0; }

/* rows */
.fx-row { display:flex; align-items:center; gap:6px; }
.fx-left, .fx-right { display:flex; align-items:center; gap:4px; }
.fx-spacer { flex:1; }
.fx-btn { background:none; border:none; color:#fff; cursor:pointer; width:40px; height:40px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.fx-btn:hover { background:rgba(255,255,255,.14); }
.fx-btn svg { width:24px; height:24px; fill:currentColor; }
.fx-btn.fx-on { color:#e50914; }

/* volume */
.fx-vol { display:flex; align-items:center; }
.fx-vol-range { width:0; opacity:0; transition:width .18s ease, opacity .18s ease; height:4px; accent-color:#e50914; cursor:pointer; }
.fx-vol:hover .fx-vol-range { width:74px; opacity:1; margin:0 6px 0 2px; }

/* time */
.fx-timewrap { display:flex; align-items:center; gap:5px; color:#e6e6e6; font-size:13px; font-variant-numeric:tabular-nums; padding:0 4px; white-space:nowrap; }
.fx-time-sep { opacity:.5; }

/* settings menu */
.fx-menu { position:absolute; right:14px; bottom:64px; z-index:9; width:250px; max-height:64%; overflow-y:auto;
  background:rgba(18,18,20,.97); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:6px; box-shadow:0 10px 40px rgba(0,0,0,.6); }
.fx-menu.hidden { display:none; }
.fx-menu-sec { padding:4px 2px 8px; }
.fx-menu-sec + .fx-menu-sec { border-top:1px solid rgba(255,255,255,.08); }
.fx-menu-h { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8a8a92; padding:6px 10px 4px; }
.fx-menu-item { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:none; border:none; color:#e8e8ea; cursor:pointer; padding:9px 10px; border-radius:8px; font-size:14px; text-align:left; }
.fx-menu-item:hover { background:rgba(255,255,255,.09); }
.fx-menu-item.active { color:#fff; }
.fx-menu-item.active::before { content:"✓"; color:#e50914; font-weight:700; margin-right:2px; }
.fx-menu-sub { color:#8a8a92; font-size:12px; }
.fx-menu-empty { padding:8px 10px; color:#8a8a92; font-size:13px; }

/* error card reuse (already themed elsewhere; ensure present) */
.player-error { position:absolute; inset:0; z-index:8; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); padding:20px; }
.player-error.visible { display:flex; }
.player-error-card { max-width:440px; text-align:center; background:rgba(20,20,24,.96); border:1px solid rgba(229,9,20,.35); border-radius:16px; padding:26px 24px; }
.player-error-card h3 { margin:0 0 8px; font-size:19px; color:#fff; }
.player-error-card p { margin:0 0 18px; font-size:14px; line-height:1.5; color:#b9b9c0; }
.player-error-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* subtitle cue styling */
.fx-video::cue { background:rgba(0,0,0,.6); color:#fff; font-size:1.05em; line-height:1.35; }

@media (max-width:640px){
  .fx-btn { width:38px; height:38px; }
  .fx-timewrap { font-size:12px; padding:0 2px; }
  .fx-menu { right:8px; bottom:60px; width:min(78vw,250px); }
  .fx-vol:hover .fx-vol-range { width:56px; }
  .fx-center { width:64px; height:64px; }
  .fx-center svg { width:30px; height:30px; }
}

.fx-menu-item.disabled{opacity:.38;cursor:default}
.fx-menu-item.disabled:hover{background:none}
.fx-menu-item.disabled .fx-menu-sub{color:#6a6a72}

/* player-frame flex overflow fix: the <video> intrinsic height (e.g. 1080px)
   was forcing .player-frame (flex:1, default min-height:auto) taller than its
   flex share, pushing the control bar below the viewport on wide/short windows.
   min-height:0 lets the flex item take exactly its share; absolutely filling the
   video removes it from flow so it can never contribute intrinsic height. */
.player-frame{min-height:0;overflow:hidden}
.fx-video{position:absolute;inset:0}

/* --- Frimovi native player: top bar overlays the video & auto-hides with the controls (2026-09-17) --- */
.player-modal .player-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  border-bottom: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: opacity .25s ease, transform .25s ease;
}
.player-bar.fx-hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }

/* --- Frimovi native player: subtitle sync (delay) control (2026-09-17) --- */
.fx-sync { display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 10px 2px; }
.fx-sync-btn { flex:0 0 auto; background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:6px;
  padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; }
.fx-sync-btn:hover { background:#e50914; }
.fx-sync-val { min-width:56px; text-align:center; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:#fff; }

/* ============ SVG icon system ============ */
/* Every button glyph is now an inline <svg class="icon">. It inherits the
   button's colour (fill:currentColor) and, by default, its font-size (1em),
   so icons stay crisp at any DPI instead of rendering as emoji glyphs. */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  pointer-events: none;
}
/* Action buttons that used to size their glyph via font-size get a concrete
   icon size so proportions match the circle/pill they sit in. */
.btn .icon { width: 1.1em; height: 1.1em; }
.row-arrow .icon { width: 26px; height: 26px; }
.card-action .icon { width: 15px; height: 15px; }
.card-action-play .icon { width: 15px; height: 15px; transform: translateX(1px); }
.continue-remove .icon { width: 14px; height: 14px; }
.episode-play .icon { width: 20px; height: 20px; transform: translateX(1px); }
.player-close .icon { width: 18px; height: 18px; }
.player-btn { display: inline-flex; align-items: center; gap: 6px; }
.player-btn .icon { width: 16px; height: 16px; }
.btn-add-icon { display: inline-flex; }
.btn-add-icon .icon { width: 18px; height: 18px; }
/* Rating star aligns with its number and takes the gold text colour. */
.rating .icon, .rating-big .icon { vertical-align: -0.15em; }
/* Separator between episode-meta chips (replaces the old " · " text). */
.meta-sep { margin: 0 6px; opacity: 0.55; }


/* ============================================================================
   HOMEPAGE RETUNE — movy.sx-quality dark theme, FRIMOVI branding.
   APPEND VERBATIM AT THE END of css/style.css. Later source order wins over
   the base rules at equal specificity, so no !important is needed except the
   one deliberate accent-bar suppression in the sponsors block.
   Order: 1 palette/base · 2 nav+hero · 3 section headers · 4 cards ·
          5 rows/arrows · 6 genre tiles · 7 footer+sponsors · 8 mobile re-assert
   ============================================================================ */

/* ---------- 1. GLOBAL PALETTE, SURFACES & TYPOGRAPHY ---------- */
:root {
  color-scheme: dark;

  /* brand + accent reds */
  --accent: #e50914;         /* FRIMOVI brand red */
  --accent-2: #ff3b44;       /* brighter red — hovers, gradients */
  --accent-bright: #ff3b44;
  --accent-red: #dc2626;     /* deep red for corner badges */
  --star: #ff3b44;           /* rating star (reference uses RED, not gold) */

  /* cool-dark layered surfaces */
  --bg: #05070a;             /* page ground rgb(5,7,10) */
  --bg-2: #0f131a;           /* card / raised surface */
  --bg-3: #191f29;           /* elevated / hover surface */
  --surface: #0c0f15;
  --surface-2: #12161f;

  /* cool near-white + muted cool gray */
  --text: #eef1f6;
  --text-dim: #aeb6c4;
  --text-muted: #8b93a1;

  /* lines + elevation */
  --border: rgba(233, 238, 246, 0.08);
  --border-strong: rgba(233, 238, 246, 0.14);
  --shadow: 0 14px 48px rgba(0, 0, 0, 0.72);
  --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.78);

  /* radii */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* gutter + section rhythm tokens (available; base paddings stay hardcoded) */
  --gutter: 64px;
  --section-gap: 40px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

::selection { background: rgba(255, 59, 68, 0.30); color: #fff; }
::-webkit-scrollbar-thumb { background: rgba(233, 238, 246, 0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(233, 238, 246, 0.22); }

/* keep the still-visible Continue-Watching star red like the rest */
.continue-meta .rating { color: var(--star); }

@media (max-width: 1024px) { :root { --gutter: 24px; --section-gap: 32px; } }
@media (max-width: 480px)  { :root { --gutter: 16px; --section-gap: 28px; } }

/* ---------- 2. FLOATING TOP NAV + PREMIUM HOME HERO ---------- */
/* Transparent navbar on all pages, both at top and when scrolled (user request,
   desktop + mobile). No bar fill/blur/border — the nav floats over the content.
   A soft drop-shadow keeps the action icons legible over any background. */
.topnav {
  background: transparent;
}
.topnav.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
.topnav .search-toggle,
.topnav .menu-toggle {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6));
}

/* Floating capsule nav: fully transparent ("hidden") at the very top, and a
   solid dark rounded island bar once scrolled. app.js toggles .scrolled >20px. */
.nav-inner {
  height: calc(100% - 14px);
  width: calc(100% - 40px);
  max-width: 1500px;
  margin: 7px auto 0;
  padding: 0 20px;
  gap: 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.topnav.scrolled .nav-inner {
  background: rgba(10,12,17,0.85);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 14px 38px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* keep items legible over a bright hero while the bar is transparent */
.topnav:not(.scrolled) .nav-links { filter: drop-shadow(0 1px 7px rgba(0,0,0,0.7)); }

/* nav links no longer carry their own pill — the capsule is the container now */
.nav-links {
  flex: 0 0 auto;
  margin: 0 auto;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.85; }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.nav-links a.active {
  color: #fff;
  background: linear-gradient(135deg, #ff5661 0%, #e50914 100%);
  box-shadow: 0 4px 14px rgba(229,9,20,0.38);
}
.nav-links a.active .nav-ico { opacity: 1; }
.nav-links a.active::after { display: none; }

/* Mobile (<=820px): a SOLID dark floating capsule (matches the idlix mobile
   reference) — logo left, search + menu right, space-between. Solid so no bright
   hero content bleeds through; the nav links are hidden here so no empty middle. */
@media (max-width: 820px) {
  .nav-inner {
    height: calc(100% - 8px);
    width: calc(100% - 22px);
    max-width: 100%;
    margin: 4px auto 0;
    padding: 0 8px 0 16px;
    gap: 8px;
    justify-content: space-between;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  /* hidden/transparent at the very top (items float over the hero) */
  .topnav:not(.scrolled) .nav-inner { background: transparent; border-color: transparent; box-shadow: none; }
  .topnav:not(.scrolled) .brand-text,
  .topnav:not(.scrolled) .search-toggle,
  .topnav:not(.scrolled) .menu-toggle { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7)); }
  /* solid dark floating capsule once scrolled */
  .topnav.scrolled .nav-inner {
    background: rgba(12,14,20,0.97);
    border-color: rgba(255,255,255,0.09);
    box-shadow: 0 10px 28px rgba(0,0,0,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .topnav.scrolled {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none;
  }
}

/* hero content: wider reading column so long titles wrap in fewer lines */
.hero-content { max-width: 880px; bottom: 96px; }
.hero-logo { max-width: 360px; max-height: 172px; margin-bottom: 18px; }

/* clean single meta line: "★ 7.3 · 2026 · Movie · Genre" */
.hero-meta {
  gap: 9px;
  margin-bottom: 16px;
  color: #9aa3b2;
  font-size: 15px;
  font-weight: 500;
}
.hero-meta .rating { color: var(--star); font-weight: 700; }
.hero-meta .sep { color: rgba(255,255,255,0.32); font-weight: 400; }

.hero-overview {
  -webkit-line-clamp: 3;
  max-width: 620px;
  color: rgba(230,234,240,0.82);
  margin-bottom: 22px;
}

/* reference-style PILL buttons (shared .btn, visual only) */
.btn {
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn-ghost { border-radius: 50%; }              /* re-assert circular add button */
.btn-primary { background: #fff; color: #0a0b0d; }
.btn-primary:hover {
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.btn-secondary {
  background: rgba(18,20,26,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.btn-secondary:hover {
  background: rgba(30,33,40,0.78);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}
.hero-actions { gap: 14px; margin-top: 2px; }
.hero-actions .btn-ghost {
  background: rgba(18,20,26,0.50);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-actions .btn-ghost:hover {
  border-color: rgba(255,255,255,0.50);
  background: rgba(30,33,40,0.70);
}

/* idlix-style hero: red media-type badge + red "Watch Now" button */
.hero-badge {
  display: inline-block; margin-bottom: 11px;
  padding: 5px 12px; border-radius: 6px;
  background: linear-gradient(135deg, #ff5661 0%, #e50914 100%); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(229,9,20,0.35);
}
.hero-tagline {
  font-style: italic; font-weight: 500; font-size: 15px;
  color: rgba(230,234,240,0.82); margin: 0 0 8px; max-width: 620px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.btn-watch {
  background: linear-gradient(135deg, #ff5661 0%, #e50914 100%); color: #fff;
  box-shadow: 0 8px 24px rgba(229,9,20,0.40);
}
.btn-watch:hover {
  box-shadow: 0 12px 32px rgba(229,9,20,0.55);
  transform: translateY(-1px);
}

/* #47 status pill under the meta line — green "ONGOING" for returning TV */
.hero-status {
  display: inline-block; margin-bottom: 18px;
  padding: 4px 13px; border-radius: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}
.hero-status.is-ongoing { color: #46d17a; border: 1px solid rgba(70,209,122,0.55); background: rgba(70,209,122,0.13); }
.hero-status.is-ended   { color: #c2c8d2; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }

/* #47 actions: full-width red "Watch Now" primary + subtle secondary row */
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-wrap: nowrap; margin-top: 2px; }
.hero-actions .btn-watch {
  width: 100%; max-width: 420px; justify-content: center;
  padding: 15px 20px; font-size: 16px; border-radius: 14px;
}
.hero-actions-sub { display: flex; align-items: center; gap: 12px; }

/* ---------- 3. SECTION HEADERS — red accent bar + bold title + subtitle ---------- */
.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 3px;
}
.section-header .section-title {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  padding-left: 15px;
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--text);
}
.section-header .section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.02em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.45);
}
.section-subtitle {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding-left: 15px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.18s ease, gap 0.18s ease;
}
.section-link:hover { color: var(--accent-2); gap: 8px; }
@media (max-width: 560px) {
  .section-header .section-title { font-size: 18px; padding-left: 13px; }
  .section-header .section-title::before { width: 3px; }
  .section-subtitle { font-size: 12px; padding-left: 13px; }
}

/* ---------- 4. POSTER CARDS — always-visible caption + subtle premium hover ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.28s ease;
}
.card-poster > img,
.card-poster .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: none;
    z-index: 5;
  }
  .card:hover .card-poster {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6),
                0 0 0 2px rgba(255, 255, 255, 0.14),
                0 0 0 4px rgba(229, 9, 20, 0.55);
  }
  .card:hover .card-poster > img,
  .card:hover .card-poster .card-img { transform: scale(1.06); }
}
.card-overlay-info { display: none; }           /* title lives in the caption now */
@media (hover: none) { .card-overlay { opacity: 0; } }

.card-caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
}
.card-caption-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-caption-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #8b93a1;
}
.card-caption-meta > span + span::before {
  content: "\00B7";
  margin-right: 6px;
  color: #8b93a1;
  opacity: 0.7;
}
.card-caption-meta .cc-rating { color: #ff3b44; font-weight: 700; }
@media (max-width: 768px) {
  .card { gap: 6px; }
  .card-caption-title { font-size: 13px; }
  .card-caption-meta { font-size: 11px; gap: 5px; }
  .card-caption-meta > span + span::before { margin-right: 5px; }
}

/* ---------- Inline hover trailer preview (IMDB .mp4 plays INSIDE the card) ---------- */
.card-trailer {
  position: absolute; inset: 0;
  z-index: 2;                 /* above the poster img, below badge/overlay */
  opacity: 0;
  transition: opacity 0.45s ease;
  background: #000;
  overflow: hidden;
  pointer-events: none;
}
.card-trailer.show { opacity: 1; }
.card-trailer-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* fills any-aspect thumbnail */
  transform: scale(1.4);      /* crop baked-in scope letterbox bars (movy-style) */
  border: 0;
  pointer-events: none;
}
/* keep the HD badge / rank / hover actions above the trailer; drop the big
   centre play overlay on landscape cards once the clip is live */
.card-poster .card-badge, .card-poster .card-rank, .lcard-thumb .lcard-badge { z-index: 4; }
.card-poster .card-overlay, .lcard-thumb .lcard-play { z-index: 4; }
.lcard-thumb.trailer-live .lcard-play { opacity: 0; }

/* ---------- 5. ROWS, SCROLL ARROWS & VERTICAL RHYTHM ---------- */
.section { margin: 0 0 40px; }
.row {
  gap: 8px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.row-arrow {
  width: 44px;
  height: 44px;
  top: calc(8px + clamp(150px, 15vw, 220px) * 0.75);  /* pin to poster mid, not caption */
  transform: translateY(-50%) scale(0.9);
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 16, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease,
              background 0.2s ease, border-color 0.2s ease;
}
.row-arrow.left  { left: 16px;  right: auto; border-radius: 50%; }
.row-arrow.right { right: 16px; left: auto;  border-radius: 50%; }
.row-wrap:hover .row-arrow { opacity: 1; transform: translateY(-50%) scale(1); }
.row-arrow:hover {
  background: rgba(10, 12, 16, 0.82);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.08);
}
.row-arrow:active { transform: translateY(-50%) scale(0.96); }

/* ---------- 6. GENRE TILES — vibrant per-genre gradient tiles ---------- */
.genre-section { padding: 6px 0 10px; margin-bottom: 30px; }
.genre-pills { gap: 12px; padding: 4px 0 6px; }
.genre-pill {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 150px;
  min-width: 150px;
  height: 86px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  background: var(--genre-grad, linear-gradient(135deg, #3a3a44 0%, #1f1f29 100%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space: nowrap;
}
.genre-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.34) 100%);
  z-index: 1;
  pointer-events: none;
}
.genre-pill > span:not(.genre-pill-icon) {
  position: relative;
  z-index: 2;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.genre-pill-icon {
  position: absolute;
  top: 7px;
  right: 9px;
  z-index: 1;
  font-size: 30px;
  line-height: 1;
  opacity: 0.30;
  filter: none;
  transition: transform .18s ease, opacity .18s ease;
}
.genre-pill:hover {
  color: #fff;
  background: var(--genre-grad, linear-gradient(135deg, #3a3a44 0%, #1f1f29 100%));
  transform: translateY(-3px) scale(1.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 10px 26px rgba(0,0,0,0.5);
  filter: brightness(1.12) saturate(1.08);
}
.genre-pill:hover .genre-pill-icon { transform: scale(1.14) rotate(-5deg); opacity: 0.42; }
.genre-pill:focus-visible { outline: 2px solid rgba(255,255,255,0.75); outline-offset: 2px; }

.genre-pill[data-genre="trending"]    { --genre-grad: linear-gradient(135deg, #ff3b44 0%, #b0060d 100%); }
.genre-pill[data-genre="action"]      { --genre-grad: linear-gradient(135deg, #ef4444 0%, #991b1b 100%); }
.genre-pill[data-genre="comedy"]      { --genre-grad: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); }
.genre-pill[data-genre="drama"]       { --genre-grad: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.genre-pill[data-genre="horror"]      { --genre-grad: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }
.genre-pill[data-genre="scifi"]       { --genre-grad: linear-gradient(135deg, #6366f1 0%, #3730a3 100%); }
.genre-pill[data-genre="romance"]     { --genre-grad: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.genre-pill[data-genre="animation"]   { --genre-grad: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); }
.genre-pill[data-genre="thriller"]    { --genre-grad: linear-gradient(135deg, #64748b 0%, #334155 100%); }
.genre-pill[data-genre="documentary"] { --genre-grad: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
.genre-pill[data-genre="family"]      { --genre-grad: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
/* fallback by TMDB data-id so tiles are coloured even before the JS ships */
.genre-pill[data-id="trending"] { --genre-grad: linear-gradient(135deg, #ff3b44 0%, #b0060d 100%); }
.genre-pill[data-id="28"]    { --genre-grad: linear-gradient(135deg, #ef4444 0%, #991b1b 100%); }
.genre-pill[data-id="35"]    { --genre-grad: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); }
.genre-pill[data-id="18"]    { --genre-grad: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.genre-pill[data-id="27"]    { --genre-grad: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }
.genre-pill[data-id="878"]   { --genre-grad: linear-gradient(135deg, #6366f1 0%, #3730a3 100%); }
.genre-pill[data-id="10749"] { --genre-grad: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.genre-pill[data-id="16"]    { --genre-grad: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); }
.genre-pill[data-id="53"]    { --genre-grad: linear-gradient(135deg, #64748b 0%, #334155 100%); }
.genre-pill[data-id="99"]    { --genre-grad: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
.genre-pill[data-id="10751"] { --genre-grad: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
@media (max-width: 600px) {
  .genre-pills { gap: 10px; }
  .genre-pill { width: 132px; min-width: 132px; height: 76px; padding: 11px; border-radius: 12px; font-size: 14px; }
  .genre-pill > span:not(.genre-pill-icon) { font-size: 14px; }
  .genre-pill-icon { font-size: 26px; top: 6px; right: 8px; }
}
@media (max-width: 380px) {
  .genre-pill { width: 120px; min-width: 120px; height: 72px; }
}

/* ---------- 7. FOOTER + SPONSORS — understated / premium (LAST so it wins the header) ---------- */
.sponsors-section { margin-top: 8px; }
.sponsors-section .section-header { margin-bottom: 14px; }
.sponsors-section .section-title {
  padding-left: 0;                 /* no accent bar here, so no bar indent */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sponsors-section .section-title::before,
.sponsors-section .section-header::before { display: none !important; content: none !important; }
.sponsors-section .section-link { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.sponsors-section .section-link:hover { color: var(--text-dim); }

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
  padding: 0 64px;
}
.sponsors-grid-page { padding: 0; margin: 10px 0; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 104px;
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.sponsor-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}
.sponsor-media {
  width: 100%;
  height: 42px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-bottom: none;
}
.sponsor-media img {
  max-width: 86%;
  max-height: 40px;
  object-fit: contain;
  opacity: 0.68;
  filter: grayscale(1);
  transition: opacity 0.18s ease, filter 0.18s ease;
}
.sponsor-card:hover .sponsor-media img { opacity: 1; filter: grayscale(0); }
.sponsor-media-light,
.sponsor-media-light img { background: transparent; max-width: 86%; max-height: 40px; }
.sponsor-media-empty { background: transparent; }
.sponsor-placeholder-icon { font-size: 22px; opacity: 0.2; filter: grayscale(1); }
.sponsor-media-cta { background: transparent; }
.sponsor-logo-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.sponsor-card-cta { border-style: dashed; }
.sponsor-card-cta:hover .sponsor-logo-text { color: var(--text-dim); border-color: rgba(255, 255, 255, 0.22); }
.sponsor-body { padding: 0; text-align: center; }
.sponsor-name { font-size: 12px; font-weight: 500; color: var(--text-muted); transition: color 0.18s ease; }
.sponsor-card-cta .sponsor-name { color: var(--text-muted); }
.sponsor-card:hover .sponsor-name { color: var(--text-dim); }
@media (max-width: 720px) { .sponsors-grid { padding: 0 16px; } }
@media (max-width: 560px) { .sponsors-grid { grid-template-columns: repeat(2, 1fr); } }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 56px 64px 64px;
  margin-top: 64px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.footer-top { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.footer-brand { text-decoration: none; flex: 0 0 auto; }
.footer-tagline { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 13px; }
.footer-links a { color: var(--text-dim); text-decoration: none; transition: color 0.15s ease; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 18px; line-height: 1.6; }
@media (max-width: 820px) {
  .site-footer { padding: 44px 24px 52px; margin-top: 48px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-links { gap: 12px 20px; }
}
@media (max-width: 480px) { .site-footer { padding: 36px 16px 44px; } }

/* ---------- 8. MOBILE RE-ASSERTIONS ----------
   The desktop .hero-meta / .hero-content / .hero-actions rules above are appended
   AFTER the base @media(max-width:820px|480px) blocks in the file, so at equal
   specificity they would win at phone widths and undo the mobile sizing. Restore
   it here, at the very end, so these win where they apply. */
@media (max-width: 820px) {
  .hero-content { bottom: 84px; }
  .hero-meta { gap: 8px; font-size: 13px; }
  /* idlix mobile hero (#44/#47): one prominent FULL-WIDTH "Watch Now"; drop More info + add */
  .hero-actions { display: block; margin-top: 4px; }
  .hero-actions .btn-secondary, .hero-actions .btn-ghost, .hero-actions-sub { display: none; }
  .hero-actions .btn-watch {
    display: flex; width: 100%; max-width: none; justify-content: center;
    padding: 15px; font-size: 15.5px; border-radius: 12px;
  }
}
@media (max-width: 480px) {
  .hero-meta { gap: 7px; font-size: 12px; }
}

/* ============================================================
   GENRE TILES v3 — original abstract art backgrounds (Nano Banana),
   on a ::before layer so they're immune to the .genre-pill `background`
   shorthand + its :hover reset. Emoji watermark removed; scrim
   strengthened for text legibility over the photos.
   ============================================================ */
.genre-pill-icon { display: none !important; }
.genre-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0f131a;
  /* A representative anime's art per genre, set at runtime via --genre-poster by
     applyGenreArt() in ui.js (one generic rule — works for every AniList genre,
     any casing; each tile gets a DIFFERENT anime via the usedGenreArt dedupe). */
  background-image: var(--genre-poster);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 28%;
  transition: transform .35s ease, filter .18s ease;
}
.genre-pill::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.04) 26%, rgba(0,0,0,0.82) 100%);
}
.genre-pill:hover::before { transform: scale(1.07); filter: brightness(1.1) saturate(1.06); }
/* (per-genre hardcoded movie backdrops removed — art now comes from AniList at
   runtime via --genre-poster on the generic .genre-pill::before rule above.) */


/* ============================================================
   LIVE SEARCH OVERLAY (movy-style) — rounded bar + tabbed instant
   results (poster · title · Type · Year · ★ rating · Genre).
   ============================================================ */
body.search-open { overflow: hidden; }
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  padding: clamp(48px, 9vh, 96px) 16px 24px;
  justify-content: center;
  align-items: flex-start;
  background: rgba(3, 5, 8, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.search-overlay.open { display: flex; animation: searchFade .16s ease; }
@keyframes searchFade { from { opacity: 0; } to { opacity: 1; } }
.search-modal {
  width: min(600px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-modal-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 54px;
  padding: 0 16px;
  border-radius: 15px;
  background: #12161f;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.search-modal-bar:focus-within { border-color: rgba(255,59,68,0.55); }
.search-modal-icon { display: flex; color: var(--text-muted); flex: 0 0 auto; }
.search-modal-icon .icon { width: 21px; height: 21px; }
.search-modal-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
}
.search-modal-input::placeholder { color: var(--text-muted); }
.search-modal-input::-webkit-search-cancel-button { display: none; }
.search-modal-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, background .15s, color .15s;
  flex: 0 0 auto;
}
.search-overlay.has-value .search-modal-clear { opacity: 1; pointer-events: auto; }
.search-modal-clear:hover { color: #fff; background: rgba(255,255,255,0.10); }
.search-modal-clear .icon { width: 18px; height: 18px; }

.search-modal-panel {
  display: none;
  border-radius: 15px;
  overflow: hidden;
  background: #0c0f15;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 70px rgba(0,0,0,0.62);
}
.search-modal-panel.has-q { display: block; }
.search-tabs {
  display: flex;
  gap: 6px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.search-tab {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.search-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.search-tab.active { color: #fff; background: rgba(255,255,255,0.13); }
.search-results {
  max-height: min(58vh, 480px);
  overflow-y: auto;
  padding: 6px;
  overscroll-behavior: contain;
}
.search-results::-webkit-scrollbar { width: 9px; }
.search-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }
.search-results::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }
.search-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.search-section-label .icon { width: 15px; height: 15px; color: var(--star); }
.search-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--text);
  transition: background .12s;
}
.search-row:hover { background: rgba(255,255,255,0.06); }
.search-row-thumb {
  width: 46px;
  height: 66px;
  border-radius: 7px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--bg-3);
}
.search-row-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: var(--text-muted);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
}
.search-row-info { flex: 1; min-width: 0; }
.search-row-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.search-row-meta .sr-dot { opacity: .5; }
.search-row-meta .sr-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--star); font-weight: 600; }
.search-row-meta .sr-rating .icon { width: 12px; height: 12px; }
.search-row-meta .sr-genre { color: var(--text-dim); }
.search-row-chevron { display: flex; color: var(--text-muted); flex: 0 0 auto; }
.search-row-chevron .icon { width: 18px; height: 18px; }
.search-empty { padding: 34px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }
@media (max-width: 520px) {
  .search-overlay { padding-top: 40px; }
  .search-tab { padding: 6px 12px; font-size: 12.5px; }
}

/* ===== Admin-managed announcement banner + maintenance overlay ===== */
.site-announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 44px; min-height: 38px;
  background: linear-gradient(90deg, #e50914, #ff3b44);
  color: #fff; font-size: 13.5px; font-weight: 600; text-align: center;
}
.site-announce-msg { color: #fff; }
a.site-announce-msg { text-decoration: underline; }
.site-announce-x {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; opacity: 0.85; padding: 0 6px;
}
.site-announce-x:hover { opacity: 1; }
body.has-announce .topnav { top: 38px; }
.site-maint {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 50% 28%, #12151d, #05070a); text-align: center;
}
.site-maint-box { max-width: 440px; }
.site-maint-logo { font-weight: 900; font-size: 26px; letter-spacing: 1px; color: #e50914; margin-bottom: 20px; }
.site-maint h1 { font-size: 26px; margin: 0 0 10px; color: #fff; }
.site-maint p { color: #9aa1ad; line-height: 1.6; margin: 0; }

/* ============================ DramaBox ============================ */
.db-page .grid-hero-sub { max-width: 640px; }
/* Portrait cover grid */
.db-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px 16px;
  margin-top: 8px;
}
.db-card { display: flex; flex-direction: column; color: var(--text); min-width: 0; text-decoration: none; }
.db-thumb {
  position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden;
  background: #12151c; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.db-card:hover .db-thumb { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.6); }
.db-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px; font-weight: 700; font-size: 14px; color: var(--text-muted);
  background: linear-gradient(135deg, #1b2130, #0f131a);
}
.db-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.db-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px; padding: 3px 7px; border-radius: 6px;
  background: rgba(0,0,0,0.62); color: #fff; backdrop-filter: blur(4px);
}
.db-ep { background: rgba(255,59,68,0.9); }
.db-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.18s ease; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
}
.db-play svg { width: 46px; height: 46px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.db-card:hover .db-play { opacity: 1; }
.db-body { padding-top: 8px; min-width: 0; }
.db-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.db-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--text-dim); }
.db-plays { color: #ff6b70; font-weight: 600; white-space: nowrap; }
.db-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1300px) { .db-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .db-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .db-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } }
@media (max-width: 460px)  { .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Vertical episode player */
body.db-player-open { overflow: hidden; }
.db-player { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; }
.db-player-backdrop { position: absolute; inset: 0; background: var(--bg); }   /* opaque — full-screen page, not a dimmed modal */
.db-player-shell {
  position: relative; z-index: 1; display: flex; gap: 28px; align-items: stretch;
  width: 100%; max-width: 1180px; height: 100%; padding: 56px 32px 36px; margin: 0 auto;
}
.db-close {
  position: fixed; top: 18px; right: 22px; z-index: 5; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(20,24,32,0.9); color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.db-close:hover { background: #ff3b44; }
.db-stage {
  position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 9 / 16; max-width: 100%;
  background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.db-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.db-stage-spin { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2; }
.db-player.is-loading .db-stage-spin { display: flex; }
.db-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 56px;
  border: none; background: rgba(0,0,0,0.35); color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease;
}
.db-stage:hover .db-nav { opacity: 1; }
.db-prev { left: 0; border-radius: 0 10px 10px 0; }
.db-next { right: 0; border-radius: 10px 0 0 10px; }
.db-nav:hover { background: rgba(255,59,68,0.85); }
.db-side {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  background: #0c0f16; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px; overflow: hidden;
}
.db-side-head { border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 12px; margin-bottom: 12px; }
.db-side-title { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.25; }
.db-ep-indicator { margin-top: 6px; font-size: 13px; color: #ff6b70; font-weight: 700; }
.db-side-intro {
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.db-side-eps-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 8px; }
.db-eplist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px;
  overflow-y: auto; align-content: start; padding-right: 4px;
}
.db-epbtn {
  aspect-ratio: 1 / 1; border-radius: 9px; border: 1px solid rgba(255,255,255,0.09);
  background: #151a24; color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.db-epbtn:hover { background: #1e2532; color: #fff; }
.db-epbtn.is-active { background: #ff3b44; color: #fff; border-color: #ff3b44; }

@media (max-width: 820px) {
  .db-player-shell { flex-direction: column; width: 100vw; height: 100%; gap: 10px; padding: 50px 14px 16px; }
  .db-stage { flex: 1 1 auto; height: auto; width: 100%; aspect-ratio: auto; }
  .db-video { object-fit: contain; }
  .db-side { flex: 0 0 auto; max-height: 34vh; padding: 14px; }
  .db-side-intro { display: none; }
  .db-close { top: 10px; right: 12px; }
}

/* DramaBox player: free-count note + episode-list placeholder */
.db-ep-note { margin-top: 5px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.db-eplist-msg { grid-column: 1 / -1; color: var(--text-muted); font-size: 12.5px; padding: 10px 0; }

/* Infinite-scroll sentinel (replaces the Load more button on browse + dramabox) */
.grid-sentinel { display: flex; justify-content: center; align-items: center; padding: 30px 0 14px; min-height: 24px; }
.grid-sentinel .spinner { opacity: 0; transition: opacity 0.2s ease; }
.grid-sentinel.is-loading .spinner { opacity: 1; }

/* Search overlay: DramaBox country selector */
.search-country-bar { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.search-country-bar::-webkit-scrollbar { display: none; }
.search-country { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); background: #151a24; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; }
.search-country:hover { background: #1e2532; color: #fff; }
.search-country.is-active { background: #ff3b44; border-color: #ff3b44; color: #fff; }
.search-country-flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; display: block; }

/* DramaBox landing: curated horizontal rows above the grid */
.db-rows { margin-top: 8px; }
.db-row { margin: 2px 0 10px; }
.db-row .section-header { margin-bottom: 12px; }
.db-row-scroll { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.db-row-scroll::-webkit-scrollbar { display: none; }
.db-row-scroll .db-card { flex: 0 0 150px; scroll-snap-align: start; }
.db-grid-head { margin-top: 16px; }
@media (max-width: 760px) { .db-row-scroll .db-card { flex: 0 0 124px; } }

/* Compact language dropdown (DramaBox page + search) — "GB EN ▾" */
.lang-dd { position: relative; display: inline-block; }
.lang-dd-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.14); background: #12151c; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1; transition: background .15s ease, border-color .15s ease; }
.lang-dd-btn:hover { background: #1a1e27; border-color: rgba(255,255,255,0.28); }
.lang-dd-cc { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; }
.lang-dd-code { font-size: 13px; font-weight: 800; color: #fff; }
.lang-dd-caret { margin-left: 1px; font-size: 10px; color: var(--text-dim); transition: transform 0.15s ease; }
.lang-dd.open .lang-dd-caret { transform: rotate(180deg); }

/* fixed-position portal menu — never clipped by an overflow:hidden ancestor (the hero) */
.lang-dd-menu {
  position: fixed; top: 0; right: 0; width: 200px; max-height: 360px; overflow-y: auto;
  background: #0e1117; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.7); padding: 6px; z-index: 1200; display: none;
  -webkit-overflow-scrolling: touch;
}
.lang-dd-menu.is-open { display: block; animation: langDdIn .14s ease; }
@keyframes langDdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent; color: var(--text); border-radius: 8px; cursor: pointer; font-size: 13.5px; text-align: left; }
.lang-dd-item:hover { background: #1a1e27; }
.lang-dd-flag { flex: 0 0 auto; min-width: 30px; padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,0.08); color: var(--text-dim); font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-align: center; }
.lang-dd-name { flex: 1 1 auto; font-weight: 600; color: var(--text); white-space: nowrap; }
.lang-dd-check { flex: 0 0 auto; width: 16px; height: 16px; opacity: 0; color: #ff3b44; }
.lang-dd-check svg { width: 16px; height: 16px; display: block; }
.lang-dd-item.is-active { background: rgba(255,59,68,0.14); }
.lang-dd-item.is-active .lang-dd-flag { background: #ff3b44; color: #fff; }
.lang-dd-item.is-active .lang-dd-name { color: #fff; font-weight: 700; }
.lang-dd-item.is-active .lang-dd-check { opacity: 1; }

/* placement: top-right of the DramaBox hero (floats over the poster collage) + inline in the search */
.db-hero { position: relative; }
.db-hero-filter { position: absolute; top: calc(var(--nav-h) + 16px); right: 64px; z-index: 6; }
@media (max-width: 1100px) { .db-hero-filter { right: 24px; top: calc(var(--nav-h) + 12px); } }
@media (max-width: 480px)  { .db-hero-filter { right: 16px; } }
.search-lang-bar { display: flex; align-items: center; gap: 10px; padding: 12px 0 4px; }
.search-lang-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 600; }

/* ===== DramaBox detail-first modal ===== */
.db-poster { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: #000; }
.db-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-poster-play { position: absolute; width: 68px; height: 68px; border-radius: 50%; border: none; background: rgba(255,59,68,0.92); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 26px rgba(0,0,0,0.55); transition: transform .15s ease, background .15s ease; }
.db-poster-play svg { width: 30px; height: 30px; margin-left: 3px; }
.db-poster-play:hover { transform: scale(1.08); background: #ff3b44; }
.db-player.is-detail .db-video { display: none; }
.db-player.is-detail .db-nav { display: none; }
.db-player:not(.is-detail) .db-poster { display: none; }

/* side becomes a scrollable detail panel */
.db-side { overflow-y: auto; }
.db-eplist { overflow: visible; }
.db-side-intro { -webkit-line-clamp: initial; display: block; overflow: visible; }
.db-badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.db-badge2 { font-size: 12px; font-weight: 700; color: var(--text-dim); background: #151a24; border: 1px solid rgba(255,255,255,0.08); padding: 4px 9px; border-radius: 7px; white-space: nowrap; }
.db-badge-rating { color: #ffcf3f; border-color: rgba(255,207,63,0.35); }
.db-tags-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 2px; }
.db-tag-pill { font-size: 11.5px; font-weight: 600; color: var(--text-dim); background: #12151c; border: 1px solid rgba(255,255,255,0.07); padding: 4px 10px; border-radius: 999px; }
.db-play-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 14px 0 6px; padding: 11px 26px; border: none; border-radius: 10px; background: #ff3b44; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s ease; }
.db-play-btn svg { width: 18px; height: 18px; }
.db-play-btn:hover { background: #ff5058; }
.db-play-btn:disabled { opacity: .5; cursor: not-allowed; }
.db-related { margin-top: 18px; }
.db-related-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.db-related-scroll::-webkit-scrollbar { display: none; }
.db-related-scroll .db-card { flex: 0 0 108px; }
@media (max-width: 820px) {
  .db-player-shell { overflow-y: auto; }
  .db-side { max-height: none; }
  .db-side-intro { display: block; }
  /* Detail view: the general mobile rule collapses the stage (video hidden + poster is
     absolute), leaving a 42px sliver. Show the cover as a centered portrait poster instead. */
  .db-player.is-detail .db-stage {
    flex: 0 0 auto; align-self: center; width: min(62%, 220px);
    height: auto; aspect-ratio: 2 / 3; margin: 2px 0 6px;
  }
  .db-player.is-detail .db-side { flex: 1 1 auto; max-height: none; }
}

/* ===== TikTok-style vertical reel (mobile playback): swipe up = next episode ===== */
.db-player.is-reel .db-player-shell,
.db-player.is-reel .db-player-backdrop { display: none; }
.db-reel-root { position: fixed; inset: 0; z-index: 4002; background: #000; }
.db-reel {
  position: absolute; inset: 0;
  overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.db-reel::-webkit-scrollbar { display: none; }
.db-reel-item {
  position: relative; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.db-reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; transition: opacity .25s ease; }
.db-reel-item.is-playing .db-reel-poster { opacity: 0; }
.db-reel-video { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; background: transparent; display: block; }
.db-reel-spin { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; }
.db-reel-item.is-loading .db-reel-spin { display: flex; }
/* paused → a big play triangle in the centre */
.db-reel-item.is-paused::after {
  content: ''; position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-38%, -50%);
  width: 0; height: 0; border-left: 30px solid rgba(255,255,255,0.92);
  border-top: 19px solid transparent; border-bottom: 19px solid transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); pointer-events: none;
}
.db-reel-meta {
  position: absolute; left: 14px; right: 70px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 5; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}
.db-reel-title { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.3; }
.db-reel-ep { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85); margin-top: 3px; }
.db-reel-close, .db-reel-mute {
  position: fixed; z-index: 4003; top: calc(12px + env(safe-area-inset-top, 0px));
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(18,22,30,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.db-reel-close { right: 12px; font-size: 18px; }
.db-reel-mute { right: 60px; }
.db-reel-mute svg { width: 22px; height: 22px; }
.db-reel-close:active, .db-reel-mute:active { background: rgba(255,59,68,0.7); }

/* DramaBox hero: fanned poster collage on the right (like /anime, /movies, /trending),
   title + accent bar on the left, language dropdown floating top-right. */
.db-hero .grid-hero-inner { max-width: 620px; }
.grid-hero.accent-drama .grid-hero-title::before { background: #ff4d6d; }
.grid-hero.accent-drama .grid-hero-eyebrow { color: #ff4d6d; }
.grid-hero.accent-drama::after {
  background:
    linear-gradient(180deg, rgba(11,11,15,0.65) 0%, rgba(11,11,15,0.85) 60%, rgba(11,11,15,1) 100%),
    radial-gradient(900px 320px at 8% 30%, rgba(255, 77, 109, 0.22) 0%, transparent 65%);
}
/* keep the floating dropdown legible where it overlaps posters */
.db-hero-filter .lang-dd-btn { background: rgba(12,12,18,0.72); backdrop-filter: blur(6px); border-color: rgba(255,255,255,0.14); }

/* ============================================================
   Auth (login / signup) — animated blurred poster wall behind a
   glass card with an animated light-beam border (21st.dev style).
   ============================================================ */
.auth-page {
  position: fixed; inset: 0; z-index: 400; overflow: hidden;
  background: #04060a;
  display: flex; align-items: center; justify-content: center;
}

/* --- animated, blurred movie-poster wall --- */
.auth-wall-wrap {
  position: absolute; inset: -8% -4%; z-index: 0;
  display: flex; gap: 18px; justify-content: center; align-items: flex-start;
  filter: blur(2px) brightness(0.95) saturate(1.1);
  transform: scale(1.05);
  pointer-events: none;
}
.auth-wall { display: flex; gap: 18px; }
.auth-col {
  display: flex; flex-direction: column; gap: 18px; flex: 0 0 auto;
  animation: authScrollUp 60s linear infinite;
  will-change: transform;
}
.auth-col--down { animation-name: authScrollDown; }
.auth-poster {
  width: 200px; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 12px; flex: 0 0 auto; background: #12151d;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
@keyframes authScrollUp   { from { transform: translateY(0);     } to { transform: translateY(-50%); } }
@keyframes authScrollDown { from { transform: translateY(-50%); } to { transform: translateY(0);     } }

.auth-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 42%, rgba(4,6,10,0.05) 0%, rgba(4,6,10,0.42) 58%, rgba(4,6,10,0.78) 100%),
    linear-gradient(180deg, rgba(4,6,10,0.20), rgba(4,6,10,0.30));
}

.auth-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  width: 100%; max-width: 430px; padding: 24px;
}
.auth-brand { text-decoration: none; }
.auth-brand .brand-text {
  font-size: 24px; font-weight: 800; letter-spacing: 3px; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}

/* --- glass card with animated light-beam border --- */
@property --auth-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.auth-card {
  position: relative; width: 100%; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,23,32,0.82), rgba(10,12,18,0.88));
  backdrop-filter: blur(26px) saturate(1.1); -webkit-backdrop-filter: blur(26px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.4);
}
.auth-card::before {   /* rotating beam */
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--auth-beam),
    transparent 0deg, transparent 265deg,
    rgba(255,86,97,0.75) 312deg, #ffd9db 336deg, #ff5661 344deg,
    rgba(255,86,97,0.75) 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: authBeam 6s linear infinite;
}
.auth-card::after {    /* soft static hairline so the edge always reads */
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}
@keyframes authBeam { to { --auth-beam: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .auth-col, .auth-card::before { animation: none; }
}

.auth-card-body { position: relative; z-index: 1; padding: 34px 30px 28px; }

.auth-avatar {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: #fff;
  background: linear-gradient(135deg, #ff5661, #e50914);
  box-shadow: 0 10px 24px rgba(229,9,20,0.42);
}
.auth-title {
  font-size: 23px; font-weight: 800; text-align: center; margin: 0 0 6px;
  color: #fff; letter-spacing: -0.3px;
}
.auth-sub {
  font-size: 13.5px; text-align: center; color: var(--text-muted, #9aa3b2);
  margin: 0 auto 22px; max-width: 300px; line-height: 1.5;
}

.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { position: relative; display: flex; align-items: center; }
.auth-field-ico {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--text-muted, #9aa3b2); display: flex; pointer-events: none;
}
.auth-field-ico svg { width: 18px; height: 18px; }
.auth-input {
  width: 100%; height: 48px; padding: 0 44px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: #fff; font-size: 14.5px; outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-input::placeholder { color: rgba(255,255,255,0.42); }
.auth-input:focus {
  border-color: rgba(255,86,97,0.6); background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(229,9,20,0.14);
}
.auth-eye {
  position: absolute; right: 8px; width: 34px; height: 34px; border: none;
  background: transparent; color: var(--text-muted, #9aa3b2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.auth-eye:hover { color: #fff; }
.auth-eye svg { width: 19px; height: 19px; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 2px; }
.auth-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim, #c2c8d2); cursor: pointer; }
.auth-check { width: 15px; height: 15px; accent-color: #e50914; cursor: pointer; }
.auth-forgot { background: none; border: none; color: #ff6b70; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.auth-forgot:hover { color: #ff8f93; text-decoration: underline; }

.auth-error {
  color: #ff8388; font-size: 13px; line-height: 1.4;
  background: rgba(229,9,20,0.10); border: 1px solid rgba(229,9,20,0.28);
  border-radius: 9px; padding: 9px 12px;
}

.auth-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; margin-top: 6px; border: none; border-radius: 12px;
  background: #fff; color: #0a0b0d; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255,255,255,0.16); }
.auth-submit:disabled { opacity: 0.7; cursor: default; transform: none; box-shadow: none; }
.auth-submit-ico { display: flex; }
.auth-submit-ico svg { width: 18px; height: 18px; }
.auth-submit.is-loading .auth-submit-ico { animation: authNudge 0.8s ease-in-out infinite; }
@keyframes authNudge { 50% { transform: translateX(4px); } }

.auth-switch { text-align: center; font-size: 13.5px; color: var(--text-muted, #9aa3b2); margin: 20px 0 0; }
.auth-switch-btn { background: none; border: none; color: #fff; font-weight: 700; cursor: pointer; padding: 0; font-size: 13.5px; }
.auth-switch-btn:hover { color: #ff6b70; }

/* ---- nav "Account" control ---- */
.nav-account { display: flex; align-items: center; }
.nav-signin {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
  transition: background .15s ease;
}
.nav-signin:hover { background: rgba(255,255,255,0.17); }
.nav-signin svg { width: 16px; height: 16px; }
.nav-acct { position: relative; }
.nav-acct-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #fff; cursor: pointer;
  font-size: 13.5px; font-weight: 600; transition: background .15s ease;
}
.nav-acct-btn:hover { background: rgba(255,255,255,0.15); }
.nav-acct-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, #ff5661, #e50914);
}
.nav-acct-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-acct-caret { font-size: 10px; color: var(--text-dim, #c2c8d2); }
.nav-acct-caret svg { display: block; }
/* ---- rich account dropdown (idlix #55) ---- */
.nav-acct-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 290px;
  display: none; flex-direction: column;
  background: #0d1016; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 8px; z-index: 120;
  box-shadow: 0 24px 60px rgba(0,0,0,0.66);
}
.nav-acct.open .nav-acct-menu { display: flex; }
.acct-card {
  display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 6px;
  border-radius: 12px; text-decoration: none; background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06); transition: background .15s ease;
}
.acct-card:hover { background: rgba(255,255,255,0.07); }
.acct-card-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, #ff5661, #e50914);
  box-shadow: 0 6px 16px rgba(229,9,20,0.4);
}
.acct-card-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.acct-card-name { font-size: 14.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-card-handle { font-size: 12.5px; color: var(--text-muted, #9aa3b2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-card-go { color: var(--text-dim, #c2c8d2); display: flex; flex: 0 0 auto; }
.acct-card-go svg { display: block; transform: rotate(-90deg); }
.acct-menu-list { display: flex; flex-direction: column; padding: 4px 0; }
.acct-menu-foot { padding-top: 6px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.07); }
.acct-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; background: none; border: none;
  color: var(--text-dim, #c9cfd8); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background .13s ease, color .13s ease;
}
.acct-menu-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.acct-menu-ico { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--accent, #e50914); flex: 0 0 auto; }
.acct-menu-ico svg { width: 20px; height: 20px; }
.acct-menu-item.is-logout { color: #ff6b70; }
.acct-menu-item.is-logout .acct-menu-ico { color: #ff6b70; }
.acct-menu-item.is-logout:hover { background: rgba(229,9,20,0.10); }

/* ---- mobile drawer auth entry ---- */
.drawer-acct { margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 2px; }
.drawer-acct-card {
  display: flex; align-items: center; gap: 11px; padding: 10px; margin-bottom: 6px;
  border-radius: 12px; text-decoration: none; background: rgba(255,255,255,0.04);
}
.drawer-acct-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(135deg, #ff5661, #e50914);
}
.drawer-acct-info { display: flex; flex-direction: column; min-width: 0; }
.drawer-acct-name { font-size: 15px; font-weight: 700; color: #fff; }
.drawer-acct-handle { font-size: 12.5px; color: var(--text-muted, #9aa3b2); }
.drawer-acct-item, .drawer-signin {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: #fff; font-size: 15px; font-weight: 600; padding: 11px 6px; cursor: pointer; text-decoration: none; border-radius: 8px;
}
.drawer-acct-item:hover, .drawer-signin:hover { background: rgba(255,255,255,0.05); }
.drawer-acct-item.is-logout { color: #ff6b70; }

/* ============================================================
   Settings page (/settings) — idlix-style account management.
   ============================================================ */
.settings-page { max-width: 1180px; margin: 0 auto; padding: 30px 24px 80px; }
.set-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 26px; }
.set-avatar {
  width: 74px; height: 74px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 30px; color: #fff; background: linear-gradient(135deg, #ff5661, #e50914);
  box-shadow: 0 10px 30px rgba(229,9,20,0.4); border: 3px solid rgba(255,255,255,0.08);
  overflow: hidden; position: relative; cursor: pointer;
}
.set-avatar.has-img { background: none; }
.set-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* header avatar uploader (change → server converts any format to WebP) */
.set-avatar-wrap { position: relative; width: 74px; height: 74px; flex: 0 0 auto; }
.set-avatar-file { display: none !important; }
.set-avatar-cam {
  position: absolute; right: -3px; bottom: -3px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #05070a; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; color: #fff; z-index: 2;
  background: linear-gradient(135deg, #ff5661, #e50914); box-shadow: 0 4px 12px rgba(229,9,20,0.5);
  transition: transform .12s ease, background .15s ease;
}
.set-avatar-cam:hover { transform: scale(1.08); }
.set-avatar-cam svg { width: 15px; height: 15px; }
.set-avatar-wrap.is-busy { pointer-events: none; opacity: 0.55; }
.set-avatar-wrap.is-busy::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.28); border-top-color: #fff; animation: setSpin 0.8s linear infinite; z-index: 3;
}
@keyframes setSpin { to { transform: rotate(360deg); } }
/* photo avatars in the nav account button / dropdown card / mobile drawer */
.nav-acct-avatar.has-img, .acct-card-avatar.has-img, .drawer-acct-avatar.has-img { background: none; overflow: hidden; }
.nav-acct-avatar img, .acct-card-avatar img, .drawer-acct-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.set-head-remove { align-self: flex-start; margin-top: 4px; background: none; border: none; color: #ff7a80; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.set-head-remove:hover { color: #ff9297; text-decoration: underline; }

/* Avatar adjust dialog (drag + zoom, circular preview) */
body.avatar-crop-open { overflow: hidden; }
.avatar-crop-overlay {
  position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,6,10,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.avatar-crop-modal {
  width: 100%; max-width: 360px; border-radius: 20px; padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(22,25,34,0.98), rgba(12,14,20,0.99));
  border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center;
}
.avatar-crop-title { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.avatar-crop-hint { font-size: 12.5px; color: var(--text-muted, #9aa3b2); margin: 0 0 16px; text-align: center; }
.avatar-crop-stage {
  position: relative; width: 300px; max-width: 78vw; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px;
  background: #05070a; cursor: grab; touch-action: none; user-select: none;
}
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.avatar-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(5,7,10,0.62); border: 2px solid rgba(255,255,255,0.75); pointer-events: none; }
.avatar-crop-zoomrow { display: flex; align-items: center; gap: 12px; width: 300px; max-width: 78vw; margin: 18px 0 4px; }
.avatar-crop-zi { color: var(--text-muted, #9aa3b2); display: flex; flex: 0 0 auto; }
.avatar-crop-zi svg { width: 18px; height: 18px; }
.avatar-crop-zoom { flex: 1 1 auto; accent-color: #e50914; height: 4px; cursor: pointer; }
.avatar-crop-actions { display: flex; gap: 10px; width: 100%; margin-top: 16px; }
.avatar-crop-actions .set-btn { flex: 1 1 0; }
.set-head-info { display: flex; flex-direction: column; gap: 3px; }
.set-head-name { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.set-head-handle { font-size: 14px; color: var(--text-muted, #9aa3b2); }

.set-tabs {
  display: flex; gap: 6px; padding: 6px; margin-bottom: 24px; border-radius: 14px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); overflow-x: auto;
}
.set-tab {
  flex: 1 1 0; min-width: max-content; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 10px; border: none; background: none; cursor: pointer;
  color: var(--text-muted, #9aa3b2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.set-tab:hover { color: #fff; }
.set-tab.active { background: rgba(255,255,255,0.08); color: #fff; }
.set-tab.active .set-tab-ico { color: var(--accent, #e50914); }
.set-tab-ico { display: flex; }
.set-tab-ico svg { width: 17px; height: 17px; }

.set-body { display: block; }
.set-stack { display: flex; flex-direction: column; gap: 20px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.set-grid--single { grid-template-columns: 1fr; max-width: 620px; }
.set-grid--2 { grid-template-columns: 1fr 1fr; gap: 16px; }

.set-card {
  background: rgba(255,255,255,0.028); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 22px 22px 24px;
}
.set-card-head { margin-bottom: 16px; }
.set-card-title { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 800; color: #fff; margin: 0; }
.set-card-ico { display: flex; color: var(--accent, #e50914); }
.set-card-ico svg { width: 19px; height: 19px; }
.set-card-sub { font-size: 13px; color: var(--text-muted, #9aa3b2); margin: 6px 0 0; }

.set-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; position: relative; }
.set-label { font-size: 13px; font-weight: 600; color: var(--text-dim, #c9cfd8); }
.set-counter { font-size: 11.5px; color: var(--text-muted, #9aa3b2); align-self: flex-end; }
.set-input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 11px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10); color: #fff; font-size: 14.5px; outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.set-input::placeholder { color: rgba(255,255,255,0.4); }
.set-input:focus { border-color: rgba(255,86,97,0.6); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(229,9,20,0.13); }
.set-select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #9aa3b2 50%), linear-gradient(135deg, #9aa3b2 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.set-select option { background: #14171e; color: #fff; }
.set-input-wrap { position: relative; display: flex; align-items: center; }
.set-input-wrap .set-input { padding-right: 44px; }
.set-eye { position: absolute; right: 6px; width: 34px; height: 34px; border: none; background: transparent; color: var(--text-muted, #9aa3b2); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.set-eye:hover { color: #fff; }
.set-eye svg { width: 18px; height: 18px; }
.set-handle-field { display: flex; align-items: center; }
.set-handle-at { position: absolute; left: 14px; color: var(--text-muted, #9aa3b2); font-size: 14.5px; pointer-events: none; z-index: 1; }
.set-input--handle { padding-left: 30px; }

.set-actions { display: flex; gap: 10px; margin-top: 4px; }
.set-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 11px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; transition: transform .14s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.set-btn:disabled { opacity: 0.65; cursor: default; }
.set-btn--primary { background: linear-gradient(135deg, #ff5661, #e50914); color: #fff; box-shadow: 0 8px 22px rgba(229,9,20,0.34); }
.set-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(229,9,20,0.5); }
.set-btn--ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.14); }
.set-btn--ghost:hover { background: rgba(255,255,255,0.11); }
.set-btn--danger { background: rgba(229,9,20,0.12); color: #ff7a80; border: 1px solid rgba(229,9,20,0.34); }
.set-btn--danger:hover { background: rgba(229,9,20,0.2); color: #ff9297; }

.set-msg { font-size: 13px; border-radius: 9px; padding: 9px 12px; margin-bottom: 12px; }
.set-msg.is-ok { color: #57d98a; background: rgba(70,209,122,0.10); border: 1px solid rgba(70,209,122,0.32); }
.set-msg.is-err { color: #ff8388; background: rgba(229,9,20,0.10); border: 1px solid rgba(229,9,20,0.28); }

.set-device { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); flex-wrap: wrap; }
.set-device-dot { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: rgba(70,209,122,0.16); border: 1px solid rgba(70,209,122,0.4); position: relative; }
.set-device-dot::after { content: ''; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: #46d17a; }
.set-device-main { flex: 1 1 200px; min-width: 0; }
.set-device-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.set-device-name { font-size: 15px; font-weight: 700; color: #fff; }
.set-device-meta { font-size: 13px; color: var(--text-muted, #9aa3b2); line-height: 1.5; }
.set-device-time { font-size: 12px; color: rgba(255,255,255,0.42); }
.set-device-side { flex: 0 0 auto; }
.set-badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; padding: 3px 8px; border-radius: 5px; }
.set-badge--cur { color: #ff6b70; background: rgba(229,9,20,0.14); border: 1px solid rgba(229,9,20,0.4); }
.set-badge--act { color: #46d17a; background: rgba(70,209,122,0.12); border: 1px solid rgba(70,209,122,0.4); }

.set-static { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 15px; border-radius: 11px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.set-static-k { font-size: 13px; color: var(--text-muted, #9aa3b2); }
.set-static-v { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.set-note { font-size: 13px; color: var(--text-muted, #9aa3b2); line-height: 1.55; margin: 0 0 14px; }

.set-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.set-info-row:last-child { border-bottom: none; }
.set-info-k { font-size: 13.5px; color: var(--text-muted, #9aa3b2); }
.set-info-v { font-size: 14px; font-weight: 600; color: #fff; }
.set-pill { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,0.08); color: #c9cfd8; }
.set-pill--ok { color: #46d17a; background: rgba(70,209,122,0.12); border: 1px solid rgba(70,209,122,0.34); }

/* Recent activity (Continue watching / My List) */
.set-act-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.set-act-tab { flex: 1 1 0; padding: 8px 10px; border-radius: 8px; border: none; background: none; cursor: pointer; color: var(--text-muted, #9aa3b2); font-size: 12.5px; font-weight: 600; transition: background .15s ease, color .15s ease; white-space: nowrap; }
.set-act-tab:hover { color: #fff; }
.set-act-tab.active { background: rgba(255,255,255,0.09); color: #fff; }
.set-activity-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.set-act-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; text-decoration: none; transition: background .13s ease; }
.set-act-item:hover { background: rgba(255,255,255,0.05); }
.set-act-thumb { width: 42px; height: 60px; flex: 0 0 auto; border-radius: 7px; object-fit: cover; background: #12151d; }
.set-act-thumb--ph { background: linear-gradient(135deg, #1a1e27, #12151d); }
.set-act-info { min-width: 0; flex: 1 1 auto; }
.set-act-title { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-act-meta { font-size: 12px; color: var(--text-muted, #9aa3b2); margin-top: 2px; }
.set-act-bar { margin-top: 6px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.set-act-bar span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ff5661, #e50914); }
.set-act-empty { font-size: 13px; color: var(--text-muted, #9aa3b2); line-height: 1.5; padding: 18px 8px; text-align: center; }

@media (max-width: 820px) {
  .nav-account { display: none; }          /* mobile uses the drawer instead */
  .auth-poster { width: 122px; border-radius: 10px; }
  .auth-wall-wrap, .auth-wall, .auth-col { gap: 12px; }
  .auth-card-body { padding: 28px 22px 24px; }
  .auth-center { padding: 18px; }
  .settings-page { padding: 20px 16px 90px; }
  .set-grid, .set-grid--2 { grid-template-columns: 1fr; }
  .set-head { gap: 14px; margin-bottom: 20px; }
  .set-avatar { width: 60px; height: 60px; font-size: 24px; }
  .set-head-name { font-size: 21px; }
}

/* ============================================================
   "Frimovi for Android" download page (/app) — idlix ref #60/#61.
   ============================================================ */
.appdl-page { max-width: 1120px; margin: 0 auto; padding: 40px 24px 90px; }
.appdl-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start;
  padding-bottom: 40px; margin-bottom: 8px;
}
.appdl-hero-main { min-width: 0; }
.appdl-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(229,9,20,0.12); border: 1px solid rgba(229,9,20,0.34); color: #ff7a80; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 16px; }
.appdl-kicker-ico { display: flex; } .appdl-kicker-ico svg { width: 15px; height: 15px; }
.appdl-title { font-size: 42px; line-height: 1.05; font-weight: 800; letter-spacing: -1px; color: #fff; margin: 0 0 14px; }
.appdl-sub { font-size: 16px; line-height: 1.55; color: var(--text-muted, #9aa3b2); max-width: 560px; margin: 0 0 22px; }
.appdl-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.appdl-badge { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: #e7ebf2; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; }
.appdl-cta { margin-bottom: 16px; }
.appdl-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, #ff5661, #e50914); color: #fff; font-size: 16.5px; font-weight: 800;
  box-shadow: 0 12px 30px rgba(229,9,20,0.42); transition: transform .15s ease, box-shadow .15s ease;
}
.appdl-download:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(229,9,20,0.55); }
.appdl-download-ico { display: flex; } .appdl-download-ico svg { width: 22px; height: 22px; }
.appdl-fineprint { font-size: 13px; color: var(--text-muted, #9aa3b2); max-width: 520px; line-height: 1.5; margin: 0; }

.appdl-qr { flex: 0 0 auto; text-align: center; }
.appdl-qr-box { width: 200px; height: 200px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 16px 44px rgba(0,0,0,0.5); }
.appdl-qr-box svg { display: block; width: 100%; height: 100%; }
.appdl-qr-cap { font-size: 12.5px; color: var(--text-muted, #9aa3b2); margin: 12px auto 0; max-width: 200px; line-height: 1.45; }

.appdl-section { padding: 30px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.appdl-h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 14px; }
.appdl-h2::before { content: ''; width: 4px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #ff5661, #e50914); flex: 0 0 auto; }
.appdl-ver-tag { font-size: 13px; font-weight: 700; color: #ff7a80; margin-bottom: 14px; }
.appdl-list { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.appdl-list li { position: relative; padding-left: 22px; color: rgba(230,234,240,0.86); font-size: 14.5px; line-height: 1.5; }
.appdl-list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #e50914); }
.appdl-list--sm li { font-size: 13.5px; color: var(--text-muted, #9aa3b2); }
.appdl-prev { margin-bottom: 18px; }
.appdl-prev-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.appdl-prev-head strong { color: #fff; font-size: 15px; }
.appdl-prev-date { font-size: 12.5px; color: var(--text-muted, #9aa3b2); }

.appdl-acc { display: flex; flex-direction: column; gap: 12px; }
.appdl-acc-item { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.028); overflow: hidden; }
.appdl-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 17px 20px; background: none; border: none; cursor: pointer; color: #fff; font-size: 15.5px; font-weight: 700; }
.appdl-acc-chev { display: flex; color: var(--text-muted, #9aa3b2); transition: transform .2s ease; }
.appdl-acc-chev svg { width: 20px; height: 20px; }
.appdl-acc-item.open .appdl-acc-chev { transform: rotate(180deg); }
.appdl-acc-body { display: none; padding: 0 20px 18px; }
.appdl-acc-item.open .appdl-acc-body { display: block; }
.appdl-acc-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted, #9aa3b2); }
.appdl-acc-body strong { color: #e7ebf2; font-weight: 700; }

@media (max-width: 820px) {
  .appdl-page { padding: 28px 16px 80px; }
  .appdl-hero { grid-template-columns: 1fr; gap: 28px; }
  .appdl-qr { order: -1; }
  .appdl-title { font-size: 32px; }
  .appdl-sub { font-size: 15px; }
  .appdl-download { width: 100%; }
}

/* ===================== Watch Party ===================== */
.wp-page{max-width:1240px;margin:0 auto;padding:calc(var(--nav-h,68px) + 20px) 20px 80px}
.wp-hero{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:radial-gradient(120% 160% at 12% 0%,rgba(229,9,20,.16),transparent 55%),var(--bg-2);padding:32px 30px}
.wp-eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:800}
.wp-h1{font-size:clamp(28px,4.4vw,46px);font-weight:900;letter-spacing:-.02em;margin:8px 0 6px}
.wp-lead{color:var(--text-dim);max-width:560px;margin:0;font-size:15px;line-height:1.5}
.wp-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px}
.wp-stats{display:flex;gap:34px}
.wp-stat{display:flex;flex-direction:column;gap:4px}
.wp-stat-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.wp-stat-num{font-size:26px;font-weight:900}
.wp-host-btn{padding:12px 22px;font-size:15px;border-radius:12px}
.wp-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 18px}
.wp-tabs{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:4px}
.wp-tab{background:none;border:0;color:var(--text-dim);font-weight:700;font-size:14px;padding:8px 18px;border-radius:9px;cursor:pointer}
.wp-tab.active{background:var(--accent);color:#fff}
.wp-joinbox{display:flex;gap:8px}
.wp-input{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 14px;font-size:14px;outline:none}
.wp-input:focus{border-color:var(--accent)}
#wp-join-code{width:150px;text-transform:lowercase}
.wp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wp-empty{grid-column:1/-1;text-align:center;color:var(--text-muted);padding:60px 20px;background:var(--bg-2);border:1px dashed var(--border);border-radius:14px}
.wp-link{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
.wp-card{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .16s,border-color .16s,box-shadow .16s}
.wp-card:hover{transform:translateY(-3px);border-color:rgba(229,9,20,.5);box-shadow:0 16px 34px rgba(0,0,0,.5)}
.wp-card-art{position:relative;aspect-ratio:16/9;background:#12151c center/cover no-repeat}
.wp-card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45))}
.wp-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.06em;background:rgba(0,0,0,.72);color:#fff;padding:3px 8px;border-radius:6px}
.wp-pill{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.68);color:#fff}
.wp-pill.wp-liveP i{width:7px;height:7px;border-radius:50%;background:#46d17a;display:inline-block;box-shadow:0 0 6px #46d17a}
.wp-pill.wp-full{background:rgba(120,120,130,.85)}
.wp-pill.wp-priv{right:auto;left:10px;top:38px;background:rgba(0,0,0,.6);padding:4px 7px}
.wp-card-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px}
.wp-card-title{font-weight:800;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-card-sub{font-size:12.5px;color:var(--text-muted)}
.wp-hostrow{display:flex;align-items:center;gap:7px;margin-top:4px;color:var(--text-dim);font-size:13px}
.wp-hlabel{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.wp-av{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none;overflow:hidden}
.wp-av.has-img{background:none}.wp-av img{width:100%;height:100%;object-fit:cover}
.wp-av.sm{width:26px;height:26px;font-size:12px}
.wp-hname{font-weight:700;color:var(--text)}
.wp-hostrow svg{color:#ffcf4a}
.wp-metaline{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-muted)}
.wp-metaline svg,.wp-cap svg{color:var(--text-muted);flex:none}
.wp-cap{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim);margin-top:2px}
.wp-capbar{flex:1;height:5px;border-radius:3px;background:var(--bg-3);overflow:hidden;min-width:40px}
.wp-capbar i{display:block;height:100%;background:linear-gradient(90deg,#ff5661,#e50914)}
@media(max-width:1000px){.wp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wp-grid{grid-template-columns:1fr}.wp-hero-row{align-items:stretch}.wp-controls{gap:10px}.wp-joinbox{flex:1}#wp-join-code{flex:1;width:auto}}

/* create dialog */
.wp-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,5,8,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wp-dialog{position:relative;width:min(460px,96vw);max-height:90vh;overflow:auto;background:var(--bg-2);border:1px solid var(--border);border-radius:18px;padding:26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.wp-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wp-dtitle{margin:0 0 18px;font-size:22px;font-weight:900}
.wp-flabel{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:14px 0 7px;font-weight:700}
.wp-dialog .wp-input{width:100%}
.wp-results{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto}
.wp-res{display:flex;align-items:center;gap:10px;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:7px 9px;cursor:pointer;text-align:left;color:inherit}
.wp-res:hover{border-color:var(--accent)}
.wp-res img{width:34px;height:50px;object-fit:cover;border-radius:5px;flex:none}
.wp-res span{display:flex;flex-direction:column}.wp-res small{color:var(--text-muted);font-size:12px}
.wp-picked{display:flex;align-items:center;gap:12px;background:var(--bg-3);border-radius:10px;padding:10px;margin-bottom:6px}
.wp-picked img{width:44px;height:64px;object-fit:cover;border-radius:6px}
.wp-picked small{color:var(--text-muted);display:block}
.wp-seg{display:flex;gap:6px}
.wp-seg button{flex:1;background:var(--bg-3);border:1px solid var(--border);color:var(--text-dim);font-weight:700;padding:10px;border-radius:10px;cursor:pointer}
.wp-seg button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.wp-hint{font-size:12px;color:var(--text-muted);margin:8px 0 0}
.wp-se{display:flex;align-items:center;gap:10px}.wp-se .wp-input{width:80px}.wp-se span{color:var(--text-muted)}
.wp-dact{display:flex;gap:10px;margin-top:22px}.wp-dact .btn{flex:1}

/* room shell (behind player) */
.wp-room-shell{min-height:100svh;background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative}
.wp-room-shell::before{content:"";position:absolute;inset:0;background:rgba(5,7,10,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.wp-room-loading,.wp-gate{position:relative;color:var(--text-dim)}
.wp-gate{text-align:center;padding:40px 24px}.wp-gate h2{font-size:26px;font-weight:900;margin:0 0 8px;color:#fff}.wp-gate p{color:var(--text-dim);margin:0 0 18px}

/* guest lock hint on the player frame */
.player-frame.wp-guest::after{content:"Host controls playback";position:absolute;left:50%;bottom:86px;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:12px;letter-spacing:.03em;padding:5px 12px;border-radius:999px;pointer-events:none;z-index:6;opacity:0;transition:opacity .25s}
.player-frame.wp-guest:hover::after{opacity:1}

/* room party drawer (appended into #player-modal) */
.wp-toggle{position:absolute;right:16px;bottom:84px;z-index:30;display:flex;align-items:center;gap:7px;background:rgba(14,17,24,.9);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 15px;cursor:pointer;font-weight:800;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wp-toggle svg{color:#fff}
.wp-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw);z-index:31;display:flex;flex-direction:column;background:rgba(10,12,17,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:1px solid rgba(255,255,255,.1);transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.wp-panel.open{transform:none}
.wp-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.wp-ph-title{font-weight:800;font-size:15px;line-height:1.2}.wp-ph-title small{color:var(--text-muted);font-weight:600}
.wp-panel-x{background:none;border:0;color:var(--text-dim);cursor:pointer;padding:4px}
.wp-panel-sub{padding:9px 16px;font-size:12px}
.wp-youhost{color:#ffcf4a;display:inline-flex;align-items:center;gap:6px}
.wp-guesthint{color:var(--text-dim);display:inline-flex;align-items:center;gap:6px}
.wp-ptabs{display:flex;gap:4px;padding:0 12px 10px}
.wp-ptabs button{flex:1;background:none;border:0;color:var(--text-dim);font-weight:700;font-size:13px;padding:9px;border-radius:9px;cursor:pointer}
.wp-ptabs button.active{background:rgba(255,255,255,.08);color:#fff}
.wp-ptabs b{background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;margin-left:4px}
.wp-chat{flex:1;overflow-y:auto;padding:6px 14px;display:flex;flex-direction:column;gap:11px}
.wp-people{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.wp-msg{display:flex;gap:9px;align-items:flex-start}
.wp-msg-b{font-size:13.5px;line-height:1.35;color:var(--text)}
.wp-msg-b b{display:block;font-size:12px;color:#ff8a90;font-weight:700}
.wp-member{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px}
.wp-member:hover{background:rgba(255,255,255,.04)}
.wp-mname{font-size:13.5px;font-weight:600}
.wp-mhost{margin-left:auto;font-size:11px;color:#ffcf4a;display:inline-flex;align-items:center;gap:4px}
.wp-chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
.wp-chat-form input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;padding:10px 12px;font-size:13.5px;outline:none}
.wp-chat-form input:focus{border-color:var(--accent)}
.wp-chat-form button{background:var(--accent);border:0;color:#fff;border-radius:10px;width:42px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wp-panel-foot{display:flex;flex-wrap:wrap;gap:8px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.08)}
.wp-foot-btn{flex:1;min-width:110px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text);font-weight:700;font-size:12.5px;padding:9px;border-radius:9px;cursor:pointer}
.wp-foot-btn:hover{border-color:rgba(255,255,255,.3)}
.wp-foot-btn.wp-danger{color:#ff6a72;border-color:rgba(229,9,20,.4)}
@media(max-width:560px){.wp-panel{width:100vw}.wp-toggle{bottom:78px}}

/* private-room password — create field + join gate + make-private dialog */
.wp-passwrap{margin-top:2px}
.wp-passgate{max-width:380px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;text-align:center}
.wp-passgate .wp-input{width:100%;margin-top:4px;text-align:center;letter-spacing:.04em}
.wp-passgate .wp-lock-row{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);margin:0 0 16px}
.wp-passgate .wp-lock-row svg{color:#ff8a90;flex:0 0 auto}
.wp-passerr{color:#ff6b6b;font-size:13px;min-height:18px;margin:8px 0 2px;font-weight:600}
.wp-gate-act{display:flex;gap:10px;margin-top:6px}
.wp-gate-act .btn{flex:1}
.wp-pass-dialog{max-width:420px}

/* Banner ads between content rows (idlix-style; managed in /admin → Ads) */
.ad-row{display:flex;gap:14px;flex-wrap:wrap;padding:0 64px;margin:6px 0 40px}
.ad-banner{flex:1 1 calc(50% - 7px);min-width:280px;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#12151c;aspect-ratio:970/120;transition:transform .18s,box-shadow .18s,border-color .18s}
.ad-banner:hover{transform:translateY(-2px);border-color:rgba(229,9,20,.5);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.ad-banner img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1100px){.ad-row{padding:0 24px}}
@media (max-width:760px){.ad-row{padding:0 16px}.ad-banner{flex-basis:100%}}

/* =====================================================================
   FriAnime shared components (episodes grid, sub/dub toggle, player skip,
   characters row, detail score ring, genres hub). Dark-theme, --accent red.
   Appended — defines the shared class names other views/player consume.
   ===================================================================== */

/* ---- Episodes grid (numbered tiles) ---- */
.episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
  margin: 14px 0 6px;
}
.ep-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.ep-tile:hover {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(229, 9, 20, 0.38);
}
.ep-tile.active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(229, 9, 20, 0.5);
}
.ep-tile.filler {
  opacity: 0.5;
  background: var(--bg-2);
}
.ep-tile.filler:hover { opacity: 0.85; }
.ep-tile .ep-tile-badge {
  position: absolute;
  top: 3px; right: 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.ep-tile.active .ep-tile-badge,
.ep-tile:hover .ep-tile-badge { color: rgba(255,255,255,.85); }

/* Episode range tabs (1-100 / 101-200 ...) */
.ep-range-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
}
.ep-range-tab {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ep-range-tab:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.ep-range-tab.active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

/* ---- Sub / Dub segmented control ---- */
.subdub-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.subdub-tab {
  padding: 7px 20px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.subdub-tab:hover { color: var(--text); }
.subdub-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.subdub-tab:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Player skip-intro / skip-outro button (over the video) ---- */
.fx-skip {
  position: absolute;
  right: 22px;
  bottom: 76px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(20, 20, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .18s ease, border-color .18s ease;
}
.fx-skip.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fx-skip:hover {
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 12px 34px rgba(229, 9, 20, 0.5);
}
.fx-skip svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .fx-skip { right: 14px; bottom: 64px; padding: 9px 15px; font-size: 13px; }
}

/* ---- Characters row (detail page) ---- */
.char-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.char-row::-webkit-scrollbar { height: 8px; }
.char-card {
  flex: 0 0 auto;
  width: 110px;
  scroll-snap-align: start;
}
.char-img {
  width: 110px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: block;
}
.char-name {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.char-va {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Detail score ring ---- */
.score-ring {
  --val: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--bg) 70%, transparent 72% 100%),
    conic-gradient(var(--accent) calc(var(--val) * 1%), rgba(255,255,255,0.12) 0);
}
.score-num {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.score-num small {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  display: block;
  text-align: center;
  margin-top: 2px;
}

/* ---- Genres hub (big pill tiles) ---- */
.genres-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.genres-hub .genre-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 18px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--border);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.genres-hub .genre-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(229, 9, 20, 0) 40%, rgba(229, 9, 20, 0.35) 100%);
  opacity: 0;
  transition: opacity .2s ease;
}
.genres-hub .genre-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 9, 20, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}
.genres-hub .genre-pill:hover::before { opacity: 1; }
.genres-hub .genre-pill span { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .genres-hub { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .genres-hub .genre-pill { min-height: 74px; font-size: 15px; }
}

/* Episodes: empty-track note (e.g. a sub-only show viewed on the DUB tab) */
.ep-empty { padding: 22px 4px; color: var(--text-muted, #7a7a85); font-size: 14px; }

/* ============================================================
   Auth — EMAIL-OTP additions (code boxes, resend, back link).
   Appended 2026-10-04 for the signup/forgot verification steps.
   Base .auth-* / .nav-acct styles live above. (style.css ?v=2026100410)
   ============================================================ */
.auth-otp { display: flex; gap: 9px; justify-content: center; margin: 2px 0 2px; }
.auth-otp-box {
  width: 46px; height: 56px; text-align: center; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 24px; font-weight: 700; outline: none; caret-color: #e50914;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-otp-box:focus {
  border-color: rgba(255,86,97,0.7); background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(229,9,20,0.16);
}
@media (max-width: 420px) {
  .auth-otp { gap: 6px; }
  .auth-otp-box { width: 40px; height: 50px; font-size: 21px; }
}
.auth-resend {
  background: none; border: none; color: #ff6b70; font-size: 13.5px; font-weight: 600;
  cursor: pointer; padding: 0;
}
.auth-resend:hover:not(:disabled) { color: #ff8f93; text-decoration: underline; }
.auth-resend:disabled { color: var(--text-muted, #9aa3b2); cursor: default; }
.auth-switch-btn.auth-back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted, #9aa3b2);
}
.auth-switch-btn.auth-back:hover { color: #fff; }
.auth-switch-btn.auth-back svg { width: 15px; height: 15px; }