/* ============================================================
   catmovie — Leonardo DiCaprio actor profile page
   Dark cinematic RTL design system
   ============================================================ */

:root {
  color-scheme: dark;
  --body-bg: #090a0d;
  --shell: #0e0f14;
  --surface: #16171e;
  --surface-2: #1c1d26;
  --surface-dark: #0d0e12;
  --surface-darker: #090a0d;
  --text-primary: #f4f4f6;
  --text-secondary: #a2a3ad;
  --text-dim: #6f707b;
  --accent-red: #eb2b52;
  --accent-red-bright: #ff4069;
  --accent-red-dark: #a71838;
  --accent-cyan: #50c6d4;
  --accent-yellow: #f4bd42;
  --accent-green: #35c98f;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --radius: 10px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: var(--text-primary);
  background: var(--body-bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  direction: rtl;
  background: var(--body-bg);
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 4px; }

/* ---------- Shell ---------- */
.site-shell {
  width: min(100%, 1480px);
  margin: 0 auto;
  overflow-x: clip;
  background: var(--shell);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 0;
}

.site-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 33vh;
  z-index: -1;
  width: min(100%, 1480px);
  margin-inline: auto;
  /* Decorative tiled texture. The tile paints at 340 CSS px, so the 1x art
     (340px wide, ~70KB lossless WebP) covers standard displays and the 2x art
     (926px native, ~170KB) covers high-DPR ones; the original PNG stays as the
     fallback for browsers without image-set support. */
  background-image: url("/background.png");
  background-image: image-set(
    url("/background-1x.webp") type("image/webp") 1x,
    url("/background.webp") type("image/webp") 2x
  );
  background-size: 340px auto;
  background-repeat: repeat;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
html[data-theme="light"] .site-bg {
  opacity: 0.1;
  filter: invert(1);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  /* Flat header per reference: no dark bar, content floats on the page background */
  padding: 26px 0 4px;
  background: transparent;
  border-bottom: 0;
  position: relative;
  z-index: 20;
}
.header-inner {
  height: 33px;
  width: min(100% - 96px, 1360px);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  direction: rtl; /* RTL navigation: logo on the right, account actions on the left */
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-weight: 800;
  white-space: nowrap;
}
.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: contain;
  flex: none;
}
.main-nav { display: flex; align-self: stretch; align-items: center; gap: 26px; flex: 1; direction: rtl; }
.main-nav > a, .main-nav .nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}
.main-nav > a:hover, .main-nav > a.active,
.main-nav .nav-item:hover .nav-link, .main-nav .nav-item.active .nav-link { color: var(--text-primary); }
.main-nav > a.active::after, .main-nav .nav-item.active .nav-link::after {
  content: "";
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent-red);
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}

/* ---- Dropdown submenus (desktop) ---- */
.main-nav .nav-item { position: relative; height: 100%; }
.main-nav .nav-head { height: 100%; display: flex; align-items: center; gap: 4px; }
.nav-caret {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-caret svg { width: 10px; height: 10px; transition: transform 0.2s; }
.nav-item:hover .nav-caret svg, .nav-item.is-open .nav-caret svg { transform: rotate(180deg); }
.subnav {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 178px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 30;
}
.nav-item:hover .subnav, .nav-item.is-open .subnav, .nav-item:focus-within .subnav {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.subnav a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.subnav a:hover { background: rgba(235, 43, 82, 0.14); color: #fff; }
.subnav-title {
  display: block;
  margin: 8px 10px 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}
.subnav-cats {
  max-height: 330px;
  overflow-y: auto;
  min-width: 230px;
}
.subnav-cats a {
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 6px 12px;
  font-size: 11.5px;
}
.subnav-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subnav-cat-count {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
}
.subnav-cats a:hover .subnav-cat-count { color: #fff; }
.header-tools { display: flex; align-items: center; gap: 12px; direction: rtl; }
.search-box {
  width: 300px;
  height: 30px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-dim);
  background: var(--surface);
  direction: rtl;
  flex: none;
}
.search-box svg { width: 15px; flex: none; }
.search-box input {
  width: 100%;
  outline: none;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: 11.5px;
}
.search-box input::placeholder { color: var(--text-dim); }

/* Inlay hint: a dimmed span behind the input shows the Meilisearch
   completion; the input's own text covers the typed prefix. The wrapper
   (.search-inlay) is position:relative, the hint sits under the input. */
.search-inlay { position: relative; }
.search-inlay .search-inlay-input { position: relative; z-index: 1; }
.search-inlay-hint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: inherit;
  color: var(--text-dim);
  opacity: 0.45;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  direction: rtl;
  text-align: right;
}
/* ---- Notification bell (actor-follow + release announcements) ----
   Always visible: auth.js only decides whether the panel lists the user's
   entries or asks them to sign in. */
.notif { position: relative; display: block; flex: none; }
.notif-btn {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--surface);
  transition: color 0.2s, border-color 0.2s;
}
.notif-btn:hover, .notif.is-open .notif-btn { color: var(--text-primary); border-color: var(--accent-red); }
.notif-btn svg { width: 15px; height: 15px; }
.notif-badge {
  position: absolute;
  top: -6px;
  left: -6px; /* RTL: the outer corner of the button */
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--shell);
}
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  /* The bell sits at the left end of the header (next to the theme toggle),
     so the panel opens inwards, towards the page. */
  left: 0;
  width: min(340px, calc(100vw - 32px));
  max-height: min(430px, 70vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 40;
}
.notif-panel[hidden] { display: none; }
.notif-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}
.notif-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.notif-item:hover { background: rgba(235, 43, 82, 0.12); }
.notif-thumb {
  flex: none;
  width: 38px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}
.notif-thumb img { width: 100%; height: 100%; object-fit: cover; }
.notif-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-title {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-fa {
  color: var(--text-secondary);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-dim);
  font-size: 10.5px;
}
.notif-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-label.is-person { color: var(--accent-cyan); }
.notif-when { flex: none; }
.notif-kind {
  flex: none;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 9.5px;
  font-weight: 600;
}
.notif-empty {
  margin: 0;
  padding: 18px 16px 20px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.9;
  text-align: center;
}
.notif-empty a { color: var(--accent-red); font-weight: 600; }

.login-btn {
  height: 33px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--accent-red);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s;
}
.login-btn:hover { background: var(--accent-red-bright); }
.register-btn {
  height: 33px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(223, 33, 68, 0.8);
  border-radius: 4px;
  color: #f16a87;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: 0.2s;
}
.register-btn:hover { color: #fff; background: rgba(223, 33, 68, 0.15); }
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: #bbbcc4;
  padding: 5px;
}
.menu-toggle span { display: block; width: 19px; height: 2px; background: currentColor; border-radius: 3px; margin: 4px 0; }

/* ============================================================
   PROFILE HERO
   ============================================================ */
.profile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #101116;
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: transparent;
  filter: saturate(0.55) brightness(0.75) contrast(1.06);
  transform: scale(1.04);
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 10, 13, 0.97) 0%, rgba(9, 10, 13, 0.9) 40%, rgba(9, 10, 13, 0.66) 72%, rgba(9, 10, 13, 0.55) 100%),
    linear-gradient(0deg, #0e0f14 0%, rgba(9, 10, 13, 0) 30%, rgba(9, 10, 13, 0.28) 100%),
    /* matte edges — the backdrop dissolves into the page in the theme color */
    linear-gradient(180deg, #090a0d 0%, rgba(9, 10, 13, 0) 16%),
    linear-gradient(270deg, #0e0f14 0%, rgba(9, 10, 13, 0) 14%),
    linear-gradient(90deg, #0e0f14 0%, rgba(9, 10, 13, 0) 14%);
}
.hero-rail {
  position: absolute;
  top: 30px;
  left: max(22px, calc((100% - 1360px) / 2));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bookmark-button {
  position: absolute;
  top: 30px;
  left: max(22px, calc((100% - 1360px) / 2));
  z-index: 2;
}
.hero-rail .bookmark-button {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
}
.bookmark-button,
.rail-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 43, 82, 0.8);
  border-radius: 50%;
  color: var(--accent-red);
  background: rgba(10, 11, 15, 0.72);
  transition: 0.2s;
}
.rail-btn { position: relative; }
.bookmark-button svg,
.rail-btn svg { width: 19px; height: 19px; }
.bookmark-button:hover,
.bookmark-button.is-saved,
.rail-btn:hover,
.rail-btn.is-selected { color: #fff; background: var(--accent-red); border-color: var(--accent-red); }
.follow-btn {
  border-color: rgba(220, 178, 66, 0.75);
  color: #e8c766;
}
.follow-btn:hover,
.follow-btn.is-selected {
  color: #1b1b1f;
  background: #e8c766;
  border-color: #e8c766;
}
.rail-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  direction: ltr;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-red);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.follow-btn .rail-count { background: #b8860b; }
.rail-btn .rail-count { font-size: 10px; }

.hero-content {
  width: min(100% - 96px, 1360px);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 46px 0 44px;
}

/* ---- Portrait ---- */
.poster-column { flex: 0 0 268px; width: 268px; }
.poster-card {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 2px solid var(--accent-red);
  border-radius: 14px;
  overflow: hidden;
  background: #101116;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.82) contrast(1.06);
}
.poster-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 5, 8, 0.55) 0%, rgba(5, 5, 8, 0) 40%);
}

/* ---- Hero copy ---- */
.hero-copy { flex: 1; min-width: 0; text-align: center; }
#profile-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.4px;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- Profile stats ---- */
.profile-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 24px auto 22px;
}
.profile-stat {
  min-width: 104px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.profile-stat:first-child { padding-right: 0; }
.profile-stat:last-child { border-left: 0; padding-left: 0; }
.stat-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(235, 43, 82, 0.12);
}
.stat-icon svg { width: 16px; height: 16px; }
.stat-icon.is-yellow { color: var(--accent-yellow); background: rgba(244, 189, 66, 0.12); }
.stat-icon.is-red { color: var(--accent-red-bright); }
.stat-icon.is-cyan { color: var(--accent-cyan); background: rgba(80, 198, 212, 0.12); }
.stat-icon.is-green { color: var(--accent-green); background: rgba(53, 201, 143, 0.12); }
.stat-value { font-size: 19px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.stat-value small { font-size: 10.5px; font-weight: 500; color: var(--text-dim); margin-right: 2px; }
.stat-value.is-yellow { color: var(--accent-yellow); }
.stat-value.is-red { color: var(--accent-red-bright); }
.stat-label { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; }

/* ---- Biography ---- */
.profile-bio {
  max-width: 720px;
  margin: 0 auto 24px;
  color: #c3c4cc;
  font-size: 12.5px;
  line-height: 2.1;
  text-align: justify;
}

/* ---- Actions ---- */
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn-primary, .hero-actions .btn-icon { height: 40px; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  border: 1px solid var(--accent-red);
  border-radius: 8px;
  color: #fff;
  background: var(--accent-red);
  font-size: 12.5px;
  font-weight: 700;
  transition: 0.2s;
}
.btn-primary:hover { background: var(--accent-red-bright); border-color: var(--accent-red-bright); }
.btn-primary svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.btn-icon {
  width: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 43, 82, 0.55);
  border-radius: 8px;
  color: #d96a84;
  background: rgba(13, 14, 18, 0.6);
  transition: 0.2s;
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon:hover { color: #fff; border-color: var(--accent-red); background: rgba(235, 43, 82, 0.22); }
.btn-icon.is-selected { color: var(--accent-red-bright); background: rgba(235, 43, 82, 0.18); border-color: var(--accent-red); }

/* ============================================================
   CONTENT AREA / SECTIONS
   ============================================================ */
.content-area { width: min(100% - 96px, 1360px); margin: 0 auto; }
.movies-section, .people-section { padding-top: 46px; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 20px; }
.section-title-block h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
}
.section-kicker {
  display: block;
  color: var(--accent-red);
  font-size: 10.5px;
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}
.carousel-controls { display: flex; direction: ltr; gap: 8px; }
.carousel-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #32333d;
  border-radius: 50%;
  color: var(--accent-cyan);
  background: #17181f;
  transition: 0.2s;
}
.carousel-button:hover { color: #06212a; border-color: var(--accent-cyan); background: var(--accent-cyan); }
.carousel-button svg { width: 16px; height: 16px; }

/* ============================================================
   MOVIE CAROUSEL
   ============================================================ */
.movies-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 1px 6px;
}
.movies-track::-webkit-scrollbar { display: none; }
.movie-card {
  position: relative;
  flex: 0 0 calc((100% - 64px) / 5);
  scroll-snap-align: start;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  text-align: center;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.movie-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 43, 82, 0.55);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.movie-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, #23242e, #14151b);
}
.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 0.35s;
}
.movie-card:hover .movie-poster img { transform: scale(1.05); }
.movie-quality {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  color: #fff;
  background: rgba(15, 16, 21, 0.76);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  direction: ltr;
}
.movie-type {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  background: rgba(235, 43, 82, 0.86);
  font-size: 9px;
  font-weight: 700;
}
.movie-meta {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 10px 9px;
  display: flex;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(transparent, rgba(8, 9, 12, 0.88));
}
.movie-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #e6e6eb;
  direction: ltr;
  unicode-bidi: isolate;
}
.movie-meta svg { width: 12px; height: 12px; }
.movie-meta .movie-rating { color: var(--accent-yellow); }
.movie-meta .movie-duration { color: #cdcede; }
.movie-info { padding: 11px 8px 9px; }
.movie-genre {
  margin: 5px 0 0;
  overflow: hidden;
  color: #858691;
  font-size: 9.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.movie-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   PEOPLE CAROUSEL
   ============================================================ */
.people-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 1px 6px;
}
.people-track::-webkit-scrollbar { display: none; }
.person-card {
  flex: 0 0 calc((100% - 64px) / 5);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.person-card:hover {
  transform: translateY(-4px);
  border-color: rgba(80, 198, 212, 0.5);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.person-photo {
  height: 202px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #23242e, #14151b);
}
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(0.8) contrast(1.05);
  transition: transform 0.35s;
}
.person-card:hover .person-photo img { transform: scale(1.05); }
.person-info { padding: 12px 8px 14px; }
.person-name {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: #eeeef2;
  direction: ltr;
  unicode-bidi: isolate;
}
.person-role { margin: 0; font-size: 10.5px; color: var(--text-secondary); }

/* ---- View all ---- */
.view-all-btn {
  width: fit-content;
  margin: 24px auto 0;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(80, 198, 212, 0.6);
  border-radius: 7px;
  color: var(--accent-cyan);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  transition: 0.2s;
}
.view-all-btn:hover { color: #06212a; background: var(--accent-cyan); }
.view-all-btn svg { width: 13px; height: 13px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  margin-top: 54px;
  overflow: hidden;
  background: var(--surface-darker);
  border-top: 1px solid var(--border);
}
.banner-art {
  position: absolute;
  bottom: 16px;
  left: -16px;
  width: 64%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 1200 / 609;
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
  transform: rotate(-3deg) scaleX(-1);
}
.footer-inner {
  width: min(100% - 96px, 1360px);
  margin: auto;
  padding: 48px 0 34px;
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.3fr;
  gap: 44px;
  position: relative;
  z-index: 1;
}
.footer-banner {
  padding: 28px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f52a55 0%, #c9163c 100%);
  box-shadow: 0 16px 38px rgba(235, 43, 82, 0.28);
  position: relative;
  overflow: hidden;
}
.footer-banner::before, .footer-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.footer-banner::before { width: 150px; height: 150px; top: -55px; left: -35px; }
.footer-banner::after { width: 90px; height: 90px; bottom: -30px; right: 18%; }
.banner-brand { display: flex; align-items: center; gap: 11px; position: relative; }
.banner-brand .brand-mark { width: 40px; height: 40px; background: rgba(0, 0, 0, 0.22); box-shadow: none; border-radius: 10px; }
.banner-brand .brand-mark svg { width: 22px; height: 22px; }
.banner-name { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
.banner-slogan { margin: 15px 0 8px; font-size: 15.5px; font-weight: 800; color: #fff; position: relative; }
.banner-desc { margin: 0; font-size: 11px; line-height: 2; color: rgba(255, 255, 255, 0.82); position: relative; max-width: 300px; }
.socials { display: flex; gap: 9px; margin-top: 18px; position: relative; }
.socials a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.14);
  transition: 0.2s;
}
.socials a:hover { background: #fff; color: var(--accent-red); border-color: #fff; }
.socials svg { width: 15px; height: 15px; }

.footer-col h3, .footer-contact h3 {
  margin: 4px 0 18px;
  color: #f0f0f3;
  font-size: 13px;
  font-weight: 800;
  padding-bottom: 9px;
  position: relative;
}
.footer-col h3::after, .footer-contact h3::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--accent-red);
}
.footer-col a {
  display: block;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 11.5px;
  transition: color 0.2s, padding 0.2s;
}
.footer-col a:hover { color: var(--accent-red-bright); padding-right: 4px; }
.footer-contact .contact-phone {
  display: block;
  color: var(--accent-red-bright);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.4px;
  direction: ltr;
  text-align: right;
}
.footer-contact .contact-hours { margin: 10px 0 14px; color: #7d7e88; font-size: 10.5px; line-height: 1.9; }
.footer-contact .contact-tg { color: var(--accent-cyan); font-size: 11.5px; direction: ltr; text-align: right; display: block; font-weight: 600; }
.footer-contact .contact-tg:hover { color: var(--accent-red-bright); }
/* Help links in the support column — the answers and guides the chat
   otherwise repeats one visitor at a time. Styled like the .footer-col
   links so the column reads as one list. */
.footer-contact .contact-link {
  display: block;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 11.5px;
  transition: color 0.2s, padding 0.2s;
}
.footer-contact .contact-link:hover { color: var(--accent-red-bright); padding-right: 4px; }

.footer-bottom {
  width: min(100% - 96px, 1360px);
  margin: 0 auto;
  padding: 16px 0 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #61626d;
  font-size: 10.5px;
  position: relative;
  z-index: 1;
}
.footer-bottom i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-red);
  margin: 0 3px;
  vertical-align: middle;
}

/* ---------- Image fallback ---------- */
img.img-failed { visibility: hidden; }
.poster-img.img-failed + .poster-shade { opacity: 0.4; }
.poster-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  color: #c7c8d0;
  background:
    radial-gradient(circle at 30% 20%, rgba(235, 43, 82, 0.28), transparent 34%),
    linear-gradient(145deg, #262832, #111218 72%);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.fc-bookmark.is-saved { color: #fff; filter: drop-shadow(0 0 8px rgba(235, 43, 82, 0.75)); }

.hero-slider {
  position: relative;
  isolation: isolate;
  height: clamp(400px, 44vw, 560px);
  min-height: 400px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #1c1e27, #101116 72%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}
.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- swiper-gl WebGL mode (desktop only, gated by SWIPER_GL_ENABLED) ----
   Swiper lays slides out horizontally with transforms, so the custom
   absolute/fade rules above must not interfere. Layering (bottom to top):
   1. GL canvas — paints the shader backdrop (z-index 0, below everything)
   2. .hero-slides — Swiper wrapper (z-index 1), contains the DOM backdrops
      which are hidden only once the canvas is confirmed painting
      (.gl-painted), the vignette and the copy.
   This way the effect is always UNDER the poster/title/copy, never over it. */
#featured.swiper-gl-mode .hero-slides {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#featured.swiper-gl-mode .hero-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
#featured.swiper-gl-mode .hero-backdrop img {
  transform: none;
  transition: none;
}
#featured.swiper-gl-mode canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Once the GL canvas is confirmed to actually paint, hide the DOM backdrops
   (they sit above the canvas in the slides layer) so the shader shows. */
#featured.swiper-gl-mode.gl-painted .hero-backdrop img {
  opacity: 0;
  pointer-events: none;
}
/* The dark gradient above the canvas keeps the copy readable; the copy stays
   above everything. */
#featured.swiper-gl-mode .hero-vignette {
  z-index: 2;
}
#featured.swiper-gl-mode .hero-copy {
  z-index: 3;
}
/* In GL mode the copy (title, meta, poster, CTA) is always visible — never
   gated on the .active class or the stagger animations, so the content can't
   be missing even if a transition state is missed (Firefox pauses
   transitions on off-screen elements, which used to leave the text stuck at
   partial opacity).
   IMPORTANT: only the children's stagger transforms are cleared; the copy
   container keeps its own translateY(-50%) vertical centering. */
#featured.swiper-gl-mode .hero-copy,
#featured.swiper-gl-mode .hero-copy * {
  opacity: 1 !important;
  transition: none !important;
}
#featured.swiper-gl-mode .hero-copy > *,
#featured.swiper-gl-mode .hero-copy .fc-stack > * {
  transform: none !important;
}
#featured.swiper-gl-mode .hero-slide.active .hero-backdrop img { transform: none; }

.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.06);
  transition: transform 0.9s ease-out;
}
.hero-slide.active .hero-backdrop img { transform: scale(1); }

.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 14, 18, 0.28) 0%, rgba(13, 14, 18, 0.5) 32%, rgba(13, 14, 18, 0.88) 64%, #101116 100%),
    linear-gradient(0deg, rgba(13, 14, 18, 0.9), transparent 36%, rgba(13, 14, 18, 0.3)),
    linear-gradient(180deg, rgba(13, 14, 18, 0.55), transparent 14%);
}

.hero-slider .hero-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  right: clamp(24px, 5vw, 84px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  max-width: min(80%, 900px);
  text-align: right;
}
.fc-poster {
  flex: none;
  width: clamp(150px, 17vw, 235px);
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #2a2d3a, #16171d);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}
.fc-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fc-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.hero-chip {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border: 1px solid rgba(235, 43, 82, 0.42);
  border-radius: 5px;
  color: #ff6684;
  background: rgba(235, 43, 82, 0.12);
  font-size: 10px;
  font-weight: 700;
}

.hero-slider .hero-copy > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.hero-slider .hero-slide.active .hero-copy > * {
  opacity: 1;
  transform: translateY(0);
}
.hero-slider .hero-copy .fc-stack > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.hero-slider .hero-slide.active .hero-copy .fc-stack > * {
  opacity: 1;
  transform: translateY(0);
}
.hero-slider .hero-slide.active .hero-copy > :nth-child(2) { transition-delay: 0.08s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(1) { transition-delay: 0.12s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(2) { transition-delay: 0.18s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(3) { transition-delay: 0.24s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(4) { transition-delay: 0.3s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(5) { transition-delay: 0.36s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(6) { transition-delay: 0.42s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(7) { transition-delay: 0.48s; }
.hero-slider .hero-slide.active .hero-copy .fc-stack > :nth-child(8) { transition-delay: 0.54s; }

.fc-title {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: #fff;
}
.fc-bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-red);
}
.fc-bookmark:hover { color: var(--accent-red-bright); }
.fc-bookmark svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.fc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #8c8c8c;
  font-size: 12px;
  font-weight: 500;
}
.fc-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8c8c8c;
}
.fc-genres { display: inline; }
.hero-link {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color 0.15s;
}
.hero-link:hover { color: #fff; }
.fc-desc {
  max-width: 340px;
  margin: 0 0 20px;
  color: #c9c9c9;
  font-size: 11.5px;
  line-height: 1.9;
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fc-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}
.fc-sub-icon { display: inline-flex; color: var(--accent-red); }
.fc-sub-icon svg { width: 15px; height: 15px; }
.fc-rating {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}
.fc-rating-star { display: inline-flex; color: var(--accent-yellow); }
.fc-rating-star svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.fc-rating-value {
  font-size: 22px;
  font-weight: 800;
  color: #ffd600;
  direction: ltr;
  unicode-bidi: isolate;
}
.fc-rating-label { font-size: 12px; font-weight: 600; color: #fff; }
.fc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 341px;
  max-width: 100%;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: var(--accent-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fc-cta:hover {
  background: var(--accent-red-bright);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(235, 43, 82, 0.35);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(10, 11, 15, 0.42);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0.85;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.hero-arrow:hover {
  background: rgba(10, 11, 15, 0.72);
  transform: translateY(-50%) scale(1.07);
  opacity: 1;
}
.hero-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-prev { right: 18px; }
.hero-next { left: 18px; }

.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  direction: rtl;
}
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  opacity: 0.85;
  transition: width 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.95); opacity: 1; }
.hero-dot.active {
  width: 26px;
  background: var(--accent-red);
  opacity: 1;
}

.hero-slider .hero-skeleton { position: absolute; inset: 0; }

/* ============================================================
   HOMEPAGE — SIMPLE SEARCH (dark bar, per reference)
   ============================================================ */
.search-section { padding-top: 58px; }
.page-search-block { margin: 28px 0 4px; }
.page-search {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}
.page-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-search-field:focus-within {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(235, 43, 82, 0.15);
}
.page-search-field svg { width: 17px; height: 17px; flex: none; }
.page-search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13.5px;
}
.page-search-field input::placeholder { color: var(--text-dim); }
.page-search-field.search-inlay .search-inlay-hint {
  right: 43px; /* 16px field padding + 17px icon + 10px gap */
  padding: 0;
}
.page-search > button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.page-search > button:hover {
  background: var(--accent-red-bright);
  transform: translateY(-1px);
}
.page-search-block .adv-search-section { margin-top: 2px; }
@media (max-width: 760px) {
  .page-search { flex-direction: column; }
  .page-search > button { width: 100%; }
}

/* ============================================================
   HOMEPAGE — ADVANCED SEARCH (title band + dense gray panel)
   ============================================================ */
.adv-search-section { padding-top: 104px; }
.adv-title-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
  padding: 0 22px;
  border-radius: 9px;
  background: #202020;
}
.adv-title-band h2 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.adv-band-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--accent-red);
  color: #fff;
}
.adv-band-icon svg { width: 17px; height: 17px; }

/* ---- Collapsible toggle ---- */
.adv-toggle {
  width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  background: #202020;
  transition: background 0.15s;
}
.adv-toggle:hover { background: #272727; }
.adv-toggle:active { background: #2c2c2c; }
.adv-band-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adv-chevron {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #ccc;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.15s;
}
.adv-chevron svg { width: 16px; height: 16px; }
.adv-toggle:hover .adv-chevron { background: rgba(255,255,255,0.14); }

/* Collapsed state */
.adv-collapsed .af-form-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  margin-top: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, margin-top 0.2s ease;
}
.adv-collapsed .adv-chevron { transform: rotate(0deg); }

/* Expanded state */
.adv-search-section:not(.adv-collapsed) .af-form-wrap {
  max-height: 1200px;
  opacity: 1;
  pointer-events: auto;
  margin-top: 10px;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease 0.05s, margin-top 0.2s ease;
}
.adv-search-section:not(.adv-collapsed) .adv-chevron { transform: rotate(180deg); }

/* Wrap container */
.af-form-wrap {
  border-radius: 9px;
}

/* ---- Filter form (reference: rows with tags, sliders, toggles, sort) ---- */
.af-form {
  margin-top: 10px;
  padding: 16px 18px 18px;
  border-radius: 9px;
  background: #1e1e1e;
}
.af-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.af-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.af-row--range { align-items: stretch; }
.af-row--toggles { justify-content: flex-end; }
.af-label {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: #d8d8d8;
  white-space: nowrap;
}
.af-control {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* ---- Multi-select box ---- */
.af-select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 4px 11px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 7px;
  background: #2a2a2a;
  color: #fff;
  font-size: 11.5px;
  text-align: right;
  cursor: pointer;
  transition: border-color 0.15s;
}
.af-select:hover, .af-select[aria-expanded="true"] { border-color: rgba(223, 33, 68, 0.6); }
.af-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.af-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(223, 33, 68, 0.55);
  border-radius: 5px;
  color: #f1879d;
  background: rgba(223, 33, 68, 0.08);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.af-tag-x {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent-red-bright);
  cursor: pointer;
  transition: 0.15s;
}
.af-tag-x:hover { background: rgba(223, 33, 68, 0.25); color: #fff; }
.af-tag-x svg { width: 10px; height: 10px; }
.af-all {
  flex: none;
  color: #8a8a8a;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.af-all:hover { color: #c9c9c9; }
.af-arrow {
  flex: none;
  width: 13px;
  height: 13px;
  color: #df2144;
}
.af-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #16171e;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 43, 82, 0.6) rgba(255, 255, 255, 0.06);
}
.af-option {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: #d6d7dd;
  font-size: 11.5px;
  text-align: right;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.af-option + .af-option { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.af-option:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.af-option[aria-selected="true"] {
  color: #f1879d;
  background: rgba(223, 33, 68, 0.1);
}

/* ---- Dual range sliders ---- */
.af-row--range .af-control { display: flex; flex-direction: column; gap: 7px; }
.af-range {
  position: relative;
  height: 22px;
  direction: ltr;
}
.af-range::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b388ff, #4fc3f7);
}
.af-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}
.af-range input::-webkit-slider-runnable-track { background: transparent; border: 0; }
.af-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ff5c8a;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.af-range input::-moz-range-track { background: transparent; border: 0; }
.af-range input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ff5c8a;
  cursor: pointer;
  pointer-events: auto;
}
.af-range .af-range-hi::-webkit-slider-thumb { background: #4fc3f7; }
.af-range .af-range-hi::-moz-range-thumb { background: #4fc3f7; }
.af-range-labels {
  display: flex;
  justify-content: space-between;
  direction: ltr;
  color: #a2a3ad;
  font-size: 10.5px;
  font-weight: 600;
}

/* ---- Toggles ---- */
.af-toggles {
  display: flex;
  align-items: center;
  gap: 22px;
}
.af-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.af-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.af-track {
  position: relative;
  flex: none;
  width: 42px;
  height: 23px;
  border-radius: 12px;
  background: #3a3a3a;
  transition: background 0.2s;
}
.af-thumb {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.af-toggle input:checked + .af-track { background: var(--accent-red); }
.af-toggle input:checked + .af-track .af-thumb { transform: translateX(-19px); }
.af-toggle-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #d8d8d8;
  white-space: nowrap;
}

/* ---- Sort ---- */
.af-sort {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  padding-left: 28px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 7px;
  outline: none;
  appearance: none;
  color: #fff;
  background: #2a2a2a url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23df2144' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center;
  font-size: 11.5px;
  cursor: pointer;
}
.af-sort:focus { border-color: rgba(223, 33, 68, 0.65); }

/* ---- Apply ---- */
.af-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.af-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 44px;
  border: 0;
  border-radius: 23px;
  background: var(--accent-cyan);
  color: #06212a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: 0.2s;
}
.af-apply:hover { background: #6fd6e2; }
.af-apply svg { width: 15px; height: 15px; }

/* ============================================================
   HOMEPAGE — FEATURED BANNERS BETWEEN SECTIONS
   ============================================================ */
.featured-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 54px;
  min-height: 400px;
  display: flex;
  align-items: center;
  background: #101116;
}
.banner-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #101116 center 22% / cover no-repeat;
  filter: saturate(0.55) brightness(0.7) contrast(1.06);
  transform: scale(1.04);
}
.featured-banner--dark .banner-backdrop {
  background-image: none;
}
.banner-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 10, 13, 0.96) 0%, rgba(9, 10, 13, 0.86) 45%, rgba(9, 10, 13, 0.55) 78%, rgba(9, 10, 13, 0.42) 100%),
    linear-gradient(0deg, #0e0f14 0%, rgba(9, 10, 13, 0) 40%),
    /* matte edges — banner image dissolves into the page in the theme color */
    linear-gradient(180deg, #090a0d 0%, rgba(9, 10, 13, 0) 16%),
    linear-gradient(270deg, #0e0f14 0%, rgba(9, 10, 13, 0) 14%),
    linear-gradient(90deg, #0e0f14 0%, rgba(9, 10, 13, 0) 14%);
}
.banner-copy {
  width: min(100% - 96px, 1360px);
  margin: auto;
  padding: 52px 0;
  position: relative;
  z-index: 1;
}
.banner-chip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(244, 189, 66, 0.5);
  border-radius: 6px;
  color: var(--accent-yellow);
  background: rgba(244, 189, 66, 0.1);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 14px;
}
.banner-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #fff;
  direction: ltr;
  unicode-bidi: isolate;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.banner-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.banner-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #cfd0d8;
}
.banner-meta svg { width: 14px; height: 14px; }
.banner-meta .banner-rating { color: var(--accent-yellow); font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.banner-meta .banner-duration { direction: ltr; unicode-bidi: isolate; }
.banner-meta .banner-genre { color: var(--accent-cyan); }
.banner-desc {
  max-width: 620px;
  margin: 0 0 24px;
  color: #c6c7cf;
  font-size: 13px;
  line-height: 2.05;
  text-align: right;
}
.banner-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banner-actions .btn-primary, .banner-actions .btn-outline { height: 42px; }

/* ============================================================
   HOMEPAGE — NEWSLETTER
   ============================================================ */
.newsletter {
  margin-top: 54px;
  padding: 40px 0;
  background: linear-gradient(135deg, #f52a55 0%, #c9163c 100%);
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  top: -120px;
  left: -80px;
}
.newsletter::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  bottom: -70px;
  right: 22%;
}
.newsletter-inner, .newsletter {
  width: min(100% - 96px, 1360px);
  margin-inline: auto;
}
.newsletter {
  display: flex;
  align-items: center;
  gap: 44px;
  width: auto;
}
.newsletter-copy { flex: 1.1; min-width: 0; position: relative; z-index: 1; }
.newsletter-copy h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
}
.newsletter-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 2.05;
  max-width: 520px;
}
.newsletter-form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.nl-field {
  flex: 1 1 150px;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.85);
}
.nl-field:focus-within { border-color: #fff; }
.nl-icon { display: grid; place-items: center; flex: none; }
.nl-icon svg { width: 15px; height: 15px; }
.nl-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 12px;
}
.nl-field input::placeholder { color: rgba(255, 255, 255, 0.6); }
.newsletter-form > button {
  flex: none;
  height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 9px;
  color: var(--accent-red);
  background: #fff;
  font-size: 12.5px;
  font-weight: 800;
  transition: 0.2s;
  white-space: nowrap;
}
.newsletter-form > button:hover { background: #ffe9ee; }

/* ---- Homepage: dark cinematic page like the actor/profile theme ---- */
body.page-home .movies-section { padding-top: 30px; }
body.page-home #media { padding-bottom: 0; }
body.page-home #top-area { padding-bottom: 70px; }

/* ---- Homepage responsive ---- */
@media (max-width: 1120px) {
  .banner-copy { width: min(100% - 48px, 900px); }
  .newsletter { gap: 28px; }
}
@media (max-width: 960px) {
}
@media (max-width: 760px) {
  .hero-slider { border-radius: 12px; height: 440px; min-height: 440px; }
  .hero-backdrop img { object-position: center 18%; }
  .hero-vignette {
    background:
      linear-gradient(180deg, rgba(13, 14, 18, 0.42), #101116 74%),
      linear-gradient(90deg, rgba(13, 14, 18, 0.5), rgba(13, 14, 18, 0.72));
  }
  .hero-slider .hero-copy {
    top: auto;
    bottom: 54px;
    transform: none;
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: none;
  }
  .fc-poster { display: none; }
  .fc-title { font-size: 22px; margin-bottom: 12px; }
  .fc-desc { max-width: 100%; -webkit-line-clamp: 2; margin-bottom: 14px; }
  .fc-cta { width: 100%; max-width: 280px; }
  .fc-bookmark { display: none; }
  .fc-sub { display: none; }
  .fc-meta { margin-bottom: 10px; }
  .fc-rating { margin-bottom: 14px; }
  .hero-chip { font-size: 9px; margin-bottom: 10px; }
  .hero-arrow { width: 38px; height: 38px; }
  .hero-prev { right: 12px; }
  .hero-next { left: 12px; }
  .hero-dots { bottom: 14px; }
  .search-section { padding-top: 42px; }
  .adv-search-section { padding-top: 60px; }
  .af-grid { grid-template-columns: 1fr; }
  .af-form { padding: 14px 14px 18px; }
  .af-row { gap: 12px; }
  .af-apply { width: 100%; max-width: 340px; }
  .featured-banner { min-height: 360px; }
  .hero-chip { margin-bottom: 10px; }
  .banner-copy { width: calc(100% - 36px); padding: 40px 0; }
  .newsletter { flex-direction: column; align-items: stretch; gap: 22px; width: auto; margin: 54px 18px 0; border-radius: 14px; padding: 30px 22px; }
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form > button { justify-content: center; }
  .nl-field { flex-basis: auto; width: 100%; }
}
@media (max-width: 420px) {
  .fc-meta { font-size: 11px; gap: 8px; }
  .fc-desc { font-size: 11px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1120px) {
  .header-inner, .hero-content, .content-area, .footer-inner, .footer-bottom { width: min(100% - 48px, 900px); }
  .bookmark-button { left: 24px; }
  .hero-rail { left: 24px; }
  .hero-content { gap: 40px; }
  .poster-column { flex-basis: 216px; width: 216px; }
  .movie-card, .person-card { flex-basis: calc((100% - 48px) / 4); }
  .person-photo { height: 180px; }
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px 24px; }
  .footer-banner { grid-column: span 2; }
}
@media (max-width: 760px) {
  .site-header { padding: 16px 0 6px; }
  .header-inner { width: calc(100% - 32px); gap: 14px; height: 34px; }
  .brand-logo { width: 40px; height: 40px; }
  .main-nav {
    display: none;
    position: absolute;
    top: 56px;
    right: 16px;
    left: 16px;
    height: auto;
    padding: 10px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  }
  .main-nav.open { display: flex; }
  .main-nav > a, .main-nav .nav-link { height: 42px; font-size: 13px; }
  .main-nav > a.active::after, .main-nav .nav-item.active .nav-link::after { right: auto; width: 30px; height: 2.5px; }
  .main-nav .nav-item { height: auto; }
  .main-nav .nav-head { height: 42px; }
  .main-nav .nav-caret { margin-inline-start: auto; }
  .subnav {
    position: static;
    min-width: 0;
    padding: 0 14px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav-item.is-open .subnav { display: block; }
  .subnav a { min-height: 36px; padding: 8px 6px; }
  .header-tools { margin-left: 0; gap: 9px; order: 3; }
  .search-box { width: 34px; padding: 0; justify-content: center; border: 0; background: transparent; order: 2; margin-right: auto; }
  .search-box input { display: none; }
  /* The bell keeps its place beside the theme toggle and opens as a
     full-width sheet: anchored to the button it would hang off the small
     screen. */
  .notif-btn { width: 34px; height: 34px; border: 0; background: transparent; }
  .notif-btn svg { width: 17px; height: 17px; }
  .notif-panel {
    position: fixed;
    top: 62px;
    right: 16px;
    left: 16px;
    width: auto;
    max-height: min(430px, 68vh);
  }
  .login-btn, .register-btn { display: none; }
  .menu-toggle { display: block; order: 1; }

  .hero-content { width: calc(100% - 36px); padding: 32px 0 34px; flex-direction: column; gap: 26px; }
  .poster-column { flex-basis: auto; width: 100%; }
  .poster-card { width: min(62vw, 236px); margin: 0 auto; }
  .hero-copy { width: 100%; }
  #profile-title { font-size: 26px; }
  .profile-stats { flex-wrap: wrap; row-gap: 16px; }
  .profile-stat { min-width: 0; width: 33.33%; padding: 0 10px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
  .profile-stat:nth-child(3n) { border-left: 0; }
  .profile-stat:first-child { padding-right: 10px; }
  .profile-bio { text-align: right; }
  .bookmark-button { top: 18px; left: 16px; }
  .hero-rail { top: 18px; left: 16px; }

  .content-area { width: calc(100% - 36px); }
  .movies-section, .people-section { padding-top: 38px; }
  .section-title-block h2 { font-size: 18px; }
  .movie-card, .person-card { flex-basis: 168px; }
  .person-photo { height: 196px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .footer-banner { grid-column: span 2; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .banner-art { width: 60%; max-width: 220px; bottom: 12px; }
}
@media (max-width: 420px) {
  .header-inner { width: calc(100% - 24px); }
  .brand-logo { width: 36px; height: 36px; }
  .profile-stat { width: 50%; }
  .profile-stat:nth-child(3n) { border-left: 1px solid rgba(255, 255, 255, 0.12); }
  .profile-stat:nth-child(2n) { border-left: 0; }
  /* Keep the two link columns side by side even on the smallest phones. */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer-banner { grid-column: span 2; }
  .footer-col, .footer-contact { grid-column: auto; }
  .footer-col h3, .footer-contact h3 { margin-bottom: 14px; }
  .footer-col a { margin-bottom: 10px; }
}

/* ============================================================
   SERIES / MOVIE DETAIL PAGE (body.page-series)
   Brought in from the Peaky Blinders download page so the three
   pages share one stylesheet.
   ============================================================ */
.series-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #101116;
}
/* movie-detail.js fills the backdrop with the title's own image once the API
   answers; until then a neutral wash stands in. A real person's photo as the
   placeholder would read as the film's own cover while the page is loading.
   Longhand background properties, so the position/size the photo needs survive
   the inline background-image the script sets. */
.page-series .hero-backdrop {
  background-image:
    radial-gradient(125% 95% at 16% 6%, rgba(235, 43, 82, 0.16), transparent 58%),
    linear-gradient(150deg, #171821, #101116 68%);
  background-position: center 16%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.55) brightness(0.78) contrast(1.06);
  transform: scale(1.04);
}
.page-series .poster-img { object-position: center 16%; }
.page-series .poster-shade {
  background: linear-gradient(0deg, rgba(5, 5, 8, 0.82) 0%, rgba(5, 5, 8, 0.18) 42%, rgba(5, 5, 8, 0.1) 100%);
}
.page-series .hero-copy { text-align: right; }
.page-series .hero-actions { justify-content: flex-start; }

/* ---- Poster logo & play ---- */
.poster-logo {
  position: absolute;
  bottom: 16px;
  right: 0;
  left: 0;
  width: 78%;
  margin: auto;
  mix-blend-mode: screen;
  opacity: 0.95;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}
.poster-play {
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  background: transparent;
  color: #fff;
}
.play-circle {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-red);
  box-shadow: 0 8px 22px rgba(235, 43, 82, 0.45);
  transition: transform 0.2s, background 0.2s;
}
.poster-play:hover .play-circle { transform: scale(1.08); background: var(--accent-red-bright); }
.poster-play.is-active .play-circle { background: var(--accent-green); }
.play-circle svg { width: 19px; height: 19px; fill: currentColor; stroke: none; margin-right: -2px; }
.play-label { font-size: 13px; font-weight: 600; color: #dcdce2; }

/* ---- Title & chips ---- */
#series-title {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.title-en { direction: ltr; unicode-bidi: isolate; }
.title-chips { display: flex; align-items: center; gap: 8px; margin: 13px 0 20px; flex-wrap: wrap; }
.chip {
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #b9bac3;
  background: rgba(255, 255, 255, 0.05);
}
.chip-year { color: var(--accent-yellow); border-color: rgba(244, 189, 66, 0.45); direction: ltr; }
.chip-status { color: #7fe0b8; border-color: rgba(53, 201, 143, 0.45); }
.chip-tv { color: var(--accent-cyan); border-color: rgba(80, 198, 212, 0.45); direction: ltr; }
/* The Persian name of the title. Titles are English site-wide, so this reads as
   the title's other name rather than as one more status chip. */
.chip-fa { color: #e9e9f2; border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.08); }

/* ---- Stats (series variant) ---- */
.stats-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 22px;
}
.series-stat {
  min-width: 118px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.series-stat:first-child { padding-right: 0; }
.series-stat:last-child { border-left: 0; }
.stat-label b { color: #d6d7dd; font-weight: 600; font-size: 10.5px; }

/* ---- Metadata ---- */
.meta-grid {
  margin: 0 0 20px;
  padding: 14px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 26px;
}
.meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5.5px 0;
  min-width: 0;
}
.meta-row svg { width: 14px; height: 14px; color: var(--accent-red); flex: none; }
.meta-row dt {
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}
.meta-row dd {
  margin: 0;
  color: #d6d7dd;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-row dd.en { direction: ltr; unicode-bidi: isolate; }
.meta-link {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color 0.15s;
}
.meta-link:hover { color: #fff; }
.meta-row dd:has(.meta-link) { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- Description & tags ---- */
.series-description {
  max-width: 660px;
  margin: 0 0 20px;
  color: #c3c4cc;
  font-size: 12.5px;
  line-height: 2;
  text-align: right;
}
.user-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 0;
  flex-wrap: wrap;
}
.user-rating-label {
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}
.user-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  direction: ltr;
}
.rating-star {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #3c3d47;
  transition: color 0.15s, transform 0.12s;
}
.rating-star svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}
.rating-star.is-filled { color: var(--accent-yellow); }
.rating-star:not(.is-filled):hover { color: #6e6f7a; }
.rating-star:hover { transform: scale(1.12); }
.user-rating-value {
  color: var(--accent-yellow);
  font-size: 14px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- Outline button (also used by homepage banners) ---- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid rgba(235, 43, 82, 0.7);
  border-radius: 8px;
  color: #f1849c;
  background: rgba(13, 14, 18, 0.6);
  font-size: 12.5px;
  font-weight: 600;
  transition: 0.2s;
}
.btn-outline:hover { color: #fff; background: rgba(235, 43, 82, 0.22); border-color: var(--accent-red); }
.btn-outline svg { width: 15px; height: 15px; }
.hero-actions .btn-outline { height: 40px; }

/* ---- Sections ---- */
.cast-section, .download-section, .reviews-section, .related-section { padding-top: 46px; }
.cast-section { padding-bottom: 8px; }
/* The «مرتبط» row under the downloads is hidden until the API returns cards. */
.related-section[hidden] { display: none; }

/* ---- Cast ---- */
.cast-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 1px 6px;
}
.cast-track::-webkit-scrollbar { display: none; }
.actor-card {
  flex: 0 0 calc((100% - 64px) / 5);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.actor-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 43, 82, 0.55);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.actor-photo {
  height: 202px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #23242e, #14151b);
}
.actor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.8) contrast(1.05);
  transition: transform 0.35s;
}
.actor-card:hover .actor-photo img { transform: scale(1.05); }
.actor-photo::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(10, 11, 15, 0.55));
}
.actor-info { padding: 12px 8px 14px; }
.actor-name {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: #eeeef2;
  direction: ltr;
  unicode-bidi: isolate;
}
.actor-role { margin: 0; font-size: 10.5px; color: var(--text-secondary); }

/* ---- Crew (is_crew = 1): their own row under the cast carousel, so a
   director/writer/producer is never hidden behind the carousel scroll. ---- */
.crew-section {
  margin-top: 18px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.crew-section[hidden] { display: none; }
.crew-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-cyan);
  font-size: 11.5px;
  font-weight: 700;
}
.crew-kicker svg { width: 14px; height: 14px; }
.crew-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.crew-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-darker);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s;
}
.crew-chip:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.crew-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(160deg, #23242e, #14151b);
  flex: none;
}
.crew-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crew-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.crew-role { font-size: 10.5px; color: var(--text-secondary); }
.crew-more {
  margin-top: 12px;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-darker);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s;
}
.crew-more:hover { border-color: var(--border-strong); }
.crew-more[hidden] { display: none; }

/* ---- Parents Guide (IMDb) ---- */
/* The section is its own card ringed by the accent's red, so the guide reads as
   a block of its own; the border brightens as the reader opens it. */
.guide-section {
  margin-top: 46px;
  padding: 18px 20px 20px;
  border: 1px solid rgba(235, 43, 82, 0.5);
  border-radius: var(--radius);
  background: var(--surface-dark);
  box-shadow: 0 10px 30px rgba(235, 43, 82, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.guide-section:has(.guide-head:hover) { border-color: rgba(235, 43, 82, 0.75); }
.guide-section:not(.guide-collapsed) {
  border-color: rgba(235, 43, 82, 0.8);
  box-shadow: 0 12px 34px rgba(235, 43, 82, 0.14);
}
.guide-section[hidden] { display: none; }
/* The section opens like the download season list: a full-width head that
   toggles the panel. It starts collapsed — the guide is a read-on-demand
   block, not something to scroll past. */
.guide-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.guide-head:hover h2 { color: var(--accent-red-bright); }
.guide-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-cyan);
  background: rgba(80, 198, 212, 0.1);
  transition: transform 0.28s, background 0.2s;
  flex: none;
}
.guide-arrow svg { width: 15px; height: 15px; }
.guide-section:not(.guide-collapsed) .guide-arrow { transform: rotate(180deg); background: rgba(80, 198, 212, 0.2); }
.guide-panel { display: none; }
.guide-section:not(.guide-collapsed) .guide-panel { display: block; }
.guide-panel-inner { overflow: hidden; min-height: 0; }
@supports (grid-template-rows: 0fr) {
  .guide-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .guide-section:not(.guide-collapsed) .guide-panel { grid-template-rows: 1fr; }
}
.guide-rating {
  margin: 14px 0 0;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-right: 3px solid var(--accent-yellow);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.7;
  direction: ltr;
  text-align: left;
}
.guide-rating[hidden] { display: none; }
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.guide-card {
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
/* The left edge carries the severity the dataset recorded: green for "None",
   then yellow, orange and red as the source's word gets harsher. Unknown keeps
   the plain border — the dataset said nothing, which is not a green light. */
.guide-card--none { border-right: 3px solid var(--accent-green); }
.guide-card--mild { border-right: 3px solid var(--accent-yellow); }
.guide-card--moderate { border-right: 3px solid #e8842c; }
.guide-card--severe { border-right: 3px solid var(--accent-red); }
.guide-card-head { display: flex; align-items: center; gap: 8px; }
.guide-card-icon { display: flex; color: var(--accent-cyan); flex: none; }
.guide-card-icon svg { width: 16px; height: 16px; }
.guide-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.guide-card-level {
  margin-right: auto;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.guide-card--none .guide-card-level { color: var(--accent-green); border-color: rgba(53, 201, 143, 0.45); }
.guide-card--mild .guide-card-level { color: var(--accent-yellow); border-color: rgba(244, 189, 66, 0.45); }
.guide-card--moderate .guide-card-level { color: #e8842c; border-color: rgba(232, 132, 44, 0.45); }
.guide-card--severe .guide-card-level { color: var(--accent-red-bright); border-color: rgba(235, 43, 82, 0.5); }
.guide-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-list li {
  position: relative;
  padding-right: 15px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.85;
  direction: ltr;
  text-align: left;
}
.guide-list li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}
.guide-empty { margin: 12px 0 0; color: var(--text-dim); font-size: 12px; }
.guide-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.8;
}
.guide-note[hidden] { display: none; }
.guide-note b { color: var(--text-secondary); }
.guide-note-icon { display: flex; flex: none; margin-top: 2px; }
.guide-note-icon svg { width: 15px; height: 15px; }

/* ---- Download ---- */
.dl-tabs { display: flex; gap: 9px; margin: 20px 0 22px; flex-wrap: wrap; }
.dl-tab {
  padding: 7px 20px;
  border: 1px solid rgba(235, 43, 82, 0.65);
  border-radius: 7px;
  color: #f17c97;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  transition: 0.2s;
}
.dl-tab[hidden] { display: none; }
.dl-tab:hover { color: #fff; background: rgba(235, 43, 82, 0.14); }
.dl-tab.active {
  color: #fff;
  background: var(--accent-red);
  border-color: var(--accent-red);
  box-shadow: 0 6px 16px rgba(235, 43, 82, 0.3);
}
.seasons-list { display: flex; flex-direction: column; gap: 12px; }
.season {
  border-radius: var(--radius);
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: border-color 0.2s;
}
.season.open { border-color: rgba(235, 43, 82, 0.35); }
.season-head {
  width: 100%;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: right;
}
.season-head:hover .season-title { color: #fff; }
.season-title { font-size: 15px; font-weight: 700; color: #e8e8ed; transition: color 0.2s; }
.season-count { flex: 1; display: flex; justify-content: center; gap: 5px; align-items: baseline; }
.season-count b { color: var(--accent-red-bright); font-size: 13.5px; font-weight: 800; }
.season-count span { color: var(--text-secondary); font-size: 11.5px; }
.season-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-cyan);
  background: rgba(80, 198, 212, 0.1);
  transition: transform 0.28s, background 0.2s;
  flex: none;
}
.season-arrow svg { width: 15px; height: 15px; }
.season.open .season-arrow { transform: rotate(180deg); background: rgba(80, 198, 212, 0.2); }
.season-panel {
  display: none;
}
.season.open .season-panel { display: block; }
.season-panel-inner { overflow: hidden; }
@supports (grid-template-rows: 0fr) {
  .season-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .season.open .season-panel { grid-template-rows: 1fr; }
}
.episode { padding: 12px 20px 2px; }
.episode + .episode { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.episode-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: right;
  cursor: pointer;
  transition: color 0.2s;
}
.episode-head:hover .episode-title { color: #fff; }
.episode-head:hover .episode-arrow { color: var(--accent-cyan); }
.episode-head::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  flex: none;
}
.episode-title { font-size: 12.5px; font-weight: 700; color: #e2e2e8; }
.episode-title b { color: var(--accent-red-bright); font-weight: 800; }
.episode-count {
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 11px;
}
.episode-count b { color: var(--accent-red-bright); font-size: 12px; font-weight: 800; }
.episode-arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  transition: transform 0.28s, color 0.2s;
  flex: none;
}
.episode-arrow svg { width: 13px; height: 13px; }
.episode.open .episode-arrow { transform: rotate(180deg); color: var(--accent-cyan); }
.episode-panel {
  display: none;
}
.episode.open .episode-panel { display: block; }
.episode-panel-inner { overflow: hidden; }
@supports (grid-template-rows: 0fr) {
  .episode-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .episode.open .episode-panel { grid-template-rows: 1fr; }
}

/* ---- Download groups (quality + encoder) ---- */
.dl-group {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 10px;
}
.dl-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface-2);
}
.dl-group-quality {
  color: var(--accent-yellow);
  font-size: 12.5px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
}
.dl-group-codec {
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--accent-cyan);
  background: rgba(80, 198, 212, 0.12);
  font-size: 11px;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}
.dl-group-spacer { flex: 1; min-width: 4px; }
.dl-group-count { color: var(--text-secondary); font-size: 11px; }
.dl-group-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.no-dl { padding: 18px 20px; color: var(--text-secondary); font-size: 13px; }
.dl-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  background: var(--surface-dark);
  min-width: 0;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.dl-item:hover { border-color: rgba(235, 43, 82, 0.5); background: var(--surface-2); }
.dl-item.is-hidden { display: none; }
.dl-size { color: #b9bac3; font-size: 11px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.dl-spacer { flex: 1; min-width: 4px; }
.dl-audio { color: #d4d5dc; font-size: 11.5px; font-weight: 600; }

/* ---- ادامه تماشا — the visitor's own position in this file ----
   The row keeps the second it was left at: a slim bar along its bottom edge
   and a chip naming that second, so a half-watched file reads as «ادامه از
   …» instead of looking like a download that was never opened. */
.dl-watched {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 0 7px 7px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dl-watched[hidden] { display: none; }
.dl-watched i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-red-bright));
  transition: width 0.35s ease;
}
.dl-resume {
  flex: none;
  padding: 2px 8px;
  border: 1px solid rgba(235, 43, 82, 0.4);
  border-radius: 20px;
  color: #ffbdc9;
  background: rgba(235, 43, 82, 0.12);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: isolate;
}
.dl-resume[hidden] { display: none; }
.dl-resume.is-done {
  border-color: rgba(80, 198, 212, 0.42);
  color: var(--accent-cyan);
  background: rgba(80, 198, 212, 0.12);
}
/* Narrow rows wrap (see .dl-item), so the chip only has to shrink a little. */
@media (max-width: 560px) {
  .dl-resume { padding: 2px 6px; font-size: 9.5px; }
}
.dl-btn {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(80, 198, 212, 0.55);
  border-radius: 7px;
  color: var(--accent-cyan);
  background: transparent;
  transition: 0.2s;
}
.dl-btn:hover { color: #06212a; background: var(--accent-cyan); }
.dl-btn svg { width: 14px; height: 14px; }

/* ---- Reviews ---- */
.review-notice {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border: 1px solid rgba(235, 43, 82, 0.28);
  border-radius: var(--radius);
  background: var(--surface-dark);
  margin: 20px 0 14px;
}
.review-notice svg { width: 18px; height: 18px; color: var(--accent-red-bright); flex: none; }
.review-notice p { margin: 0; flex: 1; color: var(--text-secondary); font-size: 11.5px; line-height: 1.9; }
.notice-btn {
  flex: none;
  padding: 6px 14px;
  border: 1px solid rgba(235, 43, 82, 0.55);
  border-radius: 6px;
  color: #f1849c;
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: 0.2s;
}
.notice-btn:hover { color: #fff; background: rgba(235, 43, 82, 0.16); }
.comment-form {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.comment-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 15px;
  border: 1px solid #262732;
  border-radius: 8px;
  outline: none;
  color: var(--text-primary);
  background: var(--surface);
  font-size: 12px;
}
.comment-form input::placeholder { color: #71727d; }
.comment-form input:focus { border-color: rgba(80, 198, 212, 0.7); }
.comment-form button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  border: 1px solid var(--accent-cyan);
  border-radius: 8px;
  color: #04242b;
  background: var(--accent-cyan);
  font-size: 12px;
  font-weight: 700;
  transition: 0.2s;
}
.comment-form button:hover { background: #6fd6e2; }
.comment-form button svg { width: 14px; height: 14px; }
.comments-list { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.comment {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: #121319;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.comment.is-hidden { display: none; }
.comment-head { display: flex; align-items: center; gap: 11px; }
.comment-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(235, 43, 82, 0.7);
  border-radius: 50%;
  color: var(--accent-red-bright);
  background: rgba(235, 43, 82, 0.1);
}
.comment-avatar svg { width: 16px; height: 16px; }
.comment-user { font-size: 13px; font-weight: 700; color: var(--accent-red-bright); direction: ltr; unicode-bidi: isolate; }
.comment-time { margin-right: auto; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.comment-text { margin: 10px 0 12px; color: #c6c7cf; font-size: 12.5px; line-height: 2; }
.comment-actions { display: flex; align-items: center; gap: 6px; }
.comment-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  transition: 0.2s;
}
.comment-actions svg { width: 13px; height: 13px; }
.comment-actions .like-btn:hover, .comment-actions .like-btn.is-active { color: var(--accent-green); border-color: rgba(53, 201, 143, 0.4); background: rgba(53, 201, 143, 0.08); }
.comment-actions .dislike-btn:hover, .comment-actions .dislike-btn.is-active { color: var(--accent-red-bright); border-color: rgba(235, 43, 82, 0.4); background: rgba(235, 43, 82, 0.08); }
.comment-actions .reply-btn:hover { color: var(--accent-cyan); border-color: rgba(80, 198, 212, 0.4); background: rgba(80, 198, 212, 0.08); }
.comment-actions .count { min-width: 8px; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 22px; }
.load-more {
  padding: 10px 30px;
  border: 1px solid var(--accent-red);
  border-radius: 8px;
  color: #fff;
  background: var(--accent-red);
  font-size: 12.5px;
  font-weight: 700;
  transition: 0.2s;
}
.load-more:hover { background: var(--accent-red-bright); }
.load-more.is-hidden { display: none; }
.actor-photo:has(img.img-failed)::after { opacity: 0.4; }

/* ---- Series page responsive ---- */
@media (max-width: 1120px) {
  .meta-grid { grid-template-columns: repeat(2, 1fr); }
  .actor-card { flex-basis: calc((100% - 48px) / 4); }
}
@media (max-width: 760px) {
  .cast-section, .download-section, .reviews-section, .related-section { padding-top: 38px; }
  #series-title { font-size: 24px; }
  /* Same presentation as the actor page: icon above a centered value above
     its label, two per row. */
  .stats-grid { flex-wrap: wrap; row-gap: 18px; }
  .series-stat {
    min-width: 0;
    width: 50%;
    padding: 0 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    margin-bottom: 0;
  }
  .series-stat > div { text-align: center; }
  .series-stat:nth-child(2n) { border-left: 0; }
  .series-stat:first-child { padding-right: 10px; }
  .meta-grid { grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
  .actor-card { flex-basis: 168px; }
  .actor-photo { height: 196px; }
  .episode { padding: 10px 14px 2px; }
  .dl-item { flex-wrap: wrap; row-gap: 6px; }
  .dl-spacer { display: none; }
  .review-notice { align-items: flex-start; flex-wrap: wrap; }
  .notice-btn { margin-right: 31px; }
  .comment-form { flex-direction: column; }
  .comment-form button { justify-content: center; padding: 11px 20px; }
}
@media (max-width: 420px) {
  .dl-group-head { flex-wrap: wrap; row-gap: 4px; }
}

/* ============================================================
   SEARCH — navbar suggestions + search results page
   ============================================================ */
.search-suggest {
  position: absolute;
  z-index: 60;
  min-width: 280px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  direction: rtl;
  text-align: right;
}
.search-suggest--fixed { position: fixed; }
.search-suggest-list {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 43, 82, 0.6) rgba(255, 255, 255, 0.06);
}
.search-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 13px;
  color: #d6d7dd;
  background: transparent;
  font-size: 12.5px;
  transition: background 0.15s, color 0.15s;
}
.search-suggest-item:hover, .search-suggest-item.is-active { color: #fff; background: rgba(235, 43, 82, 0.16); }
.search-suggest-item + .search-suggest-item { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.search-suggest-thumb {
  width: 30px;
  height: 42px;
  flex: none;
  object-fit: cover;
  border-radius: 4px;
  background: #22242e;
}
.search-suggest-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-suggest-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest-title b { font-weight: 700; }
.search-suggest-title i { color: #8f909b; font-style: normal; font-size: 11px; margin-right: 6px; }
.search-suggest-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7e7f8a;
  font-size: 10.5px;
  white-space: nowrap;
}
.search-suggest-meta i { width: 3px; height: 3px; border-radius: 50%; background: #565763; }
.search-suggest-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-yellow); font-weight: 600; }
.search-suggest-rating svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.search-suggest-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1849c;
  background: rgba(235, 43, 82, 0.07);
  font-size: 11.5px;
  font-weight: 600;
  transition: 0.15s;
}
.search-suggest-all:hover { color: #fff; background: rgba(235, 43, 82, 0.18); }
.search-suggest-all span { display: inline-flex; }
.search-suggest-all svg { width: 14px; height: 14px; }
.search-suggest-empty {
  padding: 18px 16px 20px;
  color: #a2a3ad;
  font-size: 12px;
  line-height: 2;
}
.search-suggest-empty b { color: #fff; font-weight: 600; }
.search-suggest-empty a { display: block; color: var(--accent-red-bright); font-weight: 600; }

/* ---- Search results page ---- */
.search-page { padding-bottom: 10px; }
.search-head { padding: 40px 0 6px; }
.search-head h1 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
}
.search-count { margin: 0; color: var(--text-secondary); font-size: 12px; }
.results-track {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  row-gap: 28px;
  padding: 20px 0 6px;
}
.no-results {
  margin: 60px 0 80px;
  text-align: center;
  color: var(--text-secondary);
}
.no-results p { margin: 0 0 8px; color: #fff; font-size: 16px; font-weight: 700; }
.no-results > span { display: block; font-size: 12px; }
.no-results .view-all-btn { display: inline-flex; }

/* ============================================================
   ACCOUNT / PROFILE PAGE (body.page-account)
   Mobile-first profile screen: avatar + settings list + tab bar.
   Reuses the site tokens; desktop reuses the shared header/footer.
   ============================================================ */

/* ---- Mobile-only centered title (per reference header) ---- */
.page-account .header-title, .page-bookmarks .header-title { display: none; }

/* ---- Profile block ---- */
.acc-hero {
  padding: 40px 0 6px;
  text-align: center;
}
.acc-avatar-wrap {
  position: relative;
  width: 126px;
  margin: 0 auto;
}
.acc-avatar {
  position: relative;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  border: 3px solid var(--accent-red);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background: linear-gradient(145deg, #262832, #111218);
}
.acc-avatar-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-avatar-img.img-failed { visibility: hidden; }
.acc-avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(235, 43, 82, 0.85);
}
.acc-avatar-fallback svg { width: 46px; height: 46px; }
.acc-camera {
  position: absolute;
  z-index: 2;
  right: 2px;
  bottom: 2px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid var(--body-bg);
  border-radius: 50%;
  color: #fff;
  background: var(--accent-red);
  transition: background 0.2s, transform 0.2s;
}
.acc-camera:hover { background: var(--accent-red-bright); transform: scale(1.08); }
.acc-camera svg { width: 16px; height: 16px; fill: #fff; stroke: none; }
.acc-name {
  margin: 20px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- Settings menu ---- */
.acc-menu {
  width: min(100% - 36px, 640px);
  margin: 22px auto 0;
}
.acc-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 6px;
  color: #ededf1;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.15s;
}
.acc-row:hover { color: #fff; }
.acc-row + .acc-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(235, 43, 82, 0.55) 12%, rgba(235, 43, 82, 0.55) 88%, transparent 100%);
}
.acc-text { text-align: right; min-width: 0; }
.acc-note {
  color: var(--accent-red-bright);
  font-size: 11.5px;
  font-weight: 600;
  margin-right: 6px;
}
.acc-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #d4d5dc;
  background: rgba(255, 255, 255, 0.05);
}
.acc-icon svg { width: 16px; height: 16px; }
.acc-row.acc-share, .acc-row.acc-logout { cursor: pointer; }
.acc-logout { color: var(--accent-red-bright); font-weight: 700; }
.acc-logout .acc-icon {
  color: var(--accent-red-bright);
  background: rgba(235, 43, 82, 0.13);
}
.acc-logout:hover { color: #fff; }

/* ---- Toast ---- */
.acc-toast {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 1px solid rgba(235, 43, 82, 0.5);
  border-radius: 9px;
  color: #fff;
  background: rgba(20, 21, 27, 0.96);
  font-size: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.acc-toast.show { opacity: 1; }

/* ---- Mobile bottom navigation (reference tab bar) ---- */
.tabbar { display: none; }

@media (max-width: 760px) {
  /* Reference mobile header: hamburger (right), centered title, search (left) */
  .page-account .header-title,
  .page-bookmarks .header-title {
    display: block;
    order: 1;
    flex: 1;
    min-width: 0;
    text-align: center;
    color: var(--text-primary);
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  .page-account .brand,
  .page-account .login-btn,
  .page-account .register-btn,
  .page-bookmarks .brand,
  .page-bookmarks .login-btn,
  .page-bookmarks .register-btn { display: none; }
  .page-account .header-tools, .page-bookmarks .header-tools { order: 3; margin-left: 0; }
  .page-account .menu-toggle, .page-bookmarks .menu-toggle { color: var(--accent-red); }
  .page-account .search-box, .page-bookmarks .search-box { order: 2; width: 30px; color: var(--accent-cyan); }

  /* Tab bar (site-wide mobile app shell) */
  body { padding-bottom: 70px; }
  .tabbar {
    position: fixed;
    z-index: 55;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: stretch;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    background: var(--surface-darker);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.5);
  }
  .tabbar-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 0 6px;
    color: var(--text-dim);
    font-size: 9.5px;
    font-weight: 600;
    transition: color 0.15s;
  }
  .tabbar-item svg { width: 20px; height: 20px; }
  .tabbar-item.active { color: var(--accent-red-bright); }
  .tabbar-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-red);
  }
}


/* ---- Category tabs ---- */
.bm-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bm-tab {
  position: relative;
  padding: 11px 8px 12px;
  color: #9e9e9e;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.15s;
}
.bm-tab:hover { color: #d6d7dd; }
.bm-tab.active { color: #fff; }
.bm-tab.active::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent-red);
}

/* ---- Login prompt (guests) ---- */
.bm-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: 42px auto 60px;
  padding: 44px 26px;
  max-width: 420px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
}
.bm-login-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(235, 43, 82, 0.12);
  color: var(--accent-red);
}
.bm-login-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bm-login-title { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.bm-login-desc { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--text-secondary); }
.bm-login-btn {
  margin-top: 8px;
  padding: 10px 30px;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: filter 0.18s, transform 0.18s;
}
.bm-login-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
/* A class selector beats the UA `[hidden] { display: none }` rule, so the
   flex layout above would keep the login prompt (and the tabs) on screen for
   signed-in users. Same pattern as .pg-wrap[hidden] / .no-dl-tab[hidden]. */
.bm-login[hidden],
.bm-tabs[hidden] { display: none; }

/* ---- Saved grid ---- */
.bm-section { padding-bottom: 10px; }
.bm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  row-gap: 28px;
  padding: 26px 0 6px;
}
.bm-card, .bm-person {
  flex: 0 0 calc((100% - 64px) / 5);
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.bm-card:hover, .bm-person:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 43, 82, 0.55);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.bm-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, #23242e, #14151b);
}
.bm-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 0.35s;
}
.bm-card:hover .bm-poster img, .bm-person:hover .bm-poster img { transform: scale(1.05); }
.bm-poster img.img-failed { visibility: hidden; }
.bm-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #c7c8d0;
  background:
    radial-gradient(circle at 30% 20%, rgba(235, 43, 82, 0.28), transparent 34%),
    linear-gradient(145deg, #262832, #111218 72%);
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}
.bm-info { padding: 9px 8px 11px; }
.bm-title {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #eeeef2;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-meta { display: flex; align-items: center; gap: 6px; }
.bm-imdb {
  padding: 2px 6px;
  border-radius: 4px;
  color: #1c1c1c;
  background: var(--accent-yellow);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.4;
  direction: ltr;
  flex: none;
}
.bm-duration {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #a2a3ad;
  font-size: 9.5px;
  font-weight: 500;
  direction: ltr;
  white-space: nowrap;
}
.bm-duration svg { width: 11px; height: 11px; }

.bm-person { text-align: center; }
.bm-person .bm-poster { aspect-ratio: 3 / 4; }
.bm-person .bm-info { padding: 10px 8px 12px; }
.bm-name {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #eeeef2;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-role { margin: 0; font-size: 10px; color: var(--text-secondary); }

/* ---- Bookmarks responsive ---- */
@media (max-width: 1120px) {
  .bm-card, .bm-person { flex-basis: calc((100% - 48px) / 4); }
}
@media (max-width: 760px) {
  .bm-tabs { padding-top: 18px; }
  .bm-tab { font-size: 12.5px; }
  .bm-card, .bm-person { flex-basis: calc((100% - 32px) / 3); }
}

/* ============================================================
   SEARCH PAGE — PERSON HITS (from the DB search)
   ============================================================ */
.persons-results {
  margin-top: 44px;
}
.persons-results .section-heading { margin-bottom: 20px; }
.persons-results a.person-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ============================================================
   LISTING PAGES (/movies, /series, /actors) — filter bar
   ============================================================ */
.lst-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.lst-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.lst-chip span { color: var(--accent-red); font-size: 13px; line-height: 1; }
.lst-chip:hover { border-color: var(--accent-red); color: var(--text-primary); }
.lst-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 6px 0 2px;
}
.lst-control {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 6px 0 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s;
}
.lst-control:hover { border-color: rgba(255, 255, 255, 0.2); }
.lst-control select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding-inline-end: 22px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a9a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: 15px;
  outline: none;
  cursor: pointer;
}
.lst-control select option { background: #17181d; color: #fff; }
.lst-search {
  flex: 1 1 200px;
  min-width: 180px;
  display: flex;
}
.lst-search input {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.lst-search input::placeholder { color: var(--text-secondary); }
.lst-search input:focus { border-color: rgba(235, 43, 82, 0.55); }

/* ---- Listing responsive ---- */
@media (max-width: 760px) {
  .lst-bar { gap: 10px; padding-top: 2px; }
  .lst-control { height: 40px; }
  .lst-search { flex-basis: 100%; }
  .lst-search input { height: 40px; }
}
/* ============================================================
   BROWSE PAGES — shared hero strip (/categories, /collections, /spinoffs)
   ============================================================ */
.browse-hero {
  position: relative;
  margin-top: 34px;
  padding: 46px 0 40px;
  border-radius: 18px;
  background:
    radial-gradient(1100px 300px at 85% -40%, rgba(235, 43, 82, 0.16), transparent 70%),
    radial-gradient(900px 280px at 8% 120%, rgba(80, 198, 212, 0.1), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.browse-hero-inner { padding: 0 30px; }
.browse-hero-kicker {
  display: block;
  margin-bottom: 10px;
  color: #6fd0dd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.browse-hero h1 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
}
.browse-hero-sub {
  max-width: 640px;
  margin: 10px 0 0;
  color: #a7a8b2;
  font-size: 12.5px;
  line-height: 2;
}
.browse-hero-count {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 16px;
  border: 1px solid rgba(80, 198, 212, 0.45);
  border-radius: 999px;
  color: #a9e2ea;
  font-size: 12px;
  font-weight: 700;
}

/* ============================================================
   CATEGORIES PAGE — collage cards
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
a.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #1f2029, #14151b);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
a.cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 43, 82, 0.55);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.cat-collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: #101116;
}
.cat-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.cat-collage img:nth-child(1):last-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.cat-collage--empty { background: linear-gradient(160deg, #23242e, #14151b); }
.cat-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 10, 13, 0.12) 0%, rgba(9, 10, 13, 0.72) 58%, rgba(9, 10, 13, 0.94) 100%);
}
.cat-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cat-flag { font-size: 15px; margin-bottom: 5px; }
.cat-name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.cat-en {
  margin-top: 3px;
  font-size: 10px;
  color: #9b9ca6;
  direction: ltr;
  unicode-bidi: isolate;
}
.cat-count {
  margin-top: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(235, 43, 82, 0.85);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

/* ============================================================
   COLLECTIONS — featured hero + backdrop cards
   ============================================================ */
.col-hero {
  position: relative;
  margin-top: 26px;
  border-radius: 18px;
  overflow: hidden;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
}
.col-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
}
.col-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 10, 13, 0.05) 0%, rgba(9, 10, 13, 0.55) 55%, rgba(9, 10, 13, 0.95) 100%),
    linear-gradient(90deg, rgba(9, 10, 13, 0.5), transparent 40%);
}
.col-hero-copy {
  position: relative;
  z-index: 1;
  padding: 34px;
  max-width: 760px;
}
.col-hero-chip {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(235, 43, 82, 0.9);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.col-hero-copy h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
}
.col-hero-en {
  display: block;
  margin-top: 6px;
  color: #a7a8b2;
  font-size: 13px;
  direction: ltr;
  unicode-bidi: isolate;
}
.col-hero-copy p {
  margin: 14px 0 0;
  color: #c9cad2;
  font-size: 12.5px;
  line-height: 2.05;
}
.col-hero-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.col-hero-genres span {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(80, 198, 212, 0.5);
  color: #a9e2ea;
  font-size: 10.5px;
  font-weight: 600;
}
.col-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.col-hero-actions .btn-primary, .col-hero-actions .btn-outline { height: 42px; }
.col-hero-actions .btn-primary svg { width: 15px; height: 15px; }

.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
a.col-card {
  position: relative;
  display: block;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--surface);
  background-size: cover;
  background-position: center 30%;
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
a.col-card:hover {
  transform: translateY(-4px);
  border-color: rgba(80, 198, 212, 0.55);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.col-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 10, 13, 0.25) 0%, rgba(9, 10, 13, 0.55) 45%, rgba(9, 10, 13, 0.94) 100%);
}
.col-posters {
  position: absolute;
  inset-inline: 0;
  bottom: 86px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
}
.col-posters img {
  height: 118px;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.col-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0 18px 16px;
}
.col-name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.col-en {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #9b9ca6;
  direction: ltr;
  unicode-bidi: isolate;
}
.col-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.col-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(235, 43, 82, 0.85);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.col-genres { display: flex; gap: 6px; flex-wrap: wrap; }
.col-genre {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cfd0d8;
  font-size: 9.5px;
  font-weight: 600;
}

/* ============================================================
   SPIN-OFFS — franchise families
   ============================================================ */
.sp-list { margin-top: 26px; }
.sp-family {
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
a.sp-parent {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
a.sp-parent:hover { background: #1a1b23; }
.sp-parent-poster { flex: none; }
.sp-parent-poster img {
  width: 58px;
  height: 86px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}
.sp-parent-kicker {
  display: block;
  margin-bottom: 4px;
  color: #6fd0dd;
  font-size: 10px;
  font-weight: 700;
}
.sp-parent-name {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: #fff;
}
.sp-parent-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  color: #9b9ca6;
  font-size: 11px;
}
.sp-parent-meta svg { width: 11px; height: 11px; fill: #ffd600; stroke: none; }
.sp-dot { color: #55565f; }
.sp-parent-arrow {
  margin-inline-start: auto;
  color: #6f707b;
  display: grid;
  place-items: center;
}
.sp-parent-arrow svg { width: 16px; height: 16px; }
.sp-children {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
  padding: 16px 18px 18px;
}
a.sp-child {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.sp-child-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #101116;
  border: 1px solid var(--border);
}
.sp-child-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}
a.sp-child:hover .sp-child-poster img { transform: scale(1.05); }
.sp-child-type {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(9, 10, 13, 0.75);
  color: #d8f4f8;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid rgba(80, 198, 212, 0.4);
}
.sp-child-name {
  margin: 8px 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #eaeaee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-child-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  color: #858691;
  font-size: 10px;
}
.sp-child-meta svg { width: 10px; height: 10px; fill: #ffd600; stroke: none; }

/* ---- Browse pages responsive ---- */
@media (max-width: 760px) {
  .browse-hero { margin-top: 20px; padding: 32px 0 28px; }
  .browse-hero-inner { padding: 0 20px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-top: 20px; }
  .col-hero { min-height: 250px; }
  .col-hero-copy { padding: 22px; }
  .col-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
  .col-posters { bottom: 78px; }
  .col-posters img { height: 88px; }
  .sp-children { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); padding: 12px 14px 14px; }
  a.sp-parent { padding: 12px 14px; }
}

/* ============================================================
   BROWSE SEARCH — small filter box under the hero
   ============================================================ */
.browse-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0 16px;
  height: 46px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.2s;
  max-width: 480px;
}
.browse-search:focus-within { border-color: rgba(80, 198, 212, 0.6); }
.browse-search svg { width: 16px; height: 16px; flex: none; color: #858691; }
.browse-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.browse-search input::placeholder { color: var(--text-secondary); }

/* ============================================================
   LISTING — button pagination (prev / numbers / next)
   Shared by /movies, /series, /actors, /collections, /spinoffs
   and the actor works page (see pager.js).
   ============================================================ */
.pg-wrap { display: flex; justify-content: center; margin: 26px 0 10px; }
.pg-wrap[hidden] { display: none; }
.pg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pg-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.pg-btn:hover:not(:disabled):not(.is-active) {
  color: #fff;
  border-color: var(--accent-red);
  background: rgba(235, 43, 82, 0.14);
}
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-num.is-active {
  color: #fff;
  border-color: var(--accent-red);
  background: var(--accent-red);
  cursor: default;
}
.pg-nav { padding: 0 16px; }
.pg-gap { padding: 0 2px; color: var(--text-dim); font-size: 13px; }
html[data-theme="light"] .pg-btn { background: #fff; border-color: #d7dbe3; color: #4a4d57; }
html[data-theme="light"] .pg-btn:hover:not(:disabled):not(.is-active) { color: #fff; }
@media (max-width: 520px) {
  .pg { gap: 4px; }
  .pg-btn { min-width: 34px; height: 34px; padding: 0 9px; font-size: 12px; }
  .pg-nav { padding: 0 11px; }
}

/* Empty download tab note (movie detail) */
.no-dl-tab {
  margin: 22px 0 8px;
  padding: 18px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
  text-align: center;
}
.no-dl-tab[hidden] { display: none; }
html[data-theme="light"] .no-dl-tab { background: rgba(0, 0, 0, 0.02); }

/* ============================================================
   ACTOR WORKS PAGE (/actor/:id/works)
   All films & series of one actor, with type tabs + sort + pager.
   ============================================================ */
.aw-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease;
}
.aw-back:hover { color: var(--accent-red-bright); }
.aw-back svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aw-bar { margin-bottom: 6px; }
.aw-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.aw-tab {
  padding: 7px 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.aw-tab:hover { color: #fff; }
.aw-tab.active { color: #fff; background: var(--accent-red); }
html[data-theme="light"] .aw-tab { color: #4a4d57; }
html[data-theme="light"] .aw-tab:hover { color: #16171e; }
html[data-theme="light"] .aw-tab.active { color: #fff; }
@media (max-width: 520px) {
  .aw-tabs { width: 100%; }
  .aw-tab { flex: 1; padding: 7px 8px; text-align: center; }
}

/* ---- Filmography timeline (actor works page): one block per year, and on every
   entry the credit that person had in that title — «بازیگر» or the job they did
   behind the camera (نویسنده، کارگردان، تهیه‌کننده…). ---- */
.aw-timeline { padding: 20px 0 6px; }

.tl-year {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
}
.aw-timeline .tl-year:first-child { margin-top: 2px; }
.tl-year-label {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}
.tl-year-rule { flex: 1; height: 1px; background: var(--border); }
.tl-year-count { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }

.tl-list {
  position: relative;
  margin: 0;
  padding: 0 22px 0 0;
  list-style: none;
}
/* The rail the year blocks hang off, in the RTL gutter the padding opens. */
.tl-list::before {
  content: "";
  position: absolute;
  inset-inline-end: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.tl-item { position: relative; }
.tl-item + .tl-item { margin-top: 10px; }
.tl-dot {
  position: absolute;
  inset-inline-end: -21px;
  top: 30px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--shell);
}

.tl-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.tl-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.tl-poster {
  position: relative;
  flex: none;
  width: 62px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #23242e, #14151b);
}
.tl-poster img { width: 100%; height: 100%; object-fit: cover; }
.tl-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.tl-badge {
  padding: 2px 10px;
  border: 1px solid rgba(80, 198, 212, 0.3);
  border-radius: 999px;
  background: rgba(80, 198, 212, 0.14);
  color: var(--accent-cyan);
  font-size: 10.5px;
  font-weight: 700;
}
/* Crew rows (is_crew = 1) get their own tint, so a writing or directing credit
   is never mistaken for an acting one at a glance. */
.tl-badge.is-crew {
  border-color: rgba(244, 189, 66, 0.32);
  background: rgba(244, 189, 66, 0.14);
  color: var(--accent-yellow);
}
.tl-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.tl-sub { font-size: 11.5px; color: var(--text-secondary); }
.tl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-dim);
}
.tl-type {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
}
.tl-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-yellow); }
.tl-rating svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.tl-character { color: var(--text-secondary); }

html[data-theme="light"] .tl-year-label { color: #16171e; }
html[data-theme="light"] .tl-dot { box-shadow: 0 0 0 3px #f2f3f6; }

@media (max-width: 520px) {
  .tl-card { gap: 10px; padding: 9px; }
  .tl-poster { width: 52px; }
  .tl-list { padding-inline-end: 18px; }
  .tl-dot { inset-inline-end: -17px; top: 26px; }
}

/* ---- Mobile: results grid goes 2-up; search box full width ---- */
@media (max-width: 760px) {
  .browse-search { margin-top: 18px; height: 42px; max-width: none; }
  .results-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    row-gap: 24px;
    padding: 14px 0 4px;
  }
  .results-track .movie-card,
  .results-track .person-card {
    flex: none;
    width: 100%;
  }
}

/* ============================================================
   LOGIN PAGE (body.page-login) + Telegram auth states
   ============================================================ */
.page-login .header-title { display: none; }

.login-wrap {
  width: min(100% - 36px, 460px);
  margin: 40px auto 0;
  padding: 0 0 10px;
}
.login-card {
  position: relative;
  padding: 40px 30px 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(235, 43, 82, 0.14), transparent 42%),
    radial-gradient(circle at 85% 100%, rgba(80, 198, 212, 0.1), transparent 40%),
    linear-gradient(160deg, #17181f, #101116);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(235, 43, 82, 0.55), rgba(235, 43, 82, 0.05) 40%, rgba(80, 198, 212, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.login-brand {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
  box-shadow: 0 14px 30px rgba(235, 43, 82, 0.35);
}
.login-brand svg { width: 30px; height: 30px; fill: none; stroke: currentColor; }
.login-card h1 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
}
.login-sub {
  margin: 0 auto 22px;
  max-width: 320px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 2;
}

.login-error {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid rgba(235, 43, 82, 0.55);
  border-radius: 9px;
  color: #ff9db2;
  background: rgba(235, 43, 82, 0.1);
  font-size: 11.5px;
  line-height: 1.9;
  text-align: right;
}

/* ---- Telegram login button (official colors) ---- */
.tg-login-btn {
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  box-shadow: 0 14px 30px rgba(42, 171, 238, 0.32);
  font-size: 14.5px;
  font-weight: 800;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.tg-login-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 18px 36px rgba(42, 171, 238, 0.42);
}
.tg-login-btn:active { transform: translateY(0); }
.tg-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}
.tg-icon path:last-child { fill: none; stroke: currentColor; stroke-width: 2; }

.login-note {
  margin: 18px auto 0;
  max-width: 330px;
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 2;
}
.login-note b { color: var(--text-secondary); font-weight: 600; }
.login-back {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent-cyan);
  font-size: 11.5px;
  font-weight: 600;
  transition: color 0.2s;
}
.login-back:hover { color: #8fe0ea; }

/* ---- Account page: login prompt state ---- */
body.not-authed .acc-camera { display: none; }
.acc-logout.is-login { color: var(--accent-cyan); font-weight: 800; }
.acc-logout.is-login .acc-icon {
  color: var(--accent-cyan);
  background: rgba(80, 198, 212, 0.13);
}
.acc-logout.is-login .acc-icon svg { fill: none; stroke: currentColor; }
.acc-logout.is-login:hover { color: #fff; }

@media (max-width: 760px) {
  .login-wrap { margin-top: 26px; }
  .login-card { padding: 32px 20px 28px; }
}

/* ============================================================
   ACCOUNT PAGE — badges, stats grid, list tabs (DB profile)
   ============================================================ */
.acc-username {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 12.5px;
  direction: ltr;
  unicode-bidi: isolate;
}
.acc-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.acc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  color: #d6d7dd;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11.5px;
  font-weight: 600;
  direction: ltr;
}
.acc-badge svg { width: 14px; height: 14px; }
.acc-badge.is-telegram { color: #6ec8f5; border-color: rgba(42, 171, 238, 0.4); }
.acc-badge.is-vip { color: var(--accent-yellow); border-color: rgba(244, 189, 66, 0.4); }
.acc-badge.is-vip.is-off { color: #8a8b95; border-color: rgba(255, 255, 255, 0.1); }
.acc-badge.is-vip.is-off svg { opacity: 0.5; }
.acc-badge.is-level { color: var(--accent-cyan); border-color: rgba(80, 198, 212, 0.4); }

/* ---- Stats grid ---- */
.acc-stats {
  width: min(100% - 36px, 760px);
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.acc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: linear-gradient(160deg, #17181f, #101116);
  text-align: center;
}
.acc-stat-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(235, 43, 82, 0.12);
}
.acc-stat-icon svg { width: 17px; height: 17px; }
.acc-stat-icon.is-red { color: var(--accent-red-bright); }
.acc-stat-icon.is-cyan { color: var(--accent-cyan); background: rgba(80, 198, 212, 0.12); }
.acc-stat-icon.is-yellow { color: var(--accent-yellow); background: rgba(244, 189, 66, 0.12); }
.acc-stat-icon.is-green { color: var(--accent-green); background: rgba(53, 201, 143, 0.12); }
.acc-stat-value {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  direction: ltr;
  unicode-bidi: isolate;
  max-width: 100%;
  word-break: break-word;
}
.acc-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---- Lists section ---- */
.acc-lists {
  width: min(100% - 36px, 1000px);
  margin: 34px auto 0;
}
.acc-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}
.acc-tab {
  height: 36px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #b9bac2;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  font-weight: 600;
  transition: 0.2s;
}
.acc-tab:hover { color: #fff; border-color: rgba(235, 43, 82, 0.5); }
.acc-tab.is-active {
  color: #fff;
  background: var(--accent-red);
  border-color: var(--accent-red);
}
.acc-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.acc-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.2s, border-color 0.2s;
}
.acc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(235, 43, 82, 0.55);
}
.acc-card-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, #23242e, #14151b);
}
.acc-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.acc-card-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #c7c8d0;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.acc-card-kind {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  background: rgba(235, 43, 82, 0.86);
  font-size: 9px;
  font-weight: 700;
}
.acc-card-info { padding: 10px 8px 12px; }
.acc-card-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #eeeef2;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-secondary);
}
.acc-card-imdb { color: var(--accent-yellow); font-weight: 700; direction: ltr; }
.acc-card-year { direction: ltr; }
.acc-card-rate { color: var(--accent-yellow); font-weight: 700; direction: ltr; }

/* ---- ادامه تماشا card — a poster with its watched bar ----
   Same card as the other lists, plus the play badge and the watched bar the
   movie page shows for that exact file, so the poster says where it stopped. */
.acc-card.is-continue .acc-card-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 7, 11, 0.74), rgba(6, 7, 11, 0.06) 58%);
}
.acc-card-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(235, 43, 82, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s;
}
.acc-card:hover .acc-card-play { transform: scale(1.07); }
.acc-card-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.acc-card-watched {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.acc-card-watched i { display: block; height: 100%; background: var(--accent-red); }
.acc-card-resume { color: #ffbdc9; font-weight: 700; }
.acc-card-pct { color: var(--accent-cyan); font-weight: 700; direction: ltr; }

/* ---- Remove (trash) button, top corner of a card ----
   Shared by the bookmarks page (.bm-del) and the account lists
   (.acc-card-del). Both cards are links, so the button sits above the
   poster and JS stops the click from navigating. */
.bm-del,
.acc-card-del {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(12, 13, 18, 0.74);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.bm-del svg,
.acc-card-del svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bm-del:hover,
.acc-card-del:hover { background: var(--accent-red); border-color: var(--accent-red); transform: scale(1.06); }
.bm-del:disabled,
.acc-card-del:disabled { opacity: 0.5; cursor: wait; transform: none; }

.acc-list-empty {
  margin: 0;
  padding: 30px 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 12.5px;
}

/* ---- Account: logout action ---- */
.acc-actions {
  width: min(100% - 36px, 640px);
  margin: 30px auto 0;
  padding-bottom: 10px;
}
.acc-actions .acc-logout {
  justify-content: center;
  gap: 10px;
  height: 50px;
  border: 1px solid rgba(235, 43, 82, 0.45);
  border-radius: 13px;
  background: rgba(235, 43, 82, 0.08);
  transition: 0.2s;
}
.acc-actions .acc-logout:hover {
  background: rgba(235, 43, 82, 0.18);
  border-color: var(--accent-red);
}
.acc-actions .acc-logout.is-login {
  border-color: rgba(80, 198, 212, 0.5);
  background: rgba(80, 198, 212, 0.08);
}
.acc-actions .acc-logout.is-login:hover {
  background: rgba(80, 198, 212, 0.16);
  border-color: var(--accent-cyan);
}

/* ---- Bookmarks page: server (DB watchlist) header ---- */
.bm-server-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid rgba(80, 198, 212, 0.3);
  border-radius: 10px;
  color: #cfd0d8;
  background: rgba(80, 198, 212, 0.07);
  font-size: 12px;
  font-weight: 600;
}
.bm-server-head b { color: var(--accent-cyan); font-size: 13px; }

@media (max-width: 760px) {
  .acc-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .acc-list-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .acc-tab { padding: 0 14px; height: 34px; font-size: 12px; }
}

/* ============================================================
   SKELETON LOADERS — shimmer placeholders while data loads
   ============================================================ */
@keyframes sk-shimmer {
  0% { background-position: -460px 0; }
  100% { background-position: 460px 0; }
}
.sk {
  display: block;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.sk-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #23242e, #14151b);
}
/* A person/actor card is a rectangular poster photo (.person-photo /
   .actor-photo are 202px tall), not a square avatar: the skeleton has to keep
   that height or the cast slider jumps when the real cards arrive. */
.sk-person-photo { border-radius: 0; aspect-ratio: auto; height: 202px; }
.sk-info { padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 9px; }
.sk-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1d1e27 25%, #2a2c38 50%, #1d1e27 75%);
  background-size: 920px 100%;
  animation: sk-shimmer 1.4s linear infinite;
}
.sk-line-40 { width: 40%; }
.sk-line-45 { width: 45%; }
.sk-line-55 { width: 55%; }
.sk-line-60 { width: 60%; }
.sk-line-70 { width: 70%; }
.sk-line-80 { width: 80%; }
.sk-card { flex: 0 0 auto; }
.movies-track .sk-card,
.results-track .sk-card,
.cast-track .sk-card,
.bm-grid .sk-card { flex: 0 0 calc((100% - 64px) / 5); }
.results-track .sk-person,
.cast-track .sk-person { flex-basis: calc((100% - 64px) / 5); }
.col-grid .sk-card,
.cat-grid .sk-card { min-width: 0; }
.acc-list-grid .sk-card { width: 100%; }
.sk-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
  background-size: 920px 100%;
  animation: sk-shimmer 1.4s linear infinite;
}
.sk-poster { position: relative; }
.sk-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 10px;
}
.sk-banner {
  display: flex;
  gap: 20px;
  padding: 22px;
  align-items: center;
}
.sk-banner-poster { flex: 0 0 140px; border-radius: 10px; }
.sk-banner-body { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.sk-loading { position: relative; }

@media (max-width: 900px) {
  .movies-track .sk-card,
  .results-track .sk-card,
  .cast-track .sk-card,
  .bm-grid .sk-card,
  .results-track .sk-person,
  .cast-track .sk-person { flex: 0 0 calc((100% - 32px) / 3); }
}
@media (max-width: 560px) {
  .movies-track .sk-card,
  .results-track .sk-card,
  .cast-track .sk-card,
  .bm-grid .sk-card,
  .results-track .sk-person,
  .cast-track .sk-person { flex: 0 0 calc((100% - 12px) / 2); }
}
/* The skeleton photo follows the real one: person grids shrink with
   .person-photo (202 / 180 / 196), while the cast slider's .actor-photo stays
   202px at every width. */
@media (max-width: 1120px) { .sk-person-photo { height: 180px; } }
@media (max-width: 760px) { .sk-person-photo { height: 196px; } }
.cast-track .sk-person-photo { height: 202px; }
/* The cast slider's skeleton cards follow .actor-card's breakpoints (5 / 4 /
   168px), so the placeholder and the real card occupy the same box and the
   slider does not resize under the reader when the cast arrives. */
@media (max-width: 1120px) { .cast-track .sk-person { flex-basis: calc((100% - 48px) / 4); } }
@media (max-width: 760px) { .cast-track .sk-person { flex-basis: 168px; } }
@media (prefers-reduced-motion: reduce) {
  .sk-line, .sk-poster::after { animation: none; }
}

/* ---------- Error state (API failure + retry) ---------- */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  padding: 28px 18px;
  color: var(--text-secondary);
  text-align: center;
}
.error-state svg {
  width: 34px;
  height: 34px;
  color: var(--accent-red);
  opacity: 0.85;
}
.error-state p { margin: 0; font-size: 12.5px; line-height: 1.9; }
.error-retry {
  min-width: 132px;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--accent-red);
  border-radius: 8px;
  color: #fff;
  background: var(--accent-red);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.error-retry:hover { background: var(--accent-red-bright); border-color: var(--accent-red-bright); }

/* ============================================================
   HERO SKELETONS — detail-page hero (poster + copy) and the
   homepage featured banners, while the API loads
   ============================================================ */
.sk-shimmer-fill {
  background: linear-gradient(90deg, #1d1e27 25%, #2a2c38 50%, #1d1e27 75%);
  background-size: 920px 100%;
  animation: sk-shimmer 1.4s linear infinite;
}

/* ---- Detail hero (movie / actor) ---- */
.series-hero .hero-skeleton,
.profile-hero .hero-skeleton { display: none; }
.series-hero.hero-loading .hero-content,
.profile-hero.hero-loading .hero-content { display: none; }
.series-hero.hero-loading .hero-skeleton,
.profile-hero.hero-loading .hero-skeleton {
  display: flex;
  align-items: center;
  gap: 64px;
  width: min(100% - 96px, 1360px);
  margin: auto;
  padding: 46px 0 44px;
}
.sk-hero {
  display: flex;
  gap: 64px;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  overflow: visible;
}
.sk-hero-poster {
  flex: 0 0 268px;
  width: 268px;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  background: linear-gradient(160deg, #23242e, #14151b);
  position: relative;
}
.sk-hero-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
  background-size: 920px 100%;
  animation: sk-shimmer 1.4s linear infinite;
}
.sk-hero-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-start;
}
.sk-hero-chips { display: flex; gap: 8px; }
.sk-chip {
  width: 70px;
  height: 22px;
  border-radius: 6px;
  display: block;
}
.sk-hero-stats { display: flex; gap: 20px; margin: 4px 0 2px; }
.sk-stat {
  width: 104px;
  height: 44px;
  border-radius: 8px;
  display: block;
}
.sk-hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  width: 74%;
  margin: 2px 0 4px;
}
.sk-hero-meta .sk-line { width: 100%; }
.sk-hero-actions { display: flex; gap: 10px; margin-top: 6px; }
.sk-btn {
  width: 130px;
  height: 40px;
  border-radius: 8px;
  display: block;
}
.sk-btn-icon { width: 40px; }
.sk-chip, .sk-stat, .sk-btn {
  background: linear-gradient(90deg, #1d1e27 25%, #2a2c38 50%, #1d1e27 75%);
  background-size: 920px 100%;
  animation: sk-shimmer 1.4s linear infinite;
}

/* ---- Homepage featured banner ---- */
.featured-banner .hero-skeleton { display: none; }
.featured-banner.hero-loading .banner-copy { display: none; }
.featured-banner.hero-loading .hero-skeleton {
  display: flex;
  align-items: center;
  width: min(100% - 96px, 1360px);
  margin: auto;
  padding: 52px 0;
}
.sk-hero-banner {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
  background: transparent;
  border: 0;
  overflow: visible;
}
.sk-hero-banner-title {
  width: 52%;
  height: 46px;
  border-radius: 10px;
}
.sk-hero-banner-meta { display: flex; gap: 18px; }
.sk-hero-banner-meta .sk-line { width: 110px; }
.sk-hero-banner .sk-hero-actions { margin-top: 8px; }

/* Reduced motion for the new shimmer blocks */
@media (prefers-reduced-motion: reduce) {
  .sk-hero-poster::after, .sk-chip, .sk-stat, .sk-btn, .sk-hero-banner-title { animation: none; }
}

/* ---- Hero skeleton responsive (mirrors .hero-content) ---- */
@media (max-width: 1120px) {
  .series-hero.hero-loading .hero-skeleton,
  .profile-hero.hero-loading .hero-skeleton { gap: 40px; width: min(100% - 48px, 900px); }
  .sk-hero { gap: 40px; }
  .sk-hero-poster { flex: 0 0 216px; width: 216px; }
}
@media (max-width: 760px) {
  .series-hero.hero-loading .hero-skeleton,
  .profile-hero.hero-loading .hero-skeleton {
    flex-direction: column;
    gap: 26px;
    width: calc(100% - 36px);
    padding: 32px 0 34px;
  }
  .sk-hero { flex-direction: column; gap: 26px; }
  .sk-hero-poster { flex: 0 0 auto; width: min(62vw, 236px); }
  .sk-hero-copy { width: 100%; }
  .featured-banner.hero-loading .hero-skeleton { width: calc(100% - 36px); padding: 40px 0; }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.err-area { display: flex; justify-content: center; padding: 70px 16px 90px; }
.err-card {
  max-width: 560px;
  width: 100%;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 52px 36px;
}
.err-code {
  font-size: clamp(72px, 14vw, 128px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  direction: ltr;
}
.err-card h1 { margin: 18px 0 10px; font-size: 26px; color: var(--text-primary); }
.err-desc { margin: 0 auto 26px; max-width: 400px; color: var(--text-secondary); font-size: 14px; line-height: 1.9; }
.err-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.err-actions .btn-primary,
.err-actions .btn-outline { display: inline-flex; align-items: center; gap: 8px; }
.err-actions svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .err-area { padding: 40px 12px 60px; }
  .err-card { padding: 40px 22px; }
}

/* ============================================================
   LIKE BUTTON (count) + AUTH TOAST
   ============================================================ */
.btn-icon.like-btn {
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.like-count {
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
}
.auth-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 16px);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 1px solid rgba(235, 43, 82, 0.5);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
}
.auth-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.auth-toast-btn {
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--accent-red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.auth-toast-btn:hover { background: var(--accent-red-bright); }
@media (max-width: 560px) {
  .auth-toast {
    left: 14px;
    right: 14px;
    transform: translateY(16px);
    flex-wrap: wrap;
  }
  .auth-toast.show { transform: translateY(0); }
}

/* ============================================================
   MOBILE FULLSCREEN SEARCH MODAL
   ============================================================ */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--body-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.search-modal.open { opacity: 1; visibility: visible; transform: none; }
.search-modal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.search-modal-field {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #2a2b34;
  border-radius: 9px;
  background: #1b1c24;
  color: #9a9aa5;
}
.search-modal-field:focus-within { border-color: rgba(235, 43, 82, 0.6); }
.search-modal-field svg { width: 17px; height: 17px; flex: none; }
.search-modal-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0f0f3;
  font-size: 13px;
}
.search-modal-field input::placeholder { color: #767680; }
.search-modal-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #2a2b34;
  border-radius: 9px;
  background: transparent;
  color: #c9cad2;
  transition: 0.15s;
}
.search-modal-close:hover { color: #fff; border-color: rgba(235, 43, 82, 0.6); }
.search-modal-close svg { width: 18px; height: 18px; }
.search-modal-results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
}
.search-modal-empty {
  padding: 40px 20px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  text-align: center;
  line-height: 2;
}
.search-modal-empty b { color: var(--text-primary); }
.search-modal-empty-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent-cyan);
  font-weight: 600;
}
.search-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #d6d7dd;
  transition: background 0.15s;
}
.search-modal-item:hover, .search-modal-item:active { background: rgba(235, 43, 82, 0.14); }
.search-modal-thumb {
  width: 40px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border-radius: 6px;
  background: #22242e;
}
.search-modal-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.search-modal-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-modal-title b { font-weight: 700; }
.search-modal-title i { color: #8f909b; font-style: normal; font-size: 11px; margin-right: 6px; }
.search-modal-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7e7f8a;
  font-size: 10.5px;
  white-space: nowrap;
}
.search-modal-meta i { width: 3px; height: 3px; border-radius: 50%; background: #565763; }
.search-modal-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-yellow); font-weight: 600; }
.search-modal-rating svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.search-modal-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--border);
  color: var(--accent-cyan);
  font-size: 12.5px;
  font-weight: 700;
}
.search-modal-all svg { width: 15px; height: 15px; }
body.search-modal-open { overflow: hidden; }

/* ============================================================
   ADVANCED SEARCH MODAL (mobile) + gear button
   ============================================================ */
.search-modal-gear {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #2a2b34;
  border-radius: 9px;
  background: transparent;
  color: var(--accent-cyan);
  transition: 0.15s;
}
.search-modal-gear:hover { color: #fff; border-color: rgba(80, 198, 212, 0.6); background: rgba(80, 198, 212, 0.12); }
.search-modal-gear svg { width: 18px; height: 18px; }

.adv-search-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  background: var(--body-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.adv-search-modal.open { opacity: 1; visibility: visible; transform: none; }
.adv-modal-title {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adv-modal-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
}
.adv-modal-body .af-form { margin-top: 0; }
.adv-modal-body .af-grid { grid-template-columns: 1fr; gap: 12px 0; }
.adv-modal-body .af-row { flex-wrap: wrap; }
.adv-modal-body .af-label { flex-basis: 100%; margin-bottom: 2px; }
.adv-modal-body .af-actions { position: sticky; bottom: 0; padding: 10px 0 4px; background: var(--body-bg); }
.adv-modal-body .af-apply { width: 100%; }

/* ============ Advanced search: clear button + active-filter chips ============ */
.af-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.af-clear {
  background: transparent;
  border: 1px solid var(--border-color, rgba(255,255,255,.14));
  color: var(--text-dim, #9aa4b2);
  border-radius: 10px;
  padding: 9px 16px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.af-clear:hover { color: var(--text, #e8edf3); border-color: rgba(255,255,255,.3); }
.adv-modal-body .af-actions { flex-direction: column; }
.adv-modal-body .af-clear { width: 100%; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: var(--text, #e8edf3);
  font-size: .82rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.filter-chip:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.filter-chip-x { font-size: 1.05rem; line-height: 1; opacity: .75; }
.filter-chip:hover .filter-chip-x { opacity: 1; }
.filter-chip--clear {
  border-style: dashed;
  color: #ff7a7a;
  background: transparent;
}
.filter-chip--clear:hover { color: #ff9c9c; border-color: rgba(255,122,122,.5); background: rgba(255,122,122,.08); }

/* ============================================================
   THEME — light palette + smooth color transition
   ============================================================ */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .38s ease, color .38s ease, border-color .38s ease,
              box-shadow .38s ease, fill .38s ease, stroke .38s ease !important;
}

html[data-theme="light"] {
  color-scheme: light;
  --body-bg: #eef1f6;
  --shell: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-dark: #e9edf3;
  --surface-darker: #dfe4ec;
  --text-primary: #181b22;
  --text-secondary: #4c5462;
  --text-dim: #828a99;
  --border: rgba(18, 22, 30, 0.12);
  --border-strong: rgba(18, 22, 30, 0.22);
  --shadow: 0 14px 40px rgba(45, 55, 75, 0.14);
}
html[data-theme="light"] .site-shell { box-shadow: 0 0 90px rgba(35, 45, 65, 0.1); }
html[data-theme="light"] .movie-card:hover { box-shadow: 0 12px 26px rgba(30, 40, 60, 0.18); }
html[data-theme="light"] .af-option:hover { background: rgba(18, 22, 30, 0.06); }
html[data-theme="light"] .search-suggest-list { scrollbar-color: rgba(235, 43, 82, 0.5) rgba(18, 22, 30, 0.08); }
html[data-theme="light"] .notif-kind { background: rgba(18, 22, 30, 0.08); }
/* ادامه تماشا — the watched bar and resume chips on light surfaces (the pale
   pink of the dark theme has far too little contrast on white). */
html[data-theme="light"] .dl-resume { color: #b3123a; background: rgba(235, 43, 82, 0.09); }
html[data-theme="light"] .dl-resume.is-done { color: #0d6c79; background: rgba(80, 198, 212, 0.14); }
html[data-theme="light"] .dl-watched { background: rgba(18, 22, 30, 0.1); }
html[data-theme="light"] .dl-play.is-resume { border-color: rgba(18, 22, 30, 0.4); }
html[data-theme="light"] .acc-card-resume { color: #b3123a; }

/* Poster/skeleton placeholders — lighter in light mode. */
html[data-theme="light"] .movie-poster,
html[data-theme="light"] .sk-poster { background: linear-gradient(160deg, #e7ecf3, #dbe1ea); }
html[data-theme="light"] .sk-line { background: linear-gradient(90deg, #e2e7ef 25%, #eef2f7 50%, #e2e7ef 75%); background-size: 920px 100%; }
html[data-theme="light"] .sk-poster::after { background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.65) 50%, transparent 75%); background-size: 920px 100%; }
html[data-theme="light"] .sk { border-color: rgba(18, 22, 30, 0.08); }
html[data-theme="light"] .poster-fallback {
  color: #4c5462;
  background:
    radial-gradient(circle at 30% 20%, rgba(235, 43, 82, 0.14), transparent 34%),
    linear-gradient(145deg, #e7ecf3, #dbe1ea 72%);
}

/* Body/secondary text on light surfaces (cards, lists, forms, comments). */
html[data-theme="light"] .profile-bio,
html[data-theme="light"] .movie-genre,
html[data-theme="light"] .af-label,
html[data-theme="light"] .af-option,
html[data-theme="light"] .af-all,
html[data-theme="light"] .af-all:hover,
html[data-theme="light"] .af-toggle-label,
html[data-theme="light"] .chip,
html[data-theme="light"] .stat-label b,
html[data-theme="light"] .meta-row dd,
html[data-theme="light"] .series-description,
html[data-theme="light"] .dl-size,
html[data-theme="light"] .comment-text,
html[data-theme="light"] .search-suggest-meta,
html[data-theme="light"] .search-suggest-title i,
html[data-theme="light"] .footer-contact .contact-hours {
  color: var(--text-secondary);
}
/* Strong text/headings on light surfaces. */
html[data-theme="light"] .season-title,
html[data-theme="light"] .episode-title,
html[data-theme="light"] .actor-name,
html[data-theme="light"] .search-suggest-item,
html[data-theme="light"] .dl-audio {
  color: var(--text-primary);
}
html[data-theme="light"] .comment-form input::placeholder {
  color: var(--text-dim);
}

/* ============================================================
   THEME TOGGLE — the cat switch (navbar)
   Dark = sleeping cat + moon · Light = awake cat + sun
   ============================================================ */
.theme-toggle {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-secondary);
}
.tt-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  display: block;
  background: linear-gradient(135deg, #232c4d 0%, #141a33 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.tt-sun, .tt-moon {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-sun { left: 4px; color: #ffd873; }
.tt-moon { right: 4px; color: #b9c6f2; }
.tt-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.tt-cat { width: 15px; height: 15px; color: #33384a; }
.tt-cat .tt-ear, .tt-cat .tt-head, .tt-cat .tt-whisker { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tt-cat .tt-ear { transform-box: fill-box; transform-origin: center; transition: transform .25s ease; }
.tt-cat .tt-eye-open, .tt-cat .tt-eye-closed { fill: currentColor; stroke: none; }
.tt-zzz {
  position: absolute;
  top: -11px;
  left: 10px;
  font-size: 7px;
  font-weight: 800;
  color: #cfe0ff;
  line-height: 1;
  letter-spacing: 1px;
  animation: tt-z-float 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tt-z-float {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-2.5px); opacity: 1; }
}

/* Dark (default): sleeping cat — closed eyes, zzz, moon visible, knob left. */
.tt-eye-open { display: none; }
.tt-eye-closed { display: block; }
.tt-sun { opacity: 0; transform: translateY(-50%) rotate(-90deg) scale(.6); }
.tt-moon { opacity: 1; transform: translateY(-50%) rotate(0) scale(1); }

/* Light: awake cat — open eyes, no zzz, sun visible, knob right. */
html[data-theme="light"] .tt-eye-open { display: block; }
html[data-theme="light"] .tt-eye-closed { display: none; }
html[data-theme="light"] .tt-zzz { display: none; }
html[data-theme="light"] .tt-track { background: linear-gradient(135deg, #ffd98a 0%, #ffb85c 100%); border-color: rgba(255, 255, 255, 0.65); box-shadow: inset 0 1px 3px rgba(180, 110, 20, 0.25); }
html[data-theme="light"] .tt-sun { opacity: 1; transform: translateY(-50%) rotate(0) scale(1); }
html[data-theme="light"] .tt-moon { opacity: 0; transform: translateY(-50%) rotate(90deg) scale(.6); }
html[data-theme="light"] .tt-knob { transform: translateX(22px); }

/* Playful details: ears twitch on hover, knob squishes on press. */
.theme-toggle:hover .tt-cat .tt-ear { transform: rotate(-6deg); }
.theme-toggle:hover .tt-cat .tt-ear + .tt-ear { transform: rotate(6deg); }
.theme-toggle:active .tt-knob { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transform: scale(.9); }
html[data-theme="light"] .theme-toggle:active .tt-knob { transform: translateX(22px) scale(.9); }

/* ============================================================
   CAT PAW CURSOR — desktop mouse only
   ============================================================ */

.schedule-section { margin: 34px 0 8px; }

/* ---------- Day chips (horizontal row) ---------- */
.schedule-days {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 14px;
  justify-content: flex-end;
}
.schedule-day {
  position: relative;
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.schedule-day:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.schedule-day:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
}
.schedule-day.active {
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-bright));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(235, 43, 82, 0.35);
}
.schedule-day.is-today::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 50%;
  transform: translateX(50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-yellow);
  box-shadow: 0 0 8px rgba(244, 189, 66, 0.8);
}
.schedule-day.active.is-today::before {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.schedule-day[data-tooltip]::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}
.schedule-day[data-tooltip]:hover::after,
.schedule-day[data-tooltip]:focus-visible::after {
  display: block;
  animation: tooltipIn 0.15s ease;
}
@keyframes tooltipIn {
  from { opacity: 0; transform: translateX(50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(50%) translateY(0); }
}

/* ---------- Panel: header + horizontal card track ---------- */
.schedule-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  overflow: hidden;
}
.sp-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.sp-day {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
}
.sp-date {
  font-size: 12.5px;
  color: var(--text-dim);
}
.schedule-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.schedule-card {
  flex: 0 0 140px;
  scroll-snap-align: start;
  width: 140px;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.schedule-card:hover { transform: translateY(-3px); }
.sc-poster {
  position: relative;
  display: block;
  width: 140px;
  height: 210px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.sc-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-time {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: rgba(15, 17, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 3px 9px;
  backdrop-filter: blur(4px);
}
.sc-info {
  display: block;
  padding: 8px 2px 0;
}
.sc-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-sub {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-empty {
  flex: 1;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13.5px;
}

/* Soft switch between days */
.schedule-panel.fade-in { animation: scheduleFade 0.3s ease; }
@keyframes scheduleFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .schedule-days { justify-content: flex-start; gap: 6px; }
  .schedule-day {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px;
    font-size: 11px;
    text-align: center;
  }
  .schedule-track { scroll-snap-type: x mandatory; }
}

/* ============================================================
   CAST MATCH PAGE (/cast-match)
   Pick two or more actors and see the titles they ALL appear in.
   Reuses the listing grid (.results-track / .movie-card) and the
   page-search tokens so it sits naturally next to the rest of the site.
   ============================================================ */

.cast-page { padding-bottom: 40px; }

/* ---- Hero ---- */
.cast-hero { padding: 40px 0 4px; max-width: 720px; }
.cast-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 12px;
  border: 1px solid rgba(235, 43, 82, 0.35);
  border-radius: 999px;
  color: var(--accent-red-bright);
  background: rgba(235, 43, 82, 0.1);
  font-size: 11.5px;
  font-weight: 700;
}
.cast-hero h1 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.5;
}
.cast-sub { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 2; }

/* ---- Picker ---- */
.cast-picker { position: relative; max-width: 720px; margin: 22px 0 8px; }

.cast-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-dim);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cast-search:focus-within {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(235, 43, 82, 0.15);
}
.cast-search svg { width: 18px; height: 18px; flex: none; }
.cast-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
}
.cast-search input::placeholder { color: var(--text-dim); }
.cast-search-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.cast-search-clear:hover { color: #fff; background: rgba(235, 43, 82, 0.3); }
.cast-search-clear svg { width: 14px; height: 14px; }

/* ---- Suggestions dropdown ---- */
.cast-suggest {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  max-height: 360px;
  overflow-y: auto;
  animation: castSuggestIn 0.16s ease;
}
@keyframes castSuggestIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cast-suggest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  text-align: right;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cast-suggest-row:hover,
.cast-suggest-row.is-active { background: rgba(235, 43, 82, 0.14); }
.cast-suggest-row[disabled] { opacity: 0.55; cursor: default; }
.cast-suggest-photo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-dark);
}
.cast-suggest-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cast-suggest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cast-suggest-name {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cast-suggest-meta {
  color: var(--text-dim);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cast-suggest-add {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--accent-red-bright);
  background: rgba(235, 43, 82, 0.14);
  font-size: 11px;
  font-weight: 700;
}
.cast-suggest-add svg { width: 15px; height: 15px; }
.cast-suggest-row.is-added .cast-suggest-add { color: var(--accent-green); background: rgba(53, 201, 143, 0.14); }
.cast-suggest-empty { padding: 16px 14px 18px; color: var(--text-dim); font-size: 12.5px; }

/* ---- Selected actor chips ---- */
.cast-selected { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cast-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  animation: castChipIn 0.2s ease;
}
@keyframes castChipIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.cast-chip-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--surface-dark);
}
.cast-chip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cast-chip-name { color: #fff; font-size: 12.5px; font-weight: 600; }
.cast-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.cast-chip-remove:hover { color: #fff; background: rgba(235, 43, 82, 0.32); }
.cast-chip-remove svg { width: 13px; height: 13px; }

.cast-hint { margin: 14px 0 0; color: var(--text-dim); font-size: 12.5px; }

/* ---- Quick picks ---- */
.cast-quick { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cast-quick-label { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.cast-quick-items { display: flex; flex-wrap: wrap; gap: 8px; }
.cast-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cast-quick-chip:hover { border-color: var(--accent-red); color: #fff; transform: translateY(-1px); }
.cast-quick-photo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--surface-dark);
}
.cast-quick-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Results ---- */
.cast-results { margin-top: 34px; }
.cast-results-head { margin-bottom: 6px; }
.cast-results-head h2 { margin: 0 0 6px; color: #fff; font-size: 18px; font-weight: 800; }

.cast-empty {
  margin: 46px auto 60px;
  max-width: 420px;
  text-align: center;
  color: var(--text-secondary);
  animation: castEmptyIn 0.24s ease;
}
@keyframes castEmptyIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cast-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(235, 43, 82, 0.12);
  color: var(--accent-red-bright);
}
.cast-empty-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cast-empty p { margin: 0 0 8px; color: #fff; font-size: 16px; font-weight: 800; }
.cast-empty > span:not(.cast-empty-icon) { font-size: 12.5px; line-height: 2; }

/* Search-page hero spacing tweak on the cast page bottom nav overlap */
@media (max-width: 768px) {
  .cast-hero { padding: 26px 0 2px; }
  .cast-hero h1 { font-size: 21px; }
  .cast-sub { font-size: 12.5px; }
  .cast-search { height: 46px; }
  .cast-results { margin-top: 24px; }
  .cast-empty { margin: 34px auto 40px; }
  .cast-page { padding-bottom: 90px; }
}


/* ============================================================
   QUICK ACTIONS ON MOBILE (long-press radial menu)

   Press and hold a movie card → a half-circle of actions opens around the
   poster (see radial-actions.js). The layer is only ever shown by the
   script, and only on the mobile layout.
   ============================================================ */
.ra-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.ra-layer[hidden] { display: none; }
.ra-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 11, 0.6);
  animation: raFade 0.16s ease-out both;
}
@keyframes raFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ra-menu {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.ra-menu[hidden] { display: none; }
.ra-btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  background: rgba(22, 23, 30, 0.96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ra-layer.ra-open .ra-btn { animation: raPop 0.2s ease-out both; }
@keyframes raPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ra-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ra-btn:active { background: rgba(235, 43, 82, 0.9); border-color: rgba(235, 43, 82, 0.9); }
.ra-btn:disabled { opacity: 0.6; }
/* Already saved / liked / rated → accent, so the action reads as a toggle. */
.ra-btn.is-on {
  color: var(--accent-red-bright);
  border-color: rgba(235, 43, 82, 0.75);
  background: rgba(235, 43, 82, 0.16);
}
.ra-btn[data-action="like"].is-on svg { fill: currentColor; }
.ra-btn[data-action="bookmark"].is-on svg { fill: currentColor; }
.ra-btn[data-action="rating"].is-on svg { fill: currentColor; }

/* Rating scale (tapping ⭐ swaps the fan for this) */
.ra-rating {
  position: fixed;
  left: var(--ra-x, 50%);
  top: var(--ra-y, 50%);
  z-index: 2;
  width: min(88vw, 360px);
  transform: translate(-50%, -50%);
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(20, 21, 27, 0.97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: raFade 0.16s ease-out both;
}
.ra-rating[hidden] { display: none; }
.ra-rating-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.ra-rate-clear {
  padding: 3px 10px;
  border: 1px solid rgba(235, 43, 82, 0.5);
  border-radius: 999px;
  color: var(--accent-red-bright);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ra-rate-clear[hidden] { display: none; }
.ra-rating-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ra-rate {
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #e9e9ef;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ra-rate.is-on {
  color: #fff;
  border-color: var(--accent-red);
  background: var(--accent-red);
}

/* The pressed card: no text selection / callout while the finger is down,
   and a ring that marks which item the menu belongs to (the scrim above
   stays a light dim, so the card is still readable through it). */
.ra-pressing, .ra-active {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ra-active {
  border-color: rgba(235, 43, 82, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   ONLINE PLAYER MODAL (JW Player)
   The play buttons on a film page open this overlay; the player
   library itself is loaded on first open.
   ============================================================ */
body.player-open { overflow: hidden; }
.player-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.player-modal.is-open { opacity: 1; visibility: visible; }
.player-modal-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(6, 7, 10, 0.82);
  cursor: pointer;
}
.player-modal-dialog {
  position: relative;
  width: min(1100px, 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-dark);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(10px);
  transition: transform 0.2s;
}
.player-modal.is-open .player-modal-dialog { transform: none; }
.player-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.player-modal-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.player-modal-close {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: 0.15s;
}
.player-modal-close:hover { color: #fff; border-color: rgba(235, 43, 82, 0.6); }
.player-modal-close svg { width: 18px; height: 18px; }
.player-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
/* The engine swaps the frame element for its own (keeping the id, dropping the
   class), so the layout it needs is pinned to the id as well. */
#player-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player-frame > div, .player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.player-note {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
}
.player-note[hidden] { display: none; }
/* Compatibility hint — an MKV opened in Firefox. A warning strip under the
   frame: dismissible, and only ever revealed for that exact combination. */
.player-compat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 16px;
  border-top: 1px solid rgba(232, 199, 102, 0.28);
  background: rgba(232, 199, 102, 0.08);
  color: #e8c766;
  font-size: 12.5px;
  line-height: 1.8;
}
.player-compat[hidden] { display: none; }
.player-compat > svg { width: 17px; height: 17px; flex: none; }
.player-compat-text { flex: 1 1 auto; }
.player-compat-close {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 199, 102, 0.35);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: 0.15s;
}
.player-compat-close:hover { background: rgba(232, 199, 102, 0.16); }
.player-compat-close svg { width: 14px; height: 14px; }
/* A tall phone screen fits the dialog, so the player goes full screen. */
@media (max-width: 700px) {
  .player-modal { padding: 0; }
  .player-modal-dialog {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
  .player-modal-head { border-bottom: 0; }
}

/* The play buttons vanish when no player is available (a series page, or
   playback not configured): hidden with a class, because their layout is set
   with display:flex and the `hidden` attribute would lose to it. */
.poster-play.is-hidden, .hero-actions .btn-primary.is-hidden { display: none; }

/* The per-file play button on a download row: same box as the download button,
   in the accent colour so the two actions stay tellable apart. */
.dl-play {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 43, 82, 0.55);
  border-radius: 7px;
  color: var(--accent-red, #eb2b52);
  background: transparent;
  cursor: pointer;
  transition: 0.2s;
}
.dl-play:hover { color: #fff; border-color: var(--accent-red, #eb2b52); background: var(--accent-red, #eb2b52); }
.dl-play svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.dl-play.is-hidden { display: none; }
/* A file with a stored position: the button carries on from there. */
.dl-play.is-resume { border-color: rgba(255, 255, 255, 0.42); }

/* The row the «ادامه تماشا» link points at (?continue=<file id>), highlighted
   so it is found without opening every season of a long series. */
.dl-item.is-resuming {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 1px rgba(235, 43, 82, 0.3);
}

/* ============================================================
   CINEMA PLAYER — CatMovie's own player UI
   The streaming engine plays underneath as nothing more than a
   <video>: its own chrome is hidden here, and every visible control
   is the `.cp-*` markup built by movie-detail.js. Nothing below is a
   stock player skin — the layout, states and motion are the site's.
   ============================================================ */

/* --- the engine: media only, no chrome of its own --- */
#player-frame {
  background: #05060a;
}
#player-frame video {
  outline: none;
}
#player-frame .jw-controls,
#player-frame .jw-controls-backdrop,
#player-frame .jw-display,
#player-frame .jw-title,
#player-frame .jw-shortcuts-tooltip,
#player-frame .jw-float-bar,
#player-frame .jw-contract-trigger,
#player-frame .jw-top,
#player-frame .jw-nextup-container,
#player-frame .jw-error-msg {
  display: none !important;
}
#player-frame,
#player-frame * {
  font-family: "Vazirmatn", Tahoma, sans-serif;
}

/* --- captions: the engine renders them, the site dresses them --- */
/* Subtitles stay above the chrome, so a paused frame never dims them. */
#player-frame .jw-captions,
#player-frame .jw-text-track-container {
  z-index: 5;
}
#player-frame .jw-captions,
#player-frame .jw-text-track-container,
#player-frame .jw-text-track-display,
#player-frame .jw-text-track-cue,
#player-frame .jw-captions-window,
#player-frame .jw-captions-text {
  direction: rtl !important;
  unicode-bidi: plaintext;
  text-align: center;
  line-height: 1.9;
}
#player-frame .jw-text-track-cue,
#player-frame .jw-captions-window {
  border-radius: 8px;
  padding: 0.15em 0.5em;
}

/* ============================================================
   the chrome
   ============================================================ */
.cp-controls {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: #fff;
  --cp-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
/* Watching, untouched: the chrome steps aside but the film stays clickable so
   any movement brings it back. */
.cp-controls.is-idle { cursor: none; }
.cp-controls.is-idle .cp-bar,
.cp-controls.is-idle .cp-top {
  opacity: 0;
  pointer-events: none;
}

/* --- film title and close, which also serve as the fullscreen header --- */
.cp-top {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 36px;
  background: linear-gradient(180deg, rgba(5, 6, 10, 0.7), rgba(5, 6, 10, 0));
  transition: opacity 0.28s ease;
}
.cp-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- the bar --- */
.cp-bar {
  position: absolute;
  inset: auto 0 0 0;
  direction: rtl;
  padding: 32px 16px 14px;
  background: linear-gradient(0deg, rgba(5, 6, 10, 0.8), rgba(5, 6, 10, 0));
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.cp-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cp-gap { flex: 1 1 auto; }

/* --- progress: always left-to-right, however the page reads --- */
.cp-track {
  position: relative;
  direction: ltr;
  height: 4px;
  margin: 0 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: height 0.16s ease;
}
.cp-track-hit { position: absolute; inset: -12px 0; }
.cp-track:hover,
.cp-controls.is-scrubbing .cp-track { height: 6px; }
.cp-buffer,
.cp-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}
.cp-buffer { background: rgba(255, 255, 255, 0.26); }
.cp-played { background: var(--accent-red, #eb2b52); }
.cp-knob {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(235, 43, 82, 0.22);
  transform: translateY(-50%) scale(0.4);
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.cp-track:hover .cp-knob,
.cp-controls.is-scrubbing .cp-knob { opacity: 1; transform: translateY(-50%) scale(1); }
.cp-tip {
  position: absolute;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(10, 11, 15, 0.92);
  font-size: 11px;
}
.cp-tip[hidden] { display: none; }

/* --- controls --- */
.cp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.cp-icon:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.cp-icon:active { transform: scale(0.94); }
.cp-icon:focus-visible { outline: 2px solid rgba(80, 198, 212, 0.65); outline-offset: -2px; }
.cp-icon.is-off { color: rgba(255, 255, 255, 0.42); }
.cp-svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cp-play { width: 46px; height: 46px; }
.cp-play .cp-svg { width: 26px; height: 26px; }
.cp-close .cp-svg { width: 18px; height: 18px; }
/* One button carries both states; the root class decides which shows. */
.cp-icon-pause,
.cp-icon-muted,
.cp-icon-exit { display: none; }
.cp-controls.is-playing .cp-icon-play { display: none; }
.cp-controls.is-playing .cp-icon-pause,
.cp-controls.is-muted .cp-icon-muted,
.cp-controls.is-full .cp-icon-exit { display: inline-flex; }
.cp-controls.is-muted .cp-icon-sound,
.cp-controls.is-full .cp-icon-full { display: none; }
.cp-icon[hidden] { display: none; }

/* --- volume --- */
.cp-volume { display: flex; align-items: center; }
.cp-vol {
  position: relative;
  direction: ltr;
  width: 0;
  height: 4px;
  margin-inline-end: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: width 0.2s ease;
}
.cp-volume:hover .cp-vol,
.cp-vol:focus-visible { width: 72px; }
.cp-vol > .cp-vol-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.86);
}
.cp-vol:hover .cp-knob { opacity: 1; transform: translateY(-50%) scale(1); }

/* --- time --- */
.cp-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
.cp-time b { font-weight: 600; color: #fff; }
.cp-time i { font-style: normal; color: rgba(255, 255, 255, 0.32); }

/* --- the pause overlay: a calm, cinematic pause, not a menu --- */
.cp-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(62% 62% at 50% 50%, rgba(5, 6, 10, 0.28), rgba(5, 6, 10, 0.68));
  animation: cp-fade 0.24s ease both;
}
.cp-veil[hidden] { display: none; }
.cp-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(12, 13, 18, 0.5);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--cp-shadow);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.cp-hero .cp-svg { width: 30px; height: 30px; margin-inline-start: 2px; }
.cp-hero:hover { transform: scale(1.05); background: rgba(235, 43, 82, 0.92); border-color: transparent; }
.cp-hero:focus-visible { outline: 2px solid rgba(80, 198, 212, 0.7); outline-offset: 3px; }

/* --- loading --- */
.cp-status {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  background: rgba(5, 6, 10, 0.45);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}
.cp-status[hidden] { display: none; }
.cp-spinner {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent-red, #eb2b52);
  border-radius: 50%;
  animation: cp-spin 0.9s linear infinite;
}

/* --- a failed stream, in the site's own language --- */
.cp-error {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 10, 0.88);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cp-error[hidden] { display: none; }
.cp-error-card {
  width: min(360px, 100%);
  padding: 22px 20px 18px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2, #16171d);
  box-shadow: var(--cp-shadow);
}
.cp-error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: var(--accent-red, #eb2b52);
  background: rgba(235, 43, 82, 0.12);
}
.cp-error-badge .cp-svg { width: 22px; height: 22px; }
.cp-error-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cp-error-text { margin: 0 0 16px; font-size: 12.5px; line-height: 1.9; color: var(--text-secondary); }
.cp-error-actions { display: flex; gap: 8px; justify-content: center; }
.cp-btn {
  padding: 9px 14px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.16s;
}
.cp-btn:hover { border-color: var(--accent-cyan, #50c6d4); color: #fff; }
.cp-btn--primary { border-color: transparent; background: var(--accent-red, #eb2b52); color: #fff; }
.cp-btn--primary:hover { background: var(--accent-red-bright, #f5456a); }

/* --- settings popup: one row per setting, each opening its own list --- */
.cp-menu {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 76px;
  z-index: 7;
  width: 244px;
  max-width: calc(100% - 32px);
  max-height: min(58vh, 380px);
  overflow-y: auto;
  direction: rtl;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(13, 14, 19, 0.96);
  box-shadow: var(--cp-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: cp-rise 0.18s ease both;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.cp-menu[hidden] { display: none; }
.cp-menu-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 14, 19, 0.98);
}
.cp-menu-title { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.cp-menu-back { width: 32px; height: 32px; }
.cp-menu-back[hidden] { display: none; }
.cp-menu-back .cp-svg { width: 18px; height: 18px; }
.cp-menu-body { padding: 6px; }
.cp-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  text-align: start;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.cp-menu-row:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.cp-menu-row.is-active { color: #fff; background: rgba(235, 43, 82, 0.14); }
.cp-menu-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp-menu-value { font-size: 11.5px; color: var(--text-dim); }
.cp-menu-mark { display: inline-flex; width: 16px; color: var(--text-dim); }
.cp-menu-row.is-active .cp-menu-mark { color: var(--accent-red, #eb2b52); }
.cp-menu-mark .cp-svg { width: 16px; height: 16px; }

/* --- ظاهر زیرنویس: a panel of controls instead of a list of choices ----
   The subtitle look is several settings at once (size, colour, background,
   box, edge, type), so they sit together under a live sample of the captions
   the film is about to show. */
.cp-cc-preview {
  /* The panel is longer than the popup, so the sample sticks under the menu
     head: it stays visible while the controls below it are dragged. An opaque
     base keeps the rows scrolling underneath from showing through. */
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 6px 6px 4px;
  padding: 16px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: rgba(13, 14, 19, 0.97);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  text-align: center;
  transition: background-color 0.15s ease;
}
.cp-cc-preview-line {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  line-height: 1.9;
  direction: rtl;
  transition: color 0.15s ease, background 0.15s ease;
}
.cp-menu-group { padding: 8px 6px; }
.cp-menu-group + .cp-menu-group { border-top: 1px solid var(--border); }
.cp-menu-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px 8px;
}
.cp-menu-group-title { flex: 1 1 auto; font-size: 11.5px; font-weight: 700; color: var(--text-primary); }
.cp-menu-group-value { font-size: 11px; color: var(--text-dim); }
.cp-menu-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-ctl {
  min-width: 42px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: 0.15s ease;
}
.cp-ctl:hover { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.cp-ctl.is-active { color: #fff; border-color: var(--accent-red, #eb2b52); background: rgba(235, 43, 82, 0.16); }
.cp-ctl--swatch {
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--cp-swatch, #000);
  border-color: rgba(255, 255, 255, 0.22);
}
.cp-ctl--swatch.is-active { box-shadow: 0 0 0 2px rgba(235, 43, 82, 0.8); }
.cp-ctl--swatch .cp-svg { width: 14px; height: 14px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)); }
/* «بدون» — the colour is off, so the swatch shows through instead of painting. */
.cp-ctl--swatch.is-none {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 8px);
}
.cp-range {
  display: block;
  width: calc(100% - 4px);
  height: 4px;
  margin: 6px 2px 2px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
.cp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent-red, #eb2b52);
}
.cp-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent-red, #eb2b52);
}

/* --- brief feedback (a seek, a subtitle) --- */
.cp-toast {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 7;
  transform: translateX(-50%);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(13, 14, 19, 0.92);
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  animation: cp-fade 0.18s ease both;
}
.cp-toast[hidden] { display: none; }
.cp-file { display: none; }

@keyframes cp-spin { to { transform: rotate(360deg); } }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- phones and touch screens: bigger targets, no hover-only affordances --- */
@media (max-width: 640px), (pointer: coarse) {
  .cp-top { padding: 10px 12px 28px; }
  .cp-bar { padding: 28px 10px 10px; }
  /* Six icons and the clock have to fit a phone: the total length goes and
     every control becomes a comfortable touch target. */
  .cp-icon { width: 46px; height: 46px; }
  .cp-play { width: 48px; height: 48px; }
  .cp-volume .cp-vol { display: none; }
  .cp-icon:hover { background: transparent; }
  .cp-time { margin: 0 2px; font-size: 11.5px; }
  .cp-time [data-cp-duration],
  .cp-time i { display: none; }
  .cp-menu-row { min-height: 44px; }
  .cp-hero { width: 64px; height: 64px; }
  .cp-track { height: 5px; }
  .cp-menu {
    inset-inline: 10px;
    bottom: 68px;
    width: auto;
    max-height: 46vh;
    border-radius: 16px;
  }
  .cp-toast { bottom: 80px; }
}

/* ============================================================
   FIRST-LOGIN PICKER (/onboarding)
   Full screen on purpose: the visitor just logged in and the
   only thing on the page is «pick what you like». The header,
   footer and mobile tabbar are hidden by the page class, and
   everything the visitor needs (chips, grid, save bar) lives in
   one scroll column.
   ============================================================ */
.page-onboarding .site-header,
.page-onboarding .site-footer,
.page-onboarding .tabbar { display: none; }
.page-onboarding main { padding-bottom: 0; }

.onb {
  max-width: 1440px;
  margin: 0 auto;
  padding: 34px 18px 130px;
}
.onb-head { text-align: center; max-width: 720px; margin: 0 auto; }
.onb-kicker {
  margin: 0 0 6px;
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.onb-title {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  color: var(--text-primary);
}
.onb-lead {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 2;
}

.onb-login {
  max-width: 520px;
  margin: 60px auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  color: var(--text-secondary);
  font-size: 13.5px;
}
.page-onboarding .onb-login[hidden] { display: none; }
.onb-login-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent-red, #eb2b52);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.onb-status {
  margin: 40px auto;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13.5px;
}
.page-onboarding .onb-status[hidden] { display: none; }

/* The chip row sticks under the (hidden) header area so the genre the visitor
   is browsing stays reachable while the grid scrolls. */
.onb-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 22px -18px 16px;
  padding: 10px 18px;
  background: linear-gradient(rgba(9, 10, 13, 0.96), rgba(9, 10, 13, 0.86));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .onb-toolbar { background: linear-gradient(rgba(238, 241, 246, 0.96), rgba(238, 241, 246, 0.86)); }
.onb-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.onb-chips::-webkit-scrollbar { display: none; }
.onb-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.18s;
}
.onb-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.onb-chip.active {
  color: #06212a;
  border-color: var(--accent-cyan);
  background: var(--accent-cyan);
}
.onb-chip-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 10.5px;
  font-weight: 700;
}
.onb-chip.active .onb-chip-count { background: rgba(0, 0, 0, 0.18); }

.onb-pick-all {
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.onb-pick-all:hover { color: var(--text-primary); border-color: var(--accent-cyan); }

.onb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 16px;
}
.onb-card {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.onb-card:hover { transform: translateY(-3px); border-color: rgba(80, 198, 212, 0.5); }
.onb-card .movie-poster { display: block; }
.onb-card .movie-info { display: block; }
.onb-card .movie-title,
.onb-card .movie-genre { display: block; }
.onb-check {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(9, 10, 13, 0.55);
  color: transparent;
  transition: 0.18s;
}
.onb-check svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.onb-card[aria-pressed="true"] {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(80, 198, 212, 0.35), 0 12px 26px rgba(0, 0, 0, 0.35);
}
.onb-card[aria-pressed="true"] .onb-check {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #06212a;
}
.onb-empty { margin: 40px 0; text-align: center; color: var(--text-secondary); font-size: 13px; }
.page-onboarding .onb-empty[hidden] { display: none; }

/* Sticky save bar: the counter never scrolls away, so «چندتا انتخاب کردم»
   is always answered on screen. */
.onb-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: rgba(9, 10, 13, 0.94);
  backdrop-filter: blur(10px);
}
[data-theme="light"] .onb-bar { background: rgba(238, 241, 246, 0.94); }
.page-onboarding .onb-bar[hidden] { display: none; }
.onb-count { color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.onb-actions { display: flex; align-items: center; gap: 10px; }
.onb-skip,
.onb-save {
  padding: 11px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.18s;
}
.onb-skip {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
}
.onb-skip:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.onb-save {
  border: 1px solid transparent;
  background: var(--accent-red, #eb2b52);
  color: #fff;
}
.onb-save:hover:not(:disabled) { filter: brightness(1.08); }
.onb-save:disabled,
.onb-skip:disabled { opacity: 0.5; cursor: not-allowed; }

.onb-error {
  position: fixed;
  inset-inline: 18px;
  bottom: 84px;
  z-index: 31;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid rgba(235, 43, 82, 0.5);
  border-radius: var(--radius);
  background: rgba(40, 10, 16, 0.96);
  color: #ffd9e1;
  font-size: 12.5px;
  text-align: center;
}
.page-onboarding .onb-error[hidden] { display: none; }

@media (max-width: 640px) {
  .onb { padding: 22px 12px 128px; }
  .onb-title { font-size: 21px; }
  .onb-lead { font-size: 12.5px; }
  .onb-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 11px; }
  .onb-bar { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .onb-actions { gap: 8px; }
  .onb-skip, .onb-save { padding: 10px 16px; font-size: 12.5px; }
  .onb-count { font-size: 12px; }
}

/* ============================================================
   «شب» — recommendation from a sentence
   Dark, cinematic and quiet: one input, a few real titles.
   ============================================================ */
.page-night .night {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* The stage the heap falls into: a full screen under the header, so the
     pile has room to be a pile. night.js may grow it when the shelf needs
     more rows than fit. */
  height: calc(100dvh - 74px);
  min-height: 540px;
  margin: 0 auto;
  overflow: hidden;
}

/* The words and the input float over the heap. The layer itself ignores the
   pointer, so a click anywhere that is not the form reaches the tokens
   behind it. */
.night-ui {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 0;
  pointer-events: none;
}
.night-form { pointer-events: auto; }

/* The same shelf, for screen readers. */
.night-sr, .night-sr li { margin: 0; padding: 0; }
.night-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The only decoration: a soft cool glow behind the headline, like a screen
   left on in a dark room. Pointer-events off, so it never eats a click. */
.night-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  width: min(900px, 96%);
  height: 380px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(80, 198, 212, 0.16), transparent 72%),
    radial-gradient(closest-side at 70% 40%, rgba(235, 43, 82, 0.12), transparent 70%);
  filter: blur(6px);
}

.night-head { text-align: center; margin-bottom: 26px; }
.night-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.night-kicker span { color: var(--accent-cyan); font-size: 14px; line-height: 1; }
.night-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.5px;
}
.night-lead { margin: 0; color: var(--text-secondary); font-size: 13.5px; }

/* ---------- the one input ---------- */
.night-form {
  position: relative;
  margin: 26px auto 0;
  max-width: 820px;
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(28, 29, 38, 0.82), rgba(22, 23, 30, 0.9));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.night-form:focus-within {
  border-color: rgba(80, 198, 212, 0.45);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

.night-field { display: block; position: relative; }
.night-input {
  display: block;
  width: 100%;
  min-height: 62px;
  max-height: 180px;
  padding: 4px 2px 18px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 2;
  resize: none;
  outline: none;
}
.night-input::placeholder { color: var(--text-dim); }
.night-count {
  position: absolute;
  bottom: 4px;
  left: 2px;
  color: var(--text-dim);
  font-size: 10.5px;
  direction: ltr;
}

.night-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.night-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: 0.18s;
}
.night-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.night-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.night-submit svg { width: 15px; height: 15px; }

.night-hint { margin: 12px 2px 0; color: var(--text-dim); font-size: 11.5px; }

/* Switched off in the configuration: the server renders this panel instead of
   the form, so nothing on the page asks for anything. night.js also applies
   .is-off to the form when the API says the section is off (a cached page). */
.night-off .night-head { margin-bottom: 0; }
.night-off .night-lead { max-width: 560px; margin: 0 auto; line-height: 2; }
.night-form.is-off { opacity: 0.6; }
.night-form.is-off .night-submit { cursor: not-allowed; }

/* Not signed in: the same honest panel as the switched-off one, plus the way in.
   Its row is one centred button rather than the form's action bar, so it drops
   the divider above it. */
.night-login .night-head { margin-bottom: 22px; }
.night-login .night-lead { margin-bottom: 0; }
.night-login .night-row { justify-content: center; padding-top: 0; border-top: 0; }
.night-login .night-submit { text-decoration: none; }

/* ---------- state lines ---------- */
.night-status,
.night-note,
.night-empty {
  max-width: 720px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 12.5px;
}
.night-status { color: var(--text-secondary); }
.night-note { color: var(--accent-cyan); }
.night-empty { color: var(--text-secondary); line-height: 2; }
.page-night .night-status[hidden],
.page-night .night-note[hidden],
.page-night .night-empty[hidden] { display: none; }

/* ---------- the heap and the shelf ----------
   The ask-jev-series heap, in CatMovie's clothes. Every candidate the engine
   weighed is a token: it falls into the stage, collides and piles up as a
   small dimmed poster sliver. The titles that fit are lifted out of the pile,
   fly to their grid cell and grow into the ordinary card, while the rest of
   the heap dims behind them. night.js drives it; night-heap.js moves it.

   --arrived is the whole trick: 0 in the pile (a 26x38 sliver), 1 in the
   shelf (a 104x156 card). It is transitioned, so the growth reads as the card
   opening up rather than a size snap, and it also reveals the label. */
.night-heap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* The one place a heap size is written down: night.js reads these back for
     the simulation, so a breakpoint moves the physics with the pixels — and a
     phone gets a smaller sliver, a smaller card and a narrower cell, which is
     what keeps the shelf inside the stage. */
  --token-w: 26px;
  --token-h: 38px;
  --card-w: 104px;
  --card-h: 156px;
  --cell-w: 138px;
  --cell-h: 200px;
}
.night-token {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--token-w) + (var(--card-w) - var(--token-w)) * var(--arrived, 0));
  height: calc(var(--token-h) + (var(--card-h) - var(--token-h)) * var(--arrived, 0));
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  z-index: 1;
  transition:
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s;
}
/* Lifted into the shelf: it is the answer now, so it is clickable and on top. */
.night-token.is-up { z-index: 20; pointer-events: auto; }
/* The pile the page opens with: anonymous slivers, no title and no link, so
   nothing is claimed before the visitor has asked anything. It recedes a
   little further once a shelf has risen out of it (see .is-dim below). */
.night-token-rest { opacity: 0.5; }
.night-token-rest .night-token-art {
  background: linear-gradient(160deg, hsla(var(--hue, 264), 60%, 34%, 0.8), rgba(24, 21, 36, 0.88));
}
.night-token-rest .night-token-glyph { font-size: 10px; color: rgba(214, 208, 255, 0.55); }
.night-token.is-dim { opacity: 0.38; }

.night-token-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(4px + 8px * var(--arrived, 0));
  background: linear-gradient(160deg, hsl(var(--hue, 264), 55%, 30%), rgba(26, 22, 40, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: border-color 0.26s, box-shadow 0.26s;
}
.night-token-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.66;
  transition: opacity 0.26s;
}
.night-token-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(220, 214, 255, 0.7);
  font-size: calc(11px + 13px * var(--arrived, 0));
}
.night-token.is-up .night-token-art {
  border-color: rgba(80, 198, 212, 0.4);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}
.night-token.is-up .night-token-art img { opacity: 1; }

.night-token-label {
  position: absolute;
  top: 100%;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 4px);
  transform: translateX(-50%);
  margin-top: 7px;
  text-align: center;
  pointer-events: none;
  opacity: var(--arrived, 0);
  transition: opacity 0.26s;
}
.night-token-name {
  display: block;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.night-token-meta {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 9.5px;
}
.night-token-why {
  display: block;
  margin-top: 3px;
  color: var(--accent-cyan);
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.night-token-match {
  position: absolute;
  top: calc(-3px + 10px * var(--arrived, 0));
  right: calc(-3px + 5px * var(--arrived, 0));
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(80, 198, 212, 0.92);
  color: #06212a;
  font-size: 9.5px;
  font-weight: 800;
  direction: ltr;
  opacity: var(--arrived, 0);
  transition: opacity 0.26s;
}

@keyframes night-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The heap still forms, it just does not fly: night.js runs the simulation
     forward and paints the settled frame. */
  .night-token,
  .night-token-art,
  .night-token-art img,
  .night-token-label,
  .night-token-match { transition: none; }
  .night-submit:hover:not(:disabled) { transform: none; }
}

/* Phones: a smaller sliver, a smaller card and a narrower cell, so the shelf
   stays inside the stage and clear of the input card instead of running off
   the side or under the form. */
@media (max-width: 760px) {
  .night-heap {
    --token-w: 20px;
    --token-h: 30px;
    --card-w: 104px;
    --card-h: 152px;
    --cell-w: 120px;
    --cell-h: 186px;
  }
}

@media (max-width: 420px) {
  .night-heap {
    --token-w: 18px;
    --token-h: 26px;
    --card-w: 92px;
    --card-h: 136px;
    --cell-w: 106px;
    --cell-h: 168px;
  }
}

@media (max-width: 640px) {
  .page-night .night { min-height: calc(100dvh - 74px); }
  .night-ui { padding: 6px 12px 0; }
  .night-form { padding: 12px 12px 10px; border-radius: 14px; }
  .night-row { flex-direction: column; align-items: stretch; }
  .night-submit { justify-content: center; }
  .night-token-name { font-size: 10.5px; }
  .night-token-meta, .night-token-why, .night-token-match { font-size: 9px; }
}

/* ============================================================
   Help pages — «سوالات متداول» (/faq) و «آموزش‌ها» (/guides)
   The two pages share one layout: a hero with jump chips, then
   stacked cards. FAQ items are native <details> so they work with
   no JavaScript (and read as a plain list for crawlers).
   ============================================================ */

.help { padding: 34px 0 60px; }
.help-hero { margin-bottom: 30px; }
.help-kicker {
  margin: 0 0 8px;
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.help-title {
  margin: 0 0 10px;
  font-size: clamp(25px, 3.4vw, 38px);
  font-weight: 900;
  line-height: 1.35;
}
.help-lead {
  margin: 0;
  max-width: 74ch;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 2.15;
}
.help-jump { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.help-jump a {
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.help-jump a:hover {
  border-color: rgba(80, 198, 212, 0.5);
  background: var(--surface-2);
  color: var(--text-primary);
}

/* ---------- FAQ: stacked questions ---------- */
.help-group { margin-top: 34px; scroll-margin-top: 96px; }
.help-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 800;
}
.help-group-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(var(--accent-red-bright), var(--accent-red-dark));
}
.faq-list { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.faq-item[open] { border-color: var(--border-strong); background: var(--surface-2); }
.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.9;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: rgba(255, 255, 255, 0.035); }
.faq-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(80, 198, 212, 0.28);
  border-radius: 9px;
  background: rgba(80, 198, 212, 0.1);
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 700;
}
.faq-q-text { flex: 1; }
.faq-chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--accent-cyan); }
.faq-a {
  margin: 0 16px 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.faq-a p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 2.2;
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--text-primary); font-weight: 700; }
.faq-steps {
  display: grid;
  gap: 9px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: faq-step;
}
.faq-steps li {
  position: relative;
  padding-inline-start: 32px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 2.1;
  counter-increment: faq-step;
}
.faq-steps li::before {
  content: counter(faq-step);
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-dark);
  color: var(--accent-cyan);
  font-size: 10.5px;
  font-weight: 700;
}
.faq-tip {
  /* Block, not flex: the tip is a sentence with bold words and links inside
     it, and flex would turn each of those runs into its own box. */
  display: block;
  padding: 11px 13px;
  border: 1px solid rgba(80, 198, 212, 0.22);
  border-radius: 10px;
  background: rgba(80, 198, 212, 0.07);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 2.1;
}
.faq-tip b { color: var(--accent-cyan); }
.faq-tip.is-warn {
  border-color: rgba(244, 189, 66, 0.24);
  background: rgba(244, 189, 66, 0.07);
}
.faq-tip.is-warn b { color: var(--accent-yellow); }
.faq-tip a { color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px; }
.faq-a a { color: var(--accent-cyan); }

.kbd {
  padding: 1px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-primary);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  direction: ltr;
  display: inline-block;
}

/* ---------- Tutorials: numbered cards ----------
   The names are help-* on purpose: .guide-card/.guide-head/.guide-note already
   belong to the parent-guide and cast components, and reusing them here would
   restyle those pages from this far down the sheet. */
.help-card {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  scroll-margin-top: 96px;
}
.help-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.help-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(235, 43, 82, 0.16), rgba(80, 198, 212, 0.12));
  color: var(--accent-red-bright);
}
.help-card-icon svg { width: 22px; height: 22px; }
.help-card-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.7; }
.help-card-meta { margin: 4px 0 0; color: var(--text-dim); font-size: 11.5px; }
.help-steps {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: help-step;
}
.help-steps li {
  position: relative;
  padding-inline-start: 38px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 2.1;
  counter-increment: help-step;
}
.help-steps li::before {
  content: counter(help-step);
  position: absolute;
  inset-inline-start: 0;
  top: 5px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-dark);
  color: var(--accent-cyan);
  font-size: 11.5px;
  font-weight: 700;
}
.help-steps strong { color: var(--text-primary); font-weight: 700; }
/* Block, not flex: these notes are sentences with bold words inside them. */
.help-note {
  display: block;
  margin: 15px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(80, 198, 212, 0.22);
  border-radius: 10px;
  background: rgba(80, 198, 212, 0.07);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 2.1;
}
.help-note b { color: var(--accent-cyan); }

/* ---------- Closing call to action ---------- */
.help-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding: 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
}
.help-cta h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.help-cta p { margin: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 2; }
.help-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.help-cta-btn {
  padding: 11px 20px;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--accent-red-bright), var(--accent-red-dark));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.help-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.help-cta-btn.is-quiet {
  border: 1px solid var(--border-strong);
  background: var(--surface-dark);
  color: var(--text-primary);
}

html[data-theme="light"] .faq-q:hover { background: rgba(0, 0, 0, 0.025); }
html[data-theme="light"] .help-jump a { background: #fff; }
html[data-theme="light"] .help-card-icon { background: linear-gradient(140deg, rgba(235, 43, 82, 0.12), rgba(80, 198, 212, 0.1)); }

@media (max-width: 700px) {
  .help { padding: 22px 0 40px; }
  .help-jump a { padding: 7px 12px; font-size: 12px; }
  .help-card { padding: 15px; }
  .help-card-icon { width: 40px; height: 40px; }
  .faq-q { padding: 13px 13px; font-size: 13.5px; }
  .faq-a { margin: 0 13px 13px; }
  .faq-num { width: 24px; height: 24px; }
  .help-cta { flex-direction: column; align-items: stretch; }
  .help-cta-actions { justify-content: stretch; }
  .help-cta-btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-chev, .help-cta-btn, .help-jump a { transition: none; }
  .help-cta-btn:hover { transform: none; }
}