/* ==========================================================================
   MovieHub — dark neon / glassmorphism theme
   ========================================================================== */

/* Fonts are loaded via preconnected <link> tags in includes/header.php —
   faster than @import, which blocks the CSS parser on a second round-trip. */

:root {
  --bg: #07070d;
  --bg-alt: #0d0d16;
  --card: rgba(255,255,255,0.04);
  --card-border: rgba(155, 92, 255, 0.18);
  --accent: #9b5cff;
  --accent-2: #4fe3c1;
  --accent-glow: rgba(155, 92, 255, 0.45);
  --text: #eae7f5;
  --text-dim: #9490a8;
  --danger: #ff5c7a;
  --radius: 16px;
  --font-display: 'Orbitron', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Settings → Font Size: scales the whole page since every other size in
   the stylesheet is in rem/em relative to the root. */
body.font-size-small { font-size: 0.9rem; }
body.font-size-medium { font-size: 1rem; }
body.font-size-large { font-size: 1.15rem; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background-image:
    radial-gradient(circle at 15% 0%, rgba(155,92,255,0.12), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(79,227,193,0.08), transparent 35%);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: #fff; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.glow-text {
  color: var(--text);
  text-shadow: 0 0 18px var(--accent-glow);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Icons ---------- */
.icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* ---------- Header icon buttons (search / menu) ---------- */
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .15s;
}
.icon-btn:hover, .icon-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
  background: rgba(155,92,255,0.14);
  box-shadow: 0 0 16px var(--accent-glow);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn .icon { width: 1.2em; height: 1.2em; stroke-width: 2.25; }
#searchOpenBtn .icon { color: var(--accent-2); }

/* Full-screen "Search Movies & TV-Shows" popup: heavy blur over the page
   content, a floating white close circle top-right, a pill search field,
   and a large solid-orange Search button below it. */
.modal-overlay.search-overlay {
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: rgba(6,6,12,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.search-modal-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #0b0b12;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 2;
}
.search-modal-close:hover { background: #f0f0f0; }
.search-modal-close .icon { width: 1.2em; height: 1.2em; stroke-width: 2.5; }
.search-modal-box {
  width: 100%;
  max-width: 460px;
  padding: 0 20px;
  margin-top: 90px;
}
@media (max-height: 700px) { .search-modal-box { margin-top: 70px; } }
.search-modal-form { display: flex; flex-direction: column; gap: 16px; }
.search-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 16px 20px;
}
.search-modal-input-wrap .ts-icon { color: rgba(255,255,255,0.55); display: flex; }
.search-modal-input-wrap .ts-icon .icon { width: 1.15em; height: 1.15em; }
.search-modal-input-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
}
.search-modal-input-wrap input::placeholder { color: rgba(255,255,255,0.55); }
.search-modal-btn {
  width: 100%;
  background: #ff9d00;
  border: none;
  border-radius: 16px;
  color: #171008;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,157,0,0.35);
  transition: background .15s, transform .15s;
}
.search-modal-btn:hover { background: #ffab26; }
.search-modal-btn:active { transform: scale(0.98); }

/* Trailer & screenshot popups always open centered in the MIDDLE of the viewport, on any screen size */
.modal-overlay.modal-center {
  align-items: center;
  padding: 20px;
}
.modal-overlay.modal-center .modal-box {
  border-radius: var(--radius);
  transform: translateY(0) scale(0.96);
}
.modal-overlay.modal-center.open .modal-box { transform: translateY(0) scale(1); }

/* ---------- Header ---------- */
/* position: fixed (not sticky) — deliberately. This site sets
   overflow-x: hidden on html/body (see top of file) to stop horizontal
   scroll/jank from full-bleed hero sections; the side effect of that,
   in Chrome/Android especially, is that it turns body into an implicit
   scroll container and silently breaks position: sticky on children.
   Fixed positioning has no such dependency, so the header now stays
   truly pinned to the top on every browser regardless of that rule.
   The matching top padding that keeps content from sliding under it
   lives on body.has-bottom-nav below. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: linear-gradient(180deg, rgba(20,18,32,0.75), rgba(7,7,13,0.7));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 30px -18px rgba(0,0,0,0.6);
  padding-top: env(safe-area-inset-top);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.brand span.accent { color: var(--accent); text-shadow: 0 0 16px var(--accent-glow); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle .icon { width: 1.2em; height: 1.2em; }

.main-nav {
  display: flex;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.main-nav a { color: var(--text-dim); transition: color .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--accent-2); }

/* ---------- Search ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 10px 18px;
  margin: 28px 0;
  backdrop-filter: blur(10px);
}
.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}
.search-bar input::placeholder { color: var(--text-dim); }
.search-bar button {
  background: linear-gradient(135deg, var(--accent), #6b2fd6);
  border: none;
  border-radius: 999px;
  color: #fff;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px var(--accent-glow);
}

/* ---------- Hero carousel (auto-scrolling featured titles) ---------- */
.hero-carousel {
  position: relative;
  margin: 24px 0 14px;
  overflow: hidden;
  border-radius: var(--radius);
}
.hero-track {
  display: flex;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hero-track .hero {
  flex: 0 0 100%;
  margin: 0;
}
.hero-dots {
  position: static;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 30px;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .2s;
}
.hero-dot.active { background: var(--accent-2); width: 22px; border-radius: 4px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px auto 36px;
  border: 1px solid var(--card-border);
  max-width: 420px;
  aspect-ratio: 3 / 4.3;
  max-height: 74vh;
  display: flex;
  align-items: flex-end;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,5,10,0.98) 0%, rgba(5,5,10,0.86) 28%, rgba(5,5,10,0.38) 56%, rgba(5,5,10,0.06) 78%);
}
.hero img.backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-content { position: relative; padding: 24px 22px; z-index: 2; width: 100%; text-align: center; }
.hero-eyebrow {
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}
.hero-meta-rating { display: inline-flex; align-items: center; gap: 5px; color: #f5c451; font-weight: 700; }
.hero-meta-rating .icon { width: 15px; height: 15px; fill: #f5c451; stroke: #f5c451; }
.hero-type-badge {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  color: #fff;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  margin: 0 0 12px;
  line-height: 1.14;
  text-shadow: 0 4px 18px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hero-genre-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 24px;
}
.hero-meta-dot { color: var(--accent); font-size: 0.6rem; }
.hero-actions { display: flex; gap: 12px; }
.hero-btn-watch,
.hero-btn-info {
  flex: 1 1 0;
  padding: 16px 18px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: 30px;
}
.hero-btn-watch {
  background: linear-gradient(135deg, var(--accent), #6b2fd6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 24px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.hero-btn-watch:hover { filter: brightness(1.1); }
.hero-btn-watch .icon { width: 19px; height: 19px; fill: #fff; }
.hero-btn-info {
  background: rgba(79,227,193,0.16);
  border: 1px solid rgba(79,227,193,0.55);
  color: var(--accent-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-btn-info:hover { background: rgba(79,227,193,0.26); border-color: rgba(79,227,193,0.75); }
@media (max-width: 520px) {
  .hero { max-width: 100%; aspect-ratio: 3 / 4.5; max-height: 70vh; }
  .hero-content { padding: 20px 18px; }
  .hero-actions { gap: 10px; }
  .hero-btn-watch, .hero-btn-info { padding: 15px 12px; font-size: 0.94rem; }
}

/* ---------- Section headings ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 34px 0 16px;
  gap: 10px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin: 0;
}
.section-head h2 .bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  margin-right: 10px;
  vertical-align: middle;
  background: rgba(155,92,255,0.08);
  box-shadow: 0 0 10px -2px var(--accent-glow);
}
.section-head h2 .bar .icon { width: 16px; height: 16px; }
.section-head a.view-all {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ---------- Genre section / chips ---------- */
/* Single-line horizontal slider (like the poster genre strip) — no wrapping,
   swipe/scroll sideways. Rectangular "box" chips instead of pill/circle shape. */
.genre-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 4px 0 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.genre-chip-row::-webkit-scrollbar { display: none; }
.genre-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  scroll-snap-align: start;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(155,92,255,0.14), rgba(79,227,193,0.08));
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
}
.genre-chip .count {
  color: var(--text-dim);
  font-size: 0.68rem;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 5px;
}
.genre-chip:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(155,92,255,0.28), rgba(79,227,193,0.16));
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.genre-chip.active {
  border-color: var(--accent);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #6b2fd6);
  box-shadow: 0 0 18px var(--accent-glow);
}
.genre-chip.active .count { background: rgba(255,255,255,0.22); color: #fff; }

/* ---------- Movie grid & cards ---------- */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px) { .movie-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .movie-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1150px) { .movie-grid { grid-template-columns: repeat(5, 1fr); } }

/* Watch page "More Like This" — dense 3-up poster grid, Netflix-style */
.watch-related-block { margin-top: 26px; }
.related-poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 640px) { .related-poster-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 900px) { .related-poster-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1150px) { .related-poster-grid { grid-template-columns: repeat(6, 1fr); } }
/* "More Like This" shelves (watch/movie/series pages) and grid pages
   (search results, browse Movies/Series) show poster art only — no
   title/meta text underneath, so it reads as a clean poster wall. */
.related-poster-grid .movie-card .info,
.scroll-row .movie-card .info,
.movie-grid .movie-card .info { display: none; }

.movie-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color .3s ease, transform .32s cubic-bezier(.25,1.4,.4,1), box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .movie-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -18px var(--accent-glow);
  }
}
.movie-card:active {
  transform: scale(0.96);
  transition: transform .12s ease;
}
.movie-card .poster-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #14141c; }
.movie-card .poster-wrap img { width: 100%; height: 100%; object-fit: cover; }
.movie-card .views-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(10,10,14,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 600;
}
.movie-card .views-badge .icon { width: 12px; height: 12px; }
.movie-card .poster-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(7,7,13,0.85) 100%);
  pointer-events: none;
}
.movie-card .type-flag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(10,10,16,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
/* Movie = purple accent, Series = teal accent — a thin solid edge, no glow */
.movie-card .type-flag.is-movie { border: 1px solid rgba(155,92,255,0.6); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.movie-card .type-flag.is-series { border: 1px solid rgba(79,227,193,0.6); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.movie-card .type-flag .icon { width: 0.8em; height: 0.8em; }
.movie-card .rating-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(10,10,16,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(79,227,193,0.6);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.movie-card .rating-badge .icon { width: 0.8em; height: 0.8em; }

.movie-card .status-badge {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  background: linear-gradient(90deg, #b3121a 0%, #e5262f 50%, #b3121a 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 7px 8px 6px;
  border-radius: 0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow: 0 -6px 14px -6px rgba(0,0,0,0.55);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.movie-card .status-badge.status-badge-new_episode {
  background: linear-gradient(90deg, #1e4fa8 0%, #3b82f6 50%, #1e4fa8 100%);
}
.movie-card .status-badge.status-badge-new_season {
  background: linear-gradient(90deg, #7a1fc9 0%, #a855f7 50%, #7a1fc9 100%);
}
.movie-card .status-badge.status-badge-newly_added {
  background: linear-gradient(90deg, #b3121a 0%, #e5262f 50%, #b3121a 100%);
  color: #fff;
}

.movie-card .premium-badge {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #f5c542, #d69a1f);
  color: #1a1206;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(214,154,31,0.5);
}


.movie-card .info { padding: 10px 12px 14px; }
.movie-card .title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.movie-card .meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  opacity: 0.85;
}

/* ---------- Movie detail page ---------- */
.detail-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 24px 0 40px;
}
@media (min-width: 760px) { .detail-wrap { grid-template-columns: 300px minmax(0, 1fr); } }

.detail-poster-col { min-width: 0; }
.detail-info-col { min-width: 0; max-width: 100%; }

.detail-poster {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: 0 0 40px -10px var(--accent-glow);
  width: 100%;
  height: auto;
}

.title-row { display: flex; align-items: flex-start; gap: 10px; }
.title-row .detail-title { flex: 1; min-width: 0; }
.share-btn { width: 38px; height: 38px; flex-shrink: 0; margin-top: 4px; }
.share-btn .icon { width: 1.05em; height: 1.05em; }

.detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.detail-tagline {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--accent-2);
  opacity: 0.9;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.detail-original { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 14px; }

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.badge {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text-dim);
  transition: border-color .2s, transform .2s, background .2s;
}
.badge:hover { transform: translateY(-2px); }
.badge.rating { color: var(--accent-2); border-color: var(--accent-2); background: rgba(79,227,193,0.1); }
.badge.premium-detail-badge {
  color: #1a1206;
  font-weight: 700;
  background: linear-gradient(135deg, #f5c542, #d69a1f);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(214,154,31,0.4);
}
.imdb-badge {
  display: inline-flex;
  align-items: stretch;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.5);
}
.imdb-badge .imdb-logo {
  display: flex;
  align-items: center;
  padding: 0 7px;
  background: #f5c518;
  color: #000;
  letter-spacing: 0.01em;
}
.imdb-badge .imdb-score {
  display: flex;
  align-items: center;
  padding: 0 9px;
  background: #1a1a22;
  color: #f5c518;
  border: 1px solid #f5c518;
  border-left: none;
}
.badge.genre { color: var(--accent); border-color: var(--accent); background: rgba(155,92,255,0.1); }

.genre-row-slider {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  padding-bottom: 6px;
}
.genre-row-slider::-webkit-scrollbar { height: 6px; }
.genre-row-slider::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 999px; }
.genre-row-slider::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.genre-row-slider .badge { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

.genre-row { margin-bottom: 18px; }

.overview { line-height: 1.7; color: var(--text); margin-bottom: 22px; overflow-wrap: anywhere; word-break: break-word; }

.meta-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.meta-table tr { border-bottom: 1px solid var(--card-border); }
.meta-table td { padding: 9px 0; font-size: 0.9rem; }
.meta-table td:first-child { color: var(--text-dim); width: 120px; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; }

/* Watch-on links (legal streaming / trailer — NOT downloads) */
.watch-links { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.watch-links h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.watch-link-btn {
  --btn-color: #ffd100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  align-self: stretch;
  padding: 17px 24px;
  margin-bottom: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 40%, #1a1420), color-mix(in srgb, var(--btn-color) 20%, #120e18));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--btn-color) 65%, transparent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 24px -12px color-mix(in srgb, var(--btn-color) 55%, transparent);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.watch-link-btn:hover {
  border-color: var(--btn-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 30px -12px color-mix(in srgb, var(--btn-color) 70%, transparent);
  transform: translateY(-1px);
}
.watch-link-btn:active { transform: translateY(0) scale(0.98); }
.watch-link-btn .arrow { flex-shrink: 0; width: 16px; height: 16px; color: var(--btn-color); }
.watch-link-btn span:first-child { flex: 1; text-align: center; }
.watch-link-btn.highlight {
  background: linear-gradient(135deg, color-mix(in srgb, #ffd100 45%, #1a1420), color-mix(in srgb, #ffd100 22%, #120e18));
  border-color: rgba(255,209,0,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 24px -12px rgba(255,209,0,0.55);
}
.watch-link-btn.highlight .arrow { color: #ffd100; }

/* ---------- How to Download (admin-managed guide) ---------- */
.download-telegram-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 18px;
  margin: 18px 0 30px;
}
.download-telegram-row .how-to-download,
.download-telegram-row .social-cta-col {
  flex: 1 1 320px;
  margin: 0;
}
.download-telegram-row .social-cta-col { align-self: stretch; }
.social-cta-col { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.social-cta-col .telegram-cta-wrap,
.social-cta-col .discord-cta-wrap { margin: 0; }

.how-to-download {
  margin: 26px 0;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 30px -20px rgba(0,0,0,0.6);
}
.how-to-download h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  color: var(--accent-2);
}
.how-to-download h3 .icon { width: 1em; height: 1em; }
.htd-content { line-height: 1.75; color: var(--text-dim); font-size: 0.92rem; }
.htd-content strong, .htd-content b { color: var(--text); }

.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 26px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,0.6);
}
.video-embed-wrap iframe,
.video-embed-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Reactions ("Did you Like it?") ---------- */
.reactions-block { margin: 30px 0; text-align: center; }
.rb-heading { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 10px; }
.rb-total { color: var(--accent-2); font-weight: 700; font-family: var(--font-mono); margin-bottom: 18px; }
.reaction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}
@media (max-width: 420px) { .reaction-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.reaction-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, transform .15s, background .2s;
}
.reaction-btn:active { transform: scale(0.96); }
.reaction-btn:hover { border-color: var(--accent); }
.reaction-btn .r-emoji { font-size: 1.15rem; line-height: 1; }
.reaction-btn .r-label { font-size: 0.68rem; }
.reaction-btn .r-count { color: var(--accent-2); font-size: 0.72rem; }
.reaction-btn.picked { border-color: var(--accent); background: rgba(155,92,255,0.14); }
.reaction-grid.reacted .reaction-btn:not(.picked) { opacity: 0.5; cursor: default; }
.reaction-grid.reacted .reaction-btn { cursor: default; }

/* ---------- Comments ---------- */
.comments-block { margin: 34px 0; }
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}
.comment-form input, .comment-form textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.comment-form textarea { min-height: 90px; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form .btn { align-self: flex-start; }

.comment-login-prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 26px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card);
}
.comment-login-prompt p { margin: 0; color: var(--text-dim); font-size: 0.88rem; }
.comment-login-prompt .btn { width: 100%; }

.comment-list { display: flex; flex-direction: column; gap: 16px; }
.comment-item { display: flex; gap: 12px; }
.comment-avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  font-family: var(--font-mono);
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.comment-name { font-weight: 700; font-size: 0.9rem; }
.comment-date { color: var(--text-dim); font-size: 0.72rem; font-family: var(--font-mono); }
.comment-text { color: var(--text-dim); font-size: 0.88rem; line-height: 1.6; }

.comment-replies { margin-top: 14px; padding-left: 18px; border-left: 2px solid var(--card-border); display: flex; flex-direction: column; gap: 14px; }
.comment-reply.is-admin .comment-avatar.admin-avatar {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.comment-reply .comment-avatar.admin-avatar .icon { width: 16px; height: 16px; }
.comment-reply.is-admin .comment-name { color: var(--accent-2); }
.admin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0a0a0e;
  background: var(--accent-2);
  vertical-align: middle;
}


.alert { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--card-border); font-size: 0.85rem; margin-bottom: 16px; }
.alert-error { background: rgba(255,92,122,0.08); border-color: var(--danger); color: var(--danger); }

/* ---------- Join Telegram CTA (admin-managed link) ---------- */
.telegram-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(79,227,193,0.22), rgba(155,92,255,0.14));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 30px -18px rgba(79,227,193,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.telegram-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 34px -16px rgba(79,227,193,0.5); }
.telegram-cta .telegram-icon { flex-shrink: 0; color: var(--accent-2); }
.telegram-cta .tc-label { flex: 1; }
.telegram-cta .tc-sub { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }

.telegram-cta-wrap { margin: 18px 0 30px; }

/* ---------- Join Discord CTA — same banner treatment as Telegram, shown right after it ---------- */
.discord-cta-wrap { margin: 0 0 30px; }
.discord-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(88,101,242,0.28), rgba(155,92,255,0.14));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 30px -18px rgba(88,101,242,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.discord-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 34px -16px rgba(88,101,242,0.6); }
.discord-cta .discord-icon { flex-shrink: 0; color: #5865f2; }
.discord-cta .tc-label { flex: 1; }

/* ---------- Screenshots gallery ---------- */
.screenshot-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}
@media (min-width: 640px) { .screenshot-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .screenshot-gallery { grid-template-columns: repeat(4, 1fr); } }
.screenshot-item {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  aspect-ratio: 16/9;
  padding: 0;
  background: #14141c;
  cursor: pointer;
}
.screenshot-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.screenshot-item:hover img { transform: scale(1.05); }
.shot-zoom {
  position: absolute; bottom: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(7,7,13,0.75);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.shot-zoom .icon { width: 1em; height: 1em; }

/* ---------- Cast (names only, single-line slider) ---------- */
.cast-name-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 4px 0 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  padding-bottom: 6px;
}
.cast-name-row::-webkit-scrollbar { height: 6px; }
.cast-name-row::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 999px; }
.cast-name-row::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.cast-name-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(155,92,255,0.14), rgba(79,227,193,0.08));
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.cast-name-chip:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(155,92,255,0.5); }

.trailer-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.trailer-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Sits above the iframe and eats every pointer event — with controls
   disabled on the embed itself this keeps the trailer to picture-only,
   no YouTube logo/title flashing in on hover or tap. */
.trailer-embed .te-shield { position: absolute; inset: 0; background: transparent; cursor: default; }

/* ---------- Trailer button (opens popup) ---------- */
.trailer-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 10px;
  margin: 20px 0;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, transform .15s;
}
.trailer-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.trailer-thumb { position: relative; width: 110px; flex-shrink: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; }
.trailer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.trailer-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,7,13,0.45);
  color: #fff;
}
.trailer-play .icon { width: 1.6em; height: 1.6em; }
.trailer-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; color: var(--text); }

/* ---------- Popup / modal (trailer + screenshot lightbox) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4,4,8,0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 780px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 18px 18px 0 0;
  padding: 16px;
  transform: translateY(24px);
  transition: transform .25s ease;
  box-shadow: 0 -10px 50px -10px rgba(0,0,0,0.6);
}
@media (min-width: 640px) {
  .modal-box { border-radius: var(--radius); transform: translateY(10px); }
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
  position: absolute;
  top: -14px; right: 4px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }

/* Trailer popup back button — sits above the video frame (never on top of
   it) so it's always visible and never blocks the trailer itself. */
.modal-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.modal-back-btn .icon { width: 18px; height: 18px; }
.modal-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.modal-video .trailer-embed { margin: 0; }
.modal-image { padding: 10px; }
.modal-image img { border-radius: 12px; width: 100%; max-height: 80vh; object-fit: contain; }

/* ---------- Season / episode accordion ---------- */
.season-accordion, .link-group-accordion { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.season-item, .link-group-item {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.season-item summary, .link-group-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.season-item summary::-webkit-details-marker,
.link-group-item summary::-webkit-details-marker { display: none; }
.link-group-name { text-transform: uppercase; }
.link-group-item[open] > summary .chevron { transform: rotate(180deg); }
.link-group-body { padding: 4px 16px 18px; border-top: 1px solid var(--card-border); }
.link-group-body .watch-links { margin-top: 14px; }
.season-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.chevron { color: var(--text-dim); transition: transform .2s ease; display: flex; }
.season-item[open] > summary .chevron,
.episode-item-row[open] > summary .chevron { transform: rotate(180deg); }
.season-body { padding: 0 16px 18px; border-top: 1px solid var(--card-border); }
.season-watch-links { padding-top: 14px; }
.watch-links-label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  width: 100%;
}
.watch-links-label::before { content: "//"; color: var(--accent); }

.episode-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.episode-item-row {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.episode-item-row summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.episode-item-row summary::-webkit-details-marker { display: none; }
.episode-item-row .episode-still {
  width: 96px; height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #14141c;
}
.episode-still-wrap { position: relative; flex-shrink: 0; width: 96px; height: 56px; border-radius: 8px; overflow: hidden; }
.episode-still-wrap .episode-still { width: 100%; height: 100%; }
.episode-play-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.28); color: #fff;
}
.episode-play-icon .icon { width: 20px; height: 20px; fill: rgba(255,255,255,0.92); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.episode-summary-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.episode-item-row .episode-heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.episode-item-row .ep-num { font-family: var(--font-mono); color: var(--accent-2); font-size: 0.78rem; }
.episode-item-row .ep-title { font-weight: 600; font-size: 0.9rem; white-space: normal; overflow-wrap: break-word; flex: 1 1 auto; min-width: 0; }
.episode-item-row .episode-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); }
.episode-body { padding: 0 14px 16px; border-top: 1px solid var(--card-border); }
.episode-overview { font-size: 0.82rem; color: var(--text-dim); margin: 10px 0 0; line-height: 1.5; }
.episode-links { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.episode-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 11px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(155,92,255,0.28), rgba(79,227,193,0.16));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 22px -16px rgba(155,92,255,0.5);
  transition: border-color .2s, box-shadow .2s;
}
.episode-link-btn[style*="--btn-color"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 30%, transparent), color-mix(in srgb, var(--btn-color) 16%, transparent));
  border-color: color-mix(in srgb, var(--btn-color) 45%, transparent);
}
.episode-link-btn .arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--btn-color, var(--accent-2)); }
.episode-link-btn:hover { border-color: var(--btn-color, var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 26px -16px var(--accent-glow); }
.episode-link-btn .icon { width: 1em; height: 1em; flex-shrink: 0; color: var(--btn-color, var(--accent-2)); }
@media (max-width: 420px) {
  .episode-item-row summary { flex-wrap: wrap; }
  .episode-item-row .episode-still { width: 100%; height: auto; aspect-ratio: 16/9; }
  .episode-still-wrap { width: 100%; height: auto; aspect-ratio: 16/9; }
}

/* ---------- Empty / no results ---------- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--card-border);
  margin-top: 20px;
  padding: 30px 0 40px;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

.footer-desc { max-width: 560px; margin: 0 auto; line-height: 1.6; }
.footer-desc a { color: var(--accent-2); }

.footer-links { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.footer-links-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; }
.footer-links-row a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.footer-links-row a:hover,
.footer-links-row a:focus-visible { color: var(--accent-2); }
.footer-links-row a:not(:last-child)::after {
  content: '\276F';
  display: inline-block;
  margin-left: 10px;
  color: var(--card-border);
  font-size: 0.8em;
  transform: scaleY(1.3);
}

.footer-copyright {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--card-border);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.footer-copyright a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.footer-copyright a:hover, .footer-copyright a:focus-visible { text-decoration: underline; }

.footer-powered {
  margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.82rem; color: var(--text-dim);
}
.footer-tmdb-badge {
  padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--accent-2); background: rgba(79,227,193,0.08); border: 1px solid rgba(79,227,193,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- Mobile nav ---------- */
@media (max-width: 760px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .main-nav {
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    background: rgba(7,7,13,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--card-border);
    padding: 18px 20px 26px;
    gap: 16px;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: none;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* ---------- Buttons (shared with admin) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #6b2fd6);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: 0 0 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.82rem; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 30px 0; font-family: var(--font-mono); }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 14px 8px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
}
.pagination a:hover { border-color: var(--accent); color: var(--text); }
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination .dots { border: none; color: var(--text-dim); min-width: auto; padding: 14px 2px; }
.pagination .next, .pagination .prev { font-weight: 700; }

/* ---------- Toast notification ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  background: rgba(15,15,22,0.92);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 11px 18px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(15,15,22,0.85);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
  z-index: 55;
}
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { border-color: var(--accent); color: var(--accent-2); }
.back-to-top .icon.flip-up { transform: rotate(180deg); width: 1.2em; height: 1.2em; }

/* ---------- Ad slots (site-wide placements managed from Admin → Ads) ---------- */
.ad-slot {
  position: relative;
  margin: 20px 0;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.ad-slot::before {
  content: "Advertisement";
  position: absolute;
  top: 6px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.6;
}
.ad-slot > * { max-width: 100%; }
.ad-banner-big { min-height: 100px; }
.ad-banner-small { min-height: 60px; }
.ad-footer-slot { margin: 20px 0 4px; }

.ad-smartlink-slot { padding: 0; border: none; background: none; }
.ad-smartlink-slot::before { display: none; }
.ad-smartlink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(79,227,193,0.22), rgba(155,92,255,0.16));
  border: 1px solid rgba(79,227,193,0.4);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 22px -16px rgba(79,227,193,0.5);
}
.ad-smartlink:hover { border-color: var(--accent-2); }
.ad-smartlink-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ==========================================================================
   MovieHub v2 -- Premium redesign additions
   ========================================================================== */

body.has-bottom-nav { padding-bottom: 70px; padding-top: calc(64px + env(safe-area-inset-top)); }
/* Flat "link row" bottom nav — every item (including the brand mark) sits
   inline in the same bar, nothing floats above the top edge. */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: stretch; justify-content: space-around;
  background: rgba(9,9,15,0.9);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--card-border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px -14px rgba(0,0,0,0.6);
}
.bottom-nav .bn-item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-dim); font-size: 0.64rem; font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0.01em; background: none; border: none; cursor: pointer; padding: 6px 2px;
  border-radius: 12px; text-decoration: none;
  transition: color .2s, background .2s;
}
.bottom-nav .bn-item svg { width: 21px; height: 21px; stroke: currentColor; }
.bottom-nav .bn-item.active { color: var(--accent-2); background: rgba(79,227,193,0.08); }
.bottom-nav .bn-item:active { transform: scale(0.94); }
/* Brand item now reads as a plain link like its siblings — same height,
   same alignment, no raised bubble sticking up above the bar. */
/* Brand item is a circle again (like the original), but it now sits inline
   within the bar's own height instead of floating up above the top edge. */
.bottom-nav .bn-brand { flex: 0 0 auto; justify-content: center; }
.bn-brand-circle {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #6b2fd6 60%, var(--accent-2));
  color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 1rem;
  box-shadow: 0 6px 16px -6px var(--accent-glow);
  border: 1px solid rgba(255,255,255,0.35);
}
/* Admin-uploaded logo (Admin Panel → Settings → Branding) replaces the
   default "V" mark. It reuses the same circle so alignment in the bar
   never shifts; the image itself is cropped to fill it. Three sizes are
   selectable in the admin panel, each still comfortably inside the
   bottom nav's ~64px tall row so nothing clips or overlaps its neighbors. */
.bn-brand-logo {
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.bn-brand-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bn-brand-logo.bn-logo-sm { width: 32px; height: 32px; }
.bn-brand-logo.bn-logo-md { width: 40px; height: 40px; }
.bn-brand-logo.bn-logo-lg { width: 48px; height: 48px; margin-top: -3px; }
@media (min-width: 900px) { .bottom-nav { display: none; } body.has-bottom-nav { padding-bottom: 0; } }

.setting-sheet { align-items: flex-end; }
.setting-sheet-box {
  width: 100%; max-width: 520px; margin: 0 auto;
  background: var(--bg-alt); border: 1px solid var(--card-border); border-bottom: none;
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.setting-sheet.open .setting-sheet-box { transform: translateY(0); }
.setting-sheet-handle { width: 40px; height: 4px; border-radius: 3px; background: var(--card-border); margin: 6px auto 14px; }
.setting-sheet h3 { font-family: var(--font-display); margin: 0 0 12px; font-size: 1rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.setting-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 6px; border-bottom: 1px solid rgba(255,255,255,0.06);
  background: none; border-left: none; border-right: none; border-top: none;
  color: var(--text); font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
.setting-row:last-child { border-bottom: none; }
.setting-row .sr-icon { color: var(--accent-2); display: inline-flex; }
.setting-row .sr-icon .icon { width: 18px; height: 18px; }
.setting-row .sr-count { margin-left: auto; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.8rem; }

.ott-strip {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 24px; scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.ott-strip::-webkit-scrollbar { display: none; }
.ott-item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 70px;
  text-decoration: none; color: inherit; scroll-snap-align: start;
  transition: transform .25s cubic-bezier(.25,1.4,.4,1);
}
.ott-item:active { transform: scale(0.94); }
/* Premium glass tile: soft outer glow, inner top sheen and a thin gradient
   ring instead of a flat single-colour border. */
.ott-badge {
  position: relative;
  width: 64px; height: 64px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; color: #fff;
  text-align: center; line-height: 1.1;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 26px -12px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -10px 16px -12px rgba(0,0,0,0.5);
  overflow: hidden;
  isolation: isolate;
}
.ott-badge::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 45%);
  pointer-events: none;
  z-index: 1;
}
.ott-badge::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, rgba(255,255,255,0.5), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.22));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ott-item:hover .ott-badge, .ott-item:active .ott-badge { box-shadow: 0 16px 32px -12px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px rgba(255,255,255,0.1); }
.ott-badge.new { background: linear-gradient(135deg,#ff5fa2,#8a4bff); font-size: 0.6rem; letter-spacing: 0.06em; }
.ott-badge.netflix { background: linear-gradient(155deg,#1a1a1a,#000); color: #e50914; font-size: 1.7rem; border-color: rgba(229,9,20,0.35); }
.ott-badge.prime { background: linear-gradient(155deg,#00c3ff,#0f5fc4); font-size: 0.58rem; text-transform: lowercase; letter-spacing: 0.02em; }
.ott-badge.disney { background: linear-gradient(155deg,#16255c,#0a1230); font-size: 0.7rem; letter-spacing: -0.02em; }
.ott-badge.hotstar { background: linear-gradient(155deg,#132552,#0a1230); color: #29d67e; font-size: 0.56rem; }
.ott-badge.apple { background: linear-gradient(155deg,#4a4a4a,#0b0b0b); font-size: 0.82rem; }
.ott-badge.more { background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.22); color: var(--accent-2); box-shadow: none; }
.ott-badge.more::before, .ott-badge.more::after { display: none; }
.ott-badge.more .icon { width: 20px; height: 20px; z-index: 1; }
.ott-label { font-size: 0.68rem; color: var(--text-dim); text-align: center; font-weight: 500; letter-spacing: 0.01em; }




/* ==========================================================================
   Press-and-hold preview popup — long-press any poster on the home page to
   see a quick-look card (backdrop, title, meta, blurb, Details + My List)
   with a smooth scale/fade transition. Mobile-first sizing.
   ========================================================================== */
.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
.preview-overlay.open { opacity: 1; pointer-events: auto; }
/* .preview-card is positioned by JS (top/left, anchored to the pressed
   card's own row) so it opens right next to where the user is looking,
   never centered on the whole screen / dropped down near the page bottom. */
.preview-card {
  position: fixed;
  width: 280px;
  max-width: calc(100vw - 24px);
  background: #14141c;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: 0 30px 70px -16px rgba(0,0,0,0.9);
  transform: scale(0.78);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(.25,1.4,.4,1), opacity 0.22s ease;
  transform-origin: var(--pv-origin-x, 50%) var(--pv-origin-y, 50%);
}
.preview-overlay.open .preview-card { transform: scale(1); opacity: 1; }
.preview-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s, transform .15s;
}
.preview-close:active { transform: scale(0.9); }
.preview-close .icon { width: 16px; height: 16px; }
.preview-backdrop { width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.preview-backdrop img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.14); opacity: 0;
  transition: transform 0.7s cubic-bezier(.16,.8,.24,1), opacity 0.45s ease;
}
.preview-overlay.open .preview-backdrop img { transform: scale(1); opacity: 1; }
.preview-body { padding: 14px 16px 18px; }
.preview-title {
  font-family: var(--font-display); font-size: 1.04rem; margin: 0 0 8px; line-height: 1.25;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s;
}
.preview-meta-row {
  display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-dim); margin-bottom: 10px; flex-wrap: wrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s;
}
.preview-meta-row .pmr-pill { border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.preview-overview {
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease 0.16s, transform 0.35s ease 0.16s;
}
.preview-actions {
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease 0.2s, transform 0.35s ease 0.2s;
}
.preview-overlay.open .preview-title,
.preview-overlay.open .preview-meta-row,
.preview-overlay.open .preview-overview,
.preview-overlay.open .preview-actions { opacity: 1; transform: translateY(0); }
.preview-details-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent-2); color: #04211c; font-weight: 700; padding: 11px; border-radius: 8px;
  font-size: 0.86rem; text-decoration: none; transition: transform .15s, filter .2s;
}
.preview-details-btn:active { transform: scale(0.96); }
.preview-details-btn .icon { width: 15px; height: 15px; }
.preview-add-btn {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--card-border); background: rgba(255,255,255,0.06); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s, border-color .2s, color .2s;
}
.preview-add-btn:active { transform: scale(0.9); }
.preview-add-btn.added { border-color: var(--accent-2); color: var(--accent-2); }
.preview-add-btn .icon { width: 18px; height: 18px; }
@media (min-width: 480px) { .preview-card { max-width: 320px; } }

.hero { position: relative; }
.hero-video-wrap { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero.video-active .hero-video-wrap { opacity: 1; }
.hero.video-active img.backdrop { opacity: 0; }
.hero img.backdrop { transition: opacity .6s ease; }
.hero-video-wrap iframe {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%);
}
.hero-mute-btn {
  position: absolute; top: 14px; right: 14px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(10,10,16,0.55); border: 1px solid rgba(255,255,255,0.35); color: #fff;
  backdrop-filter: blur(6px); cursor: pointer;
}
.hero-mute-btn svg { width: 16px; height: 16px; }
.hero-mute-btn:not([hidden]) { display: flex; }

.mylist-section[hidden], .mylist-grid[hidden] { display: none; }
.mylist-grid.has-items { display: grid !important; }
.mylist-section.has-items { display: flex !important; }
.mylist-empty-hint { color: var(--text-dim); font-size: 0.85rem; padding: 4px 2px 6px; }

.detail-action-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.watchlist-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 12px; border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.05); color: var(--text); font-family: var(--font-body);
  font-weight: 700; font-size: 0.92rem; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s; flex: 1 1 auto; white-space: nowrap;
}
.watchlist-btn .icon { width: 18px; height: 18px; }
.watchlist-btn.watch-now-btn {
  background: linear-gradient(135deg, var(--accent), #6b2fd6);
  border-color: rgba(255,255,255,0.3); color: #fff;
  box-shadow: 0 8px 24px -12px var(--accent-glow); flex: 1 1 160px;
}
.watchlist-btn.watch-now-btn .icon { fill: #fff; }
.watchlist-btn.mylist-toggle-btn { flex: 1 1 140px; }
.watchlist-btn.mylist-toggle-btn.added { border-color: var(--accent-2); color: var(--accent-2); background: rgba(79,227,193,0.1); }
.watchlist-btn.icon-only-btn { flex: 0 0 auto; padding: 13px 16px; }

.detail-tabs {
  display: flex; gap: 28px; border-bottom: 1px solid var(--card-border);
  margin: 30px 0 4px; overflow-x: auto; scrollbar-width: none;
}
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab {
  background: none; border: none; color: var(--text-dim); font-family: var(--font-mono);
  font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px 2px;
  cursor: pointer; position: relative; white-space: nowrap; transition: color .2s;
}
.detail-tab.active { color: #fff; }
.detail-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px;
}
.detail-tab-panel { display: none; padding-top: 6px; }
.detail-tab-panel.active { display: block; }

.episode-item-row summary { position: relative; }
.ep-watchlist-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.04); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: auto;
}
.ep-watchlist-btn .icon { width: 15px; height: 15px; }
.ep-watchlist-btn.added { color: var(--accent-2); border-color: var(--accent-2); background: rgba(79,227,193,0.1); }

.main-nav a.active { color: var(--accent-2); }

@media (max-width: 480px) {
  .ott-badge { width: 56px; height: 56px; font-size: 1.15rem; }
}

/* ---- Account avatar + auth pages ---- */
.avatar-btn { padding: 0; }
.avatar-circle {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0a0a10; font-weight: 700; font-size: 0.85rem;
  font-family: var(--font-display);
}
.avatar-circle-lg { width: 44px; height: 44px; font-size: 1.1rem; }
.setting-account-row { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; border-bottom: 1px solid var(--card-border); margin-bottom: 8px; }
.setting-account-name { font-weight: 600; font-size: 0.95rem; }
.setting-account-tag { font-size: 0.78rem; color: var(--text-dim); font-family: var(--font-mono); }
.setting-row-accent { color: var(--accent-2); }

.auth-wrap {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 16px;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(155,92,255,0.16), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(79,227,193,0.10), transparent 40%);
}
.auth-card {
  width: 100%; max-width: 400px; border-radius: 20px; padding: 32px 26px;
  position: relative; overflow: hidden;
  animation: authCardIn .5s cubic-bezier(.2,.9,.3,1);
}
.auth-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.8;
}
@keyframes authCardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.auth-brand { display: block; text-align: center; margin-bottom: 20px; font-family: var(--font-display); font-size: 1.4rem; }

/* Log In / Sign Up segmented switch at the top of the card */
.auth-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 12px;
}
.auth-tab {
  flex: 1; text-align: center; padding: 9px 10px; border-radius: 9px;
  font-size: 0.84rem; font-weight: 700; color: var(--text-dim);
  transition: background .2s, color .2s;
}
.auth-tab.active { background: linear-gradient(135deg, var(--accent), #6b2fd6); color: #fff; box-shadow: 0 0 16px var(--accent-glow); }

.auth-card h2 { margin: 0 0 6px; font-size: 1.2rem; }
.auth-sub { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 20px; line-height: 1.4; }
.auth-form .form-group { margin-bottom: 14px; }
.auth-form label { display: block; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.auth-form input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.03); color: var(--text); font-family: var(--font-body); font-size: 0.92rem;
}
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Password field with a show/hide toggle button */
.pw-field { position: relative; }
.pw-field input { padding-right: 44px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-dim); cursor: pointer; border-radius: 8px;
}
.pw-toggle:hover { color: var(--accent-2); background: rgba(255,255,255,0.06); }
.pw-toggle .icon { width: 17px; height: 17px; }

/* Register-only password strength meter */
.pw-strength { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); margin-top: 8px; overflow: hidden; }
.pw-strength-bar { height: 100%; width: 0%; border-radius: 999px; background: var(--danger); transition: width .25s ease, background .25s ease; }
.pw-strength-label { font-size: 0.72rem; color: var(--text-dim); margin-top: 5px; display: block; min-height: 1em; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-dim); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--card-border); }

.btn-outline { background: transparent; border: 1px solid var(--card-border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-2); }
.btn-guest {
  background: rgba(79,227,193,0.08); border: 1px solid rgba(79,227,193,0.35); color: var(--accent-2);
}
.btn-guest:hover { background: rgba(79,227,193,0.14); border-color: var(--accent-2); }

.auth-switch { text-align: center; font-size: 0.85rem; color: var(--text-dim); margin: 18px 0 0; }
.auth-switch a { color: var(--accent-2); font-weight: 600; }

/* ---------- First-visit welcome gate (welcome.php) ---------- */
.welcome-gate {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(155,92,255,0.20), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(79,227,193,0.14), transparent 42%);
}

/* Blurred poster-collage backdrop: real title art tiled behind the gate so
   it reads as "a streaming library" before the visitor even signs in. */
.welcome-bg { position: absolute; inset: 0; z-index: 0; }
.welcome-poster-grid {
  position: absolute; inset: -6% -6% -6% -6%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  filter: blur(2px) saturate(115%);
  transform: scale(1.06);
  animation: welcomeDrift 40s ease-in-out infinite alternate;
}
.welcome-poster { aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; opacity: 0.55; }
.welcome-poster img { width: 100%; height: 100%; object-fit: cover; }
.welcome-poster:nth-child(4n+1) { opacity: 0.32; }
.welcome-poster:nth-child(5n+2) { opacity: 0.42; }
@keyframes welcomeDrift { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } }
.welcome-bg-fade {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(7,7,13,0.55), rgba(7,7,13,0.92) 68%),
    linear-gradient(180deg, rgba(7,7,13,0.75), rgba(7,7,13,0.96) 85%);
}

.welcome-box {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}

/* Small floating strip of OTT-style badges above the card — ties the gate
   back to the homepage's OTT row and signals "this aggregates everything". */
.welcome-ott-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wg-ott { width: 40px; height: 40px; font-size: 0.9rem; animation: wgOttFloat 3.6s ease-in-out infinite; }
.ott-badge.prime.wg-ott { font-size: 0.42rem; }
.ott-badge.disney.wg-ott { font-size: 0.5rem; }
.ott-badge.hotstar.wg-ott { font-size: 0.4rem; }
.wg-ott:nth-child(1) { animation-delay: 0s; }
.wg-ott:nth-child(2) { animation-delay: .3s; }
.wg-ott:nth-child(3) { animation-delay: .6s; }
.wg-ott:nth-child(4) { animation-delay: .9s; }
.wg-ott:nth-child(5) { animation-delay: 1.2s; }
@keyframes wgOttFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* The actual premium "box" — glass panel with a gradient top-line and soft
   outer glow, so the gate content sits inside a clear card, not floating
   loose on the background like before. */
.welcome-card {
  width: 100%; text-align: center; padding: 36px 28px;
  border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--card-border);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 60px -20px rgba(0,0,0,0.75), 0 0 60px -18px var(--accent-glow);
  animation: authCardIn .55s cubic-bezier(.2,.9,.3,1);
}
.welcome-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.9;
}
.welcome-logo { font-family: var(--font-display); font-size: 2rem; margin-bottom: 22px; letter-spacing: 0.02em; }
.welcome-logo .accent { color: var(--accent); text-shadow: 0 0 16px var(--accent-glow); }
.welcome-card h1 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 10px; }
.welcome-sub { color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; margin: 0 0 30px; }
.welcome-actions { display: flex; flex-direction: column; gap: 12px; }
.welcome-actions .btn { padding: 14px 20px; font-size: 0.96rem; }
.welcome-guest-btn { margin-top: 6px; }
.welcome-tagline {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 22px 0 0; font-size: 0.74rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.welcome-tagline .icon { width: 13px; height: 13px; color: var(--accent-2); }
@media (max-width: 420px) {
  .welcome-card { padding: 30px 20px; }
  .wg-ott { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-poster-grid, .wg-ott { animation: none; }
}

/* ---- Continue Watching progress bar + remove (bin) button ---- */
.continue-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.15); }
.continue-progress span { display: block; height: 100%; background: var(--accent-2); }
.continue-card { position: relative; }
.continue-card-link { display: block; height: 100%; }
.continue-info-btn,
.continue-remove-btn {
  position: absolute; top: 6px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,16,0.72); color: var(--text-dim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.6);
  transition: background .2s, color .2s, transform .15s;
}
.continue-info-btn { left: 6px; }
.continue-remove-btn { right: 6px; }
.continue-info-btn .icon,
.continue-remove-btn .icon { width: 14px; height: 14px; }
.continue-info-btn:hover, .continue-info-btn:focus-visible { background: var(--accent-2); color: #fff; }
.continue-remove-btn:hover, .continue-remove-btn:focus-visible { background: #e5484d; color: #fff; }
.continue-info-btn:active, .continue-remove-btn:active { transform: scale(0.9); }
.continue-card.is-removing { opacity: 0; transform: scale(0.9); transition: opacity .25s, transform .25s; pointer-events: none; }

/* ---- Like button ---- */
.like-toggle-btn .icon { transition: fill .15s, color .15s; }
.like-toggle-btn.liked { border-color: var(--accent); color: var(--accent); }
.like-toggle-btn.liked .icon { fill: var(--accent); }
.like-count { font-family: var(--font-mono); font-size: 0.82rem; }

/* ---- Embedded video player (YouTube-style controls, VLC-compatible <video> source) ---- */
.player-section { margin: 18px 0 26px; }
.video-player {
  position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--card-border);
}
.video-player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.player-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  z-index: 2;
}
/* Author `display` rules beat the browser's default `[hidden]{display:none}`
   because both are normal-weight author-origin declarations and this one is
   declared later — so the big play button, native <video>, and embed
   <iframe> could all stay visibly stacked even after JS set .hidden = true.
   Force these closed explicitly (same fix already applied to .sr-season-menu). */
.player-overlay[hidden],
.video-player video[hidden],
.embed-frame[hidden],
.player-controls[hidden] { display: none !important; }
.player-overlay-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.player-big-play {
  position: relative; width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #6b2fd6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .18s ease;
}
.player-big-play::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px solid rgba(155,92,255,0.45); animation: playPulse 2.4s ease-out infinite; pointer-events: none;
}
.player-big-play:active { transform: scale(0.94); }
.player-big-play .icon { width: 32px; height: 32px; fill: #fff; margin-left: 4px; }
@keyframes playPulse {
  0% { transform: scale(1); opacity: 0.65; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (min-width: 640px) { .player-big-play { width: 100px; height: 100px; } .player-big-play .icon { width: 38px; height: 38px; } }
.player-hint { position: relative; color: var(--text-dim); font-size: 0.82rem; margin: 0; }
.player-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 6px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}
.player-seek {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.25); outline: none; margin: 0 0 6px; cursor: pointer;
}
.player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--accent-2); }
.player-seek::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--accent-2); border: none; }
.player-controls-row { display: flex; align-items: center; gap: 10px; }
.player-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; }
.player-btn .icon, .player-btn svg { width: 20px; height: 20px; }
.player-time { color: #eee; font-family: var(--font-mono); font-size: 0.72rem; white-space: nowrap; }
.player-speed { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; font-size: 0.72rem; padding: 3px 4px; }
.player-spacer { flex: 1; }
.player-source-label { text-align: center; font-size: 0.78rem; color: var(--text-dim); margin: 8px 0 0; }
.video-player:fullscreen video,
.video-player:-webkit-full-screen video { object-fit: contain; }
.watch-link-btn.playing, .episode-link-btn.playing { border-color: var(--accent-2); color: var(--accent-2); }

/* ==========================================================================
   Horizontal scroll rows — Continue Watching / My List / Movies / Series / Anime
   ========================================================================== */
.scroll-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 22px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row .scroll-card,
.scroll-row .movie-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .scroll-row .scroll-card, .scroll-row .movie-card { width: 175px; } }
@media (min-width: 900px) { .scroll-row .scroll-card, .scroll-row .movie-card { width: 195px; } }

/* ==========================================================================
   Home page poster rows — Netflix-style: small posters only, no title/meta
   caption underneath, sitting almost edge-to-edge for a tight "touching"
   feel, with a smooth scale-up on tap instead of the glass card chrome.
   ========================================================================== */
.poster-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.poster-row::-webkit-scrollbar { display: none; }
.poster-row .movie-card {
  flex: 0 0 auto;
  width: 122px;
  scroll-snap-align: start;
  border-radius: 10px;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: transform .3s cubic-bezier(.25,1.4,.4,1);
}
.poster-row .movie-card .poster-wrap { border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(0,0,0,0.7); transition: box-shadow .3s ease; }
.poster-row .movie-card .poster-wrap img { transition: transform .45s ease; }
.poster-row .movie-card .info { display: none; }
@media (hover: hover) and (pointer: fine) {
  .poster-row .movie-card:hover { transform: translateY(-4px) scale(1.05); }
  .poster-row .movie-card:hover .poster-wrap { box-shadow: 0 16px 32px -12px var(--accent-glow); }
  .poster-row .movie-card:hover .poster-wrap img { transform: scale(1.07); }
}
.poster-row .movie-card:active { transform: scale(0.95); transition: transform .12s ease; }
@media (min-width: 480px) { .poster-row .movie-card { width: 136px; } }
@media (min-width: 640px) { .poster-row { gap: 9px; } .poster-row .movie-card { width: 152px; } }
@media (min-width: 900px) { .poster-row { gap: 10px; } .poster-row .movie-card { width: 172px; } }

/* ---------- "View More" trailing card — sits at the end of every slider
   so scrolling to the last poster always ends on a clear next step ---------- */
.view-more-card { flex-shrink: 0; }
.vmc-wrap {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 10px; height: 100%; width: 100%;
  background: linear-gradient(155deg, rgba(155,92,255,0.22), rgba(79,227,193,0.07) 75%), rgba(20,18,32,0.6);
  border: 1px solid rgba(155,92,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px -14px rgba(0,0,0,0.7);
}

/* Slow-turning conic "sunburst" filling the card behind the content so the
   tile reads as deliberately designed instead of an empty box with a
   pill floating in the middle of it. */
.vmc-rays {
  position: absolute; z-index: 0; top: 50%; left: 50%; width: 220%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(155,92,255,0.16) 0deg, transparent 18deg,
    transparent 40deg, rgba(79,227,193,0.14) 58deg,
    transparent 80deg, transparent 130deg,
    rgba(155,92,255,0.12) 148deg, transparent 166deg,
    transparent 220deg, rgba(79,227,193,0.1) 238deg,
    transparent 256deg, transparent 340deg, rgba(155,92,255,0.16) 358deg);
  animation: vmcRaysSpin 26s linear infinite;
}
@keyframes vmcRaysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.vmc-heading {
  position: relative; z-index: 1; max-width: 100%;
  font-family: var(--font-display); line-height: 1.22; font-size: 0.88rem;
  color: var(--text); text-shadow: 0 0 18px var(--accent-glow);
}

/* Spinning conic-gradient ring around the compass icon — a clear, continuous
   loading-style animation rather than a faint one-shot pulse. */
.vmc-icon-ring {
  position: relative; z-index: 1; flex: 0 0 auto; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.vmc-icon-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: vmcSpin 2.8s linear infinite;
  will-change: transform;
}
.vmc-icon-ring::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  box-shadow: 0 0 18px 1px var(--accent-glow);
  opacity: 0.7;
}
@keyframes vmcSpin { to { transform: rotate(360deg); } }
.vmc-icon {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #14121e;
  color: var(--accent-2);
  transition: background .25s, color .25s;
}
.vmc-icon .icon { width: 13px; height: 13px; animation: vmcCompass 3.6s ease-in-out infinite; }
@keyframes vmcCompass {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(16deg); }
}

/* Real pill-shaped button, not just text — matches the site's primary
   button gradient so it reads as unmistakably tappable. Sits inline next
   to the icon ring so the whole tile reads on one line. */
.vmc-btn {
  position: relative; z-index: 1; box-sizing: border-box; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #6b2fd6);
  color: #fff; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .2s, box-shadow .2s;
}
.vmc-btn .icon { width: 11px; height: 11px; flex: 0 0 auto; animation: vmcArrow 1.3s ease-in-out infinite; }
@keyframes vmcArrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
@media (hover: hover) and (pointer: fine) {
  .view-more-card:hover .vmc-wrap { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 32px -12px var(--accent-glow); }
  .view-more-card:hover .vmc-btn { transform: scale(1.06); box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3); }
}
.view-more-card:active .vmc-wrap { transform: scale(0.96); }
@media (min-width: 640px) {
  .vmc-wrap { gap: 20px; padding: 22px 16px; }
  .vmc-heading { font-size: 1.05rem; }
  .vmc-icon-ring { width: 46px; height: 46px; }
  .vmc-icon { width: 34px; height: 34px; }
  .vmc-icon .icon { width: 17px; height: 17px; }
  .vmc-btn { padding: 8px 14px; font-size: 0.74rem; }
  .vmc-btn .icon { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vmc-rays { animation: none; }
  .vmc-icon-ring::before, .vmc-icon .icon, .vmc-btn .icon { animation: none; }
}

/* ==========================================================================
   Watch page — dedicated Netflix-style streaming/player page
   ========================================================================== */
.watch-page { padding-top: 6px; padding-bottom: 40px; }

.watch-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.watch-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.watch-back-btn:hover { border-color: var(--accent); background: rgba(155,92,255,0.1); }
.watch-back-btn .icon { width: 16px; height: 16px; }
.watch-topbar-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.watch-topbar-title .wt-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-topbar-title .wt-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Previous/Next Episode — compact pill buttons, not full-width cards, so
   they sit comfortably on a small screen. Swap the player in place via
   the same .source-btn wiring the episode list and server grid use (see
   watch.js); a disabled state (first/last episode) is shown, not hidden. */
.episode-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.enr-count { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; }
.enr-btns { display: flex; gap: 8px; margin-left: auto; }
.episode-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 88px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.episode-nav-btn .icon { width: 15px; height: 15px; }
.episode-nav-btn:hover { border-color: var(--accent); background: rgba(155,92,255,0.1); }
.episode-nav-btn:active { transform: scale(0.96); }
.episode-nav-btn.disabled { color: var(--text-dim); border-color: var(--card-border); background: none; opacity: 0.5; cursor: default; pointer-events: none; }
@media (max-width: 360px) {
  .enr-count { display: none; }
  .enr-btns { margin-left: 0; width: 100%; }
  .episode-nav-btn { flex: 1; justify-content: center; }
}

.watch-player-section { margin: 0 0 18px; }
.watch-player-section .video-player {
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.7);
}

.watch-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.watch-action-row .watchlist-btn { flex: 1 1 160px; }
.watch-action-row .icon-only-btn { flex: 0 0 auto; }

.watch-source-block { margin-bottom: 30px; }

.season-select {
  width: auto;
  max-width: 220px;
  padding: 10px 34px 10px 16px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(155,92,255,0.14), rgba(79,227,193,0.08)), var(--card);
  border: 1px solid rgba(155,92,255,0.35);
  color: var(--text);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px -14px rgba(155,92,255,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b5cff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), linear-gradient(145deg, rgba(155,92,255,0.14), rgba(79,227,193,0.08));
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, 0 0;
  background-size: 14px, cover;
  transition: border-color .2s, box-shadow .2s;
}
.season-select:hover, .season-select:focus { border-color: var(--accent-2); }

.watch-episode-list { display: flex; flex-direction: column; gap: 12px; }
.watch-episode-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--card);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 20px -14px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.watch-episode-row:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(155,92,255,0.4); }
.watch-episode-row:active { transform: translateY(0) scale(0.99); }
.watch-episode-row.active {
  border-color: var(--accent-2);
  background: linear-gradient(145deg, rgba(79,227,193,0.16), rgba(79,227,193,0.04));
  box-shadow: 0 12px 28px -14px rgba(79,227,193,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.we-still-wrap { position: relative; flex-shrink: 0; width: 122px; height: 70px; border-radius: 11px; overflow: hidden; background: #14141c; border: 1px solid rgba(255,255,255,0.08); }
.we-still-wrap .we-still { width: 100%; height: 100%; object-fit: cover; }
.we-play-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.32);
  transition: background .2s;
}
.watch-episode-row:hover .we-play-icon { background: rgba(0,0,0,0.15); }
.we-play-icon .icon { width: 22px; height: 22px; fill: rgba(255,255,255,0.95); stroke: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7)); }
.we-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.we-heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.we-num {
  font-family: var(--font-mono); color: #fff; font-size: 0.7rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); padding: 2px 7px; border-radius: 6px;
}
.we-title { font-weight: 600; font-size: 0.92rem; }
.we-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.we-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
.we-meta.no-source { color: var(--danger); }
.we-quality-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: #1a1420;
  background: linear-gradient(135deg, #ffd166, #ffb020);
  padding: 2px 7px; border-radius: 6px;
  box-shadow: 0 3px 8px -4px rgba(255,176,32,0.6);
}
.we-quality-badge .icon { width: 10px; height: 10px; stroke: #1a1420; }

.watch-source-grid { display: flex; flex-direction: column; gap: 12px; }
.watch-source-btn {
  --btn-color: #ffd100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 40%, #1a1420), color-mix(in srgb, var(--btn-color) 20%, #120e18));
  border: 1px solid color-mix(in srgb, var(--btn-color) 65%, transparent);
  color: #fff;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.watch-source-btn:hover { transform: translateY(-1px); border-color: var(--btn-color); }
.watch-source-btn.active { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2) inset; }
.wsb-group { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.wsb-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.wsb-name .icon { width: 16px; height: 16px; }

@media (min-width: 720px) {
  .watch-source-grid { flex-direction: row; flex-wrap: wrap; }
  .watch-source-btn { flex: 1 1 220px; }
}

/* ==========================================================================
   Full-bleed provider-style detail hero (movie.php / series.php redesign)
   ========================================================================== */
.full-bleed {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
}
@media (max-width: 480px) {
  .full-bleed { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
}

/* ==========================================================================
   Netflix-reference series detail redesign (series.php) — a boxed, rounded
   banner (not full-bleed), title BELOW the banner, match%/year/age/season/
   quality meta pills, a solid white Play button, label:value cast/genre
   lines, a 3-icon action row, and a numbered episode list with the
   duration aligned to the top-right of each row.
   ========================================================================== */
.nf-hero-frame { padding: 0; }
.nf-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.nf-hero-media img.sr-hero-backdrop { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.nf-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.nf-hero-topbar {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.nf-close-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.85));
}
.nf-close-btn .icon { width: 24px; height: 24px; }

.nf-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 5.8vw, 2.05rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 6px 0 6px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.nf-tagline { font-style: italic; color: var(--accent-2); font-size: 0.85rem; margin: 0 0 10px; }

.nf-lang-row { display: flex; flex-wrap: wrap; gap: 14px; margin: -8px 0 16px; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }

.nf-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.86rem;
}
.nf-match { color: #46d369; font-weight: 700; }
.nf-meta-plain { color: var(--text); }
.nf-meta-pill {
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.nf-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 11px 20px;
  border-radius: 9px;
  border: none;
  background: #fff;
  color: #0a0a0a;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.94rem;
  margin-bottom: 18px;
  cursor: pointer;
  text-decoration: none;
}
.nf-play-btn .icon { width: 19px; height: 19px; fill: #0a0a0a; color: #0a0a0a; }
.nf-play-btn:active { transform: scale(0.98); }

.nf-overview { line-height: 1.65; color: var(--text); margin: 0 0 20px; font-size: 0.9rem; overflow-wrap: anywhere; }

.nf-info-lines { margin-bottom: 6px; }
.nf-info-lines p { margin: 0 0 8px; font-size: 0.84rem; line-height: 1.55; }
.nf-info-label { color: var(--text-dim); margin-right: 6px; font-weight: 600; }
.nf-info-value { color: var(--text); }

.nf-action-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 14px 0 14px;
}
.nf-action-btn {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.nf-action-btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
.nf-action-btn.added, .nf-action-btn.liked { color: var(--accent-2); border-color: var(--accent-2); background: rgba(79,227,193,0.08); }

.sr-comments-sep { margin: 0 8px; color: var(--card-border); }

.nf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.nf-section-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--text); }

.nf-season-picker { position: relative; }
.nf-season-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.nf-season-btn:hover { border-color: rgba(79,227,193,0.5); }
.nf-season-btn[aria-expanded="true"] {
  border-color: var(--accent-2);
  background: rgba(79,227,193,0.08);
  color: var(--accent-2);
}
.nf-season-btn .icon { width: 13px; height: 13px; color: var(--text-dim); transition: transform .2s; }
.nf-season-btn[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--accent-2); }
.nf-season-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: #171320;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  z-index: 6;
  padding: 6px;
  box-shadow: 0 20px 44px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.nf-season-menu[hidden] { display: none !important; }

.nf-episode-list { display: flex; flex-direction: column; margin-bottom: 24px; }
.nf-episode-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--card-border);
  text-decoration: none;
}
.nf-episode-row:last-child { border-bottom: none; }
.nf-ep-number {
  flex: 0 0 18px;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dim);
}
.nf-ep-thumb {
  position: relative;
  flex: 0 0 118px;
  width: 118px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.nf-ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nf-ep-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  color: #fff;
}
.nf-ep-play .icon { width: 20px; height: 20px; }
.nf-ep-info { flex: 1; min-width: 0; padding-top: 2px; }
.nf-ep-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.nf-ep-title { font-weight: 700; font-size: 0.96rem; color: var(--text); overflow-wrap: anywhere; }
.nf-ep-duration { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); }
.nf-ep-desc { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 480px) {
  .nf-play-btn { padding: 11px 18px; font-size: 0.92rem; }
  .nf-action-btn { font-size: 0.7rem; padding: 9px 6px; }
  .nf-action-btn .icon { width: 15px; height: 15px; }
  .nf-meta-row { font-size: 0.82rem; }
  .nf-ep-thumb { flex-basis: 128px; width: 128px; }
}

.mh-hero, .sr-hero {
  position: relative;
  margin: 0 0 0;
  overflow: hidden;
  background: #000;
}
.mh-hero-media, .sr-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.sr-hero-media { aspect-ratio: 16 / 10; }
.mh-hero-media img.mh-hero-backdrop,
.sr-hero-media img.sr-hero-backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.mh-hero-fade, .sr-hero-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 26%, rgba(0,0,0,0.25) 55%, rgba(7,7,13,0.96) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.35), transparent 40%);
  pointer-events: none;
}
.mh-hero-topbar, .sr-hero-topbar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.mh-circle-btn, .sr-circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,8,16,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
}
.mh-circle-btn .icon, .sr-circle-btn .icon { width: 18px; height: 18px; }

.sr-trailer-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,8,16,0.5);
  border: 2px solid rgba(255,255,255,0.85);
  color: #fff;
  z-index: 3;
}
.sr-trailer-play .icon { width: 24px; height: 24px; margin-left: 3px; }
.sr-new-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e5121a, #a90a10);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(229,18,26,0.7);
}
.sr-new-badge .icon { width: 15px; height: 15px; }

.mh-hero-titleblock, .sr-hero-titleblock {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
}
.mh-hero-title, .sr-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  line-height: 1.05;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.8), 0 0 30px var(--accent-glow);
  overflow-wrap: anywhere;
}
.mh-hero-tagline, .sr-hero-tagline {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent-2);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  margin: 0;
}

.mh-body, .sr-body { padding-top: 6px; }

/* Provider / source strip, mirrors an OTT app's "playing on ..." row */
.mh-provider-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.mh-provider-row .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-2);
  color: #05231b;
}
.mh-provider-row .check .icon { width: 11px; height: 11px; }
.mh-provider-row b { color: var(--text); font-weight: 600; }
.sr-quality-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid var(--text-dim);
  border-radius: 3px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Big primary action button (Watch Now / Play) */
.mh-primary-btn, .sr-primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  background: linear-gradient(135deg, var(--accent), #6b2fd6);
  color: #fff;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
  margin-bottom: 12px;
  cursor: pointer;
}
.mh-primary-btn .icon, .sr-primary-btn .icon { width: 20px; height: 20px; fill: #fff; }

.sr-comments-link-row { text-align: center; margin: 0 0 16px; }
.sr-comments-link-row a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.sr-comments-link-row a .icon { width: 16px; height: 16px; }
.sr-comments-link-row a:hover { color: var(--text); }

/* Row of small pill action buttons (Trailer / Watchlist / Like / Share) */
.mh-pill-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.mh-pill-row::-webkit-scrollbar { display: none; }
.mh-pill-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  padding: 9px 8px 7px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.mh-pill-btn .icon { width: 18px; height: 18px; }
.mh-pill-btn.added, .mh-pill-btn.liked { color: var(--accent-2); border-color: var(--accent-2); background: rgba(79,227,193,0.08); }
.mh-pill-btn.trailer-open-btn { color: #ff4b52; border-color: #e5121a; background: rgba(229,18,26,0.08); }

.sr-icon-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin: 4px 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
.sr-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
}
.sr-icon-btn .icon { width: 21px; height: 21px; }
.sr-icon-btn.added, .sr-icon-btn.liked { color: var(--accent-2); }

.mh-lang-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.mh-lang-row::-webkit-scrollbar { display: none; }
.mh-lang-row span { flex: 0 0 auto; padding-bottom: 6px; }

/* Release / Duration style stat block */
.mh-stat-row {
  display: flex;
  margin: 4px 0 22px;
  border-top: 1px solid var(--card-border);
  padding-top: 16px;
}
.mh-stat-col { flex: 1; }
.mh-stat-col + .mh-stat-col { border-left: 1px solid var(--card-border); padding-left: 16px; margin-left: 16px; }
.mh-stat-label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 4px; }
.mh-stat-value { font-weight: 700; font-size: 1rem; color: var(--text); }

/* Season dropdown chip (series episodes tab) */
.sr-season-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 16px;
  cursor: pointer;
}
.sr-season-select .icon { width: 15px; height: 15px; color: var(--accent-2); }

/* Season summary reuses the sr-season-select chip styling for the label +
   chevron, but drops its own border/background since it now sits inside
   the already-bordered .season-item card header. */
.season-item summary .sr-season-select {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
}
.season-item summary .sr-season-select .icon { color: var(--accent-2); }

/* ==========================================================================
   Series episodes — season dropdown + flat episode list w/ descriptions
   ========================================================================== */
.sr-season-picker { position: relative; margin-bottom: 16px; z-index: 5; }
.sr-season-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: rgba(155,92,255,0.1);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(155,92,255,0.15) inset;
}
.sr-season-btn .icon { width: 15px; height: 15px; color: var(--accent-2); transition: transform .2s; }
.sr-season-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.sr-season-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: #17141f;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sr-season-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.sr-season-option:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.sr-season-option.active { color: var(--accent-2); background: rgba(79,227,193,0.08); }
/* The menu previously stayed open on load / never fully closed because this
   component's own `display: flex` was beating the browser's `[hidden]`
   default in the cascade. Force it closed whenever the hidden attribute is
   present so the JS open/close toggle actually works. */
.sr-season-menu[hidden] { display: none !important; }

.sr-episode-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.sr-episode-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--card-border);
}
.sr-episode-row:last-child { border-bottom: none; }
.sr-ep-thumb {
  position: relative;
  flex: 0 0 128px;
  width: 128px;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #14141c;
}
.sr-ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-ep-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
  color: #fff;
}
.sr-ep-play .icon { width: 22px; height: 22px; }
.sr-ep-info { flex: 1; min-width: 0; }
.sr-ep-title { display: block; font-weight: 700; font-size: 0.94rem; color: var(--text); margin-bottom: 3px; overflow-wrap: anywhere; }
.sr-ep-meta { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); margin-bottom: 5px; }
.sr-ep-desc { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-ep-nosource { font-size: 0.74rem; color: var(--danger); }
.sr-episode-row .ep-watchlist-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text-dim);
  cursor: pointer;
}
.sr-episode-row .ep-watchlist-btn .icon { width: 14px; height: 14px; }
.sr-episode-row .ep-watchlist-btn.added { color: var(--accent-2); border-color: var(--accent-2); }

@media (max-width: 420px) {
  .sr-ep-thumb { flex-basis: 104px; width: 104px; }
  .sr-ep-title { font-size: 0.88rem; }
}

/* ==========================================================================
   Watch page redesign — action row, embed player, server grid, tips
   ========================================================================== */
.wp-action-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0 6px;
}
.wp-action-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-height: 38px;
  white-space: nowrap;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)), var(--card);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -12px rgba(0,0,0,0.6);
  transition: border-color .2s, transform .15s, color .2s, background .2s;
}
.wp-action-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-action-btn:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.wp-action-btn:active { transform: scale(0.96); }
.wp-action-btn .icon { width: 14px; height: 14px; flex-shrink: 0; }
.wp-action-btn.like-toggle-btn.liked { color: var(--danger); border-color: var(--danger); background: rgba(255,92,122,0.14); }
.wp-action-btn.mylist-toggle-btn.added { color: var(--accent-2); border-color: var(--accent-2); background: rgba(79,227,193,0.14); }
.wp-action-btn.share-btn {
  width: 100%;
  height: 100%;
  min-height: 38px;
  flex-shrink: 1;
  margin-top: 0;
}
.wp-download-btn {
  text-decoration: none;
}

/* Embed iframe fills the same 16:9 box the <video> tag already used. */
.embed-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.server-select {
  width: 100%;
  max-width: 240px;
  padding: 10px 34px 10px 14px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(155,92,255,0.14), rgba(79,227,193,0.08)), var(--card);
  border: 1px solid rgba(155,92,255,0.35);
  color: var(--text);
  font-weight: 700;
  font-size: 0.84rem;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px -14px rgba(155,92,255,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b5cff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.server-select:hover, .server-select:focus { border-color: var(--accent-2); }
.server-select:active { transform: scale(0.99); }
/* The movie "Select Server" picker is the only control now (no boxes below
   it), so it gets the full row width and a slightly bigger, more premium
   treatment than a plain compact quick-jump dropdown. */
.server-select-full {
  max-width: 100%;
  padding: 15px 42px 15px 18px;
  border-radius: 12px;
  font-size: 0.94rem;
  margin-bottom: 4px;
  background-size: 16px;
  background-position: right 16px center;
}

/* ==========================================================================
   Server picker — equal-size animated button grid (replaces the old
   native <select> dropdown on the movie watch page).
   ========================================================================== */
@keyframes serverBtnIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes serverBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 55%, transparent), 0 12px 28px -14px rgba(79,227,193,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-2) 0%, transparent), 0 12px 28px -14px rgba(79,227,193,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
}
@keyframes serverStatusDotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.server-group-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 4px 0 -4px;
}
.server-group-label:first-child { margin-top: 0; }

.server-btn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
@media (min-width: 560px) {
  .server-btn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .server-btn-grid { grid-template-columns: repeat(3, 1fr); }
}

.server-btn {
  --btn-color: #9b5cff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 74px;
  padding: 13px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--btn-color) 16%, var(--card)), color-mix(in srgb, var(--btn-color) 6%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--btn-color) 40%, var(--card-border));
  box-shadow: 0 8px 20px -14px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  animation: serverBtnIn 0.45s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: border-color .22s ease, transform .18s ease, box-shadow .22s ease, background .22s ease;
}
.server-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--btn-color) 22%, transparent) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.server-btn:hover::before { transform: translateX(120%); }
.server-btn:hover {
  transform: translateY(-3px);
  border-color: var(--btn-color);
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--btn-color) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
}
.server-btn:active { transform: translateY(-1px) scale(0.98); }
.server-btn:focus-visible { outline: 2px solid var(--btn-color); outline-offset: 2px; }

.server-btn.active {
  border-color: var(--accent-2);
  background: linear-gradient(145deg, rgba(79,227,193,0.18), rgba(79,227,193,0.05));
  animation: serverBtnIn 0.45s cubic-bezier(.2,.8,.2,1) forwards, serverBtnPulse 2.6s ease-in-out 0.5s infinite;
}

.server-btn-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--btn-color), color-mix(in srgb, var(--btn-color) 60%, #000));
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--btn-color) 70%, transparent);
}
.server-btn-icon .icon { width: 17px; height: 17px; fill: #fff; stroke: none; }
.server-btn.active .server-btn-icon { background: linear-gradient(135deg, var(--accent-2), #2fae8f); }

.server-btn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.server-btn-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-btn-brand-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
.server-btn-tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

.server-btn-status {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.server-btn.active .server-btn-status {
  color: #06231c;
  background: var(--accent-2);
  border-color: var(--accent-2);
  position: relative;
}
.server-btn.active .server-btn-status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #06231c;
  margin-right: 5px;
  vertical-align: middle;
  animation: serverStatusDotBlink 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .server-btn, .server-btn::before, .server-btn.active { animation: none !important; transition: none !important; }
}

@media (max-width: 480px) {
  .server-btn { padding: 12px 14px; min-height: 68px; }
  .server-btn-icon { width: 36px; height: 36px; }
  .server-btn-name { font-size: 0.88rem; }
}

.wp-tips {
  margin: 8px 0 30px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  overflow: hidden;
}
.wp-tips summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.wp-tips summary::-webkit-details-marker { display: none; }
.wp-tips-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,227,193,0.12);
  color: var(--accent-2);
}
.wp-tips-icon .icon { width: 17px; height: 17px; }
.wp-tips-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wp-tips-title { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.wp-tips-sub { font-size: 0.76rem; color: var(--text-dim); }
.wp-tips[open] summary .chevron { transform: rotate(180deg); }
.wp-tips-body { padding: 0 16px 18px; border-top: 1px solid var(--card-border); padding-top: 14px; }
.wp-tips-body ul { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 0.86rem; line-height: 1.7; }
.wp-tips-body li { margin-bottom: 4px; }

/* ==========================================================================
   Mobile polish: wider posters, bigger/easier-to-tap action buttons
   (Netflix keeps its action-row icons and labels large even on small
   phones — never shrinks them below a comfortable tap target — so this
   block now scales UP the icon/pill/action buttons on narrow screens
   instead of cramming them smaller.)
   ========================================================================== */
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .movie-grid { gap: 12px; }
}

/* Premium card feel: soft lift + glow + gradient title scrim on hover/tap */
.movie-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.movie-card .poster-wrap {
  box-shadow: 0 10px 24px -14px rgba(0,0,0,0.7);
}
.movie-card:hover, .movie-card:active {
  box-shadow: 0 14px 30px -12px var(--accent-glow);
}

/* Netflix-parity action buttons: bigger icons + bigger labels on phones */
@media (max-width: 480px) {
  .mh-pill-btn { min-width: 70px; padding: 10px 8px 8px; font-size: 0.72rem; gap: 6px; }
  .mh-pill-btn .icon { width: 22px; height: 22px; }
  .wp-action-btn { padding: 8px 4px; font-size: 0.66rem; min-height: 36px; gap: 4px; }
  .wp-action-btn .icon { width: 13px; height: 13px; }
  .sr-icon-btn { font-size: 0.8rem; gap: 7px; }
  .sr-icon-btn .icon { width: 24px; height: 24px; }
  .sr-primary-btn, .mh-primary-btn { padding: 17px 20px; font-size: 1.08rem; }
}

/* Smallest phones (iPhone SE and similar) get the same sizing as above —
   never smaller — plus a touch more breathing room in the icon row. */
@media (max-width: 360px) {
  .sr-icon-row { gap: 4px; }
  .sr-icon-btn { font-size: 0.76rem; }
  .sr-icon-btn .icon { width: 23px; height: 23px; }
}

/* ==========================================================================
   Trailer popup (movie.php "Trailer" button) — plays inline in a centered
   modal instead of leaving the site
   ========================================================================== */
.modal-video .trailer-embed { background: #000; }
#trailerModal .modal-box { max-width: 900px; padding: 10px; }

/* ==========================================================================
   Watch page — inline "source not loading?" fallback so a blocked/slow
   third-party embed never leaves the visitor stuck on a blank frame
   ========================================================================== */
/* Netflix-style caption box shown right under the player: short synopsis,
   quality/IMDb/genre chips, and an audio-language line. */
.watch-info-box {
  margin-top: 14px;
  padding: 0;
  border: none;
  background: none;
}
.wib-overview {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.wib-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--text-dim);
}
.wib-tags .quality-badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; padding: 2px 8px;
  color: var(--text); font-weight: 700; font-size: 0.76rem;
}
.wib-tags .quality-badge .icon { width: 13px; height: 13px; }
.wib-tags .imdb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; border-radius: 0; overflow: visible; box-shadow: none; background: none;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.84rem;
}
.wib-tags .imdb-badge .imdb-logo { background: none; color: #f5c518; padding: 0; }
.wib-tags .imdb-badge .imdb-score { background: none; color: var(--text); border: none; padding: 0; }
.wib-tags .badge.genre,
.wib-tags .badge.genre:hover {
  border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; padding: 0; border-radius: 0; color: var(--text-dim); font-weight: 500;
  transform: none;
}
.wib-tags .badge.genre::before { content: '•'; margin-right: 10px; color: var(--accent); }
.wib-langs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
  font-size: 0.82rem;
}
.wib-langs-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-weight: 600; flex-shrink: 0; }
.wib-langs-label .icon { width: 15px; height: 15px; }
.wib-langs-list { color: var(--text); overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .wib-overview { font-size: 0.9rem; }
  .wib-langs { font-size: 0.88rem; }
}

/* Compact "Now playing" dropdown, sits right under the title where the old
   embed fallback notice used to be — quick server switching without
   scrolling down to the full source grid. */
.quick-server-switch {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 10px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(155,92,255,0.14), rgba(79,227,193,0.07)), var(--card);
  border: 1px solid rgba(155,92,255,0.35);
  box-shadow: 0 8px 20px -16px rgba(155,92,255,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
a.quick-server-switch.qss-empty { text-decoration: none; color: inherit; }
.quick-server-switch.qss-empty:hover { border-color: var(--accent); }
.qss-icon { flex-shrink: 0; display: flex; color: var(--accent); }
.qss-icon .icon { width: 17px; height: 17px; }

/* Visually hidden but still a real, focusable-by-nothing form control —
   kept in sync by watch.js so no-JS / progressive-enhancement paths and
   the rest of watch.js's existing change-listener logic keep working. */
.qss-select-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.qss-trigger, .quick-server-switch.qss-empty {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}
.qss-trigger-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.qss-now-label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qss-trigger-name {
  font-weight: 700;
  font-size: 0.94rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qss-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(155,92,255,0.14);
  color: var(--accent);
  transition: transform .22s ease, background .2s ease;
}
.qss-chevron .icon { width: 13px; height: 13px; }
.qss-trigger[aria-expanded="true"] .qss-chevron { transform: rotate(180deg); background: rgba(155,92,255,0.28); }

/* Floating option panel — full width of the trigger, options laid out
   side by side (2-up, wrapping to as many rows as needed) rather than a
   stacked list, in the same premium glass language as the full
   server-btn grid below (colored accent dot, embed/direct tag, active
   checkmark). */
.qss-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 15px;
  background: linear-gradient(165deg, rgba(28,24,42,0.96), rgba(14,13,22,0.96));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(155,92,255,0.35);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04) inset;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.qss-panel[hidden] { display: none; }
.qss-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.qss-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.qss-option:hover, .qss-option:focus-visible { background: rgba(255,255,255,0.06); border-color: var(--accent); outline: none; }
.qss-opt-dot {
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent-glow);
}
.qss-opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qss-opt-name { font-weight: 700; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qss-opt-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.qss-opt-check { flex-shrink: 0; display: none; color: var(--accent-2); }
.qss-opt-check .icon { width: 15px; height: 15px; }
.qss-option.active { border-color: rgba(79,227,193,0.4); background: rgba(79,227,193,0.08); }
.qss-option.active .qss-opt-dot { background: var(--accent-2); box-shadow: 0 0 10px 1px rgba(79,227,193,0.5); }
.qss-option.active .qss-opt-check { display: flex; }
@media (max-width: 340px) {
  .qss-panel { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .qss-panel, .qss-chevron { transition: none !important; }
}

/* Compact bar reuse of the sitewide Telegram CTA, sitting at the bottom
   of the watch page (after More Like This) rather than up near the
   player caption. */
.watch-telegram-bar { margin: 6px 0 26px; }

/* ==========================================================================
   Account / Settings dashboard (account.php)
   ========================================================================== */
.acct-page { padding-bottom: 24px; }

.acct-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ff4d6d, #b0203f);
  box-shadow: 0 14px 34px -16px rgba(255, 77, 109, 0.55);
  margin: 18px 0 14px;
}
.acct-avatar {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
}
.acct-hero-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.acct-hero-email { font-size: 0.82rem; color: rgba(255,255,255,0.85); margin-top: 2px; }

.acct-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.acct-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  text-align: center;
}
.acct-stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--danger); }
.acct-stat-label { font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }

.acct-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 22px 4px 8px;
}
.acct-box {
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.acct-panel { padding: 16px; }

.acct-row, .acct-row-static {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}
.acct-box > .acct-row:last-child, .acct-box > .acct-row-static:last-child, .acct-box > .acct-install-box:last-child { border-bottom: none; }
.acct-row:active, .acct-row:hover { background: rgba(255,255,255,0.03); }
.acct-row-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.acct-row-icon .icon { width: 17px; height: 17px; }
.acct-ic-red { background: rgba(255,92,122,0.16); color: var(--danger); }
.acct-ic-blue { background: rgba(90,150,255,0.16); color: #6fa0ff; }
.acct-ic-green { background: rgba(79,227,193,0.16); color: var(--accent-2); }
.acct-ic-amber { background: rgba(255,184,77,0.16); color: #ffb84d; }
.acct-ic-purple { background: rgba(155,92,255,0.16); color: var(--accent); }
.acct-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-row-title { font-weight: 600; font-size: 0.92rem; }
.acct-row-sub { font-size: 0.74rem; color: var(--text-dim); }
.acct-row-chevron { flex: 0 0 auto; color: var(--text-dim); transform: rotate(-90deg); }
.acct-row-chevron .icon { width: 18px; height: 18px; }
.acct-row-accent .acct-row-title { color: var(--danger); }
.acct-row-danger .acct-row-title { color: var(--danger); }

.acct-install-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 10px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
}
.acct-install-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 9px;
  border: none;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.acct-mylist-grid { margin: 0; }

.acct-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}
.acct-history-row:last-child { border-bottom: none; }
.acct-history-thumb { flex: 0 0 auto; width: 64px; height: 40px; border-radius: 8px; object-fit: cover; background: #14141c; }
.acct-history-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); margin: 6px 0 4px; overflow: hidden; }
.acct-history-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.acct-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
  cursor: pointer;
}
.acct-toggle-row:last-of-type { border-bottom: none; }
.acct-switch { flex: 0 0 auto; width: 42px; height: 24px; accent-color: var(--accent); }
.acct-select {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.acct-danger-btn {
  background: rgba(255,92,122,0.12);
  border: 1px solid rgba(255,92,122,0.4);
  color: var(--danger);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.acct-link-btn {
  background: rgba(79,227,193,0.12);
  border: 1px solid rgba(79,227,193,0.4);
  color: var(--accent-2);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  text-decoration: none;
}

.alert-ok { background: rgba(79,227,193,0.12); border: 1px solid var(--accent-2); color: var(--accent-2); padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 0.86rem; }

/* ==========================================================================
   Scroll-in reveal — poster/top10 cards fade + rise into place the first
   time they enter the viewport, with a tiny stagger per row (progressive
   enhancement only; see the IntersectionObserver in main.js).
   ========================================================================== */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal-in { animation: cardReveal 0.55s cubic-bezier(.22,1,.36,1) both; }

/* ==========================================================================
   Premium circular score ring on posters (replaces the flat rating pill) —
   green/amber/red ring filled proportionally to the score out of 10
   ========================================================================== */
.rating-ring {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(var(--ring-color, #4fe3c1) calc(var(--pct, 70) * 1%), rgba(255,255,255,0.16) 0);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.rating-ring-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #0a0a10;
  color: var(--ring-color, #4fe3c1);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.62rem;
}

/* ==========================================================================
   Section rows — left/right scroll-nav arrows next to "View All", and a
   true single-line auto-scroll on tap (no manual drag required)
   ========================================================================== */
.section-head { position: relative; }
.section-head-actions { display: flex; align-items: center; gap: 10px; }
.section-scroll-nav { display: flex; align-items: center; gap: 6px; }
.section-scroll-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  flex: 0 0 auto;
}
.section-scroll-btn:hover { border-color: var(--accent); color: var(--text); }
.section-scroll-btn .icon { width: 15px; height: 15px; }
.section-scroll-btn.next .icon { transform: rotate(-90deg); }
.section-scroll-btn.prev .icon { transform: rotate(90deg); }

.scroll-row {
  scroll-behavior: smooth;
  flex-wrap: nowrap;
}

/* ==========================================================================
   Header v2 — minimal icon buttons + glass notification/account dropdowns
   ========================================================================== */
.header-actions { display: flex; align-items: center; gap: 4px; position: relative; z-index: 120; }
.hbtn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease;
}
.hbtn:hover, .hbtn:active { background: rgba(255,255,255,0.08); }
.hbtn .icon { width: 21px; height: 21px; }
.hbtn.avatar-btn { padding: 0; }
.hbtn.avatar-btn:hover, .hbtn.avatar-btn:active { background: transparent; }

/* Liquid-glass surface used by both dropdowns (and reusable elsewhere) */
/* Liquid-glass surface used by both header dropdowns — neutral gray tint
   instead of the purple-accented glass used elsewhere on the site. */
.glass-panel {
  background: linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 60%), rgba(40,40,46,0.82);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07);
  border-radius: 20px;
}

/* Anchored to the header bar itself (not a fixed pixel offset) so it always
   clears the icon row cleanly, on any device/notch, with no overlap. */
.site-header .bar { position: relative; }
.hdr-dropdown-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(5,5,10,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}
.hdr-dropdown-backdrop.open { opacity: 1; visibility: visible; }
.hdr-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(340px, 90vw);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  z-index: 110;
  padding: 16px;
  transform-origin: top right;
  transform: scale(0.94) translateY(-6px);
  opacity: 0;
  visibility: hidden;
  transition: transform .18s ease, opacity .18s ease, visibility .18s;
}
.hdr-dropdown.open { transform: scale(1) translateY(0); opacity: 1; visibility: visible; }

.hdr-dropdown-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hdr-dropdown-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.95rem; }
.hdr-dropdown-title .icon { width: 17px; height: 17px; color: var(--accent-2); }
.hdr-dropdown-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.06); color: var(--text-dim); cursor: pointer;
}
.hdr-dropdown-close .icon { width: 14px; height: 14px; }
.hdr-dropdown-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 10px 0; }

.notif-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,0.04); }
.notif-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.notif-ic .icon { width: 15px; height: 15px; }
.notif-ic-purple { background: rgba(155,92,255,0.18); color: var(--accent); }
.notif-ic-green  { background: rgba(79,227,193,0.18); color: var(--accent-2); }
.notif-ic-blue   { background: rgba(90,150,255,0.18); color: #6fa0ff; }
.notif-ic-amber  { background: rgba(255,184,77,0.18); color: #ffb84d; }
.notif-item-title { font-weight: 700; font-size: 0.86rem; margin-bottom: 2px; }
.notif-item-body { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }
.notif-cta {
  display: inline-block; margin-top: 8px; padding: 7px 14px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), #6b2fd6); color: #fff;
  font-size: 0.78rem; font-weight: 700; text-decoration: none;
}
.notif-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 10px; }
.notif-empty .notif-ic { margin-bottom: 4px; }
.notif-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger, #ff4d5e); color: #fff;
  font-size: 0.62rem; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg, #0b0b12);
}

.acct-panel-dd-top { display: flex; align-items: center; gap: 12px; padding: 4px; }
.acct-panel-dd-info { min-width: 0; }
.acct-panel-dd-name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.98rem; }
.acct-panel-dd-tag { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); flex: 0 0 auto; }
.acct-dd-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 6px; border-radius: 12px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.acct-dd-row:hover, .acct-dd-row:active { background: rgba(255,255,255,0.06); }
.acct-dd-ic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.acct-dd-ic .icon { width: 15px; height: 15px; }

/* Default (no photo) avatar: neutral face on a solid circle, never a letter */
.avatar-default { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #5a7bff, #3f5ce0); color: #fff; }
.avatar-default .icon { width: 55%; height: 55%; }
.avatar-photo { object-fit: cover; }

@media (max-width: 480px) {
  .hdr-dropdown { right: 12px; width: min(300px, calc(100vw - 48px)); }
}

/* ==========================================================================
   Liquid-glass login / register cards
   ========================================================================== */
.auth-card {
  background: linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 65%), rgba(13,13,22,0.55);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.auth-form input {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   Account page: language picker + profile photo uploader
   ========================================================================== */
.acct-lang-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.acct-lang-row:last-child { border-bottom: none; }
.acct-lang-row.disabled { opacity: 0.5; }
.acct-lang-badge { font-size: 0.68rem; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--text-dim); }
.acct-lang-radio { accent-color: var(--accent); width: 18px; height: 18px; }

.acct-photo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.acct-photo-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card-border); }
.acct-photo-upload-btn {
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.05); color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer;
}