/* =========================================================
   دنیای فیلم — style.css
   جهت: RTL · تم: اتاق پروژکشن (ink + نور آمبر)
   ========================================================= */

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ---------- TOKENS ---------- */
:root {
  --ink:        #0b0a0d;
  --ink-1:      #111016;
  --ink-2:      #17151d;
  --ink-3:      #201d29;
  --line:       rgba(244, 241, 236, .085);
  --line-2:     rgba(244, 241, 236, .18);

  --paper:      #f4f1ec;
  --dim:        #a8a2b2;
  --faint:      #6d6879;

  --beam:       #ffc247;
  --beam-hot:   #ff7a4d;
  --beam-soft:  rgba(255, 194, 71, .14);
  --beam-line:  rgba(255, 194, 71, .38);

  --good:       #5fd08a;
  --bad:        #ff6a6a;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  color-scheme: dark;

  --r-pill: 999px;
  --mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .55);
  --glow:     0 0 26px rgba(255, 194, 71, .30);

  --ease: cubic-bezier(.22, .8, .3, 1);
  --fast: .16s var(--ease);
  --mid:  .28s var(--ease);
  --slow: .6s var(--ease);

  --head-h: 62px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  background: var(--ink);
  color: var(--paper);
  direction: rtl;
  min-height: 100vh;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--beam); color: var(--ink); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink-1); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: #2e2939; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- TYPE ---------- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.3; }

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  color: var(--beam);
  margin-bottom: 10px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--beam), transparent);
  vertical-align: middle;
  margin-inline-end: 8px;
  border-radius: 2px;
}

/* ---------- ICONS ---------- */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}

/* ---------- LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: 20px;
}

.page { padding-block: 26px 60px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding-inline: 20px;
  border-radius: var(--r-pill);
  font-size: .87rem;
  font-weight: 700;
  white-space: nowrap;
  /* بدون این دو، دکمه به‌عنوان آیتم فلکس زیر min-content کوچک نمی‌شود و
     برچسب‌های بلند فارسی از لبهٔ ظرف می‌زنند بیرون */
  max-width: 100%;
  min-width: 0;
  transition: transform var(--fast), background var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.btn:active { transform: scale(.96); }
.btn .ico { flex: none; }

/* روی موبایل، nowrap باعث می‌شد برچسب‌های بلند («باز کردن در نرم‌افزار
   تورنت») از ظرف بزنند بیرون و کل شیت افقی اسکرول بگیرد. اینجا اجازهٔ
   شکستن خط می‌دهیم و ارتفاع را آزاد می‌کنیم. */
@media (max-width: 640px) {
  .btn {
    white-space: normal;
    height: auto;
    min-height: 42px;
    padding-block: 9px;
    padding-inline: 16px;
    line-height: 1.45;
    text-align: center;
    justify-content: center;
  }
}

.btn-primary {
  background: linear-gradient(135deg, var(--beam), var(--beam-hot));
  color: #241703;
  box-shadow: var(--glow);
}
.btn-primary:hover { box-shadow: 0 0 34px rgba(255, 194, 71, .5); }

.btn-ghost {
  background: rgba(244, 241, 236, .06);
  border: 1px solid var(--line-2);
  color: var(--paper);
}
.btn-ghost:hover { background: rgba(244, 241, 236, .12); }
.btn-sm {
  height: 36px;
  font-size: .78rem;
  padding: 7px 14px;
  border-radius: var(--r-sm, 8px);
}

.btn-block { width: 100%; justify-content: center; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(244, 241, 236, .05);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 1rem;
  transition: color var(--fast), background var(--fast), transform var(--fast);
}
.icon-btn:hover { color: var(--beam); background: var(--beam-soft); }
.icon-btn:active { transform: scale(.9); }
.icon-btn.glass { background: rgba(11, 10, 13, .55); backdrop-filter: blur(14px); color: var(--paper); }

/* ---------- CHIPS / FIELDS ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--ink-2);
  border: 1px solid var(--line);
  font-size: .7rem;
  font-weight: 600;
  color: var(--dim);
}
.tag-beam { color: var(--beam); border-color: var(--beam-line); background: var(--beam-soft); }
.tag-good { color: var(--good); border-color: rgba(95, 208, 138, .32); }
.tag-bad  { color: var(--bad);  border-color: rgba(255, 106, 106, .32); }
.tag-warn { color: #d8a94a; border-color: rgba(216, 169, 74, .32); }

.field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding-inline: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--fast), background var(--fast);
}
.field:focus-within { border-color: var(--beam-line); background: var(--ink-3); }
.field-ico { color: var(--faint); }
.field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: .9rem;
}
.field input::placeholder { color: var(--faint); }
.field input::-webkit-search-cancel-button { filter: invert(.6); }

.select {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.select select {
  appearance: none;
  height: 38px;
  padding-inline: 16px 34px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color var(--fast);
}
.select select:hover { border-color: var(--line-2); }
.select select:focus { border-color: var(--beam-line); }
/* رنگ گزینه‌ها با مقدار ثابت نوشته شده، نه متغیر.
   لیستِ بازشدهٔ <select> را خودِ سیستم‌عامل رسم می‌کند و اگر رنگ متن از
   یک متغیر بیاید که تم سفارشی خرابش کرده باشد، ردیف‌ها خالی به نظر
   می‌رسند — چیزی که در عمل پیش آمد. این مقدارها زیر هر تمی سالم‌اند. */
.select select { color: #f4f1ec; color-scheme: dark; }
.select select option,
.select select optgroup {
  background-color: #17151d;
  color: #f4f1ec;
}
.select select option:checked,
.select select option:hover { background-color: #201d29; color: #ffc247; }
.select.is-set select option { color: #f4f1ec; }
.select .ico {
  position: absolute;
  inset-inline-end: 12px;
  pointer-events: none;
  color: var(--faint);
  font-size: .8rem;
}
.select.is-set select { border-color: var(--beam-line); color: var(--beam); }

/* =========================================================
   HEADER
   ========================================================= */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 10, 13, .82);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
/* توی اکسپلور، سربرگ سایت (جستجو/پیام به مدیر/حساب کاربری/زبان) هیچ
   کاربردی ندارد و فقط با کنترل‌های خودِ اکسپلور قاطی می‌شود؛ این حالت
   فقط وقتی html.reel-open است اعمال می‌شود، یعنی فقط داخل اکسپلور —
   جای دیگری از سایت دست‌نخورده می‌ماند. */
html.reel-open .site-head { display: none; }

.head-row {
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.1rem;
  flex: none;
}
.brand-mark {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--beam), var(--beam-hot));
  color: #241703;
  font-size: 1.1rem;
  box-shadow: var(--glow);
}
.brand-mark .ico { stroke-width: 1.9; }

.tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-end: auto;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 4px;
  padding-inline: 3px;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  z-index: 1;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: .85rem;
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
  transition: color var(--mid);
}
.tab:hover { color: var(--paper); }
.tab.is-active { color: var(--paper); font-weight: 800; }

.tab-hot::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--beam-hot);
  margin-inline-start: 6px;
  vertical-align: middle;
  animation: pulse 2.4s var(--ease) infinite;
}

.tab-beam {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  border-radius: var(--r-pill);
  background: rgba(244, 241, 236, .07);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--mid), width var(--mid), opacity var(--fast);
  opacity: 0;
  left: 0;
}
.tab-beam.is-on { opacity: 1; }
.tab-beam::after {
  content: '';
  position: absolute;
  inset-inline: 22%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--beam), transparent);
  box-shadow: 0 0 14px var(--beam);
}

.head-actions { display: flex; gap: 8px; flex: none; }

/* drawers */
.drawer {
  border-top: 1px solid var(--line);
  background: rgba(17, 16, 22, .9);
  animation: drawerIn var(--mid);
  overflow: hidden;
}
.drawer-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.drawer-note {
  flex-basis: 100%;
  font-size: .72rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}

/* =========================================================
   SPOTLIGHT
   ========================================================= */
.spotlight {
  position: relative;
  min-height: min(64vh, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.spot-stage { position: absolute; inset: 0; z-index: -2; }
.spot-shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 22%;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s var(--ease), transform 8s linear;
}
.spot-shot.is-on { opacity: 1; transform: scale(1); }

.spot-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(255, 194, 71, .07), transparent 52%),
    linear-gradient(to top, var(--ink) 6%, rgba(11, 10, 13, .86) 44%, rgba(11, 10, 13, .55) 100%),
    linear-gradient(to right, transparent 38%, rgba(11, 10, 13, .82) 100%);
}
/* روی عرض باریک، آن هالهٔ کهربایی گوشهٔ بالا-راست تقریباً کل پوستر را
   می‌گرفت و مثل لکهٔ زرد روی صورت بازیگر می‌نشست. اینجا کاملاً برداشته
   می‌شود و فقط تیرگی خوانا‌کنندهٔ متن می‌ماند. */
@media (max-width: 900px) {
  .spot-scrim {
    background:
      linear-gradient(to top, var(--ink) 6%, rgba(11, 10, 13, .82) 46%, rgba(11, 10, 13, .42) 100%),
      linear-gradient(to right, transparent 46%, rgba(11, 10, 13, .70) 100%);
  }
}

.spot-body { padding-block: 60px 34px; max-width: 700px; }

.spot-title {
  font-size: clamp(1.7rem, 5.2vw, 3.1rem);
  font-weight: 900;
  line-height: 1.18;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .7);
}

.spot-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.spot-overview {
  margin-top: 14px;
  color: var(--dim);
  font-size: .89rem;
  max-width: 56ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spot-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.spot-dots { display: flex; gap: 7px; margin-top: 24px; }
.spot-dots button {
  width: 26px; height: 3px;
  border-radius: 2px;
  background: rgba(244, 241, 236, .22);
  transition: background var(--mid), width var(--mid);
}
.spot-dots button.is-on { background: var(--beam); width: 44px; box-shadow: 0 0 12px var(--beam); }

/* =========================================================
   دسترسی سریع (اکسپلور / تماشای گروهی / دربارهٔ ما / حمایت)
   قبلاً این چهارتا داخل سربرگ گم می‌شدند؛ حالا یک ردیف مجزا و
   قابل‌اسکرول زیر اسپات‌لایت، روی خودِ صفحهٔ اصلی. کارت مونو-برچسب
   با ایکون بالا و لیبل پایین — هم‌خانوادهٔ استخوان‌بندی .card ولی
   افقی و بدون پوستر، تا با زبان تصویری بقیهٔ سایت یکی بماند. */
.quick-links {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 18px 2px 22px;
  scrollbar-width: none;
}
.quick-links::-webkit-scrollbar { display: none; }
.quick-link {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--ink-1);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color var(--fast), transform var(--fast), color var(--fast), background var(--fast);
  animation: cardIn .4s var(--ease) backwards;
}
.quick-link:nth-child(1) { animation-delay: .02s; }
.quick-link:nth-child(2) { animation-delay: .07s; }
.quick-link:nth-child(3) { animation-delay: .12s; }
.quick-link:nth-child(4) { animation-delay: .17s; }
.quick-link:hover {
  color: var(--paper);
  border-color: var(--beam-line);
  background: var(--ink-2);
  transform: translateY(-2px);
}
.quick-link:active { transform: translateY(0) scale(.97); }
.quick-link-ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--beam-soft);
  color: var(--beam);
  flex: none;
}
.quick-link-ico .ico { width: 15px; height: 15px; }

/* ورود مدیر از مینی‌اپ — عمداً از بقیه متمایز است */
.quick-link.is-admin { border-color: var(--beam-line); color: var(--beam); }
.quick-link.is-admin .quick-link-ico { background: var(--beam); color: var(--ink); }
.quick-link.is-admin[disabled] { opacity: .55; }

@media (max-width: 640px) {
  /* اسکرول افقی روی موبایل بد بود: آخرین کارت همیشه نصفه از لبه بیرون
     می‌ماند و شبیه خرابی به‌نظر می‌رسید. با گرید دوستونه هر چهار مورد
     کامل دیده می‌شوند. */
  .quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 14px 0 18px;
  }
  .quick-link {
    padding: 10px 12px;
    font-size: .74rem;
    min-width: 0;
    white-space: normal;
  }
  .quick-link-lbl {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .quick-link-ico { width: 26px; height: 26px; }
  .quick-link-ico .ico { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-link { animation: none; transition: none; }
}

/* =========================================================
   TOOLBAR
   ========================================================= */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 20px;
}
.toolbar-title { display: flex; align-items: center; gap: 10px; }
.toolbar-title h2 { font-size: 1.15rem; font-weight: 800; }
.toolbar-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   GRID + CARDS
   ========================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 22px 16px;
}

.card {
  position: relative;
  cursor: pointer;
  animation: cardIn .45s var(--ease) backwards;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.card-art {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--shadow-1);
  transition: transform var(--mid), box-shadow var(--mid);
}
.card-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--slow), filter var(--mid);
}
.card:hover .card-art { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.card:hover .card-art img { transform: scale(1.07); }

.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 10, 13, .9) 0%, transparent 46%);
  opacity: 0;
  transition: opacity var(--mid);
}
.card:hover .card-art::after { opacity: 1; }

.card-play {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--beam);
  color: #241703;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(10px) scale(.8);
  transition: opacity var(--mid), transform var(--mid);
  box-shadow: var(--glow);
}
.card:hover .card-play { opacity: 1; transform: none; }

.card-rate {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(11, 10, 13, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.card-rate .ico { color: var(--beam); font-size: .76rem; flex: none; }

.card-kind {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(11, 10, 13, .72);
  backdrop-filter: blur(8px);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--dim);
}

/* کارت‌های خیلی باریک (سه‌ستونهٔ مینی‌اپ): بَج‌ها کوچک‌تر و به‌جای
   نشستن کنار هم، هرکدام گوشهٔ خودش می‌مانند — قبلاً روی کارت‌های زیر
   ~130px این دو بَج تقریباً کل بالای پوستر را می‌گرفتند. */
@media (max-width: 640px) {
  .card-rate, .card-kind { font-size: .58rem; padding: 2px 6px; top: 6px; }
  .card-rate { inset-inline-start: 6px; }
  .card-kind { inset-inline-end: 6px; }
  .card-rate .ico { font-size: .68rem; }
}

.card-name {
  margin-top: 10px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-sub { font-size: .72rem; color: var(--faint); margin-top: 2px; }

/* skeleton */
.sk .card-art { animation: shimmer 1.5s linear infinite; }
.sk .card-art,
.sk .sk-line {
  background: linear-gradient(100deg, var(--ink-2) 30%, var(--ink-3) 50%, var(--ink-2) 70%);
  background-size: 300% 100%;
}
.sk-line {
  height: 11px;
  border-radius: 5px;
  margin-top: 10px;
  animation: shimmer 1.5s linear infinite;
}
.sk-line.short { width: 45%; margin-top: 7px; }
@keyframes shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* feed state */
.feed-state {
  padding: 44px 20px;
  text-align: center;
  color: var(--faint);
  font-size: .86rem;
}
.feed-state strong { display: block; color: var(--paper); font-size: 1rem; margin-bottom: 6px; }
.feed-state .btn { margin-top: 16px; }

.reel-spin,
.feed-spin {
  width: 30px; height: 30px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid var(--ink-3);
  border-top-color: var(--beam);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#sentinel { height: 10px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 30px 40px;
  margin-top: 40px;
  background: var(--ink-1);
}
.foot-note { font-size: .76rem; color: var(--faint); max-width: 62ch; line-height: 1.9; }
.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .9rem; }
.foot-brand .ico { color: var(--beam); }
.foot-social { display: flex; gap: 8px; }
.foot-social a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--dim);
  transition: color var(--fast), border-color var(--fast), transform var(--fast);
}
.foot-social a:hover { color: var(--beam); border-color: var(--beam-line); transform: translateY(-2px); }

/* =========================================================
   DETAIL SHEET
   ========================================================= */
.scrim {
  position: fixed;
  inset: 0;
  /* باید بالاتر از .explore (۱۱۰) باشد، وگرنه شیت زیر لایهٔ اکسپلور گم می‌شود */
  z-index: 140;
  background: rgba(5, 5, 8, .78);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade var(--mid);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: relative;
  width: min(880px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  /* بدون این، چون overflow-y مقدار غیرvisible دارد، مرورگر overflow-x را
     هم auto می‌کند: هر عنصری که یک پیکسل پهن‌تر شود، کل شیت را افقی
     قابل‌کشیدن می‌کند و کاربر صفحه را «خالی به چپ» می‌کشد. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  animation: sheetIn .38s var(--ease);
}
@keyframes sheetIn {
  from { transform: translateY(48px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sheet-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 3;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 10, 13, .7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--paper);
  transition: background var(--fast), transform var(--fast);
}
.sheet-close:hover { background: var(--bad); }
.sheet-close:active { transform: scale(.9); }

.sheet-hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.sheet-hero img { width: 100%; height: 100%; object-fit: cover; }
.sheet-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink-1) 2%, rgba(17, 16, 22, .55) 55%, transparent 100%);
}

.sheet-main { padding: 0 26px 30px; margin-top: -54px; position: relative; z-index: 2; }

.sheet-head { display: flex; align-items: flex-end; gap: 16px; }
.sheet-poster {
  width: 104px;
  flex: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
}
.sheet-headings { min-width: 0; padding-bottom: 4px; }
.sheet-headings h2 { font-size: clamp(1.15rem, 3vw, 1.6rem); font-weight: 900; }
.sheet-orig { font-size: .76rem; color: var(--faint); margin-top: 2px; }

.sheet-facts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 16px; }

.sheet-section { margin-top: 26px; }
.sheet-section > h4 {
  font-size: .8rem;
  font-weight: 800;
  color: var(--dim);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sheet-section > h4::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.overview { color: var(--dim); font-size: .88rem; line-height: 2; }

.sheet-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* my rating */
.rate-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rate-label { font-size: .78rem; color: var(--dim); }
.stars { display: flex; flex-direction: row-reverse; gap: 2px; }
.stars button {
  color: var(--ink-3);
  font-size: 1.05rem;
  padding: 2px;
  transition: color var(--fast), transform var(--fast);
}
.stars button .ico { fill: currentColor; stroke: none; }
.stars button:hover { transform: scale(1.2); }
.stars button.on { color: var(--beam); }
.rate-score { font-weight: 800; font-size: .9rem; margin-inline-start: auto; }
.rate-score span { color: var(--faint); font-weight: 500; font-size: .75rem; }

/* cast */
.rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { height: 5px; }

.cast-item { width: 76px; flex: none; text-align: center; scroll-snap-align: start; }
.cast-item img {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  margin-bottom: 7px;
}
.cast-item b { display: block; font-size: .72rem; font-weight: 700; line-height: 1.4; }
.cast-item span { display: block; font-size: .66rem; color: var(--faint); }

/* similar */
.sim-item { width: 104px; flex: none; cursor: pointer; scroll-snap-align: start; }
.sim-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  transition: transform var(--mid), border-color var(--mid);
}
.sim-item:hover img { transform: translateY(-4px); border-color: var(--beam-line); }
.sim-item b { display: block; font-size: .72rem; font-weight: 600; margin-top: 7px; line-height: 1.4; }

/* download */
.dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--fast), background var(--fast);
}
.dl-row:hover { border-color: var(--line-2); background: var(--ink-3); }
.dl-name { font-size: .82rem; font-weight: 700; }
.dl-row .tag { margin-inline-end: auto; }
.dl-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--beam-soft);
  border: 1px solid var(--beam-line);
  color: var(--beam);
  font-size: .76rem;
  font-weight: 700;
  transition: background var(--fast);
}
.dl-go:hover { background: var(--beam); color: #241703; }

.sub-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  color: var(--dim);
  font-size: .8rem;
  font-weight: 600;
  transition: color var(--fast), border-color var(--fast);
}
.sub-link:hover { color: var(--beam); border-color: var(--beam-line); }

.sub-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-links .sub-link { flex: 1; min-width: 140px; }

.hint { font-size: .74rem; color: var(--faint); display: flex; align-items: flex-start; gap: 6px; }
/* آیکون نباید با متن بلند فارسی له شود و متن باید بشکند نه سرریز کند */
.hint > .ico { flex: none; margin-top: 4px; }
.hint > span { min-width: 0; overflow-wrap: anywhere; }

/* =========================================================
   TRAILER LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(4, 4, 6, .93);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fade var(--fast);
}
.lb-inner { width: min(1000px, 100%); }
.lb-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.lb-stage iframe { width: 100%; height: 100%; border: 0; }

.lb-close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(244, 241, 236, .08);
  color: var(--paper);
  font-size: 1.1rem;
  transition: background var(--fast), transform var(--fast);
}
.lb-close:hover { background: var(--bad); }

.lb-fallback {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.lb-fallback p { font-size: .82rem; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.lb-fallback p .ico { color: var(--beam); }
.lb-cmd {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .45);
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: .78rem;
  line-height: 2.1;
  color: var(--beam);
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
  user-select: all;
}
.lightbox.is-blank .lb-stage { display: none; }
.lightbox.is-blank .lb-fallback { margin-top: 0; }
.lb-code {
  margin-top: 10px;
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--dim);
  opacity: .8;
}
.lb-mirrors { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lb-mirrors a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: .76rem;
  font-weight: 600;
  transition: border-color var(--fast), color var(--fast);
}
.lb-mirrors a:hover { color: var(--beam); border-color: var(--beam-line); }

/* =========================================================
   EXPLORE REEL
   ========================================================= */
.explore {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #000;
  animation: fade var(--mid);
}

.reel-head {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  /* env() فقط لبهٔ فیزیکی گوشی (بریدگی) را می‌شناسد؛ داخل مینی‌اپ
     تلگرام کلاً صفر برمی‌گردد. --tg-safe-top مقدار واقعی را از خودِ
     Telegram.WebApp (contentSafeAreaInset) می‌گیرد و اینجا هم لحاظ
     می‌شود تا کنترل‌ها زیر نوار بالای تلگرام بمانند. */
  padding-top: max(14px, env(safe-area-inset-top), calc(var(--tg-safe-top, 0px) + 10px));
  background: linear-gradient(to bottom, rgba(0, 0, 0, .78), transparent 85%);
  transition: padding-top .2s var(--ease);
}
.reel-label { font-weight: 800; font-size: .9rem; margin-inline-end: auto; }
.reel-head-actions { display: flex; align-items: center; gap: 6px; }

/* داخل مینی‌اپ تلگرام، به‌خصوص در حالت fullscreen، تلگرام خودش یک
   خوشهٔ شناور کوچک (بستن/پروفایل) را روی همان گوشهٔ بالا می‌نشاند که
   کنترل‌های ما آنجا بودند. مقدار --tg-safe-top این تداخل را کامل رفع
   نمی‌کند چون آن خوشه «کنار» محتواست نه «بالای» آن؛ پس علاوه بر فاصلهٔ
   ایمن، یک بافر عمودی و افقی اضافه می‌گیریم و کل نوار را به شکل یک
   کپسول شیشه‌ای جمع‌وجورتر جمع می‌کنیم که با ظاهر تلگرام قاطی نمی‌شود. */
html.in-telegram .reel-head {
  gap: 8px;
  padding-inline: max(14px, calc(var(--tg-safe-left, 0px) + 10px)) max(14px, calc(var(--tg-safe-right, 0px) + 10px));
  padding-top: calc(var(--tg-safe-top, 0px) + 14px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);
}
html.in-telegram.tg-fullscreen .reel-head {
  /* در fullscreen، خوشهٔ شناور خودِ تلگرام همان ردیف اول را اشغال
     می‌کند؛ نوار ما یک پله پایین‌تر و به شکل کپسول مستقل می‌نشیند. */
  padding-top: calc(var(--tg-safe-top, 0px) + 46px);
}
html.in-telegram .reel-head #reelClose,
html.in-telegram .reel-head-actions {
  background: rgba(11, 10, 13, .58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
html.in-telegram .reel-head-actions { padding: 4px; gap: 4px; }
html.in-telegram .reel-head #reelClose { width: 38px; height: 38px; }
html.in-telegram .reel-head-actions .icon-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}
html.in-telegram .reel-head-actions .icon-btn:hover { background: rgba(255, 255, 255, .1); }
html.in-telegram .reel-label {
  font-size: .8rem;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(11, 10, 13, .45);
  backdrop-filter: blur(10px);
}

.reel {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: brightness(.55);
}

.slide-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.slide.is-playing .slide-video { opacity: 1; }

.slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .92) 4%, rgba(0, 0, 0, .35) 42%, transparent 68%);
  pointer-events: none;
}

.slide-body {
  position: relative;
  /* باید بالاتر از .slide-tap (۳) باشد وگرنه دکمه‌ها کلیک نمی‌خورند */
  z-index: 7;
  width: 100%;
  max-width: 620px;
  padding: 26px 22px;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  padding-inline-end: 60px;
}
.slide-body h3 { font-size: clamp(1.3rem, 5vw, 2rem); font-weight: 900; line-height: 1.25; }
.slide-facts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.slide-overview {
  margin-top: 12px;
  font-size: .82rem;
  color: var(--dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slide-actions { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.slide-actions .btn { height: 38px; font-size: .8rem; padding-inline: 17px; }

.slide-noplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: var(--faint);
  font-size: .78rem;
}
.slide-noplay .ico { display: block; margin: 0 auto 8px; font-size: 1.6rem; color: var(--dim); }

/* sprocket rail = position indicator */
.sprocket {
  position: absolute;
  z-index: 4;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 230px;
  width: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.sprocket-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform var(--mid);
}
.perf {
  width: 8px;
  height: 12px;
  flex: none;
  border-radius: 3px;
  background: rgba(244, 241, 236, .2);
  transition: background var(--mid), transform var(--mid), box-shadow var(--mid);
}
.perf.is-on {
  background: var(--beam);
  transform: scaleX(1.25);
  box-shadow: 0 0 12px var(--beam);
}

.reel-hint {
  position: absolute;
  z-index: 4;
  inset-inline-end: 20px;
  bottom: 24px;
  font-size: .74rem;
  color: rgba(244, 241, 236, .55);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: floaty 2.2s var(--ease) infinite;
  pointer-events: none;
  transition: opacity var(--mid);
}
.reel-hint.is-gone { opacity: 0; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed;
  z-index: 200;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  font-size: .82rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--mid), transform var(--mid);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast .ico { color: var(--beam); }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .head-row { gap: 12px; }
  .brand-text { display: none; }
  .spot-body { padding-block: 44px 26px; }
}

@media (max-width: 640px) {
  :root { --head-h: 56px; }
  .wrap { padding-inline: 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 11px; }
  .spotlight { min-height: 58vh; }
  .spot-overview { display: none; }
  .toolbar { padding-bottom: 16px; }
  .toolbar-filters { width: 100%; }
  .select { flex: 1; }
  .select select { width: 100%; }
  .sheet { max-height: 96vh; border-radius: 20px 20px 0 0; }
  .sheet-main { padding: 0 16px 26px; margin-top: -40px; }
  .sheet-poster { width: 78px; }
  .sheet-hero { aspect-ratio: 16 / 10; }
  .slide-body { padding-inline-end: 44px; }
  .sprocket { height: 170px; }
  .lightbox { padding: 12px; }
  .lb-close { top: 8px; inset-inline-end: 8px; }
  .foot-row { justify-content: center; }
}

@media (hover: none) {
  .card-play { opacity: 1; transform: none; }
  .card-art::after { opacity: 1; }
}

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

/* =========================================================
   کنترل پخش در اکسپلور
   ========================================================= */
/* لایهٔ شفاف برای تپ‌کردن؛ زیر متن و دکمه‌ها می‌ماند تا جلوشان را نگیرد */
.slide-tap {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: none;
  border: 0;
  cursor: pointer;
}

.slide-pausemark {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%) scale(.7);
  z-index: 5;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 7, 10, .62);
  backdrop-filter: blur(6px);
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast), transform var(--fast);
}
.slide-pausemark .ico { width: 30px; height: 30px; margin-inline-start: 4px; }
.slide.is-paused .slide-pausemark { opacity: 1; transform: translate(50%, -50%) scale(1); }

.slide-controls {
  position: absolute;
  z-index: 8;
  inset-inline: 16px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 max(8px, env(safe-area-inset-bottom));
  direction: ltr;
}


.seek-btn {
  flex: none;
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(8, 7, 10, .55);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font-size: .7rem;
  font-weight: 700;
  transition: background var(--fast), border-color var(--fast);
}
.seek-btn:hover { background: var(--beam); border-color: var(--beam); color: #17130a; }

.seek {
  flex: 1;
  height: 26px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.seek-rail {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(244, 241, 236, .22);
}
.seek-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  border-radius: 4px;
  background: var(--beam);
}
.seek-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--beam);
  transform: translateY(-50%) scale(0);
  transition: transform var(--fast);
  box-shadow: 0 0 10px var(--beam-line);
}
.seek:hover .seek-knob,
.slide.is-paused .seek-knob { transform: translateY(-50%) scale(1); }

.seek-time {
  flex: none;
  min-width: 74px;
  text-align: right;
  font-size: .64rem;
  color: var(--dim);
}

@media (max-width: 480px) {
  .slide-controls { inset-inline: 12px; gap: 7px; }
  .seek-btn { min-width: 36px; font-size: .64rem; }
  .seek-time { min-width: 62px; font-size: .6rem; }
}

/* ترجمهٔ خلاصه */
.ov-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ov-note { font-size: .72rem; color: var(--faint); }
.overview[dir="ltr"] { text-align: left; }

/* =========================================================
   لایک، سیو، یادداشت
   ========================================================= */
.lib-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(10, 9, 12, .55);
  backdrop-filter: blur(10px);
  color: var(--paper);
  transition: color var(--fast), background var(--fast),
              border-color var(--fast), transform var(--fast);
}
.lib-btn .ico { width: 17px; height: 17px; }
.lib-btn:hover { transform: translateY(-2px); border-color: var(--line-2); }
.lib-btn.lib-sm { width: 30px; height: 30px; }
.lib-btn.lib-sm .ico { width: 14px; height: 14px; }

.lib-like.is-on {
  color: #ff5a72;
  border-color: rgba(255, 90, 114, .5);
  background: rgba(255, 90, 114, .14);
}
.lib-like.is-on .ico { fill: #ff5a72; stroke: #ff5a72; }
.lib-save.is-on {
  color: var(--beam);
  border-color: var(--beam-line);
  background: var(--beam-soft);
}
.lib-save.is-on .ico { fill: var(--beam); stroke: var(--beam); }

/* تپش موقع روشن شدن */
.lib-btn.pop { animation: libPop .42s var(--ease-out); }
@keyframes libPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.32); }
  62%  { transform: scale(.93); }
  100% { transform: scale(1); }
}
.lib-like.is-on.pop::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 90, 114, .55);
  animation: libRing .55s var(--ease-out) forwards;
  pointer-events: none;
}
.lib-btn { position: relative; }
@keyframes libRing {
  from { transform: scale(.7); opacity: .9; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* روی کارت‌ها: با هاور ظاهر می‌شوند، روی لمسی همیشه */
.card-libs {
  position: absolute;
  inset-inline-start: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--fast), transform var(--fast);
  z-index: 3;
}
.card:hover .card-libs,
.card:focus-within .card-libs,
.card-libs:has(.is-on) { opacity: 1; transform: none; }

@media (hover: none) {
  .card-libs { opacity: 1; transform: none; }
}

.spot-libs { display: inline-flex; gap: 8px; }

/* یادداشت */
.note-box {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  overflow: hidden;
}
.note-input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--paper);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.9;
  padding: 14px 16px;
  resize: vertical;
  min-height: 84px;
  outline: none;
}
.note-input::placeholder { color: var(--faint); }
.note-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line);
}
.note-hint { font-size: .72rem; color: var(--faint); margin-inline-end: auto; }

/* =========================================================
   کتابخانهٔ من
   ========================================================= */
.lib-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 22px 0 18px;
}
.lib-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-end: auto; }
.lib-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: .84rem;
  font-weight: 600;
  transition: .2s var(--ease);
}
.lib-tab .ico { width: 15px; height: 15px; }
.lib-tab:hover { color: var(--paper); border-color: var(--line-2); }
.lib-tab.is-on {
  color: var(--beam);
  border-color: var(--beam-line);
  background: var(--beam-soft);
}
.lib-num {
  font-family: var(--mono);
  font-size: .68rem;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  direction: ltr;
}
.lib-tools { display: flex; gap: 6px; }

.lib-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--dim);
}
.lib-empty .ico {
  width: 34px; height: 34px;
  color: var(--ink-3);
  margin: 0 auto 14px;
  display: block;
}
.lib-empty strong { display: block; color: var(--paper); font-size: 1rem; margin-bottom: 6px; }
.lib-empty p { font-size: .85rem; max-width: 40ch; margin-inline: auto; }

.note-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding-bottom: 40px;
}
.note-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.note-card p {
  font-size: .88rem;
  line-height: 1.9;
  color: var(--dim);
  white-space: pre-wrap;
}
.note-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.lib-del {
  margin-inline-start: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--faint);
  transition: .2s var(--ease);
}
.lib-del:hover { color: var(--bad); background: rgba(255, 106, 106, .12); }
.lib-del .ico { width: 15px; height: 15px; }

/* جداکنندهٔ پنل تنظیمات */
.drawer-split {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 6px 0 2px;
}
.drawer-note.is-ok { color: var(--good); }
.drawer-note.is-bad { color: var(--bad); }

/* در حالت کتابخانه، ظرف اصلی نباید خودش گرید باشد —
   وگرنه هدر و دکمه‌ها به‌عنوان خانهٔ گرید چیده می‌شوند */
.grid.is-library {
  display: block;
}

/* عنوان‌های پنل تنظیمات — بدون این‌ها معلوم نیست کدام فیلد برای چیست */
.drawer-title {
  flex: 1 1 100%;
  font-size: .82rem;
  font-weight: 800;
  color: var(--paper);
  margin-bottom: -2px;
}
.drawer-sub {
  flex: 1 1 100%;
  font-size: .74rem;
  color: var(--faint);
  margin-top: -6px;
}
.drawer-note:empty { display: none; }

/* =========================================================
   کنترل بخش‌بندی‌شده — به‌جای select بومی.
   select بومی منوی بازشویش را با تم سیستم می‌کشد و روی ویندوز
   سفید در می‌آید؛ این نه آن مشکل را دارد نه روی موبایل سخت است.
   ========================================================= */
.seg {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
}
.seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 11px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--dim);
  border: 1px solid transparent;
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.seg-btn small {
  font-size: .66rem;
  font-weight: 500;
  color: var(--faint);
  line-height: 1.4;
}
.seg-btn:hover { color: var(--paper); background: rgba(255, 255, 255, .04); }
.seg-btn.is-on {
  color: #17130a;
  background: var(--beam);
  border-color: var(--beam);
}
.seg-btn.is-on small { color: rgba(23, 19, 10, .72); }

/* =========================================================
   کارت وضعیت — نتیجه باید کنار همان دکمه دیده شود، نه ته پنل
   ========================================================= */
.status {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  font-size: .85rem;
}
.status .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.status b { display: block; font-weight: 800; color: var(--paper); }
.status small {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  line-height: 1.75;
  color: var(--dim);
}
.status-quiet { background: transparent; border-style: dashed; }

.status.is-ok    { border-color: rgba(95, 208, 138, .45); background: rgba(95, 208, 138, .09); }
.status.is-ok .ico    { color: var(--good); }
.status.is-warn  { border-color: var(--beam-line); background: var(--beam-soft); }
.status.is-warn .ico  { color: var(--beam); }
.status.is-bad   { border-color: rgba(255, 106, 106, .45); background: rgba(255, 106, 106, .09); }
.status.is-bad .ico   { color: var(--bad); }
.status.is-busy .ico  { color: var(--beam); animation: spin 1s linear infinite; }
.status.is-idle .ico  { color: var(--faint); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .seg { grid-template-columns: 1fr; }
  .seg-btn { flex-direction: row; justify-content: space-between; }
}

/* =========================================================
   نظرها
   ========================================================= */
.cm-form {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  padding: 14px;
  margin-bottom: 16px;
}
.cm-name, .cm-text {
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font: inherit;
  font-size: .87rem;
  color: var(--paper);
  outline: none;
  transition: border-color var(--fast);
}
.cm-name { margin-bottom: 8px; }
.cm-text { resize: vertical; min-height: 76px; line-height: 1.9; }
.cm-name:focus, .cm-text:focus { border-color: var(--beam-line); }
.cm-name::placeholder, .cm-text::placeholder { color: var(--faint); }
.cm-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cm-count { font-family: var(--mono); font-size: .68rem; color: var(--faint); margin-inline-end: auto; direction: ltr; }

.cm-items { display: flex; flex-direction: column; gap: 9px; }
.cm-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  padding: 13px 15px;
}
.cm-item-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cm-item-head b { font-size: .84rem; font-weight: 800; }
.cm-item-head time { font-size: .7rem; color: var(--faint); margin-inline-start: auto; }
.cm-item p { font-size: .86rem; line-height: 1.9; color: var(--dim); white-space: pre-wrap; word-break: break-word; }
.cm-empty, .cm-loading { font-size: .82rem; color: var(--faint); text-align: center; padding: 22px; }
.cm-loading .ico { width: 15px; height: 15px; vertical-align: -2px; margin-inline-end: 6px; animation: spin 1s linear infinite; }

/* =========================================================
   منابع پخش و دانلود
   ========================================================= */
.src-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.src-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  font-size: .85rem;
  transition: border-color var(--fast), background var(--fast);
}
.src-row:hover { border-color: var(--beam-line); background: var(--ink-3); }
.src-row .ico { width: 16px; height: 16px; color: var(--faint); flex: none; }
.src-row b { font-weight: 600; }
.src-badge {
  display: inline-block;
  font-size: .64rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  margin-inline-start: 6px;
  vertical-align: middle;
}
.src-badge-ok { background: rgba(60, 200, 120, .16); color: #4ade80; }
.src-badge-warn { background: rgba(255, 180, 40, .16); color: var(--beam, #ffc247); }
.src-select {
  flex: 1;
  padding: 9px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--fg, #fff);
  font-size: .82rem;
}
.src-provider-pills { align-items: center; }
.pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--faint);
  font-size: .74rem;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.pill.is-on {
  border-color: var(--accent, #6ea8ff);
  color: var(--accent, #6ea8ff);
  background: rgba(110, 168, 255, .1);
}
.src-q {
  margin-inline-start: auto;
  font-family: var(--mono); font-size: .68rem;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--beam-soft); color: var(--beam); direction: ltr;
}

/* =========================================================
   پلیر
   ========================================================= */
.pl {
  position: fixed; inset: 0; z-index: 180;
  display: grid; place-items: center;
  padding: clamp(0px, 2.5vw, 28px);
  background: rgba(5, 5, 7, .93);
  backdrop-filter: blur(14px);
  animation: fade var(--mid);
  --sub-size: 1.05rem;
  --sub-color: #fff;
  --sub-bg: rgba(0, 0, 0, .6);
  --sub-bottom: 8%;
}
.pl-box {
  width: min(1080px, 100%);
  max-height: 94dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
}
.pl-close {
  position: absolute; top: 16px; inset-inline-end: 18px; z-index: 4;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 9, 12, .7);
  border: 1px solid var(--line-2);
  color: var(--paper);
  transition: background var(--fast), transform var(--fast);
}
.pl-close:hover { background: var(--bad); transform: rotate(90deg); }

.pl-stage { position: relative; border-radius: var(--r-md); overflow: hidden; background: #000; }
.pl-stage video { width: 100%; max-height: 68dvh; display: block; background: #000; }

/* استایل زیرنویس — قابل تنظیم از خود پلیر */
.pl-stage video::cue {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: var(--sub-size);
  color: var(--sub-color);
  background: var(--sub-bg);
  line-height: 1.7;
}
.pl-stage video::-webkit-media-text-track-container { bottom: var(--sub-bottom); }

.pl-resume {
  position: absolute; inset-inline: 14px; bottom: 64px; z-index: 3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: rgba(10, 9, 12, .88);
  border: 1px solid var(--line-2);
  font-size: .83rem;
}
.pl-resume button {
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); font-size: .78rem; font-weight: 700;
  color: var(--paper);
}
.pl-resume button:first-of-type { background: var(--beam); border-color: var(--beam); color: #17130a; }

.pl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pl-title { font-size: 1rem; font-weight: 800; margin-inline-end: auto; }
.pl-srcs { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-src {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--dim);
}
.pl-src small { font-family: var(--mono); font-size: .64rem; opacity: .75; direction: ltr; }
.pl-src:hover { color: var(--paper); }
.pl-src.is-on { color: var(--beam); border-color: var(--beam-line); background: var(--beam-soft); }

.pl-tools {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2);
}
.pl-group { display: flex; align-items: center; gap: 7px; }
.pl-lbl { font-size: .74rem; color: var(--faint); }
.pl-sel {
  background: var(--ink-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 11px;
  font: inherit; font-size: .78rem; color: var(--paper); outline: none; cursor: pointer;
}
.pl-sel-sm { padding: 7px 9px; }
.pl-mini {
  min-width: 44px; padding: 6px 9px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; color: var(--dim); direction: ltr;
}
.pl-mini:hover { color: var(--beam); border-color: var(--beam-line); }
.pl-off {
  min-width: 52px; text-align: center;
  font-family: var(--mono); font-size: .74rem; color: var(--beam); direction: ltr;
}

.pl-style {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 10px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2);
}
.pl-style label { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--dim); }
.pl-style input[type="range"] { flex: 1; accent-color: var(--beam); }
.pl-style input[type="color"] {
  width: 38px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: none; cursor: pointer;
}
.pl-keys { font-size: .7rem; color: var(--faint); margin-top: 10px; text-align: center; line-height: 1.9; }

@media (max-width: 620px) {
  .pl-box { padding: 10px; border-radius: var(--r-md); }
  .pl-stage video { max-height: 44dvh; }
  .pl-tools { gap: 10px; }
  .pl-keys { display: none; }
}

/* =========================================================
   پخش‌کننده
   ========================================================= */
.pl {
  position: fixed; inset: 0; z-index: 180;
  display: grid; place-items: center;
  padding: clamp(0px, 3vw, 30px);
  background: rgba(5, 5, 7, .93);
  backdrop-filter: blur(16px);
}
.pl-box {
  width: min(1060px, 100%);
  max-height: 94dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}
.pl-x {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(8, 7, 10, .7);
  border: 1px solid var(--line-2); color: var(--paper);
  backdrop-filter: blur(8px); transition: .2s var(--ease);
}
.pl-x:hover { background: var(--bad); border-color: var(--bad); transform: rotate(90deg); }

.pl-stage { position: relative; background: #000; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.pl-stage video { display: block; width: 100%; max-height: 68dvh; background: #000; }

.pl-note {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 10px; text-align: center; padding: 26px;
  background: rgba(8, 7, 10, .82); font-size: .86rem; color: var(--dim);
}
.pl-note b { display: block; color: var(--paper); font-size: .96rem; }

.pl-bar { padding: 14px clamp(12px, 2.5vw, 20px) 18px; display: flex; flex-direction: column; gap: 12px; }
.pl-title { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.pl-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pl-pick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--beam-line); background: var(--beam-soft);
  color: var(--beam); font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: .2s var(--ease);
}
.pl-pick:hover { background: rgba(255, 194, 71, .22); }
.pl-pick .ico { width: 16px; height: 16px; }
.pl-pick input { display: none; }

.pl-sel, .pl-btn {
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--ink-2);
  color: var(--dim); font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: .2s var(--ease);
}
.pl-sel { appearance: none; -webkit-appearance: none; padding-inline-end: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%),
                    linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position: calc(12px) calc(50% - 2px), calc(17px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.pl-sel-sm { max-width: 120px; }
.pl-sel:hover, .pl-btn:hover { color: var(--paper); border-color: var(--line-2); }
.pl-btn { display: inline-flex; align-items: center; gap: 6px; }
.pl-btn .ico { width: 15px; height: 15px; }
.pl-btn.is-on { color: var(--beam); border-color: var(--beam-line); background: var(--beam-soft); }

.pl-sub-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  padding: 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2);
}
.pl-field { display: flex; flex-direction: column; gap: 7px; }
.pl-field > label { font-size: .74rem; font-weight: 700; color: var(--dim); }
.pl-field input[type=range] { width: 100%; accent-color: var(--beam); }
.pl-nudge { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-nudge output {
  font-family: var(--mono); font-size: .74rem; color: var(--beam);
  min-width: 80px; text-align: center; direction: ltr;
}
.pl-swatches { display: flex; gap: 6px; }
.pl-swatches button {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; transition: .18s var(--ease);
}
.pl-swatches button.is-on { border-color: var(--paper); transform: scale(1.12); }

.pl-check { display: flex; align-items: center; gap: 9px; font-size: .8rem; cursor: pointer; }
.pl-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pl-check span {
  width: 17px; height: 17px; border-radius: 5px;
  border: 1px solid var(--line-2); transition: .15s var(--ease);
}
.pl-check input:checked + span { background: var(--beam); border-color: var(--beam); }

.pl-hint { font-size: .7rem; color: var(--faint); line-height: 2; }
.pl-hint b { color: var(--dim); font-family: var(--mono); font-size: .68rem; }

/* زیرنویس بومی مرورگر */
#plVideo::cue {
  font-family: var(--sans);
  background: rgba(0, 0, 0, .62);
  line-height: 1.5;
}

/* منابع در شیت جزئیات */
.src-list { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.src-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--ink-2);
  font-size: .84rem; transition: .2s var(--ease);
}
.src-row:hover { border-color: var(--line-2); }
.src-row .ico { width: 16px; height: 16px; color: var(--faint); flex: none; }
.src-row b { font-weight: 600; }
.src-q {
  margin-inline-start: auto; font-family: var(--mono); font-size: .66rem;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--beam-soft); color: var(--beam); direction: ltr;
}

@media (max-width: 640px) {
  .pl { padding: 0; place-items: end center; }
  .pl-box { max-height: 100dvh; border-radius: 0; }
  .pl-stage { border-radius: 0; }
  /* 42dvh تصویر را روی گوشی خیلی کوچک می‌کرد و بیشترِ صفحه صرف نوار
     ابزار می‌شد. حالا ویدیو نسبت ۱۶:۹ خودش را می‌گیرد تا سقف مجاز. */
  .pl-stage video { max-height: 56dvh; }
  .pl-sel-sm { max-width: none; flex: 1; }
  .pl-bar { padding: 12px 12px 16px; gap: 10px; }
  .pl-row { gap: 7px; }
  .pl-pick, .pl-sel, .pl-btn { font-size: .76rem; padding: 8px 12px; }
  .pl-pick { flex: 1 1 100%; justify-content: center; }
  .pl-sel, .pl-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .pl-sub-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  /* میان‌برهای صفحه‌کلید روی لمسی بی‌معنی‌اند و فقط جا می‌گیرند.
     کلاس اینجا .pl-hint است — رول قدیمی .pl-keys را هدف گرفته بود که
     در این مارک‌آپ اصلاً وجود ندارد، برای همین روی گوشی دیده می‌شد. */
  .pl-hint { display: none; }
}

/* وقتی خودِ صحنه تمام‌صفحه می‌شود، ویدیو باید کل قاب را بگیرد */
.pl-stage:fullscreen,
.pl-stage:-webkit-full-screen { border-radius: 0; background: #000; }
.pl-stage:fullscreen video,
.pl-stage:-webkit-full-screen video {
  max-height: 100dvh;
  height: 100dvh;
  object-fit: contain;
}

/* =============================================================
   پخش‌کنندهٔ embed (Vidsrc / Vidlink)
   -------------------------------------------------------------
   لایه‌ها: بک‌دراپ تار → اسپینر → iframe → نوار بالا.

   وضعیت با کلاس مدیریت می‌شود (is-on / is-ready) نه با اتریبیوت hidden،
   چون hidden فقط یک کلید خاموش/روشن است و اجازهٔ محو تدریجی نمی‌دهد؛
   با کلاس می‌شود بین «در حال بارگذاری» و «آماده» ترنزیشن داشت.
   ============================================================= */
.emb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #08080b;
  display: none;
  opacity: 0;
  /* بک‌دراپ با transform: scale(1.08) بزرگ می‌شود و بدون این، از لبهٔ
     صفحه می‌زد بیرون و پخش‌کننده را افقی قابل‌کشیدن می‌کرد */
  overflow: hidden;
  transition: opacity .22s ease;
}
.emb.is-on {
  display: block;
  opacity: 1;
}

/* بک‌دراپ فیلم پشت قاب — فاصلهٔ بین کلیک تا اولین فریم را پر می‌کند */
.emb-back {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(.35) saturate(1.1);
  transform: scale(1.08);
  opacity: 1;
  transition: opacity .45s ease;
}
.emb.is-ready .emb-back { opacity: 0; }

/* نوار بالا: عنوان + بستن. روی قاب شناور است و با ماوس محو می‌شود
   تا وسط فیلم مزاحم نباشد. */
.emb-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  /* همان منطق reel-head: داخل مینی‌اپ تلگرام env() صفر است، از
     --tg-safe-top (مقدار واقعیِ contentSafeAreaInset) استفاده می‌شود
     تا عنوان و دکمهٔ بستن زیر نوار/خوشهٔ خودِ تلگرام گم نشوند. */
  padding-top: max(14px, env(safe-area-inset-top), calc(var(--tg-safe-top, 0px) + 10px));
  padding-inline: max(18px, calc(var(--tg-safe-left, 0px) + 14px)) max(18px, calc(var(--tg-safe-right, 0px) + 14px));
  background: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease, padding-top .2s ease;
}
html.in-telegram.tg-fullscreen .emb-top {
  /* خوشهٔ شناور تلگرام (بستن مینی‌اپ/پروفایل) در fullscreen همین
     گوشه را اشغال می‌کند؛ عنوان و ✕ ما را یک پله پایین‌تر می‌بریم. */
  padding-top: calc(var(--tg-safe-top, 0px) + 44px);
}
.emb.is-ready .emb-top { opacity: 0; }
.emb.is-ready:hover .emb-top,
.emb.is-ready:focus-within .emb-top { opacity: 1; }

.emb-title {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emb-x {
  pointer-events: auto;
  flex: none;
  /* سرویس‌های embed دکمهٔ «Servers»/بازگشت خودشان را گوشهٔ بالا-چپِ قاب
     می‌گذارند و ✕ ما دقیقاً رویش می‌افتاد. با order:-1 می‌رود سمت
     شروع (در RTL: راست) که آن گوشه خالی است. */
  order: -1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  transition: background .18s ease, transform .18s ease;
}
.emb-x:hover { background: rgba(255,255,255,.20); transform: scale(1.06); }
.emb-x:active { transform: scale(.96); }
.emb-x .ico { width: 18px; height: 18px; }

/* اسپینر فقط تا رویداد load */
.emb-spin {
  position: absolute;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
}
.emb.is-ready .emb-spin { opacity: 0; visibility: hidden; }

/* iframe تا لود نشده شفاف است تا پرشِ سفیدِ صفحهٔ خالی دیده نشود */
.emb-frame {
  position: relative;
  z-index: 160;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .3s ease, transform .35s var(--ease);
}
.emb.is-ready .emb-frame { opacity: 1; }

/* دکمهٔ چرخش: خودِ گوشی لازم نیست بچرخد، فقط قابِ پخش ۹۰ درجه
   می‌چرخد و به اندازهٔ کل صفحه (بر حسب ابعادِ چرخیده) بزرگ می‌شود —
   ترفند رایج برای iframeهایی که به چرخشِ واقعیِ دستگاه گوش نمی‌دهند.
   fixed بودن یعنی از overflow:hidden والدش (.emb) بیرون می‌زند و
   نسبت به کل ویوپورت جا می‌گیرد؛ نوار بالا و ستون شناور چون z-index
   بالاتری دارند همچنان رویش قابل‌لمس می‌مانند. */
.emb.is-rotated .emb-frame {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  .emb, .emb-back, .emb-top, .emb-spin, .emb-frame, .emb-x { transition: none; }
}

/* =========================================================
   ستون شناور: چرخش صفحه + منبع — نسخهٔ جمع‌وجور
   ---------------------------------------------------------
   به‌جای کادر بزرگی که خودش وسط تماشا باز می‌شد، حالا فقط دو دکمهٔ
   گرد کوچک (چرخش صفحه، سوییچ منبع) روی هم، کمی بالاتر از لبهٔ پایین
   تا با کنترل‌های خودِ سرویسِ embed قاطی نشوند. با پالس‌زدنِ دکمهٔ
   منبع (وقتی پخش گیر کرده) کاربر خبردار می‌شود ولی به زور چیزی روی
   صفحه باز نمی‌شود. کل ستون قابل کشیدن (درگ) است؛ initEmbFabDrag در
   script.js جای دلخواهِ کاربر را نگه می‌دارد. ============================== */
.emb-fab-col {
  position: absolute;
  z-index: 231;
  inset-inline-end: 16px;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 80px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  touch-action: none;
  transition: opacity .22s ease;
}
.emb-fab-col.is-positioned { transition: none; }
.emb-fab-col.is-dragging .emb-fab-btn { transform: scale(1.06); }
.emb:not(.is-on) .emb-fab-col { opacity: 0; pointer-events: none; }

.emb-fab-btn {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: rgba(22, 20, 28, .62);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .22s var(--ease), background .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease), opacity .22s ease;
}
.emb-fab-btn .ico { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.emb-fab-btn:hover { transform: translateY(-2px) scale(1.04); background: rgba(30,28,36,.74); }
.emb-fab-btn:active { transform: scale(.94); }
.emb.is-open .emb-fab { border-color: var(--beam-line); }
.emb.is-open .emb-fab .ico { transform: rotate(90deg); }
.emb.is-rotated .emb-rotate { border-color: var(--beam-line); color: var(--beam); }

/* نقطهٔ کوچک هشدار: وقتی پخش گیر کرده ولی هنوز کاربر بازش نکرده */
.emb-fab-dot {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc247, #ff7a4d);
  border: 2px solid rgba(18,17,22,.9);
  box-shadow: 0 0 0 0 rgba(255,150,70,.55);
  animation: embFabPulse 1.8s ease-out infinite;
}
@keyframes embFabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,150,70,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,150,70,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,150,70,0); }
}
.emb.is-stuck .emb-fab {
  border-color: rgba(255,194,71,.5);
  animation: embFabNudge 2.4s ease-in-out infinite;
}
@keyframes embFabNudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* پردهٔ تارِ پشتِ کارت — با ضربه روی آن کارت بسته می‌شود */
.emb-sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 229;
  background: rgba(6,6,9,.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease;
}
.emb.is-open .emb-sheet-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* کارت خودِ منبع‌ها — کوچک، گرد، نزدیک دکمهٔ شناور. دیگر خودش را با
   زور روی صفحه باز نمی‌کند؛ فقط با «is-open» (ضربه‌ی کاربر) دیده
   می‌شود. */
.emb-stuck {
  position: absolute;
  inset-inline-end: 14px;
  bottom: calc(max(88px, calc(env(safe-area-inset-bottom) + 80px)) + 116px);
  z-index: 232;
  width: min(84vw, 300px);
  max-height: min(52dvh, 360px);
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;
  padding: 12px 12px 14px;
  border-radius: 20px;
  background: rgba(20,19,25,.94);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transform-origin: bottom left;
  transform: scale(.85) translateY(10px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
[dir="rtl"] .emb-stuck, .emb-stuck { transform-origin: bottom right; }
.emb.is-open .emb-stuck {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.emb-stuck-handle {
  width: 32px;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  display: none;
}
.emb-stuck-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.emb-stuck-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--paper, #f4f1ec);
  margin-inline-end: auto;
}
.emb-stuck-title .ico { width: 15px; height: 15px; color: var(--beam, #ffc247); }
.emb-stuck p {
  margin: 0 0 8px;
  color: #c9c6d4;
  font-size: .68rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.emb-stuck-note {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,194,71,.08);
  border: 1px solid rgba(255,194,71,.18);
  color: #f0dcb0;
}

/* ضربدر کوچک گوشهٔ پیشنهاد — فقط همین کادر را می‌بندد */
.emb-stuck-x {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d8d5e0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: background .18s ease;
}
.emb-stuck-x:hover { background: rgba(255,255,255,.18); }
.emb-stuck-x .ico { width: 12px; height: 12px; }

/* منبع‌ها یک ردیف افقیِ کوچک و لغزان‌اند — نه یک جدول بزرگ که کل
   کارت را پر کند. */
.emb-srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.emb-src {
  flex: none;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .68rem;
  line-height: 1.7;
  white-space: nowrap;
  color: #e9e7ef;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.emb-src:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.emb-src:active { transform: scale(.95); }
.emb-src.is-on {
  color: #1a1408;
  background: linear-gradient(135deg, var(--beam, #ffc247), var(--beam-hot, #ff8b55));
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(255,150,70,.25);
}

@media (prefers-reduced-motion: reduce) {
  .emb-stuck, .emb-src, .emb-fab, .emb-fab-dot { transition: none; animation: none; }
}

/* پیام تشخیص: دامنه در دسترس نیست، یا هست ولی پخش نمی‌کند */
.emb-diag {
  margin: 0 0 8px;
  font-size: .68rem;
  line-height: 1.55;
  color: #b9b5c6;
}
.emb-diag:empty { display: none; }

@media (max-width: 640px) {
  .emb-fab { inset-inline-end: 12px; width: 46px; height: 46px; }
  .emb-stuck {
    inset-inline: 10px auto;
    inset-inline-end: 10px;
    width: min(88vw, 320px);
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px);
    padding: 11px 11px 13px;
  }
  .emb-src { font-size: .66rem; padding: 6px 10px; }
}

/* =============================================================
   لینک‌های دانلود مستقیم (آرشیو)
   ============================================================= */
.arc-group { margin-bottom: 14px; }
.arc-group > b {
  display: block;
  font-size: .8rem;
  color: var(--faint);
  margin-bottom: 8px;
}
.arc-links { display: flex; flex-direction: column; gap: 6px; }
.arc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.arc-q { flex: 1; font-size: .84rem; font-weight: 600; }
.arc-size { font-size: .74rem; color: var(--faint); flex: none; }
.arc-play, .arc-dl {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .18s ease;
}
.arc-play:hover, .arc-dl:hover { background: rgba(255,255,255,.18); }
.arc-play .ico, .arc-dl .ico { width: 16px; height: 16px; }

.arc-season { margin-bottom: 12px; }
.arc-season > b { display: block; font-size: .82rem; margin-bottom: 6px; }
.arc-folders { display: flex; gap: 6px; flex-wrap: wrap; }

/* منبع دوم دانلود — فصل/قسمت */
.cin-season { margin-bottom: 8px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cin-season > summary { cursor: pointer; padding: 10px 12px; font-size: .84rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.cin-season > summary::-webkit-details-marker { display: none; }
.cin-season > summary::before { content: '▾'; transition: transform .18s ease; font-size: .7rem; opacity: .6; }
.cin-season:not([open]) > summary::before { transform: rotate(-90deg); }
.cin-count { margin-inline-start: auto; font-size: .72rem; color: var(--faint); font-weight: 400; }
.cin-eps { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.cin-ep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); }
.cin-ep-t { flex: 1; min-width: 120px; font-size: .78rem; }
.cin-ep-links { display: flex; gap: 6px; flex-wrap: wrap; }

.yts-pick { cursor: pointer; }

/* پلیر Webtor — چون سرویس واقعی P2Pه، بدون اسپینر یه صفحهٔ سیاهِ
   بی‌توضیح به‌نظر می‌رسه در حالی که داره دنبال seeder می‌گرده */
.yts-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.yts-stage .webtor { position: absolute; inset: 0; width: 100%; height: 100%; }
.yts-spin {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; pointer-events: none;
}
.yts-spin p { font-size: .74rem; color: var(--faint); margin: 0; }
.yts-stuck {
  position: absolute; inset: auto 10px 10px 10px; z-index: 6;
  background: rgba(18,18,24,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
}
.yts-stuck p {
  margin: 0; font-size: .76rem; line-height: 1.7; color: #d8d5e0;
  display: flex; align-items: flex-start; gap: 8px;
}
.yts-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.yts-actions-sm { margin-top: 8px; margin-bottom: 0; }
.yts-play, .yts-download, .yts-copy {
  flex: 1;
  min-width: 140px;
}

/* روی موبایل دکمه‌های تورنت تمام‌عرض و روی‌هم می‌چینند. قبلاً
   min-width:140px + white-space:nowrap باعث می‌شد برچسب بلند از جعبهٔ
   دکمه بزند بیرون و از آنجا از خودِ شیت — همان چیزی که کل صفحه را
   افقی قابل‌کشیدن می‌کرد. */
@media (max-width: 640px) {
  .yts-actions { gap: 7px; }
  .yts-play, .yts-download, .yts-copy { flex: 1 1 100%; min-width: 0; }
  .yts-actions-sm .btn { flex: 1 1 100%; }
  .yts-stuck { inset: auto 8px 8px 8px; padding: 9px 10px; }
  .yts-stuck p { font-size: .72rem; }
}

/* =========================================================
   CMS — نوار اعلان و صفحه‌های دلخواه
   ========================================================= */
.cms-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px; font-size: .82rem; font-weight: 600;
  background: var(--beam-soft); color: var(--paper);
  border-bottom: 1px solid var(--beam-line);
  position: relative; z-index: 60; text-align: center;
}
.cms-banner.is-good { background: rgba(95, 208, 138, .12); border-bottom-color: rgba(95, 208, 138, .32); }
.cms-banner.is-bad  { background: rgba(255, 106, 106, .12); border-bottom-color: rgba(255, 106, 106, .32); }
.cms-banner a { text-decoration: underline; text-underline-offset: 3px; }
.cms-banner-x {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-pill); color: var(--dim);
}
.cms-banner-x:hover { color: var(--paper); background: rgba(255, 255, 255, .08); }
.cms-banner-x .ico { width: 14px; height: 14px; }

.cms-page { line-height: 2; }
.cms-page h1, .cms-page h2, .cms-page h3 { margin: 18px 0 8px; font-weight: 800; }
.cms-page h1 { font-size: 1.3rem; } .cms-page h2 { font-size: 1.1rem; } .cms-page h3 { font-size: .98rem; }
.cms-page p { margin-bottom: 12px; color: var(--dim); }
.cms-page ul, .cms-page ol { margin: 0 20px 12px; color: var(--dim); }
.cms-page li { margin-bottom: 6px; }
.cms-page a { color: var(--beam); text-decoration: underline; text-underline-offset: 3px; }
.cms-page img { border-radius: var(--r-sm); margin: 10px 0; }
.cms-page hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* =========================================================
   حساب کاربری (ممبرها)
   ========================================================= */
.acc-badge {
  position: absolute; top: 4px; inset-inline-end: 4px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: .58rem; font-weight: 800; line-height: 1;
  color: #14110c; background: var(--beam);
  border-radius: var(--r-pill);
}
#accountBtn { position: relative; }

.auth-scrim {
  /* بالاتر از شیت جزئیات (۱۵۰/۱۶۰) و پلیر (۲۰۰–۲۳۰) — وگرنه وقتی
     جزئیات فیلم باز است، پنجرهٔ ورود پشتش گم می‌شد */
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 5, 9, .78);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.auth-box {
  position: relative; width: 100%; max-width: 360px;
  padding: 24px;
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.auth-x {
  position: absolute; top: 10px; inset-inline-start: 12px;
  font-size: 1.5rem; line-height: 1; color: var(--faint);
}
.auth-x:hover { color: var(--paper); }
.auth-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 5px; }
.auth-sub { font-size: .78rem; color: var(--dim); line-height: 1.9; margin-bottom: 14px; }
.auth-in {
  width: 100%; padding: 11px 13px; margin-bottom: 9px;
  font: inherit; font-size: .84rem; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.auth-in:focus { outline: none; border-color: var(--beam-line); box-shadow: 0 0 0 3px var(--beam-soft); }
.auth-in-sm { width: 90px; margin: 0; text-align: center; }
.auth-cap {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 9px;
  background: var(--ink-2); border: 1px dashed var(--line-2); border-radius: var(--r-sm);
}
.auth-cap-q { flex: 1; font-size: .82rem; font-weight: 700; }
.auth-w { width: 100%; justify-content: center; margin-top: 6px; }
.auth-link {
  display: block; width: 100%; margin-top: 12px;
  font-size: .76rem; color: var(--dim); text-align: center;
}
.auth-link:hover { color: var(--beam); }
.auth-msg {
  padding: 9px 12px; margin-bottom: 9px;
  font-size: .76rem; line-height: 1.8; border-radius: var(--r-sm);
}
.auth-msg.is-bad { color: var(--bad); background: rgba(255, 106, 106, .1); }
.auth-msg.is-ok { color: var(--good); background: rgba(95, 208, 138, .1); }
.auth-pill {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-inline-start: 6px;
  font-size: .62rem; font-weight: 800; color: #14110c;
  background: var(--ink); border-radius: var(--r-pill);
}
.auth-thread { margin-top: 14px; }
.auth-msgs { max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.auth-bub {
  padding: 9px 12px; margin-bottom: 7px;
  font-size: .8rem; line-height: 1.85;
  background: var(--ink-2); border-radius: var(--r-sm);
  border-inline-start: 2px solid var(--line-2);
}
.auth-bub.is-admin { border-inline-start-color: var(--beam); background: var(--beam-soft); }
.auth-bub time { display: block; margin-top: 4px; font-size: .62rem; color: var(--faint); }

.locked-note {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 18px; text-align: center;
  background: var(--ink-2); border: 1px dashed var(--line-2); border-radius: var(--r-md);
}
.locked-note .ico { width: 26px; height: 26px; color: var(--beam); }
.locked-note b { font-size: .86rem; font-weight: 700; }

/* =========================================================
   پنل حساب کاربری — نسخهٔ کامل
   ========================================================= */
.acc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.acc-avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, var(--beam), var(--beam-hot));
  border-radius: var(--r-pill);
  overflow: hidden;
}
/* عکس پروفایل تلگرام؛ اگر نبود، حرف اول روی همان گرادیان می‌ماند */
.acc-av-photo, .fw-av-photo, .acc-photo {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.acc-av-initial, .fw-av-initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-weight: 800; color: var(--ink);
}
.acc-av-initial .ico, .fw-av-initial .ico, .acc-initial .ico {
  width: 55%; height: 55%; color: var(--ink);
}
.acc-id { min-width: 0; }
.acc-id b { display: block; font-size: .92rem; font-weight: 800; }
.acc-id code {
  display: block; font-size: .68rem; color: var(--faint);
  font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acc-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.acc-tab {
  position: relative; flex: 1; padding: 8px 4px;
  font-size: .76rem; font-weight: 700; color: var(--dim);
  background: var(--ink-2); border-radius: var(--r-sm);
  transition: var(--fast);
}
.acc-tab.is-on { color: var(--beam); background: var(--beam-soft); }
.acc-dot {
  position: absolute; top: 2px; inset-inline-end: 5px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: .56rem; font-style: normal; font-weight: 800;
  color: var(--ink); background: var(--beam); border-radius: var(--r-pill);
}
.acc-pane { display: none; }
.acc-pane.is-on { display: block; }

.acc-l { display: block; font-size: .72rem; color: var(--dim); margin: 14px 0 8px; }
.acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acc-cell { text-align: center; }
.acc-cell img, .acc-cell span {
  display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover;
  background: var(--ink-3); border-radius: var(--r-sm); margin-bottom: 5px;
}
.acc-cell b {
  display: block; font-size: .64rem; font-weight: 600; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-cell:hover b { color: var(--paper); }

/* ---------- گفتگو ---------- */
.chat-wrap { display: flex; flex-direction: column; }
.chat-scroll {
  max-height: 46vh; min-height: 140px; overflow-y: auto;
  padding: 4px 2px; margin-bottom: 10px;
}
.chat-empty { text-align: center; padding: 30px 10px; }

.bub {
  position: relative; max-width: 86%;
  padding: 9px 12px 6px; margin-bottom: 8px;
  border-radius: 14px;
  font-size: .82rem; line-height: 1.9;
  word-break: break-word;
}
.bub.is-me { margin-inline-start: auto; background: var(--beam-soft); border: 1px solid var(--beam-line); }
.bub.is-them { margin-inline-end: auto; background: var(--ink-2); border: 1px solid var(--line); }
.bub-q {
  padding: 5px 9px; margin-bottom: 6px;
  font-size: .7rem; color: var(--dim); line-height: 1.7;
  background: rgba(0, 0, 0, .25);
  border-inline-start: 2px solid var(--beam);
  border-radius: 7px;
}
.bub-q b { display: block; color: var(--beam); font-size: .66rem; }
.bub-body a { color: var(--beam); text-decoration: underline; text-underline-offset: 3px; }
.bub-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: 3px; font-size: .6rem; color: var(--faint);
}
.bub-ed { font-style: italic; }
.tick { color: var(--faint); letter-spacing: -2px; font-size: .72rem; }
.tick.is-seen { color: var(--beam); }
.bub-reply {
  position: absolute; top: 4px; inset-inline-start: -22px;
  width: 20px; height: 20px; font-size: .8rem; color: var(--faint);
  opacity: 0; transition: var(--fast);
}
.bub:hover .bub-reply { opacity: 1; }
.bub-reply:hover { color: var(--beam); }

.chat-box { border-top: 1px solid var(--line); padding-top: 10px; }
.chat-reply {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-bottom: 7px;
  font-size: .7rem; color: var(--dim); line-height: 1.7;
  background: var(--ink-2); border-inline-start: 2px solid var(--beam);
  border-radius: 8px;
}
.chat-reply b { color: var(--beam); flex: none; }
.chat-reply button { margin-inline-start: auto; font-size: 1.1rem; color: var(--faint); flex: none; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-in {
  flex: 1; padding: 10px 13px; resize: none; max-height: 110px;
  font: inherit; font-size: .82rem; line-height: 1.7; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 18px;
}
.chat-in:focus { outline: none; border-color: var(--beam-line); }
.chat-send {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  color: var(--ink); background: var(--beam); border-radius: var(--r-pill);
}
.chat-send .ico { width: 17px; height: 17px; }
.chat-send:hover { background: var(--beam-hot); }

/* شمار لایک عمومی روی اسلایدهای اکسپلور */
.like-count {
  display: inline-flex; align-items: center;
  min-width: 26px; height: 26px; padding: 0 9px;
  margin-inline-start: -4px;
  font-size: .74rem; font-weight: 800; color: var(--paper);
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}

/* --- نوار قالب‌بندی جعبهٔ نوشتن پیام --- */
.rt-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px; margin-bottom: 6px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rt-bar button {
  min-width: 28px; height: 28px; padding: 0 7px;
  display: grid; place-items: center; cursor: pointer;
  font-family: inherit; font-size: .76rem; color: var(--dim);
  background: none; border: 0; border-radius: 6px;
  transition: var(--fast);
}
.rt-bar button:hover { color: var(--beam); background: rgba(255, 255, 255, .07); }

/* پیش‌نمایش قالب‌بندی زیر جعبهٔ نوشتن */
.rt-preview {
  padding: 8px 11px; margin-bottom: 7px;
  font-size: .8rem; line-height: 1.9; color: var(--paper);
  background: var(--ink-2); border: 1px dashed var(--line-2);
  border-radius: 10px;
}
.rt-preview > span { font-size: .66rem; color: var(--faint); margin-inline-end: 5px; }
.rt-preview a { color: var(--beam); text-decoration: underline; text-underline-offset: 3px; }

/* قالب‌بندی داخل حباب پیام صریح تعریف می‌شود تا هیچ تم یا ریستی
   نتواند خنثی‌اش کند */
.bub-body b, .rt-preview b { font-weight: 800; }
.bub-body i, .rt-preview i { font-style: italic; }
.bub-body u, .rt-preview u { text-decoration: underline; text-underline-offset: 2px; }
.bub-body s, .rt-preview s { text-decoration: line-through; }

.rt-color { position: relative; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
.rt-color:hover { background: rgba(255, 255, 255, .07); }
.rt-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rt-color span { font-size: .8rem; font-weight: 800; color: var(--dim); line-height: 1.1; pointer-events: none; border-bottom: 3px solid var(--beam); }
.rt-color.is-bg span { border-bottom: none; background: var(--beam-soft); border-radius: 3px; padding: 0 3px; }

/* وقتی کاربر وارد شده، حرف اول نامش جای آیکون می‌نشیند */
.acc-initial {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  font-size: .8rem; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, var(--beam), var(--beam-hot));
  border-radius: var(--r-pill);
}
/* عکس پروفایل تلگرام در دکمهٔ حساب — به‌جای دایرهٔ زردِ خالی */
#accountBtn .acc-photo {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line-2);
}

/* =========================================================
   تماشای گروهی
   ========================================================= */
.arc-party {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  color: var(--beam); background: var(--beam-soft);
  border: 1px solid var(--beam-line); border-radius: var(--r-xs);
}
.arc-party:hover { background: var(--beam); color: var(--ink); }
.arc-party .ico { width: 15px; height: 15px; }

.wp {
  position: fixed; inset: 0; z-index: 260;
  display: flex; flex-direction: column;
  background: var(--ink);
}
.wp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
}
.wp-head > b { flex: 1; min-width: 0; font-size: .88rem; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-x { display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  color: var(--dim); border-radius: var(--r-pill); }
.wp-x:hover { color: var(--paper); background: rgba(255,255,255,.08); }
.wp-code {
  flex: none; padding: 4px 11px; cursor: pointer;
  font-family: var(--mono); font-size: .78rem; font-weight: 800; letter-spacing: 2px;
  color: var(--beam); background: var(--beam-soft);
  border: 1px dashed var(--beam-line); border-radius: var(--r-pill);
}
.wp-code:hover { background: var(--beam); color: var(--ink); }
.wp-live { flex: none; font-size: .68rem; color: var(--faint); white-space: nowrap; }
.wp-live.is-on { color: var(--good); }

.wp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; }
.wp-stage { position: relative; background: #000; display: grid; place-items: center; min-width: 0; }
.wp-stage video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; }
.wp-veil {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  text-align: center; font-size: .86rem; line-height: 2; color: var(--paper);
  background: rgba(6,5,9,.82); backdrop-filter: blur(3px);
}

.wp-side { display: flex; flex-direction: column; min-height: 0;
  border-inline-start: 1px solid var(--line); background: var(--ink-1); }
.wp-tabs { display: flex; gap: 4px; padding: 8px; flex: none; }
.wp-tab { flex: 1; padding: 7px 4px; font-size: .76rem; font-weight: 700;
  color: var(--dim); background: var(--ink-2); border-radius: var(--r-sm); }
.wp-tab.is-on { color: var(--beam); background: var(--beam-soft); }
.wp-tab i { font-style: normal; opacity: .8; }
.wp-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.wp-pane.is-on { display: flex; }

.wp-chat { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.wp-sys { font-size: .68rem; color: var(--faint); text-align: center; margin: 7px 0; }
.wp-bub {
  position: relative; max-width: 92%; padding: 7px 11px 5px; margin-bottom: 7px;
  font-size: .8rem; line-height: 1.85;
  background: var(--ink-2); border-radius: 12px; word-break: break-word;
}
.wp-bub.is-me { margin-inline-start: auto; background: var(--beam-soft); }
.wp-bub b { display: block; font-size: .66rem; color: var(--beam); margin-bottom: 2px; }
.wp-bub time { display: block; font-size: .58rem; color: var(--faint); text-align: end; }
.wp-bub a { color: var(--beam); text-decoration: underline; }

.wp-send { flex: none; display: flex; gap: 7px; align-items: flex-end; padding: 9px 10px;
  border-top: 1px solid var(--line); }
.wp-send textarea {
  flex: 1; resize: none; max-height: 90px; padding: 8px 12px;
  font: inherit; font-size: .8rem; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 16px;
}
.wp-send button { width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  color: var(--ink); background: var(--beam); border-radius: var(--r-pill); }
.wp-send button .ico { width: 15px; height: 15px; }

#wpWho { padding: 10px 12px; overflow-y: auto; }
.wp-who { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: .8rem; }
.wp-who.is-off { opacity: .45; }
.wp-av { width: 27px; height: 27px; flex: none; display: grid; place-items: center;
  font-size: .74rem; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, var(--beam), var(--beam-hot)); border-radius: var(--r-pill); }
.wp-who b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-badge { font-style: normal; font-size: .6rem; padding: 2px 7px; flex: none;
  color: var(--beam); background: var(--beam-soft); border-radius: var(--r-pill); }
.wp-badge.is-off { color: var(--faint); background: var(--ink-3); }
.wp-mini { font-size: .62rem; color: var(--dim); padding: 3px 8px; flex: none;
  background: var(--ink-2); border-radius: var(--r-pill); }
.wp-mini:hover { color: var(--paper); }
.wp-hostbox { padding: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.wp-chk { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--dim);
  padding: 6px 0; cursor: pointer; }
.wp-hint { padding: 12px; font-size: .74rem; color: var(--faint); }

.wp-recent { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 9px 11px; margin-bottom: 6px; background: var(--ink-2); border-radius: var(--r-sm); }
.wp-recent b { flex: 1; min-width: 0; font-size: .8rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wp-recent code { font-family: var(--mono); font-size: .7rem; color: var(--beam); letter-spacing: 1px; }

@media (max-width: 860px) {
  .wp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(180px, 40vh) 1fr; }
  .wp-side { border-inline-start: 0; border-top: 1px solid var(--line); }
}

/* صحنهٔ تماشای گروهی در حالت تمام‌صفحه */
.wp-stage:fullscreen,
.wp-stage:-webkit-full-screen { background: #000; }
.wp-stage:fullscreen video,
.wp-stage:-webkit-full-screen video { height: 100dvh; max-height: 100dvh; object-fit: contain; }

/* ---------- صفحهٔ تماشای گروهی ---------- */
.wp-hub { grid-column: 1 / -1; max-width: 980px; margin: 0 auto; padding: 8px 0 40px; }
.wp-hub-head { text-align: center; margin-bottom: 24px; }
.wp-hub-head h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.wp-hub-head p { font-size: .86rem; color: var(--dim); line-height: 2; max-width: 520px; margin: 0 auto; }

.wp-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.wp-hub-card {
  padding: 20px; text-align: center;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.wp-hub-card.is-soft { background: var(--ink-2); border-style: dashed; }
.wp-hub-card h3 {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .95rem; font-weight: 800; margin-bottom: 8px;
}
.wp-hub-card h3 .ico { width: 18px; height: 18px; color: var(--beam); }
.wp-hub-card > p { font-size: .78rem; color: var(--dim); line-height: 1.95; margin-bottom: 12px; }
.wp-why { font-size: .72rem !important; color: var(--faint) !important; margin: 12px 0 0 !important;
  padding-top: 10px; border-top: 1px solid var(--line); }
.wp-in {
  width: 100%; padding: 11px 13px; margin-bottom: 9px; text-align: center;
  font: inherit; font-size: .84rem; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.wp-in:focus { outline: none; border-color: var(--beam-line); box-shadow: 0 0 0 3px var(--beam-soft); }
#wpJoinCode { letter-spacing: 4px; font-weight: 800; text-transform: uppercase; }
.wp-full { width: 100%; justify-content: center; }
.wp-hub-sub { font-size: .92rem; font-weight: 800; margin: 28px 0 12px; }
.wp-hub-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }

/* ---------- دعوت داخل اتاق ---------- */
.wp-share-btn {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px; font-size: .74rem; font-weight: 700;
  color: var(--ink); background: var(--beam); border-radius: var(--r-pill);
}
.wp-share-btn .ico { width: 14px; height: 14px; }
.wp-share-btn:hover { background: var(--beam-hot); }

.wp-share {
  position: absolute; inset-block-start: 56px; inset-inline-end: 14px; z-index: 5;
  width: min(330px, calc(100vw - 28px)); padding: 16px;
  background: var(--ink-1); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.wp-share > b { display: block; font-size: .88rem; font-weight: 800; margin-bottom: 5px; }
.wp-share > p { font-size: .74rem; color: var(--dim); line-height: 1.9; margin-bottom: 11px; }
.wp-share-row { display: flex; gap: 6px; margin-bottom: 10px; }
.wp-share-row input {
  flex: 1; min-width: 0; padding: 9px 11px;
  font-family: var(--mono); font-size: .68rem; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-xs);
}
.wp-share-row button {
  flex: none; padding: 0 14px; font-size: .74rem; font-weight: 700;
  color: var(--ink); background: var(--beam); border-radius: var(--r-xs);
}
.wp-share-apps { display: flex; gap: 6px; flex-wrap: wrap; }
.wp-share-apps button, .wp-share-apps a {
  flex: 1; min-width: 84px; padding: 8px 10px; text-align: center;
  font-size: .74rem; font-weight: 700; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-xs);
}
.wp-share-apps button:hover, .wp-share-apps a:hover { border-color: var(--beam-line); color: var(--beam); }
.wp-share-code { font-size: .72rem; color: var(--faint); margin: 11px 0 0; text-align: center; }
.wp-share-code code { font-family: var(--mono); font-size: .82rem; color: var(--beam); letter-spacing: 2px; }

/* پیام خطای پخش در اتاق */
.wp-err { max-width: 460px; text-align: start; }
.wp-err > b { display: block; font-size: .95rem; font-weight: 800; margin-bottom: 10px; line-height: 1.8; }
.wp-err > p { font-size: .8rem; color: var(--dim); line-height: 2; margin-bottom: 8px; }
.wp-err ul { margin: 0 18px 14px; font-size: .78rem; color: var(--dim); line-height: 2; }
.wp-err li { margin-bottom: 5px; }
.wp-err-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.wp-err-acts button, .wp-err-acts a {
  padding: 8px 13px; font-size: .76rem; font-weight: 700; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.wp-err-acts button:hover, .wp-err-acts a:hover { border-color: var(--beam-line); color: var(--beam); }
.arc-party.is-weak { color: var(--faint); background: var(--ink-3); border-color: var(--line-2); }
.arc-party.is-weak:hover { color: #d8a94a; background: rgba(216, 169, 74, .14); border-color: rgba(216, 169, 74, .4); }

/* بوم پخش MKV (وقتی موتور داخلی کار می‌کند، جای تگ ویدیو می‌نشیند) */
.mkv-canvas { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; display: block; }
.wp-ctrl {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.wp-ctrl button { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  color: #fff; background: rgba(255,255,255,.14); border-radius: var(--r-pill); }
.wp-ctrl button .ico { width: 15px; height: 15px; }
.wp-ctrl button.is-off { opacity: .45; }
.wp-ctrl #wpTime { font-size: .7rem; color: #fff; font-family: var(--mono); flex: none; }
.wp-ctrl input[type="range"] { flex: 1; accent-color: var(--beam); cursor: pointer; }

/* لایهٔ زیرنویس — روی هر دو مسیر پخش (تگ ویدیو و بوم) کار می‌کند */
.sub-layer {
  position: absolute; inset-inline: 0; inset-block-end: 8%;
  z-index: 3; padding: 0 6%;
  text-align: center; pointer-events: none;
}
.sub-layer span {
  display: inline-block;
  padding: 5px 12px;
  font-size: clamp(.95rem, 2.4vw, 1.4rem); font-weight: 700; line-height: 1.75;
  color: #fff; background: rgba(0, 0, 0, .68);
  border-radius: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9);
}

/* کنترل‌های پخش در حالت موتور MKV */
.pl-eng {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
}
.pl-eng button {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  color: #fff; background: rgba(255,255,255,.16); border-radius: var(--r-pill);
}
.pl-eng button .ico { width: 15px; height: 15px; }
.pl-eng button.is-off { opacity: .45; }
.pl-eng #plEngTime { font-size: .7rem; color: #fff; font-family: var(--mono); flex: none; }
.pl-eng input[type="range"] { flex: 1; accent-color: var(--beam); cursor: pointer; }

/* پیام وسط صحنه — به‌جای صفحهٔ سیاهِ بی‌توضیح */
.pl-note {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; gap: 8px; padding: 28px;
  text-align: center; background: rgba(6,5,9,.86);
}
.pl-note b { font-size: .95rem; font-weight: 800; line-height: 1.8; }
.pl-note span { font-size: .8rem; color: var(--dim); line-height: 1.95; }
.pl-note-raw { font-size: .68rem !important; color: var(--faint) !important; font-family: var(--mono); word-break: break-all; }
.pl-note-acts { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.pl-note-acts button, .pl-note-acts a {
  padding: 7px 13px; font-size: .76rem; font-weight: 700; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.pl-note-acts button:hover, .pl-note-acts a:hover { border-color: var(--beam-line); color: var(--beam); }

/* بازخورد پرش ۱۰ ثانیه‌ای */
.pl-flash {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center; pointer-events: none;
}
.pl-flash > span, .pl-flash {
  font-size: .9rem; font-weight: 800; color: #fff;
}
.pl-flash::before {
  content: attr(data-t);
  padding: 10px 18px;
  background: rgba(0, 0, 0, .62); border-radius: var(--r-pill);
  animation: plFlash .6s ease forwards;
}
@keyframes plFlash { from { opacity: 0; transform: scale(.9); }
  30% { opacity: 1; transform: scale(1); }
  to { opacity: 0; } }
.pl-eng button svg text { font-family: inherit; font-weight: 800; }

/* پیوست پیام */
.bub-img { display: block; margin-top: 7px; }
.bub-img img { max-width: 100%; max-height: 260px; border-radius: 10px; display: block; }
.bub-file {
  display: flex; align-items: center; gap: 8px; margin-top: 7px; padding: 8px 11px;
  background: rgba(0, 0, 0, .28); border-radius: 10px; font-size: .76rem;
}
.bub-file .ico { width: 15px; height: 15px; color: var(--beam); flex: none; }
.bub-file b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bub-file i { font-style: normal; color: var(--faint); font-size: .66rem; }

/* بنر اعلان — حالت کارت وقتی تصویر دارد */
.cms-banner.has-img { padding: 10px 16px; gap: 12px; }
.notice-thumb { flex: none; padding: 0; border-radius: 8px; overflow: hidden; line-height: 0;
  border: 1px solid rgba(255, 255, 255, .18); transition: transform var(--fast); }
.notice-thumb:hover { transform: scale(1.04); }
.notice-thumb img { height: 54px; max-width: 150px; object-fit: cover; display: block; }
.notice-text { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  text-align: start; min-width: 0; }
.notice-text b { font-size: .86rem; font-weight: 800; }
.notice-text > span { font-size: .74rem; opacity: .82; font-weight: 500; }
.notice-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-style: normal; font-size: .7rem; font-weight: 700; color: var(--beam); }
.notice-cta .ico { width: 12px; height: 12px; }
@media (max-width: 620px) {
  .notice-thumb img { height: 40px; max-width: 90px; }
  .notice-text > span { display: none; }
}

/* بزرگ‌نمایی تصویر */
.img-lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 24px;
  background: rgba(5, 4, 8, .9); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.img-lightbox.is-on { opacity: 1; }
.img-lightbox figure { display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: min(92vw, 900px); transform: scale(.96); transition: transform .22s ease; }
.img-lightbox.is-on figure { transform: scale(1); }
.img-lightbox img { max-width: 100%; max-height: 74vh; border-radius: var(--r-md);
  box-shadow: var(--shadow-2); display: block; }
.img-lightbox figcaption { font-size: .9rem; font-weight: 700; color: var(--paper); text-align: center; }
.img-x { position: absolute; top: 16px; inset-inline-end: 16px; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--paper);
  background: rgba(255, 255, 255, .1); border-radius: var(--r-pill); }
.img-x:hover { background: rgba(255, 255, 255, .2); }
.bub-img { cursor: zoom-in; }

/* اسپینر داخل دکمه‌ها */
.btn-spin {
  width: 14px; height: 14px; flex: none; display: inline-block;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: currentColor; border-radius: 50%;
  animation: btnSpin .7s linear infinite; margin-inline-end: 7px; vertical-align: -2px;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn.is-busy, button.is-busy { opacity: .85; cursor: progress; }

/* نشانگر بافر روی تصویر */
/* اسپینر داخل یک قاب مرکزشده می‌چرخد.
   قبلاً هم transform: translate برای وسط‌چین‌کردن داشت هم انیمیشنِ
   چرخش که transform را بازنویسی می‌کرد — برای همین از وسط می‌پرید
   پایین و درست نمی‌چرخید. */
.pl-buffering {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; pointer-events: none;
}
.pl-buffering::after {
  content: ''; display: block;
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--beam);
  animation: btnSpin .8s linear infinite;
}

/* پنهان‌شدن نرم کنترل‌ها هنگام بی‌حرکتی */
.pl-stage .pl-eng,
.pl-stage .pl-top {
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.pl-stage.is-idle .pl-eng {
  opacity: 0; transform: translateY(14px); pointer-events: none;
}
.pl-stage.is-idle .pl-top {
  opacity: 0; transform: translateY(-14px); pointer-events: none;
}
.pl-stage.is-idle { cursor: none; }
.pl-stage.is-idle .sub-layer { inset-block-end: 4%; }   /* زیرنویس پایین‌تر می‌آید */
.sub-layer { transition: inset-block-end .35s var(--ease); }

/* =========================================================
   صفحه‌های «دربارهٔ ما» و «حمایت از ما»
   ========================================================= */
.info-page { grid-column: 1 / -1; max-width: 860px; margin: 0 auto; padding: 8px 0 56px; }

.info-hero { text-align: center; margin-bottom: 30px; }
.info-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--paper), var(--beam));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: infoUp .5s var(--ease) both;
}
.info-tag { font-size: .95rem; color: var(--dim); line-height: 2; max-width: 540px; margin: 0 auto;
  animation: infoUp .5s var(--ease) .08s both; }
.info-hero-img { margin-bottom: 20px; animation: infoZoom .6s var(--ease) both; }
.info-hero-img img {
  max-width: 100%; max-height: 260px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); display: block; margin: 0 auto;
}
.info-body {
  font-size: .9rem; line-height: 2.15; color: var(--dim); text-align: center;
  max-width: 640px; margin: 0 auto 30px; animation: infoUp .5s var(--ease) .14s both;
}
.info-body a { color: var(--beam); text-decoration: underline; }
.info-h2 { font-size: 1.15rem; font-weight: 800; text-align: center; margin: 34px 0 18px; }

.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.info-card {
  padding: 22px 18px; text-align: center;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  animation: infoUp .5s var(--ease) both; animation-delay: var(--d, 0ms);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.info-card:hover { transform: translateY(-4px); border-color: var(--beam-line); box-shadow: var(--shadow-1); }
.info-ico {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px;
  color: var(--beam); background: var(--beam-soft); border-radius: var(--r-pill);
}
.info-ico .ico { width: 21px; height: 21px; }
.info-card h3 { font-size: .95rem; font-weight: 800; margin-bottom: 6px; }
.info-card p { font-size: .8rem; color: var(--dim); line-height: 1.95; }

.info-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.info-person {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 12px;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  animation: infoUp .5s var(--ease) both; animation-delay: var(--d, 0ms);
  transition: transform var(--fast), border-color var(--fast);
}
.info-person:hover { transform: translateY(-3px); border-color: var(--beam-line); }
.info-person img, .info-initial {
  width: 62px; height: 62px; border-radius: var(--r-pill); object-fit: cover;
  display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, var(--beam), var(--beam-hot));
}
.info-person b { font-size: .84rem; font-weight: 700; }
.info-person i { font-style: normal; font-size: .7rem; color: var(--faint); }

/* حمایت */
.donate-list { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; }
.donate-row {
  display: flex; align-items: center; gap: 13px; padding: 15px 17px;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  animation: infoUp .5s var(--ease) both; animation-delay: var(--d, 0ms);
  transition: border-color var(--fast), transform var(--fast);
}
.donate-row:hover { border-color: var(--beam-line); transform: translateX(-3px); }
.donate-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  color: var(--beam); background: var(--beam-soft); border-radius: var(--r-md); }
.donate-ico .ico { width: 19px; height: 19px; }
.donate-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.donate-main b { font-size: .86rem; font-weight: 800; }
.donate-main code { font-family: var(--mono); font-size: .84rem; color: var(--beam);
  letter-spacing: 1px; overflow-wrap: anywhere; }
.donate-main i { font-style: normal; font-size: .7rem; color: var(--faint); }
.donate-copy, .donate-go {
  flex: none; padding: 9px 15px; font-size: .76rem; font-weight: 700;
  color: var(--ink); background: var(--beam); border-radius: var(--r-pill);
  transition: var(--fast);
}
.donate-copy:hover, .donate-go:hover { background: var(--beam-hot); }
.donate-copy.is-done { background: var(--good); }
.info-thanks { text-align: center; font-size: 1rem; font-weight: 700; color: var(--beam);
  margin-top: 30px; animation: infoUp .5s var(--ease) .3s both; }
.is-support .info-hero h1 { background: linear-gradient(135deg, var(--beam), var(--bad));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

@keyframes infoUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes infoZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .info-card, .info-person, .donate-row, .info-hero h1, .info-tag, .info-body, .info-thanks,
  .info-hero-img { animation: none !important; }
}

/* =========================================================
   پروفایل کاربر، تاریخچهٔ تماشا، قرعه‌کشی و پیش‌نمایش
   ========================================================= */

/* ---------- ردیف «در حال پخش» ---------- */
.fw-continue { margin: 6px 0 26px; animation: fwUp .5s var(--ease) both; }
.fw-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fw-rail-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; }
.fw-rail-head h2 .ico { width: 18px; height: 18px; color: var(--beam); }
.fw-link { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700;
  color: var(--dim); transition: var(--fast); }
.fw-link:hover { color: var(--beam); }
.fw-link .ico { width: 14px; height: 14px; transform: rotate(90deg); }

.fw-rail { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.fw-rail::-webkit-scrollbar { height: 6px; }
.fw-rail-card { position: relative; flex: 0 0 150px; scroll-snap-align: start;
  animation: fwUp .5s var(--ease) var(--d, 0ms) both; transition: var(--mid); }
.fw-rail-card.is-gone { opacity: 0; transform: scale(.86); }
.fw-rail-go { display: block; width: 100%; text-align: right; }
.fw-rail-art { position: relative; display: block; aspect-ratio: 2/3; border-radius: var(--r-md);
  overflow: hidden; background: var(--ink-2); box-shadow: 0 8px 26px rgba(0,0,0,.42); }
.fw-rail-art img { width: 100%; height: 100%; object-fit: cover; transition: var(--slow); }
.fw-rail-card:hover .fw-rail-art img { transform: scale(1.07); }
.fw-rail-play { position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6)); opacity: 0; transition: var(--fast); }
.fw-rail-play .ico { width: 40px; height: 40px; color: var(--paper);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); transform: scale(.8); transition: var(--mid); }
.fw-rail-card:hover .fw-rail-play { opacity: 1; }
.fw-rail-card:hover .fw-rail-play .ico { transform: none; }
.fw-rail-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.55); }
.fw-rail-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--beam), var(--beam-hot));
  animation: fwGrow .8s var(--ease) .15s both; }
.fw-rail-name { display: block; margin-top: 8px; font-size: .8rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-rail-sub { display: block; font-style: normal; font-size: .68rem; color: var(--faint); margin-top: 2px; }
.fw-rail-x { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(11,10,13,.72); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.8); transition: var(--fast); }
.fw-rail-x .ico { width: 13px; height: 13px; }
.fw-rail-card:hover .fw-rail-x { opacity: 1; transform: none; }
.fw-rail-x:hover { background: var(--bad); }

/* ---------- صفحهٔ پروفایل ---------- */
.fw-profile { grid-column: 1 / -1; max-width: 980px; margin: 0 auto; padding: 10px 0 60px; }
.fw-hero { display: flex; align-items: center; gap: 18px; padding: 26px 24px; border-radius: var(--r-lg);
  background: radial-gradient(120% 160% at 100% 0%, rgba(255,194,71,.16), transparent 60%), var(--ink-2);
  border: 1px solid var(--line); animation: fwZoom .55s var(--ease) both; }
.fw-avatar { flex: none; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.5rem; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, var(--beam), var(--beam-hot));
  box-shadow: 0 10px 30px rgba(255,194,71,.28); overflow: hidden; }
.fw-hero-id { flex: 1; min-width: 0; }
.fw-hero-id h1 { font-size: 1.4rem; font-weight: 800; }
.fw-hero-id p { font-size: .78rem; color: var(--dim); margin-top: 5px; }
.fw-hero-total { flex: none; text-align: center; }
.fw-hero-total b { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--beam);
  font-variant-numeric: tabular-nums; }
.fw-hero-total span { font-size: .68rem; color: var(--faint); }

.fw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 18px 0;
  animation: fwUp .5s var(--ease) var(--d, 0ms) both; }
.fw-stat { padding: 16px 14px; border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--line);
  text-align: center; transition: var(--mid); }
.fw-stat:hover { transform: translateY(-3px); border-color: var(--beam-line); }
.fw-stat b { display: block; font-size: 1rem; font-weight: 800; color: var(--paper); }
.fw-stat span { font-size: .68rem; color: var(--faint); }

.fw-card { padding: 22px 20px; margin-bottom: 16px; border-radius: var(--r-lg); background: var(--ink-1);
  border: 1px solid var(--line); animation: fwUp .55s var(--ease) var(--d, 0ms) both; }
.fw-card h2 { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800; margin-bottom: 12px; }
.fw-card h2 .ico { width: 17px; height: 17px; color: var(--beam); }
.fw-big-line { font-size: 1.05rem; line-height: 1.8; }
.fw-big-line b { color: var(--beam); font-variant-numeric: tabular-nums; }
.fw-sub-line { font-size: .8rem; color: var(--dim); margin-top: 6px; line-height: 1.9; }
.fw-empty { font-size: .8rem; color: var(--faint); padding: 14px 0; }

/* نمودار ژانر */
.fw-bars { margin-top: 16px; display: grid; gap: 10px; }
.fw-bar-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px;
  animation: fwUp .45s var(--ease) var(--d, 0ms) both; }
.fw-bar-name { font-size: .76rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-bar-track { height: 9px; border-radius: var(--r-pill); background: var(--ink-3); overflow: hidden; }
.fw-bar-track i { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--beam-hot), var(--beam));
  animation: fwBar 1s var(--ease) var(--d, 0ms) both; }
.fw-bar-val { font-size: .72rem; color: var(--dim); text-align: left; font-variant-numeric: tabular-nums; }

/* ساعت طلایی */
.fw-hours { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin-top: 18px;
  padding: 0 2px; direction: ltr; }
.fw-hours .fw-hb { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--ink-3);
  transform-origin: bottom; animation: fwRise .6s var(--ease) var(--d, 0ms) both; }
.fw-hours .fw-hb.is-hot { background: linear-gradient(180deg, var(--beam), var(--beam-hot));
  box-shadow: 0 0 16px rgba(255,194,71,.4); }
.fw-hours-ax { display: flex; justify-content: space-between; direction: ltr; margin-top: 6px;
  font-size: .62rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* مقایسه */
.fw-cmp-bars { margin-top: 16px; display: grid; gap: 10px; }
.fw-cmp-bars > div { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px;
  font-size: .74rem; }
.fw-cmp-bars i { display: block; height: 12px; width: var(--w); border-radius: var(--r-pill);
  animation: fwBar 1s var(--ease) .2s both; }
.fw-cmp-me { background: linear-gradient(90deg, var(--beam-hot), var(--beam)); }
.fw-cmp-avg { background: var(--ink-3); }
.fw-cmp.is-wait { opacity: .8; }

/* سریال‌های رهاشده */
.fw-drop { display: grid; gap: 10px; margin-top: 12px; }
.fw-drop-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md);
  background: var(--ink-2); border: 1px solid var(--line); text-align: right; transition: var(--mid);
  animation: fwUp .45s var(--ease) var(--d, 0ms) both; }
.fw-drop-row:hover { border-color: var(--beam-line); transform: translateX(-4px); }
.fw-drop-row img { flex: none; width: 42px; height: 62px; object-fit: cover; border-radius: var(--r-xs); }
.fw-drop-row > span { flex: 1; min-width: 0; }
.fw-drop-row b { display: block; font-size: .82rem; font-weight: 700; }
.fw-drop-row i { display: block; font-style: normal; font-size: .68rem; color: var(--faint); margin-top: 3px; }
.fw-drop-row > .ico { width: 15px; height: 15px; color: var(--faint); transform: rotate(90deg); }

/* شبکهٔ عنوان‌ها */
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin-top: 12px; }
.fw-cell { text-align: right; animation: fwUp .4s var(--ease) var(--d, 0ms) both; }
.fw-cell img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-sm);
  transition: var(--mid); }
.fw-cell:hover img { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,.5); }
.fw-cell b { display: block; margin-top: 6px; font-size: .72rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-cell i { display: block; font-style: normal; font-size: .64rem; color: var(--faint); }
.fw-noart { display: grid; place-items: center; width: 100%; aspect-ratio: 2/3; border-radius: var(--r-sm);
  background: var(--ink-3); }
.fw-noart .ico { width: 22px; height: 22px; color: var(--faint); }

/* کلید خصوصی‌بودن */
.fw-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-top: 10px; }
.fw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fw-switch-ui { flex: none; position: relative; width: 46px; height: 26px; border-radius: var(--r-pill);
  background: var(--ink-3); transition: var(--mid); }
.fw-switch-ui::after { content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--dim); transition: var(--mid); }
.fw-switch input:checked + .fw-switch-ui { background: var(--beam-soft); box-shadow: inset 0 0 0 1px var(--beam-line); }
.fw-switch input:checked + .fw-switch-ui::after { transform: translateX(-20px);
  background: linear-gradient(135deg, var(--beam), var(--beam-hot)); }
.fw-switch-tx b { display: block; font-size: .8rem; font-weight: 700; }
.fw-switch-tx i { display: block; font-style: normal; font-size: .68rem; color: var(--faint); margin-top: 3px; }
.fw-switch.is-locked { opacity: .62; cursor: not-allowed; }
.fw-switch.is-locked .fw-switch-ui { box-shadow: inset 0 0 0 1px var(--bad); }
.fw-switch-sm { margin-top: 16px; }

.fw-locked { text-align: center; padding: 60px 20px; }
.fw-locked .ico { width: 40px; height: 40px; color: var(--faint); }
.fw-locked b { display: block; margin-top: 12px; font-size: 1rem; }
.fw-locked p { font-size: .8rem; color: var(--faint); margin-top: 6px; }

.fw-foot-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.fw-danger { padding: 11px 18px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 700;
  color: var(--bad); border: 1px solid rgba(255,106,106,.32); transition: var(--fast); }
.fw-danger:hover { background: rgba(255,106,106,.12); }

.fw-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.fw-mini-stats > div { padding: 12px 8px; border-radius: var(--r-sm); background: var(--ink-2); text-align: center; }
.fw-mini-stats b { display: block; font-size: .8rem; font-weight: 800; }
.fw-mini-stats span { font-size: .62rem; color: var(--faint); }

.fw-skel { height: 90px; border-radius: var(--r-md); margin-bottom: 12px;
  background: linear-gradient(90deg, var(--ink-2), var(--ink-3), var(--ink-2));
  background-size: 200% 100%; animation: fwShine 1.4s linear infinite; }

/* ---------- دکمهٔ «نمی‌دونم چی ببینم» ---------- */
.fw-dice { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; margin-bottom: 16px;
  border-radius: var(--r-lg); text-align: right; color: var(--ink);
  background: linear-gradient(120deg, var(--beam), var(--beam-hot));
  box-shadow: 0 14px 40px rgba(255,122,77,.28); transition: var(--mid);
  animation: fwUp .5s var(--ease) 90ms both; }
.fw-dice:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(255,122,77,.38); }
.fw-dice:active { transform: scale(.985); }
.fw-dice-ico { font-size: 2rem; animation: fwDice 3.2s var(--ease) infinite; }
.fw-dice b { display: block; font-size: 1rem; font-weight: 800; }
.fw-dice i { display: block; font-style: normal; font-size: .74rem; opacity: .78; margin-top: 3px; }

.fw-dice-mini { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; color: var(--ink);
  background: linear-gradient(120deg, var(--beam), var(--beam-hot)); transition: var(--fast); white-space: nowrap; }
.fw-dice-mini:hover { filter: brightness(1.08); transform: translateY(-1px); }
.fw-dice-mini span { font-size: .9rem; }

.fw-scrim { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: rgba(6,5,8,.76); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: var(--mid); }
.fw-scrim.is-on { opacity: 1; pointer-events: auto; }
.fw-modal { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; overflow-x: hidden; padding: 26px 22px;
  border-radius: var(--r-lg); background: var(--ink-1); border: 1px solid var(--line);
  transform: translateY(18px) scale(.97); transition: var(--mid); }
.fw-scrim.is-on .fw-modal { transform: none; }
.fw-modal h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: 16px; }
.fw-modal-x { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; display: grid;
  place-items: center; border-radius: 50%; background: var(--ink-3); transition: var(--fast); }
.fw-modal-x:hover { background: var(--bad); }
.fw-modal-x .ico { width: 14px; height: 14px; }
.fw-dice-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fw-dice-stage { min-height: 190px; display: grid; place-items: center; padding: 10px 0; }
.fw-dice-go { width: 100%; margin-top: 14px; }

.fw-slot { text-align: center; }
.fw-slot-spin { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
  border: 3px solid var(--ink-3); border-top-color: var(--beam); animation: fwSpin .7s linear infinite; }
.fw-slot p { font-size: .78rem; color: var(--faint); }

.fw-pick { display: flex; gap: 16px; width: 100%; animation: fwPop .45s var(--ease) both; }
.fw-pick-art { flex: none; width: 132px; }
.fw-pick-art { position: relative; }
.fw-pick-art img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-md);
  box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.fw-pick-body { flex: 1; min-width: 0; }
.fw-pick-body h3 { font-size: 1rem; font-weight: 800; }
.fw-pick-year { font-size: .72rem; color: var(--faint); margin-top: 3px; }
.fw-pick-ov { font-size: .76rem; color: var(--dim); line-height: 1.9; margin: 10px 0 14px; }

/* ---------- پیش‌نمایش روی کاور ----------
   دولایه: تصاویر خود فیلم (همیشه می‌آید) و تریلر که اگر رسید رویش
   محو می‌شود. اگر تریلر نیامد هیچ پیامی داده نمی‌شود. */
.fw-prev { position: absolute; inset: 0; z-index: 1; opacity: 0; background: #000;
  transition: opacity .35s var(--ease); pointer-events: none; }
.fw-prev.is-on { opacity: 1; }
.fw-prev-shots { position: absolute; inset: 0; }
.fw-prev-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--ease); transform: scale(1.06);
  animation: fwKen 6s var(--ease) infinite alternate; }
.fw-prev-shots img.is-on { opacity: 1; }
.fw-prev-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  transform: scale(1.4); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.fw-prev-yt.is-on { opacity: 1; }
.fw-prev-tag { position: absolute; bottom: 8px; inset-inline-start: 8px; z-index: 2;
  padding: 3px 8px; border-radius: var(--r-pill); font-size: .58rem; font-weight: 700;
  color: var(--ink); background: var(--beam); }
/* روکش‌های کارت باید بالای پیش‌نمایش بمانند، نه زیرش */
.card.is-preview .card-rate, .card.is-preview .card-kind,
.card.is-preview .card-play, .card.is-preview .card-play-btn,
.card.is-preview .card-libs { z-index: 3; }
.card.is-preview .card-art img { opacity: 0; transition: opacity .3s var(--ease); }
@keyframes fwKen { from { transform: scale(1.04); } to { transform: scale(1.14); } }

/* ---------- رکوردهای شخصی ---------- */
.fw-recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.fw-rec { padding: 14px 12px; border-radius: var(--r-md); background: var(--ink-2);
  border: 1px solid var(--line); transition: var(--mid); }
.fw-rec:hover { border-color: var(--beam-line); transform: translateY(-2px); }
.fw-rec span { display: block; font-size: .66rem; color: var(--faint); }
.fw-rec b { display: block; margin-top: 5px; font-size: .84rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-rec i { display: block; font-style: normal; font-size: .66rem; color: var(--dim); margin-top: 3px; }
.fw-hint-soft { opacity: .6; margin-top: 12px; }

/* ---------- برگه‌های کارنامه ---------- */
.fw-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fw-tab { padding: 8px 14px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700;
  color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); transition: var(--fast); }
.fw-tab:hover { color: var(--paper); }
.fw-tab.is-on { color: var(--ink); background: var(--beam); border-color: transparent; }

.fw-cell-art { position: relative; display: block; }
.fw-cell-done { position: absolute; top: 6px; inset-inline-end: 6px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 50%; background: var(--good); }
.fw-cell-done .ico { width: 11px; height: 11px; color: var(--ink); }
.fw-cell-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.6);
  border-radius: 0 0 var(--r-sm) var(--r-sm); overflow: hidden; }
.fw-cell-bar i { display: block; height: 100%; background: var(--beam); }

.fw-dl-list { display: grid; gap: 8px; }
.fw-dl-row { animation: fwUp .4s var(--ease) var(--d, 0ms) both; }
.fw-dl-open { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px;
  border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--line);
  text-align: right; transition: var(--mid); }
.fw-dl-open:hover { border-color: var(--beam-line); transform: translateX(-4px); }
.fw-dl-open img { flex: none; width: 38px; height: 56px; object-fit: cover; border-radius: var(--r-xs); }
.fw-dl-open .fw-noart { flex: none; width: 38px; height: 56px; }
.fw-dl-open > span { flex: 1; min-width: 0; }
.fw-dl-open b { display: block; font-size: .8rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-dl-open i { display: block; font-style: normal; font-size: .66rem; color: var(--faint); margin-top: 3px; }

/* ---------- جستجوی صوتی ---------- */
.fw-voice { display: flex; align-items: center; gap: 8px; }
.fw-mic { position: relative; }
.fw-mic.is-live { color: var(--ink); background: var(--bad); }
.fw-mic-pulse { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--bad);
  opacity: 0; pointer-events: none; }
.fw-mic.is-live .fw-mic-pulse { animation: fwPulse 1.2s var(--ease) infinite; }
.fw-voice-lang select { font-size: .7rem; padding-inline: 8px; }

@keyframes fwUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fwZoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fwPop  { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fwBar  { from { width: 0; } }
@keyframes fwGrow { from { transform: scaleX(0); transform-origin: right; } }
@keyframes fwRise { from { transform: scaleY(0); opacity: 0; } }
@keyframes fwSpin { to { transform: rotate(360deg); } }
@keyframes fwShine { to { background-position: -200% 0; } }
@keyframes fwPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fwDice {
  0%, 72%, 100% { transform: none; }
  78% { transform: rotate(-18deg) scale(1.12); }
  84% { transform: rotate(16deg) scale(1.12); }
  90% { transform: rotate(-8deg) scale(1.06); }
}

@media (max-width: 640px) {
  .fw-hero { flex-wrap: wrap; padding: 20px 16px; }
  .fw-hero-total { width: 100%; text-align: right; }
  .fw-pick { flex-direction: column; }
  .fw-pick-art { width: 120px; }
  .fw-bar-row { grid-template-columns: 74px 1fr 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-continue, .fw-rail-card, .fw-hero, .fw-card, .fw-stats, .fw-cell, .fw-drop-row,
  .fw-bar-row, .fw-bar-track i, .fw-hours .fw-hb, .fw-dice, .fw-dice-ico, .fw-pick,
  .fw-cmp-bars i, .fw-rail-bar i, .fw-prev-shots img, .fw-dl-row, .fw-rec { animation: none !important; }
}

/* برچسب شبکهٔ کیف پول و کد QR در صفحهٔ حمایت */
.donate-net { display: inline-block; margin-inline-start: 8px; padding: 2px 8px;
  border-radius: var(--r-pill); font-size: .6rem; font-weight: 700; letter-spacing: .4px;
  color: var(--ink); background: var(--beam); vertical-align: middle; direction: ltr; }
.donate-qr { flex: none; width: 84px; height: 84px; border-radius: var(--r-sm);
  background: #fff; padding: 5px; transition: var(--mid); }
.donate-qr:hover { transform: scale(1.9); box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.donate-row.has-qr { align-items: center; }
.donate-row code { user-select: all; word-break: break-all; }
@media (max-width: 640px) {
  .donate-qr { width: 64px; height: 64px; }
  .donate-qr:hover { transform: scale(2.4); }
}

/* =========================================================
   تعویض زبان — دکمه، انیمیشن، و چیدمان چپ‌چین
   ========================================================= */

.lang-btn { position: relative; gap: 5px; width: auto; padding-inline: 10px; }
.lang-btn .lang-code { font-size: .68rem; font-weight: 800; letter-spacing: .5px; }
.lang-btn:hover { color: var(--beam); }
.lang-btn::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  border: 1px solid var(--beam-line); opacity: 0; transform: scale(.9);
  transition: var(--mid); pointer-events: none;
}
.lang-btn:hover::after { opacity: 1; transform: none; }

/* موج دایره‌ای که از خود دکمه پخش می‌شود */
.lang-wave {
  position: fixed; z-index: 200; pointer-events: none;
  left: var(--x); top: var(--y); width: 0; height: 0;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255,194,71,.32) 0%, rgba(255,122,77,.18) 42%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(255,194,71,.5) inset;
  animation: langWave .95s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes langWave {
  0%   { width: 0; height: 0; opacity: 1; }
  70%  { opacity: .9; }
  100% { width: calc(var(--r) * 2.2); height: calc(var(--r) * 2.2); opacity: 0; }
}

/* جرقه‌هایی که از دکمه بیرون می‌پاشند */
.lang-sparks { position: fixed; z-index: 201; left: var(--x); top: var(--y); pointer-events: none; }
.lang-sparks i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--beam); box-shadow: 0 0 12px var(--beam);
  transform: rotate(var(--a)) translateX(0) scale(1);
  animation: langSpark .85s cubic-bezier(.2,.7,.3,1) var(--d) forwards;
}
@keyframes langSpark {
  0%   { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(190px) scale(.2); }
}

/* خودِ صفحه در لحظهٔ تعویض کمی می‌چرخد و تار می‌شود */
html.is-spelling body {
  animation: langFlip .9s cubic-bezier(.22,.8,.3,1);
  transform-origin: center;
}
@keyframes langFlip {
  0%   { transform: none; filter: none; }
  38%  { transform: perspective(1400px) rotateY(6deg) scale(.985); filter: blur(2.5px) saturate(1.5); }
  62%  { transform: perspective(1400px) rotateY(-4deg) scale(.99); filter: blur(1.5px) saturate(1.3); }
  100% { transform: none; filter: none; }
}

/* گذارِ خودِ محتوا وقتی مرورگر View Transitions دارد */
::view-transition-old(root) { animation: langOut .42s cubic-bezier(.4,0,1,1) forwards; }
::view-transition-new(root) { animation: langIn .55s cubic-bezier(0,0,.2,1); }
@keyframes langOut { to { opacity: 0; transform: scale(1.04); filter: blur(6px); } }
@keyframes langIn  { from { opacity: 0; transform: scale(.97); filter: blur(8px); } }

/* --- حالت انگلیسی: چیزهایی که خاصیت منطقی ندارند --- */
html.is-en body { direction: ltr; }
html.is-en .fw-hours,
html.is-en .fw-hours-ax { direction: ltr; }
html.is-en .fw-drop-row:hover,
html.is-en .fw-dl-open:hover { transform: translateX(4px); }
html.is-en .fw-link .ico { transform: rotate(-90deg); }
html.is-en .fw-drop-row > .ico { transform: rotate(-90deg); }
html.is-en .fw-rail-go { text-align: left; }
html.is-en .fw-cell, html.is-en .fw-dl-open { text-align: left; }
html.is-en .fw-switch input:checked + .fw-switch-ui::after { transform: translateX(20px); }
html.is-en .donate-net { direction: ltr; }
html.is-en .fw-dice { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .lang-wave, .lang-sparks i { animation: none !important; display: none; }
  html.is-spelling body { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* =========================================================
   مینی‌اپ تلگرام
   ========================================================= */

/* دکمهٔ زبان داخل تلگرام هم باید باشد — قبلاً با این توضیح که «تلگرام
   Back دارد» پنهان شده بود، ولی آن استدلال به دکمهٔ برگشت مربوط است نه
   به تعویض زبان؛ نتیجه‌اش این شد که مینی‌اپ اصلاً راهی برای عوض‌کردن
   زبان نداشت. */
html.in-telegram .lang-btn { display: inline-grid; }

/* خودِ تلگرام بالای صفحه اسم اپ («Movie World») را در نوار خودش نشان
   می‌دهد؛ تکرار لوگو زیرش زائد است و در عرض باریک مینی‌اپ فقط جا می‌گیرد.
   با نبودِ برند و برگه‌های بالا (که چند خط بالاتر پنهان شدند)، فقط نوار
   کوتاهِ کنش‌ها (جستجو / پیام به مدیر / حساب) می‌ماند، سرتاسر و مرتب. */
html.in-telegram .brand { display: none; }
html.in-telegram .head-row { justify-content: flex-end; gap: 8px; }
html.in-telegram .site-head { min-height: 0; }
html.in-telegram .head-row { height: 52px; }

/* صفحهٔ انتخاب: وصل‌شدن یا ساخت حساب */
.tg-choice { padding: 4px 2px; }
.tg-choice-head { text-align: center; margin-bottom: 18px; }
.tg-logo { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #2aabee, #229ed9); margin-bottom: 10px; }
.tg-logo .ico { width: 30px; height: 30px; color: #fff; }
.tg-choice-head h2 { font-size: 1.2rem; font-weight: 800; }
.tg-choice-head code { font-size: .8rem; color: var(--beam); }

.tg-choice-tabs { display: flex; gap: 8px; margin: 16px 0 14px; }
.tg-ct { flex: 1; padding: 10px; border-radius: var(--r-md); font-size: .8rem; font-weight: 700;
  color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); transition: var(--fast); }
.tg-ct.is-on { color: var(--ink); background: var(--beam); border-color: transparent; }
.tg-cp { display: none; }
.tg-cp.is-on { display: block; animation: fwUp .35s var(--ease) both; }
.auth-hint { font-size: .68rem; color: var(--faint); margin: 8px 0 12px; line-height: 1.8; }


/* =========================================================
   نوار پایین مینی‌اپ تلگرام
   ---------------------------------------------------------
   در عرض باریک، نوار افقی برگه‌ها اسکرول مخفی می‌شد. این نوار
   پایینِ ثابت همه را با آیکون یک‌جا نشان می‌دهد. فقط داخل تلگرام.
   ========================================================= */

/* داخل تلگرام، نوار برگهٔ بالا پنهان می‌شود */
html.in-telegram .tabs { display: none; }

/* فضای پایین برای اینکه نوار روی محتوا نیفتد */
html.has-bottom-nav .site-foot { padding-bottom: 84px; }
html.has-bottom-nav body { padding-bottom: env(safe-area-inset-bottom); }

.tg-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .32);
}

.tg-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: var(--r-md);
  color: var(--faint);
  transition: color var(--fast), transform var(--fast);
  -webkit-tap-highlight-color: transparent;
}
.tg-nav-item:active { transform: scale(.9); }

.tg-nav-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
}
.tg-nav-ico .ico { width: 22px; height: 22px; }

.tg-nav-lbl {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* برگهٔ فعال: آیکون روشن، یک حبابِ نرم پشتش، و نقطهٔ زیرش */
.tg-nav-item.is-on { color: var(--beam); }
.tg-nav-item.is-on .tg-nav-ico::before {
  content: '';
  position: absolute;
  inset: -6px -10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--beam) 16%, transparent);
  animation: tgNavPop .3s var(--ease);
}
.tg-nav-item.is-on .tg-nav-ico::after {
  content: '';
  position: absolute;
  bottom: -7px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--beam);
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--beam);
}
@keyframes tgNavPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* شیت «بیشتر» */
.tg-more-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0);
  transition: background .28s var(--ease);
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.tg-more-scrim.is-on {
  background: rgba(0, 0, 0, .55);
  pointer-events: auto;
}

.tg-more-sheet {
  width: 100%;
  background: var(--ink-1);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .32s var(--ease);
}
.tg-more-scrim.is-on .tg-more-sheet { transform: none; }

.tg-more-grab {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--line-2, rgba(255,255,255,.2));
  margin: 4px auto 16px;
}

.tg-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.tg-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: var(--r-md);
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: .72rem;
  font-weight: 700;
  transition: var(--fast);
}
.tg-more-item:active { transform: scale(.94); }
.tg-more-item .tg-nav-ico { width: 30px; height: 30px; color: var(--beam); }
.tg-more-item .tg-nav-ico .ico { width: 26px; height: 26px; }


/* =========================================================
   بهینه‌سازی مینی‌اپ تلگرام — 2026
   ---------------------------------------------------------
   این لایه عمداً در انتهای فایل است تا روی ریسپانسیوهای قدیمی غلبه کند.
   ========================================================= */

html.in-telegram,
html.in-telegram body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

html.in-telegram body {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  padding-left: 0;
  padding-right: 0;
  padding-top: env(safe-area-inset-top, 0px);
}

html.in-telegram .wrap {
  width: 100%;
  max-width: 100%;
}

html.in-telegram .page {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* فیلتر ژانر + «نمی‌دونم چی ببینم»: در عرض‌های مینی‌اپ همیشه
   حداقل دو گزینه در یک ردیف می‌مانند و متن select بریده نمی‌شود. */
@media (max-width: 640px) {
  html.in-telegram .toolbar {
    align-items: stretch;
    gap: 10px;
    padding-bottom: 14px;
  }

  html.in-telegram .toolbar-title {
    width: 100%;
    min-width: 0;
  }

  html.in-telegram .toolbar-title h2 {
    min-width: 0;
    font-size: clamp(.92rem, 4vw, 1.08rem);
  }

  html.in-telegram .toolbar-filters {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  html.in-telegram .toolbar-filters .select,
  html.in-telegram .toolbar-filters .fw-dice-mini {
    min-width: 0;
    width: 100%;
  }

  /* ژانر کنار دکمهٔ قرعه‌کشی؛ سال در ردیف بعدی */
  html.in-telegram .toolbar-filters .select:first-child { order: 1; }
  html.in-telegram .toolbar-filters .fw-dice-mini { order: 2; }
  html.in-telegram .toolbar-filters .select:nth-child(2) { order: 3; }

  html.in-telegram .toolbar-filters .select select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding-inline: 12px 30px;
    font-size: .76rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  html.in-telegram .toolbar-filters .select .ico {
    inset-inline-end: 10px;
    pointer-events: none;
  }

  html.in-telegram .fw-dice-mini {
    min-height: 42px;
    justify-content: center;
    padding: 8px 10px;
    gap: 5px;
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    touch-action: manipulation;
  }

  html.in-telegram .fw-dice-mini span {
    flex: none;
  }

  /* تمام کنترل‌های رایج باید از عرض والد بزرگ‌تر نشوند */
  html.in-telegram input,
  html.in-telegram select,
  html.in-telegram textarea,
  html.in-telegram button,
  html.in-telegram .card,
  html.in-telegram .sheet,
  html.in-telegram .modal,
  html.in-telegram .pl-box,
  html.in-telegram .wp-room {
    max-width: 100%;
  }

  html.in-telegram .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
  }

  html.in-telegram .site-foot {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 340px) {
  html.in-telegram .toolbar-filters .select select,
  html.in-telegram .fw-dice-mini {
    font-size: .68rem;
  }
  html.in-telegram .toolbar-filters .select select {
    padding-inline: 9px 27px;
  }
  html.in-telegram .fw-dice-mini {
    padding-inline: 7px;
  }
}

/* منبع‌ها وقتی کارت باز می‌شود یکی‌یکی سُر می‌خورند داخل — همان حس
   قشنگ قبلی، فقط روی چیدمانِ فشردهٔ جدید. */
.emb-src {
  position: relative;
  overflow: hidden;
  animation: embSourceIn .32s var(--ease) both;
}
.emb-src:nth-child(2) { animation-delay: 25ms; }
.emb-src:nth-child(3) { animation-delay: 50ms; }
.emb-src:nth-child(4) { animation-delay: 75ms; }
.emb-src:nth-child(5) { animation-delay: 100ms; }
.emb-src:nth-child(6) { animation-delay: 125ms; }
.emb-src:nth-child(7) { animation-delay: 150ms; }
.emb-src:nth-child(8) { animation-delay: 175ms; }
.emb-src:nth-child(9) { animation-delay: 200ms; }
.emb-src:nth-child(10) { animation-delay: 225ms; }

.emb-src::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,194,71,.3), transparent 65%);
  opacity: 0;
  transform: scale(.72);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.emb-src.is-on::after { opacity: 1; transform: scale(1.15); }
.emb-src:focus-visible { outline: 2px solid var(--beam, #ffc247); outline-offset: 2px; }

@keyframes embSourceIn {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .emb-src { animation: none !important; }
  .emb-src::after { transition: none !important; }
}


/* =========================================================
   Telegram Mini App polish — safe top chrome + richer controls
   ========================================================= */
html.in-telegram {
  --tg-top-gap: 0px;
  --tg-bottom-gap: max(0px, var(--tg-safe-bottom, 0px));
}

/* وقتی نوار native تلگرام بالاست، محتوای اپ زیر آن شروع نمی‌شود.
   وقتی fullscreen موفق شد، این فاصله خودکار صفر می‌شود. */
html.in-telegram.tg-native-chrome body {
  padding-top: calc(56px + max(0px, var(--tg-safe-top, 0px)));
}
html.in-telegram.tg-native-chrome .site-head {
  top: calc(56px + max(0px, var(--tg-safe-top, 0px)));
}
html.in-telegram.tg-fullscreen body {
  padding-top: max(0px, var(--tg-safe-top, 0px));
}
html.in-telegram.tg-fullscreen .site-head {
  top: max(0px, var(--tg-safe-top, 0px));
}

/* هدر مینی‌اپ دیگر با نوار Close تلگرام هم‌پوشانی ندارد. */
html.in-telegram .site-head {
  z-index: 125;
}
html.in-telegram .head-actions {
  pointer-events: auto;
}
html.in-telegram .site-head .icon-btn {
  width: 42px;
  height: 42px;
}

/* فیلترها: به‌جای select ساده، کنترل‌ها حس اپ‌مانند و انتخابِ واضح‌تری دارند. */
html.in-telegram .toolbar-filters {
  min-width: 0;
}
html.in-telegram .toolbar-filters .select {
  position: relative;
  isolation: isolate;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    var(--ink-2);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.14);
  transition: transform .24s var(--ease), border-color .24s var(--ease),
              box-shadow .24s var(--ease), background .24s var(--ease);
  overflow: hidden;
}
html.in-telegram .toolbar-filters .select::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 85% 50%, rgba(255,194,71,.18), transparent 42%);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
html.in-telegram .toolbar-filters .select:focus-within,
html.in-telegram .toolbar-filters .select.is-set {
  border-color: rgba(255,194,71,.42);
  box-shadow: 0 0 0 1px rgba(255,194,71,.08), 0 10px 26px rgba(255,122,77,.12);
  transform: translateY(-1px);
}
html.in-telegram .toolbar-filters .select.is-set::before,
html.in-telegram .toolbar-filters .select:focus-within::before {
  opacity: 1;
  transform: scale(1);
}
html.in-telegram .toolbar-filters .select select {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-weight: 700;
  color: var(--paper);
}
html.in-telegram .toolbar-filters .select.is-set select {
  color: var(--beam);
}
html.in-telegram .toolbar-filters .select .ico {
  z-index: 2;
  color: var(--faint);
  transition: color .22s var(--ease), transform .22s var(--ease);
}
html.in-telegram .toolbar-filters .select:focus-within .ico,
html.in-telegram .toolbar-filters .select.is-set .ico {
  color: var(--beam);
  transform: translateY(1px) rotate(180deg);
}

html.in-telegram .fw-dice-mini {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,194,71,.98), rgba(255,122,77,.98));
  box-shadow: 0 10px 28px rgba(255,122,77,.18), inset 0 1px 0 rgba(255,255,255,.32);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), filter .24s var(--ease);
}
html.in-telegram .fw-dice-mini::before {
  content: '';
  position: absolute;
  inset: -40% auto -40% -30%;
  width: 38%;
  transform: rotate(18deg) translateX(-180%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
  filter: blur(2px);
  animation: tgDiceShine 3.4s var(--ease) infinite;
  pointer-events: none;
}
html.in-telegram .fw-dice-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255,122,77,.26), inset 0 1px 0 rgba(255,255,255,.42);
  filter: saturate(1.06);
}
html.in-telegram .fw-dice-mini:active { transform: scale(.97); }
html.in-telegram .fw-dice-mini span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 1px rgba(74,32,4,.15);
}
@keyframes tgDiceShine {
  0%, 55% { transform: rotate(18deg) translateX(-180%); opacity: 0; }
  64% { opacity: .95; }
  76%, 100% { transform: rotate(18deg) translateX(520%); opacity: 0; }
}

/* ریل سرویس‌های پخش در جزئیات: همهٔ سرویس‌ها با swipe قابل دسترسی‌اند. */
html.in-telegram .src-btn-row {
  width: 100%;
  min-width: 0;
  align-items: stretch;
}
html.in-telegram .src-btn-row #srcPlayMain {
  flex: 0 0 auto;
}
html.in-telegram .src-provider-pills {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 7px;
  margin: -3px -2px -7px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
}
html.in-telegram .src-provider-pills::-webkit-scrollbar { display: none; }
html.in-telegram .src-provider-pills .pill {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 13px;
  white-space: nowrap;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.09);
  transition: transform .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  scroll-snap-align: center;
}
html.in-telegram .src-provider-pills .pill:hover,
html.in-telegram .src-provider-pills .pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,194,71,.35);
}
html.in-telegram .src-provider-pills .pill.is-on {
  color: #1a1408;
  background: linear-gradient(135deg, var(--beam), var(--beam-hot));
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(255,150,70,.2);
}

/* دکمه و ریل سرویس‌ها در موبایل زیر هم می‌روند تا چیزی فشرده یا بریده نشود. */
@media (max-width: 640px) {
  html.in-telegram .src-btn-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
  }
  html.in-telegram .src-btn-row #srcPlayMain {
    width: 100%;
  }
  html.in-telegram .src-provider-pills {
    width: 100%;
    flex: none;
  }
}

/* انتخاب سایت داخل پلیر: پنل همیشه قابل اسکرول و برای لمس انگشت کاملاً آزاد است.
   دکمهٔ شناور و کارتش از نوار پایینِ خودِ مینی‌اپ (safe-bottom تلگرام)
   فاصله می‌گیرند تا رویش نیفتند. */
html.in-telegram .emb-fab {
  bottom: calc(18px + var(--tg-bottom-gap, 0px));
}
html.in-telegram .emb-stuck {
  touch-action: pan-y;
  pointer-events: auto;
  bottom: calc(78px + var(--tg-bottom-gap, 0px));
}
html.in-telegram .emb-srcs {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  max-height: min(45dvh, 360px);
}
html.in-telegram .emb-src {
  min-height: 42px;
  font-weight: 700;
}

/* فضای پایین با نوار اپ تداخل نداشته باشد. */
html.in-telegram .page {
  padding-bottom: calc(108px + var(--tg-bottom-gap));
}
html.in-telegram .site-foot {
  padding-bottom: calc(104px + var(--tg-bottom-gap));
}


html.in-telegram .toolbar-filters .select.tg-genre-pulse {
  animation: tgGenrePulse .52s var(--ease);
}
@keyframes tgGenrePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,194,71,0); }
  42% { transform: scale(1.025); box-shadow: 0 0 0 7px rgba(255,194,71,.08), 0 12px 30px rgba(255,122,77,.18); }
  100% { transform: scale(1); }
}

/* نوار پایین با ظاهر شناور و لمسی‌تر */
html.in-telegram .tg-bottom-nav {
  left: 8px;
  right: 8px;
  bottom: calc(8px + var(--tg-bottom-gap));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  padding: 6px 5px;
  background: color-mix(in srgb, var(--ink-1) 91%, transparent);
  box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
}
html.in-telegram .tg-nav-item {
  position: relative;
  min-height: 50px;
  border-radius: 16px;
  overflow: hidden;
}
html.in-telegram .tg-nav-item::before {
  content: '';
  position: absolute;
  inset: 3px 9px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,194,71,.16), rgba(255,122,77,.07));
  opacity: 0;
  transform: scale(.8);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events: none;
}
html.in-telegram .tg-nav-item.is-on::before {
  opacity: 1;
  transform: scale(1);
}
html.in-telegram .tg-nav-item.is-on .tg-nav-ico::before {
  inset: -4px -8px;
}
html.in-telegram .tg-nav-item.is-on .tg-nav-ico::after {
  bottom: -5px;
}