/*
 * پوستهٔ پلیر ویدیوی پوشش.
 *
 * چهار قاعده که کل فایل از آن‌ها پیروی می‌کند:
 *
 * ۱) **همه‌چیز دوجهته است، نوار زمان هم.** جهت از صفت `dir` روی ظرف می‌آید — فارسی RTL،
 *    انگلیسی LTR — و نوار زمان هم با آن آینه می‌شود: در رابط راست‌چین، پیشرفت از راست شروع
 *    می‌شود و به چپ می‌رود. برای همین هیچ `left`/`right` فیزیکی در نوار زمان نیست؛ همه
 *    `inset-inline-*` است، وگرنه در یکی از دو جهت وارونه می‌شد. تنها چیزی که همیشه LTR
 *    می‌ماند خودِ عددهاست (زمان، درصد، سرعت) که با `.pv__ltr` جدا می‌شوند.
 *
 * ۲) **همه‌چیز از توکن می‌آید.** `--pv-accent` و `--pv-radius` را پلیر از تنظیمات ماژول روی
 *    ظرف می‌نشاند؛ بقیهٔ توکن‌ها همین‌جا تعریف می‌شوند. رنگ ثابتِ پراکنده در این فایل یعنی
 *    تنظیماتِ سایت بی‌اثر است.
 *
 * ۳) **وسط‌چین با مختصات فیزیکی.** هر چیزی که باید دقیقاً وسط قاب بنشیند (دکمهٔ بزرگ،
 *    اسپینر، پیام لحظه‌ای) از grid استفاده می‌کند، نه از `inset-inline-start: 50%` به‌علاوهٔ
 *    `translate`. آن ترکیب فقط در یک جهت درست وسط می‌افتد و در جهت دیگر عنصر را از قاب
 *    بیرون می‌اندازد.
 *
 * ۴) **آیکون‌ها باید روی تصویر روشن هم دیده شوند.** هر SVG یک `drop-shadow` نازک دارد؛ بدون
 *    آن، آیکون سفید روی یک قاب آفتابی محو می‌شود — همان چیزی که «آیکون‌ها شارپ نیست» را
 *    می‌سازد.
 */

/* ==================================================================== توکن‌ها ==== */

/*
 * فونت پلیر — عمداً از قالب سایت به ارث نمی‌رسد.
 *
 * پلیر یک جزء بسته است، نه یک تکه متن در صفحه: نوار زمان، منوها و عددها روی شیشهٔ تیره
 * می‌نشینند و با فونت‌های خیلی متفاوت (قالبی با فونت تزئینی، یا قالبی که اصلاً فونت فارسی
 * اعلام نکرده) یا جا نمی‌شوند یا ناخوانا می‌شوند. `font-family: inherit` یعنی ظاهر پلیر در
 * هر سایتی یک چیز دیگر — و همان چیزی است که این بلوک جلویش را می‌گیرد.
 *
 * فایل‌ها از ماژول پلتفرم می‌آیند و کپی نمی‌شوند: پلتفرم همیشه نصب است (خودِ CMS است) و
 * نسخهٔ دوم همان پنج فایل، فقط ۱۰۰ کیلوبایت تکراری به هر صفحه اضافه می‌کرد. اگر روزی مسیر
 * عوض شود، `font-display: swap` و پشتوانهٔ سیستمی یعنی متن ناپدید نمی‌شود.
 */
@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-400.woff2") format("woff2");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-500.woff2") format("woff2");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-600.woff2") format("woff2");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-700.woff2") format("woff2");
}

/*
 * چیدمانِ فونت یک توکنِ سندی است، نه یک توکنِ `.pv`.
 *
 * صفحهٔ امبد یک سند مستقل است و نوار عنوانش — تنها چیزی که به سایت مقصد می‌گوید این ویدیو
 * از کجا آمده — بیرون از `.pv` می‌نشیند. با تعریفِ توکن روی `.pv`، آن نوار به فونت سیستمی
 * می‌افتاد و در یک قاب، دو فونت فارسیِ متفاوت کنار هم دیده می‌شد.
 */
:root {
    --pv-font: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
}

.pv {
    /* از تنظیمات پلیر سایت؛ مقدارهای اینجا فقط پیش‌فرضِ ظرفِ بدون تنظیمات‌اند. */
    --pv-accent: #7c3aed;
    --pv-radius: 16px;
    --pv-aspect: 16 / 9;

    /* پالت تیره — پیش‌فرض پلیر، چون تصویر روی زمینهٔ تیره بهتر دیده می‌شود. */
    --pv-surface: #07070b;
    --pv-fg: #ffffff;
    --pv-fg-dim: rgba(255, 255, 255, .74);

    /* «شیشه»: هر پنل شناور (نوار کنترل، منو، پیش‌نمایش، کارت خطا) از همین توکن‌ها ساخته
       می‌شود تا همه یک جنس داشته باشند. */
    --pv-glass: rgba(14, 14, 19, .62);
    --pv-glass-strong: rgba(16, 16, 22, .88);
    --pv-glass-brd: rgba(255, 255, 255, .12);
    --pv-glass-fg: #ffffff;
    --pv-glass-dim: rgba(255, 255, 255, .58);
    --pv-glass-hover: rgba(255, 255, 255, .1);
    --pv-glass-active: rgba(255, 255, 255, .16);
    --pv-blur: blur(20px) saturate(1.6);

    --pv-track: rgba(255, 255, 255, .26);
    --pv-buffer: rgba(255, 255, 255, .48);
    --pv-ring: #ffffff;

    --pv-shadow: 0 20px 48px -16px rgba(0, 0, 0, .72), 0 6px 18px -10px rgba(0, 0, 0, .6);
    --pv-shadow-soft: 0 10px 26px -12px rgba(0, 0, 0, .6);
    --pv-icon-shadow: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55));

    /* اندازه‌ها یک‌جا، چون نسخهٔ فشرده فقط همین‌ها را عوض می‌کند. */
    --pv-btn: 40px;
    --pv-icon: 22px;
    --pv-gap: 2px;
    --pv-pad: 12px;

    /* بلندی نوار زمان و کل پنل. هرچه بالای پنل می‌نشیند — منو، کارت «ادامه»، واترمارکِ
       پایین، نشان برند — ارتفاعش را از همین‌جا حساب می‌کند؛ وگرنه هر بار که اندازهٔ دکمه
       عوض شود، یکی از آن‌ها می‌رود زیر نوار. */
    --pv-timeline-h: 22px;
    --pv-panel-h: calc(var(--pv-btn) + var(--pv-timeline-h) + 14px);

    --pv-ease: cubic-bezier(.2, .7, .3, 1);
    --pv-fast: .16s;
    --pv-mid: .26s;

    /* رنگ نور محیطی؛ JS از میانگین رنگ قاب پرش می‌کند. */
    --pv-glow: transparent;

    position: relative;
    display: block;
    inline-size: 100%;
    /* نسبت تصویر پیش از رسیدن متادیتا هم جای درست را می‌گیرد؛ بدون آن، صفحه هنگام
       بارگذاری یک پرش چیدمان دارد که در Core Web Vitals هم دیده می‌شود. */
    aspect-ratio: var(--pv-aspect);
    overflow: hidden;
    border-radius: var(--pv-radius);
    background: var(--pv-surface);
    color: var(--pv-fg);
    /* فونت خودِ پلیر، نه فونت قالب — دلیلش بالای همین فایل نوشته شده. */
    font-family: var(--pv-font, "Segoe UI", Tahoma, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.5;
    isolation: isolate;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* پرسمان ظرف، نه پرسمان پنجره: همین پلیر یک‌بار تمام‌عرض صفحه است و یک‌بار داخل یک ستون
       ۳۲۰ پیکسلی. تصمیمِ «کدام دکمه جا می‌شود» به عرض ظرف مربوط است نه به عرض نمایشگر. */
    container-type: inline-size;
    container-name: pv;
    transition: box-shadow .5s ease;
}

.pv *,
.pv *::before,
.pv *::after {
    box-sizing: border-box;
}

/*
 * صفت `hidden` باید همیشه برنده باشد.
 *
 * پنهان‌کردن در جاوااسکریپت همه‌جا با `node.hidden = true` انجام می‌شود، ولی قاعده‌ای که
 * مرورگر برای `[hidden]` دارد در شیت پیش‌فرض است و از هر قاعدهٔ کلاس‌داری در این فایل
 * ضعیف‌تر. یعنی `.pv__error { display: flex }` صفت را بی‌اثر می‌کرد و کارت «تلاش دوباره» —
 * و به همان شکل نشان «زنده» با `display: inline-flex` — روی هر پلیری، همیشه، دیده می‌شد.
 *
 * `!important` اینجا لازم است نه سلیقه‌ای: قاعده باید از تک‌تکِ آن `display`ها قوی‌تر باشد،
 * وگرنه فردا هر عنصر تازه‌ای که هم `hidden` بخورد و هم `display` بگیرد، همین اشکال را
 * تکرار می‌کند.
 */
.pv [hidden] {
    display: none !important;
}

.pv:focus {
    outline: none;
}

.pv svg {
    display: block;
    filter: var(--pv-icon-shadow);
    /* آیکون‌ها روی شبکهٔ ۲۴ کشیده شده‌اند؛ این خط لبه‌ها را روی نمایشگر ۱x هم تمیز نگه
       می‌دارد. */
    shape-rendering: geometricPrecision;
}

/*
 * مثلثِ «پخش» جهت دارد: در LTR رو به راست یعنی «جلو»، ولی در RTL جلو سمت چپ است و همان
 * مثلث رو به راست، «برگرد» خوانده می‌شود. پس در جهت راست‌به‌چپ آینه‌اش می‌کنیم — دقیقاً
 * همان کاری که برای فلشِ منو در پایین همین فایل انجام شده. بقیهٔ آیکون‌ها جهت ندارند و
 * دست‌نخورده می‌مانند.
 */
.pv[dir="rtl"] svg[data-pv-icon="play"] { transform: scaleX(-1); }

/* داخل پنل‌های شیشه‌ای سایه لازم نیست — پس‌زمینهٔ خودش کنتراست دارد. */
.pv__menu svg,
.pv__ctx svg,
.pv__sheet svg,
.pv__stats svg,
.pv__brand svg {
    filter: none;
}

/*
 * پوستهٔ روشن: فقط پنل‌ها و متن‌ها عوض می‌شوند؛ خودِ صحنه همیشه تیره می‌ماند چون پشت ویدیو
 * نشسته و هیچ ویدیویی روی زمینهٔ سفید بهتر دیده نمی‌شود.
 */
.pv[data-pv-theme="light"] {
    --pv-glass: rgba(252, 252, 253, .78);
    --pv-glass-strong: rgba(255, 255, 255, .94);
    --pv-glass-brd: rgba(0, 0, 0, .08);
    --pv-glass-fg: #15151c;
    --pv-glass-dim: rgba(20, 20, 30, .58);
    --pv-glass-hover: rgba(0, 0, 0, .06);
    --pv-glass-active: rgba(0, 0, 0, .1);
    --pv-shadow: 0 20px 48px -18px rgba(0, 0, 0, .3), 0 6px 16px -10px rgba(0, 0, 0, .22);
    --pv-shadow-soft: 0 10px 26px -14px rgba(0, 0, 0, .28);
}

@media (prefers-color-scheme: light) {
    .pv[data-pv-theme="auto"] {
        --pv-glass: rgba(252, 252, 253, .78);
        --pv-glass-strong: rgba(255, 255, 255, .94);
        --pv-glass-brd: rgba(0, 0, 0, .08);
        --pv-glass-fg: #15151c;
        --pv-glass-dim: rgba(20, 20, 30, .58);
        --pv-glass-hover: rgba(0, 0, 0, .06);
        --pv-glass-active: rgba(0, 0, 0, .1);
        --pv-shadow: 0 20px 48px -18px rgba(0, 0, 0, .3), 0 6px 16px -10px rgba(0, 0, 0, .22);
        --pv-shadow-soft: 0 10px 26px -14px rgba(0, 0, 0, .28);
    }
}

.pv--fullscreen {
    border-radius: 0;
    aspect-ratio: auto;
    block-size: 100%;
    box-shadow: none;
}

/* نور محیطی: هالهٔ بیرونی از میانگین رنگ قاب. داخل قاب را canvas پر می‌کند (پایین‌تر). */
.pv--ambient {
    box-shadow: 0 0 70px -10px var(--pv-glow), 0 0 28px -12px var(--pv-glow);
}

.pv--fullscreen.pv--ambient {
    box-shadow: none;
}

/* ====================================================================== صحنه ==== */

.pv__stage {
    position: absolute;
    inset: 0;
    display: block;
    background: #000;
}

.pv__video {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: contain;
    /* شفاف، نه سیاه: در حالت نور محیطی، حاشیه‌های لترباکس باید canvasِ زیر را نشان بدهند. */
    background: transparent;
}

/* حالت «پرکردن قاب» — برای ویدیوی عمودی یا نسبتِ ناهم‌خوان. */
.pv--fit-cover .pv__video { object-fit: cover; }

.pv__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    /* بزرگ‌نمایی + محوکردن، تا لبه‌های canvasِ ۳۲×۱۸ اصلاً دیده نشوند. */
    transform: scale(1.25);
    filter: blur(46px) saturate(1.9);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.pv--ambient .pv__glow { opacity: .85; }

.pv__embed {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
}

/* استایل زیرنویس. بدون این، اندازهٔ پیش‌فرض روی موبایل بزرگ و روی دسکتاپ کوچک است. */
.pv__video::cue {
    background: rgba(0, 0, 0, .64);
    color: #fff;
    font-size: clamp(.9rem, 2.2vw, 1.35rem);
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* ------------------------------------------------------------------ روکش‌ها ---- */

.pv__title {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 3;
    /* جا برای نشان برند در گوشهٔ مقابل. */
    padding: 16px 20px 40px;
    /* جا برای نشان برند در گوشهٔ مقابل. */
    padding-inline-end: 100px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    /* گرادیان به‌جای پس‌زمینهٔ توپر: تصویر پشت متن دیده می‌شود. */
    background: linear-gradient(to bottom, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 55%, transparent 100%);
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity var(--pv-mid) var(--pv-ease), transform var(--pv-mid) var(--pv-ease);
}

/* ------------------------------------------------------------------- برند ---- */

/*
 * نشان سازنده. یک لینک واقعی است، نه تصویر تزئینی: کاربر باید بتواند بزند و برود.
 * برای همین `pointer-events` دارد در حالی که بقیهٔ روکش‌ها ندارند.
 */
/*
 * بدون کادر، بدون پس‌زمینه، بدون بلور — فقط خودِ لوگو.
 *
 * نسخهٔ قبلی یک قرصِ شیشه‌ای با نام کنارِ نشان بود و نتیجه‌اش این می‌شد که گوشهٔ تصویر
 * سنگین‌تر از خودِ نوار کنترل به نظر برسد. نشانِ گوشه باید در نگاه اول دیده نشود و در نگاه
 * دوم پیدا باشد.
 */
.pv__brand {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    color: #fff;
    text-decoration: none;
    /* سایه به‌جای پس‌زمینه: لوگوی سفید روی قابِ روشن هم لبه دارد. */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
    opacity: .55;
    transition: opacity var(--pv-fast) var(--pv-ease), transform var(--pv-fast) var(--pv-ease);
}

.pv__brand:hover,
.pv__brand:focus-visible {
    opacity: 1;
    transform: scale(1.04);
}

/* لوگوی نوشته‌نشان: ارتفاع ثابت، عرض از خودِ تصویر. */
.pv__brand-logo {
    display: block;
    block-size: 15px;
    inline-size: auto;
    max-inline-size: 40cqi;
    object-fit: contain;
    /*
     * لوگوی رنگی روی ویدیو گم می‌شود — چه تیره باشد و چه روشن. این دو تبدیل هر لوگویی را،
     * از جمله لوگویی که مدیر خودش آپلود کرده، به یک نشانِ سفیدِ تک‌رنگ می‌کند و شفافیتش را
     * هم دست‌نخورده نگه می‌دارد.
     */
    filter: brightness(0) invert(1);
}

/* نشان جایگزین وقتی لوگویی تنظیم نشده. */
.pv__brand-mark {
    display: grid;
    place-items: center;
    inline-size: 17px;
    block-size: 17px;
    flex: 0 0 auto;
    border-radius: 5px;
    overflow: hidden;
}

.pv__brand-mark img,
.pv__brand-mark svg {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.pv__brand-name {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.pv__brand--top-end { inset-block-start: 12px; inset-inline-end: 12px; }
.pv__brand--top-start { inset-block-start: 12px; inset-inline-start: 12px; }
.pv__brand--bottom-end { inset-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 8px); inset-inline-end: 12px; }
.pv__brand--bottom-start { inset-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 8px); inset-inline-start: 12px; }

/* نشان برند با کنترل‌ها می‌رود و می‌آید: در حالت بی‌کاری هیچ روکشی روی تصویر نمی‌ماند. */
.pv--idle .pv__brand { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------- واترمارک ---- */

.pv__watermark {
    position: absolute;
    z-index: 4;
    padding: 4px 10px;
    font-size: .78rem;
    color: #fff;
    background: rgba(0, 0, 0, .34);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    pointer-events: none;
    white-space: nowrap;
}

.pv__watermark--top-start { inset-block-start: 12px; inset-inline-start: 12px; }
.pv__watermark--top-end { inset-block-start: 12px; inset-inline-end: 12px; }
.pv__watermark--bottom-start { inset-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 12px); inset-inline-start: 12px; }
.pv__watermark--bottom-end { inset-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 12px); inset-inline-end: 12px; }

/* وقتی واترمارک و نشان برند یک گوشه را می‌خواهند، واترمارک یک ردیف پایین‌تر می‌رود. */
.pv__watermark--shifted.pv__watermark--top-start,
.pv__watermark--shifted.pv__watermark--top-end { inset-block-start: 56px; }
.pv__watermark--shifted.pv__watermark--bottom-start,
.pv__watermark--shifted.pv__watermark--bottom-end { inset-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 56px); }

/* واترمارک متحرک برای ضد برش: جای ثابت را می‌شود در تدوین برید. */
.pv__watermark--moving {
    inset-block-start: 12px;
    inset-inline-start: 12px;
    animation: pv-drift 24s linear infinite alternate;
}

@keyframes pv-drift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-40vw, 30vh); }
    50% { transform: translate(-10vw, 60vh); }
    75% { transform: translate(-55vw, 12vh); }
    100% { transform: translate(-5vw, 45vh); }
}

/* ------------------------------------------------------ مرکز صحنه (grid) ---- */

/*
 * همه‌چیزِ وسط‌قاب داخل یک لایهٔ grid می‌نشیند. این تنها راهی است که در RTL و LTR یکسان
 * وسط می‌افتد — جمعِ `inset-inline-start: 50%` و `translate` در یکی از دو جهت غلط است.
 */
.pv__center {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.pv__big {
    grid-area: 1 / 1;
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 76px;
    block-size: 76px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--pv-accent);
    background: color-mix(in srgb, var(--pv-accent) 92%, #000 8%);
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .2);
    cursor: pointer;
    pointer-events: auto;
    transition: transform var(--pv-mid) var(--pv-ease), opacity var(--pv-mid) var(--pv-ease),
                box-shadow var(--pv-mid) var(--pv-ease);
}

/* حلقهٔ نازکِ دور دکمه — همان چیزی که دکمه را «شناور» نشان می‌دهد نه «چسبیده». */
.pv__big::before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.9);
    transition: opacity var(--pv-mid) var(--pv-ease), transform var(--pv-mid) var(--pv-ease);
}

.pv__big svg { inline-size: 34px; block-size: 34px; filter: none; }

.pv__big:hover,
.pv__big:focus-visible {
    transform: scale(1.07);
    box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.pv__big:hover::before,
.pv__big:focus-visible::before { opacity: 1; transform: scale(1); }

.pv__big:active { transform: scale(.97); }

/* دکمهٔ بزرگ فقط وقتی معنا دارد که چیزی در حال پخش نیست. */
/* در حالت خطا هم، وگرنه دکمهٔ بزرگ پشتِ کارت خطا می‌ماند و «تلاش دوباره» روی یک دایرهٔ
   پخشِ نیمه‌پیدا می‌نشیند — دو دکمه روی هم برای یک کار. */
.pv--playing .pv__big,
.pv--busy .pv__big,
.pv[data-pv-state="error"] .pv__big { opacity: 0; transform: scale(.86); pointer-events: none; }

.pv__spinner {
    grid-area: 1 / 1;
    inline-size: 52px;
    block-size: 52px;
    border: 3px solid rgba(255, 255, 255, .22);
    border-block-start-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pv-fast) linear;
    animation: pv-spin .85s linear infinite;
}

.pv--busy .pv__spinner { opacity: 1; }

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

/* ------------------------------------------------------- پیام لحظه‌ای ---- */

.pv__toast {
    /* بالای نوار کنترل، نه وسط قاب: وسطِ قاب جای دکمهٔ بزرگ پخش است و پیام روی آن می‌نشست. */
    grid-area: 1 / 1;
    place-self: end center;
    margin-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 20px);
    z-index: 6;
    padding: 9px 18px;
    font-size: .95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--pv-glass-fg);
    background: var(--pv-glass-strong);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 999px;
    box-shadow: var(--pv-shadow-soft);
    backdrop-filter: var(--pv-blur);
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    transition: opacity var(--pv-fast) var(--pv-ease), transform var(--pv-fast) var(--pv-ease);
}

.pv__toast--on { opacity: 1; transform: scale(1); }

/* ------------------------------------------------ کارت‌های وسط صفحه ---- */

.pv__resume,
.pv__error {
    position: absolute;
    /*
     * بالاتر از نوار کنترل (۸)، نه پایین‌تر.
     *
     * لایهٔ `.pv__controls` ۵۶ پیکسل padding بالایی دارد (جای گرادیان)، پس کادرش تا بالای
     * پنل کشیده می‌شود و با z-index بزرگ‌تر، نیمهٔ پایینِ دکمه‌های «ادامه»/«از ابتدا» را
     * می‌بلعید: دکمه دیده می‌شد ولی کلیک به آن نمی‌رسید.
     */
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    font-size: .92rem;
    color: var(--pv-glass-fg);
    background: var(--pv-glass-strong);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 16px;
    box-shadow: var(--pv-shadow);
    backdrop-filter: var(--pv-blur);
    animation: pv-fade var(--pv-mid) var(--pv-ease);
}

.pv__resume {
    inset-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 16px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    max-inline-size: calc(100% - 32px);
    justify-content: center;
}

/*
 * در RTL، `inset-inline-start: 50%` یعنی `right: 50%` — یعنی لبهٔ راستِ کارت روی مرکز
 * می‌نشیند — پس برای وسط‌چین‌شدن باید نصفِ عرض به *راست* بلغزد. عوض‌کردنِ مبدأ به
 * `inset-inline-end` همان لغزش را در جهت غلط جمع می‌کرد و کارت را از قاب بیرون می‌انداخت.
 */
.pv[dir="rtl"] .pv__resume { transform: translateX(50%); }

.pv__error {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    max-inline-size: min(84%, 380px);
    text-align: center;
}

.pv[dir="rtl"] .pv__error { transform: translate(50%, -50%); }

.pv__error-text { margin: 0; line-height: 1.7; }

.pv__resume button,
.pv__retry {
    padding: 8px 18px;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: #fff;
    background: var(--pv-accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: filter var(--pv-fast) var(--pv-ease), transform var(--pv-fast) var(--pv-ease);
}

.pv__resume button:hover,
.pv__retry:hover { filter: brightness(1.12); }

.pv__resume button:active,
.pv__retry:active { transform: scale(.96); }

.pv__resume-no {
    background: transparent !important;
    color: var(--pv-glass-fg) !important;
    border: 1px solid var(--pv-glass-brd) !important;
}

@keyframes pv-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================================================================== کنترل‌ها ==== */

.pv__controls {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 8;
    padding: 56px var(--pv-pad) var(--pv-pad);
    /* سایهٔ ملایم زیرِ پنل شیشه‌ای: بدون آن، پنل روی تصویرِ روشن «شناور» به نظر نمی‌رسد. */
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 46%, transparent 100%);
    transition: opacity var(--pv-mid) var(--pv-ease), transform var(--pv-mid) var(--pv-ease);
}

/*
 * پنل شیشه‌ای — همان چیزی که به پلیر ظاهر مدرن می‌دهد.
 *
 * `backdrop-filter` روی ویدیو در همهٔ مرورگرهای امروزی کار می‌کند؛ برای آنکه ندارد،
 * `--pv-glass` به‌تنهایی یک زمینهٔ نیمه‌کدرِ خوانا می‌سازد.
 */
.pv__panel {
    max-inline-size: 1400px;
    margin-inline: auto;
    padding: 4px 8px 6px;
    background: var(--pv-glass);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 18px;
    box-shadow: 0 8px 30px -14px rgba(0, 0, 0, .8);
    backdrop-filter: var(--pv-blur);
}

/* پنهان‌شدن خودکار. کنترل‌ها همزمان `inert` می‌شوند (در JS) تا Tab داخل چیزی که دیده
   نمی‌شود گیر نکند. */
.pv--idle .pv__controls,
.pv--idle .pv__title {
    opacity: 0;
    transform: translateY(8px);
}

.pv--idle { cursor: none; }

.pv__bar {
    display: flex;
    align-items: center;
    gap: var(--pv-gap);
    padding-block-start: 2px;
}

.pv__spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------------ دکمه ---- */

.pv__btn {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--pv-btn);
    block-size: var(--pv-btn);
    flex: 0 0 auto;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color var(--pv-fast) var(--pv-ease), color var(--pv-fast) var(--pv-ease),
                transform var(--pv-fast) var(--pv-ease);
}

.pv__btn svg { inline-size: var(--pv-icon); block-size: var(--pv-icon); }

.pv__btn:hover { background: var(--pv-glass-hover); }
.pv__btn:active { transform: scale(.9); }

/* دکمهٔ روشن (زیرنویس فعال، حلقه فعال، آمار باز) با رنگ تأکید علامت می‌خورد. */
.pv__btn--on { color: var(--pv-accent); background: var(--pv-glass-hover); }
.pv[data-pv-theme="light"] .pv__btn--on { color: #fff; background: var(--pv-accent); }

.pv__btn[disabled] { opacity: .38; pointer-events: none; }

/* حلقهٔ فوکوس دیدنی — روی گرادیان تیره، رنگ تأکید به‌تنهایی کافی نیست. */
.pv__btn:focus-visible,
.pv__track:focus-visible,
.pv__row:focus-visible,
.pv__item:focus-visible,
.pv__brand:focus-visible,
.pv__brand-row:focus-visible,
.pv__live:focus-visible,
.pv__vol:focus-visible {
    outline: 2px solid var(--pv-ring);
    outline-offset: 2px;
}

/* ------------------------------------------------------- راهنمای دکمه ---- */

/*
 * راهنمای خودمان به‌جای `title` مرورگر: `title` نیم‌ثانیه تأخیر دارد، جای ظاهرش دست ما
 * نیست و وسط یک پلیر تمام‌صفحه، یک کادر خاکستریِ سیستمی می‌شود.
 */
.pv__btn[data-pv-tip]::after {
    content: attr(data-pv-tip);
    position: absolute;
    inset-block-end: calc(100% + 10px);
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 2;
    padding: 5px 10px;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--pv-glass-fg);
    background: var(--pv-glass-strong);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 8px;
    box-shadow: var(--pv-shadow-soft);
    backdrop-filter: var(--pv-blur);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pv-fast) var(--pv-ease), transform var(--pv-fast) var(--pv-ease);
}

.pv[dir="rtl"] .pv__btn[data-pv-tip]::after { transform: translateX(50%) translateY(4px); }

.pv__btn[data-pv-tip]:hover::after,
.pv__btn[data-pv-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.pv[dir="rtl"] .pv__btn[data-pv-tip]:hover::after,
.pv[dir="rtl"] .pv__btn[data-pv-tip]:focus-visible::after { transform: translateX(50%) translateY(0); }

/* دکمهٔ اول و آخرِ نوار، راهنمایش را به لبه نمی‌چسباند. */
.pv__bar > .pv__btn:first-child[data-pv-tip]::after,
.pv[dir="rtl"] .pv__bar > .pv__btn:first-child[data-pv-tip]::after {
    inset-inline-start: 0;
    transform: translateY(4px);
}

.pv__bar > .pv__btn:first-child[data-pv-tip]:hover::after,
.pv[dir="rtl"] .pv__bar > .pv__btn:first-child[data-pv-tip]:hover::after { transform: translateY(0); }

.pv__bar > .pv__btn:last-child[data-pv-tip]::after,
.pv[dir="rtl"] .pv__bar > .pv__btn:last-child[data-pv-tip]::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateY(4px);
}

.pv__bar > .pv__btn:last-child[data-pv-tip]:hover::after,
.pv[dir="rtl"] .pv__bar > .pv__btn:last-child[data-pv-tip]:hover::after { transform: translateY(0); }

/* منو که باز است، راهنما فقط جلوی دید را می‌گیرد. */
.pv--menu .pv__btn[data-pv-tip]::after { display: none; }

/* ------------------------------------------------------------------ زمان ---- */

.pv__time {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-inline: 10px;
    font-size: .82rem;
    /* ارقام با عرض ثابت، وگرنه نوار در هر ثانیه یک پیکسل می‌لرزد. */
    font-variant-numeric: tabular-nums;
    color: var(--pv-fg-dim);
    white-space: nowrap;
}

.pv__cur { color: #fff; font-weight: 500; }
.pv__sep { opacity: .5; }

/* -------------------------------------------------------------------- صدا ---- */

.pv__volume {
    display: flex;
    align-items: center;
}

.pv__vol {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 0;
    block-size: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    transition: inline-size var(--pv-mid) var(--pv-ease), opacity var(--pv-mid) var(--pv-ease),
                margin var(--pv-mid) var(--pv-ease);
}

/* نوار صدا فقط هنگام نیاز باز می‌شود: در نوار کنترل، جا گران‌ترین چیز است. */
.pv__volume:hover .pv__vol,
.pv__volume:focus-within .pv__vol {
    inline-size: 82px;
    opacity: 1;
    margin-inline-end: 8px;
}

.pv__vol::-webkit-slider-runnable-track {
    block-size: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, #fff var(--pv-vol, 100%), rgba(255, 255, 255, .28) var(--pv-vol, 100%));
}

.pv__vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    inline-size: 12px;
    block-size: 12px;
    margin-block-start: -4px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.pv__vol::-moz-range-track {
    block-size: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
}

.pv__vol::-moz-range-progress {
    block-size: 4px;
    border-radius: 999px;
    background: #fff;
}

.pv__vol::-moz-range-thumb {
    inline-size: 12px;
    block-size: 12px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------- نشانگر زنده ---- */

.pv__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    block-size: 30px;
    margin-inline: 4px;
    padding: 0 12px;
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(239, 68, 68, .16);
    border: 1px solid rgba(239, 68, 68, .34);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--pv-fast) var(--pv-ease), border-color var(--pv-fast) var(--pv-ease);
}

.pv__live:hover { background: rgba(239, 68, 68, .26); }

.pv__live i {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .55);
    animation: pv-pulse 1.9s ease-out infinite;
}

/* عقب‌افتاده از لبه: خاکستری و قابل کلیک — کاربر باید بتواند برگردد، نه فقط ببیند. */
.pv__live--behind {
    color: var(--pv-fg-dim);
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
}

.pv__live--behind i { background: #9ca3af; box-shadow: none; animation: none; }

@keyframes pv-pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
    100% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* ================================================================= نوار زمان ==== */

/*
 * نوار زمان جهتش را از رابط می‌گیرد: در پلیر فارسی از راست پر می‌شود، در پلیر انگلیسی از چپ.
 * هیچ صفت `dir` روی این عنصر نیست تا همین ارث‌بری اتفاق بیفتد.
 */
.pv__timeline {
    position: relative;
    padding: 10px 8px 8px;
    cursor: pointer;
}

.pv__track {
    position: relative;
    block-size: 4px;
    border-radius: 999px;
    background: var(--pv-track);
    touch-action: none;
    transition: block-size var(--pv-fast) var(--pv-ease);
}

.pv__timeline:hover .pv__track,
.pv__track:focus-visible { block-size: 7px; }

.pv__buffer,
.pv__played,
.pv__hover {
    position: absolute;
    inset-block: 0;
    /* منطقی، نه فیزیکی: در رابط راست‌چین از لبهٔ راست شروع می‌شود. */
    inset-inline-start: 0;
    inline-size: 0;
    border-radius: 999px;
}

.pv__buffer { background: var(--pv-buffer); }

/* ردِ نشانگر ماوس: بازخوردی که «کجا می‌پرم» را پیش از کلیک نشان می‌دهد. */
.pv__hover { background: rgba(255, 255, 255, .3); opacity: 0; transition: opacity var(--pv-fast) linear; }
.pv__timeline:hover .pv__hover { opacity: 1; }

.pv__played {
    background: var(--pv-accent);
    box-shadow: 0 0 12px -2px var(--pv-accent);
}

.pv__handle {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    inline-size: 14px;
    block-size: 14px;
    margin-inline-start: -7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .5), 0 0 0 4px color-mix(in srgb, var(--pv-accent) 32%, transparent);
    transform: translateY(-50%) scale(0);
    transition: transform var(--pv-fast) var(--pv-ease);
}

.pv__timeline:hover .pv__handle,
.pv__track:focus-visible .pv__handle,
.pv--seeking .pv__handle { transform: translateY(-50%) scale(1); }

.pv__chapters { position: absolute; inset: 0; pointer-events: none; }

.pv__chapter {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 2px;
    margin-inline-start: -1px;
    background: rgba(0, 0, 0, .55);
    box-shadow: 0 0 0 .5px rgba(255, 255, 255, .25);
}

/* --------------------------------------------------------- پیش‌نمایش ---- */

.pv__preview {
    position: absolute;
    inset-block-end: 26px;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px;
    background: var(--pv-glass-strong);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 12px;
    box-shadow: var(--pv-shadow);
    backdrop-filter: var(--pv-blur);
    pointer-events: none;
}

.pv__preview--on { display: flex; }

.pv__preview-img {
    background-repeat: no-repeat;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.pv__preview-title {
    max-inline-size: 180px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--pv-glass-fg);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv__preview-time {
    font-size: .74rem;
    font-weight: 500;
    color: var(--pv-glass-dim);
    font-variant-numeric: tabular-nums;
}

/* ======================================================== منو و منوی راست‌کلیک ==== */

/*
 * منوی تنظیمات و منوی راست‌کلیک یک جنس دارند و یک مجموعه ردیف: هر تفاوت ظاهری بین این دو،
 * برای کاربر یعنی «دو تا چیز مختلف»، در حالی که همان کارها را می‌کنند.
 */
.pv__menu,
.pv__ctx {
    position: absolute;
    z-index: 9;
    min-inline-size: 236px;
    /*
     * درصدها نسبت به خودِ پلیرند — هر سه پنل فرزند مستقیم `.pv` هستند.
     *
     * واحد `cq*` اینجا کار نمی‌کند: `.pv` فقط ظرفِ inline-size است، پس `cqb` به واحد
     * پنجره برمی‌گردد و سقفِ ارتفاعِ منو دیگر ربطی به اندازهٔ پلیر ندارد.
     */
    max-inline-size: min(320px, calc(100% - 24px));
    padding: 6px;
    color: var(--pv-glass-fg);
    /* رنگ توپر اول می‌آید تا مرورگر بدون backdrop-filter هم منوی خوانا بدهد. */
    background: var(--pv-glass-strong);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 16px;
    box-shadow: var(--pv-shadow);
    backdrop-filter: var(--pv-blur);
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--pv-glass-active) transparent;
    animation: pv-pop var(--pv-mid) var(--pv-ease);
}

.pv__menu {
    inset-block-end: calc(var(--pv-pad) + var(--pv-panel-h) + 10px);
    inset-inline-end: calc(var(--pv-pad) + 8px);
    max-block-size: min(62%, 340px);
    transform-origin: bottom var(--pv-menu-origin, right);
}

.pv__ctx {
    max-block-size: min(80%, 420px);
    transform-origin: top var(--pv-menu-origin, left);
}

.pv__menu::-webkit-scrollbar,
.pv__ctx::-webkit-scrollbar,
.pv__sheet::-webkit-scrollbar { inline-size: 6px; }

.pv__menu::-webkit-scrollbar-thumb,
.pv__ctx::-webkit-scrollbar-thumb,
.pv__sheet::-webkit-scrollbar-thumb { background: var(--pv-glass-active); border-radius: 999px; }

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

/* --------------------------------------------------------- سر منو ---- */

.pv__menu-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 8px;
    margin-block-end: 4px;
    border-block-end: 1px solid var(--pv-glass-brd);
}

.pv__menu-back {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    flex: 0 0 auto;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--pv-fast) var(--pv-ease);
}

.pv__menu-back:hover { background: var(--pv-glass-hover); }
.pv__menu-back svg { inline-size: 18px; block-size: 18px; }

/* فلشِ «برگشت» در RTL باید به سمت راست باشد؛ همان آیکون، آینه‌شده. */
.pv[dir="rtl"] .pv__menu-back svg { transform: scaleX(-1); }

.pv__menu-title {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.pv__menu-empty {
    padding: 10px 12px 12px;
    font-size: .82rem;
    line-height: 1.7;
    color: var(--pv-glass-dim);
    text-align: start;
}

.pv__menu-sep {
    block-size: 1px;
    margin: 5px 8px;
    background: var(--pv-glass-brd);
}

/* ------------------------------------------------------------- ردیف‌ها ---- */

.pv__row,
.pv__item {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: .84rem;
    color: inherit;
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color var(--pv-fast) var(--pv-ease);
}

.pv__row:hover,
.pv__item:hover { background: var(--pv-glass-hover); }

/* گزینهٔ فعال باید از یک نگاه پیدا باشد، نه با شمردنِ تیک‌ها. */
.pv__item--on { background: color-mix(in srgb, var(--pv-accent) 16%, transparent); }
.pv__item--on:hover { background: color-mix(in srgb, var(--pv-accent) 24%, transparent); }

.pv__row-icon,
.pv__item-check {
    display: grid;
    place-items: center;
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 auto;
    opacity: .82;
}

.pv__row-icon svg { inline-size: 18px; block-size: 18px; }
.pv__item-check { color: var(--pv-accent); opacity: 1; }
.pv__item-check svg { inline-size: 16px; block-size: 16px; }

.pv__row-label,
.pv__item-label {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv__item--on .pv__item-label { font-weight: 600; }

/* مقدارِ سمتِ پایانِ ردیف («عادی»، «۱۰۸۰p»، «خاموش»). */
.pv__row-value {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    max-inline-size: 46%;
    font-size: .8rem;
    color: var(--pv-glass-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv__row-value svg { inline-size: 14px; block-size: 14px; opacity: .7; }

/* فلشِ «زیرمنو» در RTL آینه می‌شود. */
.pv[dir="rtl"] .pv__row-value svg { transform: scaleX(-1); }

/*
 * عدد و واحد لاتین وسط یک منوی فارسی.
 *
 * `direction: ltr` ترتیبِ داخل رشته را درست می‌کند — بدون آن «0.5×» به «×0.5» می‌پرد — ولی
 * هم‌زمان تراز پیش‌فرضِ همان جعبه را هم چپ می‌کند. نتیجه‌اش فهرست سرعتی بود که «عادی» راست‌چین
 * بود و «0.5×» چپ‌چین، و کل ستون ناهموار به نظر می‌رسید. پس تراز را صریح برمی‌گردانیم.
 */
.pv__ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.pv[dir="rtl"] .pv__ltr { text-align: right; }

/* --------------------------------------------------- کلید روشن/خاموش ---- */

.pv__switch {
    position: relative;
    inline-size: 34px;
    block-size: 20px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--pv-glass-active);
    transition: background-color var(--pv-fast) var(--pv-ease);
}

.pv__switch::after {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform var(--pv-mid) var(--pv-ease);
}

.pv__row--on .pv__switch { background: var(--pv-accent); }
.pv__row--on .pv__switch::after { transform: translateX(14px); }
.pv[dir="rtl"] .pv__row--on .pv__switch::after { transform: translateX(-14px); }

/* --------------------------------------------------------- برند در منو ---- */

.pv__brand-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    font-size: .8rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color var(--pv-fast) var(--pv-ease);
}

.pv__brand-row:hover { background: var(--pv-glass-hover); }

.pv__brand-row .pv__brand-mark { inline-size: 18px; block-size: 18px; }

/* داخل منو، لوگو روی پنل می‌نشیند نه روی تصویر: روی پنل تیره سفید، روی پنل روشن رنگی. */
.pv__brand-row .pv__brand-logo { block-size: 14px; filter: brightness(0) invert(1); }
.pv[data-pv-theme="light"] .pv__brand-row .pv__brand-logo { filter: none; }

@media (prefers-color-scheme: light) {
    .pv[data-pv-theme="auto"] .pv__brand-row .pv__brand-logo { filter: none; }
}

.pv__brand-row-name { font-weight: 600; }

.pv__brand-row small {
    margin-inline-start: auto;
    font-size: .68rem;
    font-weight: 400;
    color: var(--pv-glass-dim);
    /* دامنه همیشه LTR است، حتی در منوی فارسی. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* ==================================================== روکش‌های شیشه‌ای بزرگ ==== */

/*
 * «آمار پخش» و «میانبرهای صفحه‌کلید» — دو روکشی که اطلاعات می‌دهند و پخش را قطع نمی‌کنند.
 */
.pv__stats {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 6;
    min-inline-size: 214px;
    padding: 10px 12px;
    font-size: .72rem;
    line-height: 1.9;
    color: var(--pv-glass-fg);
    background: var(--pv-glass-strong);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 12px;
    box-shadow: var(--pv-shadow-soft);
    backdrop-filter: var(--pv-blur);
    font-variant-numeric: tabular-nums;
    animation: pv-pop var(--pv-fast) var(--pv-ease);
}

.pv__stats-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pv__stats-key { color: var(--pv-glass-dim); }
.pv__stats-val { font-weight: 600; direction: ltr; unicode-bidi: isolate; }

.pv__sheet {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    inline-size: min(560px, calc(100% - 32px));
    max-block-size: calc(100% - 32px);
    overflow: hidden auto;
    padding: 18px 20px 20px;
    color: var(--pv-glass-fg);
    background: var(--pv-glass-strong);
    border: 1px solid var(--pv-glass-brd);
    border-radius: 20px;
    box-shadow: var(--pv-shadow);
    backdrop-filter: var(--pv-blur);
    animation: pv-pop var(--pv-mid) var(--pv-ease);
    scrollbar-width: thin;
}

.pv[dir="rtl"] .pv__sheet { transform: translate(50%, -50%); }

.pv__sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 14px;
}

.pv__sheet-title { flex: 1 1 auto; font-size: .98rem; font-weight: 600; }

.pv__sheet-close {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    padding: 0;
    color: inherit;
    background: var(--pv-glass-hover);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.pv__sheet-close:hover { background: var(--pv-glass-active); }
.pv__sheet-close svg { inline-size: 16px; block-size: 16px; }

.pv__keys {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2px 20px;
}

.pv__key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px;
    font-size: .82rem;
    border-block-end: 1px solid var(--pv-glass-brd);
}

.pv__key span { color: var(--pv-glass-dim); }

.pv__key kbd {
    flex: 0 0 auto;
    padding: 3px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
    color: var(--pv-glass-fg);
    background: var(--pv-glass-hover);
    border: 1px solid var(--pv-glass-brd);
    border-block-end-width: 2px;
    border-radius: 6px;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ================================================================ واکنش‌گرایی ==== */

/*
 * روی پلیر باریک، دکمه‌های فرعی از نوار بیرون می‌روند و به منوی تنظیمات پناه می‌برند.
 * فشردن ده دکمه در ۳۲۰ پیکسل یعنی هیچ‌کدام قابل زدن نیستند.
 *
 * معیار، عرضِ خودِ پلیر است نه عرضِ پنجره: همین پلیر ممکن است در یک ستون باریکِ صفحهٔ
 * دسکتاپ نشسته باشد.
 */
@container pv (max-width: 560px) {
    .pv { --pv-btn: 38px; --pv-icon: 21px; --pv-pad: 8px; }

    .pv__volume,
    .pv__btn--wide { display: none; }

    .pv__title { font-size: .88rem; padding: 12px 14px 30px; padding-inline-end: 82px; }
    .pv__brand-logo { block-size: 13px; }
    .pv__panel { border-radius: 15px; }
    .pv__time { padding-inline: 6px; font-size: .76rem; }
    .pv__menu, .pv__ctx { min-inline-size: 208px; }
    .pv__big { inline-size: 62px; block-size: 62px; }
    .pv__big svg { inline-size: 28px; block-size: 28px; }
    .pv__stats { font-size: .68rem; min-inline-size: 0; }
}

@container pv (max-width: 380px) {
    .pv { --pv-btn: 36px; --pv-gap: 0px; }
    .pv__btn--compact { display: none; }
    .pv__brand-name { display: none; }
    .pv__brand { padding: 5px; }
}

/* همان قاعده، این‌بار برای مرورگری که پرسمان ظرف ندارد. */
@supports not (container-type: inline-size) {
    @media (max-width: 560px) {
        .pv__volume,
        .pv__btn--wide { display: none; }
    }
}

/* اندازهٔ هدف لمسی نباید کمتر از ۴۴ پیکسل شود، حتی روی نمایشگر کوچک. */
@media (pointer: coarse) {
    .pv { --pv-btn: 44px; --pv-timeline-h: 30px; }
    .pv__track { block-size: 6px; }
    .pv__timeline { padding-block: 14px 10px; }
    .pv__volume { display: none; }
    /* راهنمای شناور روی لمس معنا ندارد: انگشت که بلند شد، راهنما هم رفته. */
    .pv__btn[data-pv-tip]::after { display: none; }
    .pv__row, .pv__item { padding-block: 11px; }
}

/* ============================================================== دسترس‌پذیری ==== */

/*
 * حرکت کم‌شده یعنی «انیمیشن نمی‌خواهم» — نه «انیمیشن سریع‌تر». تپش نشانگر زنده و چرخش
 * اسپینر هم شامل می‌شوند، چون هر دو حرکت مداوم‌اند.
 */
@media (prefers-reduced-motion: reduce) {
    .pv *,
    .pv *::before,
    .pv *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .pv__spinner { animation: none; opacity: .85; }
    .pv__watermark--moving { animation: none; }
}

/* حالت کنتراست بالا: شفافیت‌ها به رنگ توپر تبدیل می‌شوند. */
@media (forced-colors: active) {
    .pv__btn,
    .pv__row,
    .pv__item { forced-color-adjust: none; color: CanvasText; background: Canvas; }

    .pv__panel,
    .pv__menu,
    .pv__ctx,
    .pv__sheet,
    .pv__stats { background: Canvas; border: 1px solid CanvasText; backdrop-filter: none; }

    .pv__played { background: Highlight; }
    .pv svg { filter: none; }
}

/* پخش امبد: کنترل‌های ما جایی ندارند و سرویس بیرونی خودش را می‌آورد. */
.pv--embed .pv__controls,
.pv--embed .pv__center,
.pv--embed .pv__brand,
.pv--embed .pv__title { display: none; }