@property --ban{ syntax:'<length>'; inherits:true; initial-value:0px; }
@property --hh{ syntax:'<length>'; inherits:true; initial-value:56px; }
@property --hdr{ syntax:'<length>'; inherits:true; initial-value:56px; }
/* =====================================================
   OPENXHUB — استایل مشترک (صفحه اصلی + صفحه پخش)
   سبک: یوتیوب، با هویت قرمز/تیره‌ی OPENXHUB
   ===================================================== */

@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}

:root{
  --bg:#0f0f0f;
  --surface:#1a1a1a;
  --surface-2:#272727;
  --surface-3:#3a3a3a;
  --line:rgba(255,255,255,.1);
  --text:#f1f1f1;
  --muted:#aaa;
  --accent:#ff2020;
  --accent-soft:rgba(255,32,32,.14);
  --hh:56px;
  --hdr:calc(var(--hh) + var(--ban));
  --pad:24px;
  --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:#3d3d3d transparent; }
html::-webkit-scrollbar{ width:10px; height:10px; }
html::-webkit-scrollbar-track{ background:transparent; }
html::-webkit-scrollbar-thumb{ background:#3a3a3a; border-radius:10px; border:2px solid var(--bg); }
html::-webkit-scrollbar-thumb:hover{ background:#555; }
@media (max-width:720px){ html{ scrollbar-width:none; } html::-webkit-scrollbar{ display:none; width:0; height:0; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Vazirmatn',Tahoma,sans-serif;
  font-size:14px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
a{ color:inherit; text-decoration:none; }
/* موبایل: هایلایت آبی پیش‌فرض مرورگر روی لمس لینک/دکمه/متن‌ها نباشد */
*,*::before,*::after{ -webkit-tap-highlight-color:transparent; }
a,button,[role=button],label,summary,input,select,textarea,.vcard,.vcard *{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }
.mu-page,.mu-page *,#otmp,#otmp *{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
a:focus:not(:focus-visible),button:focus:not(:focus-visible){ outline:none; }
button{ font-family:inherit; color:inherit; }
img{ max-width:100%; }
[hidden]{ display:none !important; }

.yt-wrap{
  width:100%;
  max-width:1840px;
  margin:0 auto;
  padding-inline:var(--pad);
}
.yt-main{ padding-top:var(--hdr); min-height:100vh; }

/* ─────────────── هدر ─────────────── */
.yt-header{
  position:fixed;
  top:var(--ban); left:0; right:0;
  height:var(--hh);
  z-index:1000;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 16px;
  background:transparent;
}
.yt-header-start{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.yt-header-center{ flex:1; display:flex; justify-content:center; align-items:center; min-width:0; gap:8px; }
.yt-header-end{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }

.yt-icon-btn{
  width:40px; height:40px;
  border:0; border-radius:50%;
  background:transparent;
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .2s;
  flex:none;
}
.yt-icon-btn:hover{ background:rgba(255,255,255,.1); }
.yt-icon-btn svg{ width:24px; height:24px; }

.yt-logo{ display:flex; align-items:center; height:var(--hh); }
.yt-logo img{ height:28px; width:auto; max-width:160px; object-fit:contain; display:block; }

.yt-search{
  position:relative;
  display:flex;
  width:100%;
  max-width:640px;
  height:40px;
  background:#121212;
  border:1px solid #303030;
  border-radius:999px;
  transition:border-color .2s, box-shadow .2s;
}
.yt-search:focus-within{
  border-color:rgba(255,64,64,.7);
  box-shadow:0 0 0 3px rgba(255,32,32,.12);
}
.yt-search input{
  flex:1; min-width:0;
  height:100%;
  background:transparent;
  border:0; outline:0;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  padding:0 18px;
  text-align:right;
}
.yt-search input::placeholder{ color:#777; }
.yt-search-clear{
  width:36px; height:100%;
  border:0; background:transparent;
  color:#bbb; cursor:pointer;
  display:grid; place-items:center;
  flex:none;
}
.yt-search-clear:hover{ color:#fff; }
.yt-search-submit{
  width:62px; height:100%;
  border:0;
  border-radius:999px 0 0 999px;
  border-inline-start:1px solid #303030;
  background:#222;
  color:var(--text);
  cursor:pointer;
  display:grid; place-items:center;
  flex:none;
  transition:background .2s;
}
.yt-search-submit:hover{ background:#2f2f2f; }
.yt-search-submit svg{ width:20px; height:20px; }

.search-drop{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  inset-inline:0;
  max-height:min(76vh,640px);
  overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg,#202024,#18181b);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:8px 8px 0;
  z-index:1200;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4);
  animation:dropIn .18s var(--ease);
  scrollbar-width:thin; scrollbar-color:#3a3a3a transparent;
}
.search-drop::before{ content:""; position:sticky; top:-8px; display:block; height:2px; margin:-8px -8px 6px; background:linear-gradient(90deg,transparent,#ff2020 30%,#ff7a3c 70%,transparent); opacity:.75; z-index:2; }
.search-drop.show{ display:block; }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-8px) scale(.985); } to{ opacity:1; transform:none; } }

.sg-hd{ display:flex; align-items:center; justify-content:space-between; padding:10px 10px 6px; font-size:12px; font-weight:700; color:#9a9aa3; letter-spacing:.2px; }
.sg-hd-t{ display:inline-flex; align-items:center; gap:7px; }
.sg-hd-t svg{ width:14px; height:14px; color:#ff4a3c; }
.sg-cnt{ min-width:20px; padding:1px 7px; border-radius:99px; background:rgba(255,255,255,.07); color:#bbb; font-size:11px; text-align:center; }
.sg-clr{ border:0; background:none; color:#ff6a5c; font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:2px 6px; border-radius:6px; }
.sg-clr:hover{ background:rgba(255,64,64,.12); }

.sg-it{ position:relative; display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px; cursor:pointer; color:var(--text); text-align:right; transition:background .15s, transform .15s; }
.sg-it:hover,.sg-it.active{ background:rgba(255,255,255,.08); }
.sg-it.active::before{ content:""; position:absolute; inset-block:10px; inset-inline-start:0; width:3px; border-radius:3px; background:#ff2a2a; }
.sg-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sg-t{ unicode-bidi:plaintext; font-size:14px; font-weight:600; line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-t mark{ background:none; color:#ff5a4a; font-weight:800; }
.sg-m{ display:flex; align-items:center; gap:7px; font-size:12px; color:#8f8f99; min-width:0; white-space:nowrap; overflow:hidden; }
.sg-m span{ overflow:hidden; text-overflow:ellipsis; }
.sg-m i{ width:3px; height:3px; border-radius:50%; background:#5a5a63; flex:none; }
.sg-h{ direction:ltr; unicode-bidi:isolate; color:#b9b9c4; font-weight:600; }
.sg-h mark{ background:none; color:#ff5a4a; }

/* اولین ردیف: جستجو برای ... */
.sg-q{ background:rgba(255,32,32,.07); border:1px solid rgba(255,32,32,.16); margin-bottom:2px; }
.sg-q .sg-qi{ width:34px; height:34px; border-radius:50%; background:rgba(255,32,32,.16); color:#ff5a4a; display:grid; place-items:center; flex:none; }
.sg-q .sg-qi svg{ width:17px; height:17px; }
.sg-q .sg-t b{ color:#fff; font-weight:800; }
.sg-arrow{ color:#777; display:grid; flex:none; } .sg-arrow svg{ width:18px; height:18px; transform:scaleX(-1); }

/* آواتار کانال با حلقه‌ی رنگی هم‌خانواده */
/* رنگ هویت کانال عددی ثبت می‌شود تا تغییر آن (بعد از رنگ‌گیری از آواتار) نرم انیمیت شود */
@property --h{ syntax:'<number>'; inherits:true; initial-value:0; }
.sg-av,.sr-ch,.och{ transition:--h .45s ease; }
.sg-av{ --h:0; flex:none; width:42px; height:42px; border-radius:50%; padding:2px; display:grid; place-items:center;
  background:conic-gradient(hsl(var(--h) 62% 26%),hsl(var(--h) 66% 42%),hsl(var(--h) 60% 28%),hsl(var(--h) 68% 44%),hsl(var(--h) 62% 26%)); }
.sg-av img,.sg-av b{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; border:2px solid #1b1b1e; box-sizing:border-box; background:linear-gradient(135deg,hsl(var(--h) 55% 24%),#17171a); }
.sg-av b{ font-size:16px; color:hsl(var(--h) 85% 80%); font-weight:700; }
.sg-go{ flex:none; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:99px; background:rgba(255,255,255,.07); color:#c9c9d1; font-size:11.5px; font-weight:600; transition:background .15s,color .15s; }
.sg-go svg{ width:13px; height:13px; }
.sg-ch:hover .sg-go,.sg-ch.active .sg-go{ background:#ff2a2a; color:#fff; }

/* ویدیو */
.sg-th{ position:relative; flex:none; width:96px; aspect-ratio:16/9; border-radius:9px; overflow:hidden; background:#26262b; }
.sg-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.sg-th em{ position:absolute; inset-inline-end:4px; bottom:4px; padding:0 5px; border-radius:4px; background:rgba(0,0,0,.78); color:#fff; font-style:normal; font-size:10.5px; font-weight:600; direction:ltr; line-height:16px; }
.sg-vd .sg-t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:13.5px; }

/* اخیر */
.sg-rc{ padding:7px 10px; }
.sg-ri{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.06); color:#9a9aa3; display:grid; place-items:center; flex:none; }
.sg-ri svg{ width:15px; height:15px; }
.sg-rc .sg-t{ flex:1; font-weight:500; }
.sg-rx{ border:0; background:none; color:#777; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; cursor:pointer; flex:none; }
.sg-rx:hover{ background:rgba(255,255,255,.1); color:#fff; } .sg-rx svg{ width:14px; height:14px; }

/* نوار کانال‌های محبوب */
.sg-strip{ display:flex; gap:8px; overflow-x:auto; padding:2px 6px 8px; scrollbar-width:none; }
.sg-strip::-webkit-scrollbar{ display:none; }
.sg-chip{ flex:none; flex-direction:column; gap:6px; width:78px; padding:8px 4px; text-align:center; background:rgba(255,255,255,.04); border-radius:16px; }
.sg-chip .sg-av{ width:46px; height:46px; }
.sg-chip .sg-t{ font-size:11.5px; font-weight:600; max-width:100%; }
.sg-chip.active{ background:rgba(255,255,255,.1); } .sg-chip.active::before{ display:none; }

/* بدون نتیجه */
.sg-none{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 10px 10px; text-align:center; }
.sg-none-ic{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.06); color:#8a8a94; display:grid; place-items:center; margin-bottom:6px; }
.sg-none-ic svg{ width:22px; height:22px; } .sg-none b{ font-size:14px; } .sg-none small{ color:#8f8f99; font-size:12px; }

/* اسکلت بارگذاری */
.sg-loading{ padding:6px 4px 10px; }
.sg-sk{ display:flex; align-items:center; gap:12px; padding:8px 10px; }
.sg-sk i{ width:42px; height:42px; border-radius:50%; background:#2a2a2f; flex:none; }
.sg-sk span{ flex:1; display:flex; flex-direction:column; gap:7px; }
.sg-sk b{ height:9px; border-radius:6px; background:#2a2a2f; width:60%; } .sg-sk b+b{ width:34%; }
.sg-sk i,.sg-sk b{ background-image:linear-gradient(90deg,#2a2a2f,#37373d,#2a2a2f); background-size:200% 100%; animation:sgsh 1.1s linear infinite; }
@keyframes sgsh{ to{ background-position:-200% 0; } }

.sg-ft{ position:sticky; bottom:0; display:flex; gap:16px; justify-content:center; padding:9px 8px; margin:6px -8px 0; border-top:1px solid rgba(255,255,255,.07); background:#18181b; font-size:11px; color:#7d7d87; }
.sg-ft kbd{ font-family:inherit; display:inline-block; min-width:18px; padding:0 5px; margin-inline-end:4px; border-radius:5px; background:#2a2a2f; border:1px solid #3a3a40; color:#bbb; text-align:center; line-height:17px; }
@media (hover:none),(max-width:720px){ .sg-ft{ display:none; } }

#searchToggle,#searchBack{ display:none; }

@media (max-width:720px){
  :root{ --pad:12px; --hh:52px; }
  .yt-header{ padding:0 8px; gap:4px; }
  .yt-header-center{
    display:none;
    position:absolute;
    inset:0;
    background:var(--bg);
    padding:0 8px;
    z-index:2;
  }
  .yt-header.search-open .yt-header-center{ display:flex; }
  #searchToggle,#searchBack{ display:grid; }
  .yt-header-end{ margin-inline-start:auto; }
  .yt-search{ max-width:none; position:static; }
  .yt-search-submit{ border-radius:999px 0 0 999px; }
  .yt-search{ height:42px; }
  .yt-header-center{ gap:6px; }
  .yt-header-center .yt-search{ flex:1; }
  .search-drop{
    position:absolute; top:100%; left:0; right:0; height:calc(100vh - var(--hdr)); height:calc(100dvh - var(--hdr)); max-height:none;
    border-radius:0; border:0; border-top:1px solid rgba(255,255,255,.08);
    padding:6px 10px calc(14px + env(safe-area-inset-bottom));
    background:#141416; animation:sgUp .2s var(--ease);
  }
  .search-drop::before{ margin-inline:-10px; }
  .sg-it{ padding:9px 8px; }
  .sg-th{ width:112px; }
}
@keyframes sgUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ─────────────── ساید بار ───────────────
   دسکتاپ (≥1200): باز · پوشش محتوا را هل می‌دهد  |  تبلت (721–1199): مینی + بازشو روی محتوا
   موبایل (≤720): ساید بار نداریم، نوار پایین دارد
   صفحه پخش (data-side=overlay): پنهان، با دکمه روی محتوا باز می‌شود */
:root{ --side-open:244px; --side-mini:80px; }
body{ --sw:var(--side-open); }
body.side-mini{ --sw:var(--side-mini); }
body[data-side="overlay"]{ --sw:0px; }
@media (max-width:1199px){ body,body.side-mini{ --sw:var(--side-mini); } body[data-side="overlay"]{ --sw:0px; } }
@media (max-width:720px){ body,body.side-mini,body[data-side="overlay"]{ --sw:0px; } }

.yt-main,.yt-footer{ margin-inline-start:var(--sw); transition:margin-inline-start .28s var(--ease); }
.yt-main > .yt-footer{ margin-inline-start:0; }

.yt-side{
  position:fixed; top:var(--hdr); bottom:0; right:0;
  width:var(--sw);
  z-index:950;
  container-type:inline-size;
  display:flex; flex-direction:column;
  padding:10px 12px 8px;
  overflow:hidden;
  background:transparent;
  border-inline-start:1px solid rgba(255,255,255,.07);
  transition:width .28s var(--ease), transform .28s var(--ease), box-shadow .28s;
}
.yt-side::-webkit-scrollbar{ display:none; }
.yt-side-nav{ position:relative; display:flex; flex-direction:column; gap:4px; }
.yt-nav{
  position:relative;
  display:flex; align-items:center; gap:18px;
  height:46px; padding:0 14px;
  border-radius:14px;
  color:#d8d8dc; font-size:14.5px; white-space:nowrap;
  transition:background .18s, color .18s, transform .18s;
}
.yt-nav:hover{ background:rgba(255,255,255,.08); color:#fff; }
.yt-nav:active{ transform:scale(.97); }
.yt-nav-ic{ flex:none; width:24px; height:24px; display:grid; place-items:center; transition:transform .25s var(--ease), color .2s; }
.yt-nav-ic svg{ width:24px; height:24px; display:block; }
.yt-nav:hover .yt-nav-ic{ transform:scale(1.1); }
.yt-nav-t{ transition:opacity .2s; overflow:hidden; text-overflow:ellipsis; }
.yt-nav.current{
  color:#fff; font-weight:700;
  background:linear-gradient(270deg,rgba(255,32,32,.20),rgba(255,32,32,.06) 70%,rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,70,70,.16);
}
.yt-nav.current .yt-nav-ic{ color:#ff3b3b; filter:drop-shadow(0 0 8px rgba(255,40,40,.45)); }
.yt-nav.current::after{
  content:""; position:absolute; inset-inline-start:-12px; top:11px; bottom:11px; width:4px; border-radius:4px 0 0 4px;
  background:linear-gradient(180deg,#ff5a4a,#e00000); box-shadow:0 0 12px rgba(255,40,40,.7);
}
.yt-side-sep{ height:1px; margin:10px 6px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); }
.yt-side-foot{ margin-top:auto; padding:12px 0 6px; text-align:center; direction:ltr; color:#6d6d75; font-size:11.5px; white-space:nowrap; transition:opacity .2s; }

/* حالت مینی: فقط آیکن */
@container (max-width:150px){
  .yt-nav{ justify-content:center; padding:0; gap:0; height:48px; }
  .yt-nav-t{ opacity:0; width:0; flex:none; }
  .yt-nav.current::after{ inset-inline-start:-12px; }
  .yt-side-foot{ opacity:0; height:0; padding:0; }
  .yt-side-sep{ margin:8px 12px; }
}

/* دکمه ساید بار در هدر */
.yt-side-toggle svg{ width:26px; height:26px; overflow:visible; }
.yt-side-toggle .tg-chev{ transform-origin:11.55px 12px; transition:transform .3s var(--ease); }
.yt-side-toggle .tg-pan{ transition:opacity .25s; }
.yt-side-toggle[aria-expanded="false"] .tg-chev{ transform:rotate(180deg); }
.yt-side-toggle[aria-expanded="false"] .tg-pan{ opacity:.1; }

/* تبلت: ساید بار مینی؛ بازشدن روی محتوا */
.yt-side-scrim{ position:fixed; inset:0; z-index:880; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; }
.yt-side-scrim.show{ opacity:1; }
body.side-ovl{ --gsw:var(--side-open); }
body.side-ovl .yt-side{ width:var(--side-open); z-index:960; box-shadow:-30px 0 60px -10px rgba(0,0,0,.6); background:transparent; }   /* پس‌زمینه را همان لایه‌ی شیشه‌ای هدر (yt-glass) می‌دهد → دقیقاً هم‌رنگ هدر */
body.side-ovl .yt-glass{ opacity:1 !important; }
body[data-side="overlay"] .yt-side{ width:var(--side-open); transform:translateX(100%); box-shadow:none; }
body[data-side="overlay"].side-ovl .yt-side{ transform:none; }

/* ─────────────── «کانال‌های شما» (ساید بار شخصی) ─────────────── */
.yt-side-top{ display:none; }
.yt-mych{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:6px; }
.yt-mych[hidden]{ display:none; }
.mych-h{ display:flex; align-items:center; gap:10px; padding:4px 14px 8px; color:#85858e; font-size:11.5px; white-space:nowrap; }
.mych-h::after{ content:""; flex:1; height:1px; background:linear-gradient(270deg,rgba(255,255,255,.14),transparent); }
.mych-list{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:none; -ms-overflow-style:none; padding:2px 0 14px;
  -webkit-mask-image:linear-gradient(transparent 0,#000 8px,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(transparent 0,#000 8px,#000 calc(100% - 22px),transparent);
}
.mych-list::-webkit-scrollbar{ display:none; width:0; height:0; }
@media (min-width:721px) and (pointer:fine){ .mych-list{ cursor:grab; } .mych-list.dragging{ cursor:grabbing; user-select:none; } .mych-list.dragging .mych-it{ pointer-events:none; } }
.mych-it{
  position:relative; display:flex; align-items:center; gap:12px; height:48px; padding:0 8px; border-radius:14px;
  color:#cfcfd5; font-size:13.5px; white-space:nowrap; transition:background .18s, color .18s, transform .18s;
}
.mych-it:hover{ background:rgba(255,255,255,.08); color:#fff; }
.mych-it:active{ transform:scale(.97); }
.mych-av{
  flex:none; width:34px; height:34px; padding:2px; border-radius:50%; box-sizing:border-box; display:grid; place-items:center;
  background:conic-gradient(from 0deg,hsl(var(--h) 80% 60%) calc(var(--p)*1%),rgba(255,255,255,.12) 0);
  transition:transform .25s var(--ease), filter .25s;
}
.mych-it:hover .mych-av{ transform:scale(1.07); filter:drop-shadow(0 0 7px hsl(var(--h) 80% 55% / .55)); }
.mych-av img,.mych-av b{ width:100%; height:100%; border-radius:50%; object-fit:cover; box-sizing:border-box; border:2px solid var(--bg); display:grid; place-items:center; background:linear-gradient(135deg,hsl(var(--h) 55% 30%),hsl(var(--h) 60% 18%)); }
.mych-av b{ font-size:13px; font-weight:700; color:hsl(var(--h) 85% 82%); }
.mych-bd{
  margin-inline-start:auto; flex:none; min-width:22px; height:22px; padding:0 6px; box-sizing:border-box; border-radius:99px; display:grid; place-items:center;
  background:hsl(var(--h) 62% 24%); color:#fff; font-size:11.5px; line-height:1;
  box-shadow:inset 0 0 0 1.5px hsl(var(--h) 80% 60%), 0 0 12px -3px hsl(var(--h) 85% 55% / .6);
  animation:bdPop .5s cubic-bezier(.3,1.6,.5,1) both;
}
.mych-bd b{ display:block; font-weight:800; line-height:1; transform:translateY(.152em); font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgba(0,0,0,.65); }
/* ورود پله‌پله‌ی کانال‌ها هنگام بارگذاری صفحه (فقط بار اول) */
.mych-list.enter .mych-it{ animation:mychIn .6s cubic-bezier(.22,.9,.24,1) both; animation-delay:calc(var(--i,0)*80ms + 160ms); }
.mych-list.enter .mych-bd{ animation-delay:calc(var(--i,0)*80ms + 560ms); }
.yt-mych.enter .mych-h{ animation:mychIn .6s ease both; }
@keyframes mychIn{ from{ opacity:0; transform:translate3d(14px,0,0); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .mych-list.enter .mych-it,.yt-mych.enter .mych-h{ animation:none; } }
@keyframes bdPop{ from{ transform:scale(.3); opacity:0; } to{ transform:none; opacity:1; } }
.mych-t{ min-width:0; display:flex; flex-direction:column; justify-content:center; line-height:1.35; }
.mych-n{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mych-it.current{ color:#fff; font-weight:700; background:linear-gradient(270deg,rgba(255,32,32,.18),rgba(255,32,32,.05) 70%,rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px rgba(255,70,70,.14); }
@container (max-width:150px){
  .mych-h span{ display:none; } .mych-h{ padding:10px 12px 6px; } .mych-h::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); }
  .mych-it{ justify-content:center; padding:0; height:48px; gap:0; }
  .mych-t{ display:none; }
  .mych-bd{ position:absolute; top:3px; left:calc(50% - 24px); min-width:17px; height:17px; padding:0 3.5px; font-size:9.5px; margin:0; }
}

/* ─────────────── موبایل: ساید بار تمام‌صفحه؛ صفحه به راست می‌رود و ساید بار زیرش آشکار می‌شود ─────────────── */
@media (max-width:720px){
  .yt-side-scrim{ display:none !important; }
  body[data-side] .yt-side{
    display:flex; position:fixed; inset:0; top:var(--ban,0px); width:100%; z-index:1200;
    padding:calc(6px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));
    border:0; box-shadow:none;
    background:radial-gradient(120% 55% at 100% 0%,rgba(255,40,40,.17),transparent 62%),radial-gradient(90% 45% at 0% 100%,rgba(255,96,64,.09),transparent 70%),#0b0b0c;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    visibility:hidden; pointer-events:none; opacity:0; transform:translate3d(24%,0,0);
    transition:transform .66s cubic-bezier(.25,.8,.25,1), opacity .45s ease, visibility 0s linear .66s;
  }
  /* سند RTL است: انتقال صفحه به چپ سرریزِ قابل‌اسکرول می‌سازد و مرورگر موبایل صفحه را کوچک می‌کند؛ clip سرریز را کلاً حذف می‌کند (بدون ساختن اسکرول‌کانتینر) */
  html,body{ overflow-x:clip; }
  .yt-side{ touch-action:none; } .mych-list{ touch-action:pan-y; }
  .yt-main > .yt-footer{ transform:none !important; }
  body.side-m[data-side] .yt-side{ visibility:visible; pointer-events:auto; opacity:1; transform:none; transition-delay:0s; }
  .yt-header,.yt-main,.yt-footer,.yt-glass,.yt-bnav{ transition:transform .66s cubic-bezier(.25,.8,.25,1); }
  body.side-m .yt-header,body.side-m .yt-main,body.side-m .yt-footer,body.side-m .yt-glass,body.side-m .yt-bnav{ transform:translate3d(-100%,0,0); }
  body.side-m .yt-header,body.side-m .yt-main,body.side-m .yt-glass,body.side-m .yt-bnav,body.side-mc .yt-header,body.side-mc .yt-main,body.side-mc .yt-glass,body.side-mc .yt-bnav{ will-change:transform; }

  .yt-side-top{ display:flex; align-items:center; justify-content:space-between; height:52px; flex:none; margin-bottom:6px; }
  .yt-side-close{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#e9e9ee; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:transform .2s, background .2s; }
  .yt-side-close:active{ transform:scale(.9); background:rgba(255,255,255,.14); }
  .yt-side-close svg{ width:22px; height:22px; }
  .yt-side-logo img{ height:26px; width:auto; display:block; }
  .yt-nav{ height:56px; font-size:16.5px; padding:0 16px; border-radius:18px; gap:16px; background:rgba(255,255,255,.04); }
  /* موبایل: صفحه اصلی/کوتاه/موسیقی در نوار پایین‌اند؛ فقط «اشتراک‌ها» بالای منوی کناری می‌آید */
  .yt-side-nav .yt-nav:not([data-k="subs"]){ display:none; }
  .yt-nav.current::after{ display:none; }
  .mych-h{ padding:20px 6px 10px; font-size:12.5px; }
  .mych-it{ height:64px; padding:0 12px 0 10px; gap:14px; font-size:15.5px; border-radius:18px; }
  .mych-bd{ min-width:28px; height:28px; padding:0 8px; font-size:13.5px; }
  .mych-av{ width:42px; height:42px; }
  .mych-it.current{ border-radius:18px; }
  body.side-m .yt-nav,body.side-m .mych-it,body.side-m .mych-h{ animation:sideIn .62s cubic-bezier(.25,.8,.25,1) both; animation-delay:calc(var(--i,0)*45ms + 200ms); }
  body.side-m .yt-nav[data-k="subs"]{ --i:0; }
  body.side-m .mych-h{ animation-delay:.4s; }
  .yt-side-foot{ opacity:1; height:auto; padding:10px 0 2px; }
  .yt-side-toggle{ display:inline-grid; }
}
@keyframes sideIn{ from{ opacity:0; transform:translate3d(22px,0,0); } to{ opacity:1; transform:none; } }
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  body[data-side] .yt-side,.yt-header,.yt-main,.yt-footer,.yt-glass,.yt-bnav{ transition-duration:.01s; }
  body.side-m .yt-nav,body.side-m .mych-it,body.side-m .mych-h{ animation:none; }
}

/* ─────────────── نوار پایین موبایل ─────────────── */
.yt-bnav{ display:none; }
@media (max-width:720px){
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  .yt-footer{ display:none !important; }
  .yt-bnav{
    position:fixed; left:0; right:0; bottom:0; z-index:980;
    display:flex; align-items:stretch; justify-content:center;
    height:calc(62px + env(safe-area-inset-bottom)); padding:0 10px env(safe-area-inset-bottom);
    background:rgba(16,16,18,.9);
    -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -14px 30px -18px rgba(0,0,0,.8);
  }
  .yt-bnav-it{
    position:relative; flex:1 1 0; max-width:220px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:#9c9ca4; font-size:10.5px; font-weight:600; line-height:1.2;
    transition:color .2s;
  }
  .yt-bnav-ic{ position:relative; width:56px; height:30px; display:grid; place-items:center; }
  .yt-bnav-ic::before{
    content:""; position:absolute; inset:0; border-radius:16px;
    background:linear-gradient(135deg,rgba(255,60,60,.28),rgba(255,32,32,.10));
    box-shadow:0 0 0 1px rgba(255,80,80,.18), 0 6px 18px -6px rgba(255,32,32,.55);
    opacity:0; transform:scale(.6); transition:opacity .22s, transform .3s var(--ease);
  }
  .yt-bnav-ic svg{ position:relative; width:25px; height:25px; transition:transform .25s var(--ease); }
  .yt-bnav-ic svg:first-of-type{ display:none; }
  .yt-bnav-it:active .yt-bnav-ic svg{ transform:scale(.88); }
  .yt-bnav-it.current{ color:#fff; font-weight:800; }
  .yt-bnav-it.current .yt-bnav-ic::before{ opacity:1; transform:none; }
  .yt-bnav-it.current .yt-bnav-ic svg:first-of-type{ display:block; color:#ff4040; }
  .yt-bnav-it.current .yt-bnav-ic svg:last-of-type{ display:none; }
  .yt-toast{ bottom:calc(78px + env(safe-area-inset-bottom)); }
  .yt-logo img{ height:22px; max-width:120px; }
}

/* ─────────────── چیپ‌ها ─────────────── */
.yt-chips{
  position:sticky;
  top:calc(var(--hdr) - 1px);
  z-index:900;
  background:transparent;
}
.yt-chips-inner{ position:relative; }
.yt-chips-scroll{
  display:flex; gap:12px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:12px 0;
  scroll-behavior:smooth;
}
.yt-chips-scroll::-webkit-scrollbar{ display:none; }
.chip{
  flex:none;
  height:34px;
  padding:0 14px;
  border:0;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s, color .18s, transform .18s;
}
.chip:hover{ background:var(--surface-3); }
.chip:active{ transform:scale(.96); }
.chip.active{ background:var(--text); color:#0f0f0f; }
.chip-filter{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-soft);
  color:#ff8a80;
  box-shadow:inset 0 0 0 1px rgba(255,64,64,.45);
}
.chip-filter:hover{ background:rgba(255,32,32,.24); }
.chip-filter b{ font-size:16px; line-height:1; opacity:.85; }
.chip-sep{ flex:none; width:1px; margin:6px 2px; background:var(--line); }

.chips-arrow{
  position:absolute; top:0; bottom:0;
  width:64px;
  display:none;
  align-items:center;
  border:0;
  cursor:pointer;
  z-index:3;
  color:var(--text);
}
.chips-arrow svg{ width:20px; height:20px; padding:6px; box-sizing:content-box; border-radius:50%; background:rgba(34,34,36,.92); box-shadow:0 2px 10px rgba(0,0,0,.5); }
.chips-arrow:hover svg{ background:rgba(255,255,255,.12); }
.chips-arrow.start{ right:0; justify-content:flex-start; background:none; }
.chips-arrow.end{ left:0; justify-content:flex-end; background:none; }
.yt-chips-inner.can-start .chips-arrow.start,
.yt-chips-inner.can-end .chips-arrow.end{ display:flex; }
@media (hover:none){ .chips-arrow{ display:none !important; } }

/* ─────────────── گرید و کارت ویدیو ─────────────── */
.vgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px 16px;
  padding:6px 0 28px;
  transition:opacity .25s;
}
/* (لایه‌ی is-loading حذف شد؛ اسکلت شیمر جایش آمد) */
.vgrid.fade{ animation:gridIn .45s var(--ease); }
@keyframes gridIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width:1000px){ .vgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* صفحه اصلی: ۲px فاصله‌ی بیشتر از بالا تا سایه‌ی کارت‌ها زیر نوار چیپ‌ها نرود (موبایل بدون تغییر) */
.vgrid.vgrid-home{ padding-top:8px; }
@media (max-width:620px){ .vgrid{ grid-template-columns:minmax(0,1fr); gap:22px; } }
@media (max-width:620px){ .vgrid.vgrid-home{ padding-top:6px; } }
@media (min-width:621px){ .vgrid.vgrid-home{ padding-top:13px; } }
/* تعداد ستون‌ها بر اساس عرض واقعی محتوا (با باز/بسته شدن ساید بار پویا تغییر می‌کند) */
.yt-wrap{ container-type:inline-size; container-name:cw; }
@container cw (max-width:539px){ .vgrid{ grid-template-columns:minmax(0,1fr); gap:22px; } .vgrid.vgrid-home{ padding-top:6px; } }
@container cw (min-width:540px) and (max-width:819px){ .vgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container cw (min-width:820px) and (max-width:1699px){ .vgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container cw (min-width:1700px) and (max-width:2199px){ .vgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container cw (min-width:2200px) and (max-width:2399px){ .vgrid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@container cw (min-width:2400px){ .vgrid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:30px 14px; } }

.vcard{ position:relative; min-width:0; }
.vcard.menu-open{ z-index:60; }

.vcard-thumb{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
  transition:box-shadow .35s, transform .3s var(--ease);
  isolation:isolate;
}
.vcard-img,.vcard-preview{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.vcard-img{ opacity:0; transition:opacity .28s ease; }
.vcard-img.is-ld{ opacity:1; }
@media (scripting:none){ .vcard-img{ opacity:1; } }
.vcard-preview{ opacity:0; transition:opacity .35s; background:#000; }
.vcard-thumb.is-previewing .vcard-preview{ opacity:1; }
.vcard-thumb::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
  pointer-events:none;
}
.vcard-thumb::before{
  content:"";
  position:absolute; top:50%; left:50%;
  width:54px; height:54px;
  margin:-27px 0 0 -27px;
  border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/26px no-repeat;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0;
  transform:scale(.8);
  transition:opacity .25s, transform .25s var(--ease);
  z-index:3;
  pointer-events:none;
}
.vcard-thumb.is-previewing::before{ opacity:0 !important; }
@media (hover:hover){
  .vcard:hover .vcard-thumb{
    box-shadow:0 0 0 1.5px rgba(var(--vc,200,200,215),.7), 0 14px 38px -8px rgba(var(--vc,200,200,215),.5);
    transform:translateY(-2px);
  }
  .vcard:hover .vcard-thumb::before{ opacity:1; transform:scale(1); }
}

.vcard-q,.vcard-sub,.vcard-dur{
  position:absolute;
  z-index:2;
  line-height:1;
  border-radius:7px;
  font-weight:700;
  pointer-events:none;
}
.vcard-q{
  top:8px; left:8px;
  padding:5px 8px;
  font-size:11px;
  letter-spacing:.4px;
  background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  direction:ltr;
}
.vcard-sub{
  top:8px; right:8px;
  display:flex; align-items:center; gap:5px;
  padding:5px 8px;
  font-size:11px;
  background:rgba(255,32,32,.9);
  color:#fff;
}
.vcard-wp{
  position:absolute; z-index:5; left:0; right:0; bottom:0; height:4px; pointer-events:none; direction:ltr;
  background:rgba(255,255,255,.28); border-radius:0 0 var(--radius) var(--radius); overflow:hidden;
  --wc:color-mix(in srgb, rgb(var(--vc,255,40,40)) 78%, #fff 22%);
}
.vcard-wp i{
  display:block; height:100%; width:0; border-radius:0 3px 3px 0;   /* مثل نوار پخش: همیشه از چپ به راست پر می‌شود */
  background:linear-gradient(90deg,var(--wc),color-mix(in srgb,var(--wc) 72%,#000));
  box-shadow:0 0 8px 0 var(--wc);
  transition:width .5s var(--ease);
}
.vcard-wp.done i{ border-radius:0; }
.vcard-thumb:hover .vcard-wp{ height:5px; }
.vcard-dur{
  bottom:8px; left:8px;
  padding:4px 7px;
  font-size:12px;
  background:rgba(0,0,0,.82);
  direction:ltr;
}

.vcard-body{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-top:12px;
}
.vcard-avatar{
  flex:none;
  width:36px; height:36px;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#4a1010,#1c1c1c);
  box-shadow:inset 0 0 0 1px rgba(255,80,80,.4);
  color:#ff9a90;
  font-weight:700;
  font-size:15px;
  line-height:1;
}
.vcard-avatar{ overflow:hidden; }
.vcard-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.vcard-channel{
  display:block; margin-top:2px;
  color:var(--muted); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s;
}
.vcard-channel:hover{ color:var(--text); }
.chip-ch{ display:inline-flex; align-items:center; gap:8px; }
.chip-ch img{ width:22px; height:22px; border-radius:50%; object-fit:cover; margin-inline-start:-6px; }
.vcard-text{ flex:1; min-width:0; }
.vcard-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  color:var(--text);
}
.vcard-actors{
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vcard-meta{
  margin-top:1px;
  color:var(--muted);
  font-size:12.5px;
  display:flex; flex-wrap:wrap;
}
.vcard-meta span+span::before{ content:"•"; margin-inline:6px; opacity:.55; }

.vcard-menu-wrap{ position:relative; flex:none; margin-inline-end:-8px; }
.vcard-menu{
  width:36px; height:36px;
  border:0; border-radius:50%;
  background:transparent;
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .2s, opacity .2s;
}
.vcard-menu:hover{ background:rgba(255,255,255,.1); }
@media (hover:hover){
  .vcard-menu{ opacity:0; }
  .vcard:hover .vcard-menu,.vcard.menu-open .vcard-menu,.vcard-menu:focus-visible{ opacity:1; }
}
.vcard-pop{
  display:none;
  position:absolute;
  top:calc(100% + 2px);
  inset-inline-end:0;
  min-width:180px;
  padding:8px;
  border-radius:14px;
  background:#282828;
  box-shadow:0 14px 40px rgba(0,0,0,.65), 0 0 0 1px var(--line);
  animation:dropIn .16s var(--ease);
}
.vcard.menu-open .vcard-pop{ display:block; }
.vcard-share{
  width:100%;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border:0; border-radius:9px;
  background:transparent;
  font-size:14px;
  cursor:pointer;
  text-align:right;
}
.vcard-share:hover{ background:rgba(255,255,255,.1); }

/* اسکلت بارگذاری */
.vcard.sk{ pointer-events:none; }
.vcard.sk .vcard-thumb,.vcard.sk .vcard-avatar,.sk-line{
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.075) 50%,transparent 65%) 100% 0 / 300% 100% no-repeat,#1a1a1a;
  animation:shimmer 1.6s linear infinite;
  box-shadow:none;
}
.vcard.sk .vcard-thumb::before,.vcard.sk .vcard-thumb::after{ display:none; }
.sk-line{ height:13px; border-radius:6px; margin-top:8px; }
.sk-line.w90{ width:90%; } .sk-line.w60{ width:60%; } .sk-line.w40{ width:40%; }
/* نوار نور در شروع و پایان کاملاً بیرون از کارت است → حلقه بدون پرش و بدون برش وسط کارت (چپ به راست) */
@keyframes shimmer{ from{ background-position:100% 0,0 0; } to{ background-position:0 0,0 0; } }

/* حالت خالی */
.yt-empty{
  grid-column:1/-1;
  text-align:center;
  padding:70px 16px;
  color:var(--muted);
}
.yt-empty svg{ width:54px; height:54px; opacity:.5; margin-bottom:10px; }
.yt-empty h3{ margin:0 0 6px; color:var(--text); font-size:17px; }
.yt-empty p{ margin:0 0 16px; }
.yt-empty button{
  height:38px; padding:0 18px;
  border:0; border-radius:999px;
  background:var(--text); color:#0f0f0f;
  font-weight:700; cursor:pointer;
}

/* ─────────────── صفحه‌بندی ─────────────── */
.yt-pager{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:8px;
  padding:6px 0 30px;
}
.pg{
  min-width:42px; height:42px;
  padding:0 8px;
  border:0; border-radius:12px;
  background:var(--surface);
  color:#ddd;
  font-size:14px; font-weight:700;
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .18s, transform .18s;
}
.pg:hover{ background:var(--surface-3); }
.pg:active{ transform:scale(.95); }
.pg.active{ background:linear-gradient(135deg,#ff2a2a,#c4161c); color:#fff; box-shadow:0 6px 20px -6px rgba(255,32,32,.6); }
.pg.disabled{ opacity:.35; pointer-events:none; }
.pg svg{ width:18px; height:18px; }

/* ─────────────── فوتر ─────────────── */

.yt-footer{ height:71px; border:0; padding:0; }   /* فوتر حذف شد؛ فاصله‌ی انتهای صفحه‌ها برای چیدمان نگه داشته شده */

/* ─────────────── توست ─────────────── */
.yt-toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translate(-50%,20px);
  max-width:calc(100vw - 32px);
  padding:12px 20px;
  border-radius:12px;
  background:#f1f1f1;
  color:#0f0f0f;
  font-weight:700;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s var(--ease);
  z-index:5000;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.yt-toast.show{ opacity:1; transform:translate(-50%,0); }

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

/* ─────────────── صفحه «به‌زودی» (ویدیوهای کوتاه) ─────────────── */
.sx-soon{ min-height:calc(100vh - var(--hdr)); min-height:calc(100dvh - var(--hdr)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; text-align:center; }
.sx-soon-ic{
  position:relative; width:118px; height:118px; border-radius:34px; display:grid; place-items:center; color:#ff3b3b;
  background:linear-gradient(145deg,rgba(255,60,60,.20),rgba(255,32,32,.04));
  box-shadow:0 0 0 1px rgba(255,80,80,.22), 0 24px 60px -18px rgba(255,32,32,.55), inset 0 1px 0 rgba(255,255,255,.08);
  animation:sxFloat 3.6s ease-in-out infinite;
}
.sx-soon-ic::after{ content:""; position:absolute; inset:-14px; border-radius:44px; border:1px dashed rgba(255,80,80,.22); animation:sxSpin 22s linear infinite; }
.sx-soon-ic svg{ width:60px; height:60px; filter:drop-shadow(0 0 14px rgba(255,40,40,.6)); }
.sx-soon h1{ margin:0; font-size:clamp(26px,5vw,38px); font-weight:800; letter-spacing:.5px; background:linear-gradient(90deg,#fff,#ff8a7a); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes sxFloat{ 50%{ transform:translateY(-8px); } }
@keyframes sxSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sx-soon-ic,.sx-soon-ic::after{ animation:none; } }

/* صفحه اصلی روی نمایشگرهای خیلی بزرگ: عرض بیشتر برای ۵ و ۶ ستون */
.yt-wrap-wide{ max-width:2600px; }

/* ─────────────── سطح شیشه‌ای یکپارچه ───────────────
   هدر + نوار چسبان (چیپ‌ها / تب‌های کانال) + ساید بار روی «یک» لایه‌ی بلور رسم می‌شوند؛
   لایه با clip-path به شکل L بریده می‌شود، پس هیچ درز یا اختلاف بلوری بین قطعه‌ها نیست. */
:root{ --glass-bg:rgba(15,15,15,.74); --bar-h:0px; --glass-o:1; }
body[data-bar="1"]{ --bar-h:58px; }
body[data-hdr="clear"]{ --glass-o:0; }
.yt-glass{
  position:fixed; inset:0; z-index:890; pointer-events:none;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  opacity:var(--glass-o);
  clip-path:polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--gsw, var(--sw))) 100%, calc(100% - var(--gsw, var(--sw))) calc(var(--hdr) + var(--bar-h)), 0 calc(var(--hdr) + var(--bar-h)));
  transition:clip-path .28s var(--ease), opacity .12s linear;
}
@media (max-width:720px){
  .yt-glass{ clip-path:polygon(0 0, 100% 0, 100% calc(var(--hdr) + var(--bar-h)), 0 calc(var(--hdr) + var(--bar-h))); transition:transform .66s cubic-bezier(.25,.8,.25,1), clip-path .28s var(--ease), opacity .12s linear; }
  /* موبایل: هدر و نوار دوم (چیپ‌ها/تب‌ها) یک مجموعه‌اند و هیچ‌وقت وضعیتشان در حین باز/بسته‌شدن ساید بار عوض نمی‌شود:
     شیشه‌ی سراسری فقط پشت خود هدر است (--bar-h همیشه ۰؛ yt-common.js آن را inline می‌نویسد پس !important) و نوار دوم
     همیشه شیشه‌ی همرنگ و هم‌پارامتر خودش را دارد؛ چون هیچ حالتی عوض نمی‌شود، چشمک/دو‌تکه‌شدن/پریدن بلور رخ نمی‌دهد */
  body{ --bar-h:0px !important; }
  body.side-m .yt-glass,body.side-mc .yt-glass{ transition:transform .66s cubic-bezier(.25,.8,.25,1), clip-path 0s, opacity .12s linear; }
  /* یک لایه‌ی شیشه‌ای واحد: از بالای هدر تا پایین نوار دوم (هدر روی آن می‌نشیند)؛ پس درز و دو‌تکه‌شدن ندارد */
  body:has(.yt-chips) .yt-glass{ display:none; }
  .yt-chips::before{ top:calc(var(--hdr) * -1) !important; }
  /* صفحه‌ی کانال: وقتی تب‌ها به هدر چسبیدند، همان یک لایه‌ی واحد (هدر + تب‌ها) */
  body[data-bar-stuck="1"]:has(.ch-tabs) .yt-glass{ display:none; }
  body[data-bar-stuck="1"] .ch-tabs::before{ top:calc(var(--hdr) * -1); }
  .yt-chips::before,.ch-tabs::before{
    content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
    background:var(--glass-bg); opacity:var(--glass-o);
    -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{ --glass-bg:rgba(15,15,15,.97); } }

/* ─────────────── اسکرول بی‌نهایت ─────────────── */
.yt-more{ display:flex; justify-content:center; align-items:center; min-height:72px; padding:8px 0 40px; }
.yt-spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.1); border-top-color:#ff3b3b; animation:ytSpin .8s linear infinite; }
@keyframes ytSpin{ to{ transform:rotate(360deg); } }
.yt-end{ display:flex; align-items:center; gap:14px; width:min(420px,80%); color:#7d7d87; font-size:12.5px; }
.yt-end i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14)); }
.yt-end i:last-child{ background:linear-gradient(270deg,transparent,rgba(255,255,255,.14)); }
.yt-end em{ font-style:normal; white-space:nowrap; }
.yt-more-retry{ height:40px; padding:0 20px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text); font-weight:700; cursor:pointer; }
.yt-more-retry:hover{ background:rgba(255,255,255,.08); }
.vc-in{ animation:vcIn .5s var(--ease) both; }
@keyframes vcIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .vc-in{ animation:none; } .yt-spin{ animation-duration:2s; } }

/* ───── نشان «کانال موسیقی»: آیکون خالص CSS (gg-music-note) بدون تصویر؛ همان استایل اصلی با واحد --u که با اندازه‌ی متن مقیاس می‌گیرد ───── */
.mbadge{ --u:.04em; display:inline-block; flex:none; position:relative; box-sizing:border-box; direction:ltr; width:calc(16*var(--u)); height:calc(22*var(--u)); margin:0 .3em 0 0; vertical-align:calc(.33em - 11*var(--u)); white-space:nowrap; color:inherit; opacity:.9; pointer-events:auto; }
.gg-music-note{ box-sizing:border-box; position:absolute; display:block; left:calc(6*var(--u)); top:calc(4*var(--u)); width:calc(2*var(--u)); height:calc(14*var(--u)); background:currentColor; }
.gg-music-note::after,.gg-music-note::before{ content:""; display:block; box-sizing:border-box; position:absolute; border:calc(2*var(--u)) solid; }
.gg-music-note::before{ bottom:calc(-4*var(--u)); width:calc(8*var(--u)); height:calc(8*var(--u)); left:calc(-6*var(--u)); border-radius:calc(10*var(--u)); }
.gg-music-note::after{ width:calc(10*var(--u)); height:calc(6*var(--u)); top:calc(-4*var(--u)); left:0; border-radius:calc(2*var(--u)); transform:skewY(-15deg); }
.vcard-channel .mbadge{ --u:.037em; margin-right:.28em; }
.ch-name .mbadge{ --u:.034em; margin-right:.3em; }
.w-chan-txt b .mbadge{ --u:.56px; margin-right:5px; }
/* نکته: خود .mbadge direction:ltr دارد، پس margin-inline-* به چپ می‌رفت و فاصله‌ای نمی‌ساخت؛ فاصله باید physical (راست = سمت نام) باشد */

/* ───── دکمه‌ی پخش (آیکون اختصاصی): حلقه‌ی سفید + نوارها و مثلث؛ رنگ ثابت قرمز قالب، حالت عادی کاملاً پررنگ و با هاور کمی شفاف ───── */
@property --ic{ syntax:"<color>"; inherits:true; initial-value:#ff2a3a; }
@property --ic2{ syntax:"<color>"; inherits:true; initial-value:#c8001a; }
/* ====== آیکون پلی (طرح نهایی: حلقه‌ی شیشه‌ای + نوار قرمز + مثلث؛ هاور/فوکوس = چرخش، موج، برق) ====== */
.ot-play{ appearance:none; border:0; padding:0; margin:0; background:none; cursor:pointer; will-change:transform; border-radius:50%; -webkit-tap-highlight-color:transparent; transition:transform .6s cubic-bezier(.34,1.56,.64,1); display:block; }
.ot-play[hidden]{ display:none; }
.ot-play svg{ position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 6px 12px rgba(0,0,0,.28)); transition:filter .4s; pointer-events:none; }
.ot-play svg *{ transform-box:view-box; }
.ot-play .spin{ transform-origin:231px 228px; transition:transform .9s cubic-bezier(.34,1.45,.5,1); }
.ot-play .tri{ transform-origin:244px 226px; transition:transform .55s cubic-bezier(.34,1.7,.64,1); }
.ot-play .sheen{ transform:translateX(-130px) skewX(-20deg); transition:transform 0s; }
.ot-play .disc{ position:absolute; left:18.065%; top:17.419%; width:63.226%; height:63.226%; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 2px 8px rgba(255,255,255,.35); transition:transform .55s cubic-bezier(.34,1.7,.64,1); }
.ot-play .ripple{ transform-origin:231px 228px; animation:otRipple 3.6s ease-out infinite; opacity:0; }
@keyframes otRipple{ 0%{ transform:scale(1.02); opacity:0; } 25%{ transform:scale(1.14); opacity:.4; } 75%,100%{ transform:scale(1.5); opacity:0; } }
.ot-play:hover,.ot-play:focus-visible{ transform:scale(1.06); outline:none; }
.ot-play:hover svg,.ot-play:focus-visible svg{ filter:drop-shadow(0 14px 22px color-mix(in srgb, var(--pb,#e6061d) 38%, transparent)); }
.ot-play:hover .spin,.ot-play:focus-visible .spin{ transform:rotate(180deg); }
.ot-play:hover .disc,.ot-play:focus-visible .disc{ transform:scale(1.07); }
.ot-play:hover .tri,.ot-play:focus-visible .tri{ transform:translateX(5px) scale(1.1); }
.ot-play:hover .sheen,.ot-play:focus-visible .sheen{ transform:translateX(320px) skewX(-20deg); transition:transform .8s .12s ease-in-out; }
.ot-play:focus-visible{ outline:3px solid #fff; outline-offset:6px; }
.ot-play:active{ transform:scale(.94); transition:transform .15s ease-out; }
@media (prefers-reduced-motion:reduce){ .ot-play,.ot-play *{ transition-duration:.01s !important; animation:none !important; } }

/* ─────────────── صفحه‌ی موسیقی ─────────────── */
.mu-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:26px 0 14px; }
.mu-head h1{ font-size:24px; font-weight:800; margin:0; }
.mu-head p{ margin:2px 0 0; color:var(--muted, #aaa); font-size:13.5px; }
.mu-ic{ width:54px; height:54px; border-radius:18px; display:grid; place-items:center; color:#ff3b3b;
  background:linear-gradient(145deg,rgba(255,60,60,.22),rgba(255,32,32,.05)); box-shadow:0 0 0 1px rgba(255,80,80,.22), 0 14px 34px -14px rgba(255,32,32,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.mu-ic svg{ width:28px; height:28px; }
.mu-top{ height:2px; }
.mu-h1{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
.yt-chips-scroll a.chip{ text-decoration:none; display:inline-flex; align-items:center; }
.mu-empty{ min-height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px; }
.mu-empty-ic{ width:96px; height:96px; border-radius:30px; display:grid; place-items:center; color:#ff3b3b; background:linear-gradient(145deg,rgba(255,60,60,.20),rgba(255,32,32,.04)); box-shadow:0 0 0 1px rgba(255,80,80,.22), 0 20px 50px -18px rgba(255,32,32,.5); }
.mu-empty-ic svg{ width:44px; height:44px; }
.mu-empty h2{ margin:6px 0 0; font-size:19px; }
.mu-empty p{ margin:0; max-width:420px; color:var(--muted, #aaa); line-height:1.9; font-size:13.5px; }

/* ───────── دکمه‌ی تبلیغات (جدا از دسته‌ی بخش‌های سایت) ───────── */
.yt-ads-btn{ position:relative; display:flex; align-items:center; gap:12px; height:38px; margin:27px 2px 2px; padding:0 12px; border-radius:12px; color:#cfcfd6; font-size:13.5px; white-space:nowrap; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); transition:background .2s, box-shadow .2s, color .2s, transform .18s; }
.yt-ads-btn::before{ content:""; position:absolute; inset-inline:14px; top:-17px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); }
.yt-ads-btn:hover{ color:#fff; background:rgba(255,168,60,.10); box-shadow:inset 0 0 0 1px rgba(255,168,60,.38), 0 6px 18px -10px rgba(255,150,40,.55); }
.yt-ads-btn:active{ transform:scale(.97); }
.yt-ads-ic{ flex:none; width:20px; height:20px; display:grid; place-items:center; color:#ffb24a; }
.yt-ads-ic svg{ width:20px; height:20px; display:block; }
.yt-ads-t{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.yt-ads-go{ flex:none; width:14px; height:14px; opacity:.5; transition:opacity .2s, transform .2s; }
.yt-ads-go svg{ width:14px; height:14px; display:block; }
.yt-ads-btn:hover .yt-ads-go{ opacity:1; transform:translate(-2px,-2px); }

/* ───────── دکمه‌ی حمایت مالی (طلایی، ته ساید بار) ───────── */
.yt-sup{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:9px; height:40px; margin:10px 2px 4px; padding:0 14px; border:0; border-radius:14px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:800; letter-spacing:-.1px; white-space:nowrap; color:#3a2300; background:linear-gradient(135deg,#ffe9a3 0%,#f7c548 38%,#e09a12 72%,#f2c04a 100%); box-shadow:0 4px 12px -8px rgba(240,170,30,.45), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(150,90,0,.28); transition:transform .18s, box-shadow .25s, filter .25s; }
.yt-sup::after{ content:""; position:absolute; top:0; bottom:0; width:42%; left:-60%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-18deg); animation:ytSupShine 5.5s ease-in-out infinite; pointer-events:none; }
@keyframes ytSupShine{ 0%,62%{ left:-60%; } 88%,100%{ left:130%; } }
.yt-sup:hover{ transform:translateY(-1px); filter:saturate(1.12); box-shadow:0 6px 16px -8px rgba(255,185,40,.55), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(150,90,0,.28); }
.yt-sup:active{ transform:scale(.97); }
.yt-sup-t{ flex:1; text-align:center; }
.yt-sup-ic{ position:absolute; inset-inline-start:14px; top:50%; margin-top:-10px; flex:none; width:20px; height:20px; display:grid; place-items:center; }
.yt-sup-ic svg{ width:20px; height:20px; display:block; filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
@media (prefers-reduced-motion:reduce){ .yt-sup::after{ animation:none; } }


/* ───────── نوار پیشرفت ناوبری (بالای هدر) ───────── */
:root{ transition:--ban .38s var(--ease); }
.ot-bar{ position:fixed; top:var(--ban,0px); left:0; right:0; height:3px; z-index:2000; pointer-events:none; opacity:0; transition:opacity .35s ease; }
.ot-bar.is-on{ opacity:1; } .ot-bar.is-done{ opacity:0; }
.ot-bar > i{ position:relative; display:block; width:100%; height:100%; transform-origin:100% 50%; transform:scaleX(0); background:linear-gradient(270deg,#ff1a1a 0%,#e5161c 55%,#ff3b3b 100%); border-radius:0 0 3px 3px; box-shadow:0 0 10px rgba(255,30,30,.7), 0 0 2px rgba(255,70,70,.9); transition:transform .32s cubic-bezier(.22,.8,.3,1); }
.ot-bar > i::before{ content:""; position:absolute; inset:0; background:linear-gradient(270deg,transparent 0,rgba(255,255,255,.55) 45%,transparent 70%); background-size:46% 100%; background-repeat:no-repeat; animation:otBarSh 1.15s linear infinite; }
.ot-bar > i::after{ content:""; position:absolute; left:-2px; top:50%; width:74px; height:14px; margin-top:-7px; border-radius:50%; background:radial-gradient(closest-side,rgba(255,60,60,.85),transparent); filter:blur(2px); transform:translateX(-30%); }
.ot-bar.is-fail > i{ background:linear-gradient(270deg,#7a1010,#c0392b); box-shadow:0 0 8px rgba(200,40,40,.6); }
@keyframes otBarSh{ from{ background-position:120% 0; } to{ background-position:-40% 0; } }

/* ───────── نوار وضعیت اتصال ───────── */
html.ot-ban-on{ --ban:28px; }
.ot-ban{ position:fixed; top:0; left:0; right:0; height:28px; z-index:2100; display:flex; align-items:center; justify-content:center; gap:9px; padding:0 12px; font-size:12.5px; font-weight:500; letter-spacing:0; direction:rtl; transform:translateY(-100%); transition:transform .38s var(--ease), background .3s, box-shadow .38s ease; pointer-events:none; user-select:none; }
.ot-ban.show{ transform:none; pointer-events:auto; }
.ot-ban.is-off{ color:#ffdede; background:linear-gradient(90deg,#2b1013,#401519 50%,#2b1013); box-shadow:none; }
.ot-ban.is-off.show{ box-shadow:0 1px 0 rgba(255,80,80,.3), 0 4px 14px -8px rgba(255,40,40,.4); }
.ot-ban.is-on{ color:#d4ffe6; background:linear-gradient(90deg,#0d2a1a,#115a33 50%,#0d2a1a); box-shadow:none; }
.ot-ban-ic{ display:grid; place-items:center; width:16px; height:16px; flex:none; }
.ot-ban-ic svg{ width:16px; height:16px; display:block; }
.ot-ban.is-off .ot-ban-ic{ color:#ff7b7b; animation:otBanP 1.6s ease-in-out infinite; }
.ot-ban.is-on .ot-ban-ic{ color:#5dffa6; animation:otBanPop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes otBanP{ 50%{ opacity:.45; } }
@keyframes otBanPop{ from{ transform:scale(.4); } }
.ot-ban-b{ height:19px; padding:0 10px; border:0; border-radius:99px; font:inherit; font-size:11px; font-weight:500; color:#fff; background:rgba(255,255,255,.14); cursor:pointer; transition:background .2s; }
.ot-ban-b:hover{ background:rgba(255,255,255,.26); }
.ot-ban-b[hidden]{ display:none; }

/* ───────── تصاویر پایدار: تصویر شکسته هرگز دیده نمی‌شود، جایش خالی می‌ماند ───────── */
img.ot-img-fail{ visibility:hidden; }
img.ot-img-in{ animation:otImgIn .4s ease both; }
@keyframes otImgIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .ot-bar > i::before,.ot-ban-ic{ animation:none !important; } }
img{ color:transparent; font-size:0; }

@media (min-width:721px){ .ot-bar{ height:2px; } .ot-bar > i::after{ height:10px; margin-top:-5px; width:60px; } }

.ot-ban-t{ line-height:1; padding-top:1px; } .ot-ban-b{ display:inline-flex; align-items:center; justify-content:center; line-height:1; padding-top:1px; }
.ot-ban-ic{ margin-top:0; }

/* تصاویر با نمایش یک‌جا (آواتار/چنل‌آرت): تا کاملاً دریافت و دیکود نشده پنهان؛ بعد fade */
img.ot-rv{ opacity:0; transition:opacity .38s ease; }
img.ot-rv.is-ld{ opacity:1; }
img.ot-rv.ot-img-in{ animation:none; }
@media (scripting:none){ img.ot-rv{ opacity:1; } }

/* ساید بار: تبلیغات بالای «کانال‌های شما»، حمایت مالی پایین */

/* برچسب «جدید»: ویدیوی دیده‌نشده‌ی تازه از کانال‌های «کانال‌های شما» (گوشه‌ی بالا-راست) */
.vcard-new{
  position:absolute; top:8px; right:8px; z-index:3; display:flex; align-items:center; justify-content:center;
  min-width:44px; height:22px; padding:0 11px; box-sizing:border-box; border-radius:99px; font-size:11.5px; font-weight:800; line-height:1; letter-spacing:0; text-align:center;
  color:#16161a; background:linear-gradient(180deg,#fff,#ececf1);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.65);
  pointer-events:none; animation:newIn .5s cubic-bezier(.2,.9,.2,1) both;
}
.vcard-new > i{ font-style:normal; display:block; position:relative; top:1px; }
.vcard.has-new .vcard-sub{ top:38px; }
@keyframes newIn{ from{ opacity:0; transform:translateY(-4px) scale(.92); } to{ opacity:1; transform:none; } }
@media (min-width:1001px){
  .w-wrap .related-list .vcard-new{ top:5px; right:5px; height:19px; min-width:38px; padding:0 8px; font-size:10.5px; }
  .w-wrap .related-list .vcard.has-new .vcard-sub{ top:28px; }
}
@media (prefers-reduced-motion:reduce){ .vcard-new{ animation:none; } }

/* ردیف پایین ساید بار: «حمایت مالی» (راست) + «تبلیغات» (چپ)؛ پهنای هر دکمه به‌اندازه‌ی متنش و مجموع آن‌ها = پهنای بقیه‌ی دکمه‌های ساید بار؛ ارتفاع ثابت ۴۲ */
.yt-side-act{ display:flex; align-items:center; gap:8px; flex:none; height:42px; min-height:42px; margin:auto 0 4px; padding:0; }
.yt-mych:not([hidden]) + .yt-side-act{ margin-top:10px; }
.yt-side-act ~ .yt-side-foot{ margin-top:0; }
.yt-side .yt-side-act .yt-ads-btn{ flex:1 1 auto; min-width:0; height:42px; min-height:42px; margin:0; padding:0 11px; justify-content:center; gap:6px; border-radius:21px; font-size:13px; }
.yt-side .yt-side-act .yt-ads-btn::before,.yt-side .yt-side-act .yt-ads-go{ display:none; }
.yt-side .yt-side-act .yt-ads-t{ flex:none; overflow:visible; text-overflow:clip; }
.yt-side .yt-side-act .yt-sup{ flex:1 1 auto; min-width:0; width:auto; height:42px; min-height:42px; margin:0; padding:0 11px; border-radius:21px; justify-content:center; gap:6px; font-size:13px; }
.yt-side .yt-side-act .yt-sup-t{ display:inline; flex:0 1 auto; }
.yt-side .yt-side-act .yt-sup-ic{ position:static; margin:0; }
.yt-side .yt-side-act .yt-sup-ic svg{ width:19px; height:19px; }
/* ساید بار مینی: فقط دایره‌ی قلب حمایت مالی */
@container (max-width:150px){
  .yt-side-act{ justify-content:center; margin-inline:0; }
  .yt-side .yt-side-act .yt-ads-btn{ display:none; }
  .yt-side .yt-side-act .yt-sup{ flex:none; width:42px; padding:0; border-radius:50%; gap:0; }
  .yt-side .yt-side-act .yt-sup-t{ display:none; }
  .yt-side .yt-side-act .yt-sup-ic svg{ width:21px; height:21px; }
}

/* =====================================================
   پلیر موسیقی (ot-mplayer.js) — روی <html> می‌نشیند و بین صفحه‌ها می‌ماند
   ===================================================== */
#otmp{ --mc:#ff5a5a; --ac:rgb(120,40,60); --ac2:rgb(60,40,100); position:fixed; inset:0; z-index:1000; pointer-events:none; direction:rtl; color:#fff; font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif; }
#otmp[hidden]{ display:none; }
#otmp > .mp-au{ display:none; }
#otmp .mp-bar,#otmp .mp-full{ pointer-events:auto; }
#otmp button{ font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#otmp svg{ display:block; width:100%; height:100%; }
@media (max-width:720px){ html.mp-open{ overflow:hidden; } }   /* دسکتاپ: اسکرول‌بار صفحه نمی‌پرد؛ صفحه‌ی پخش روی آن باز می‌شود */
#otmp .mp-ql{ overscroll-behavior:contain; }
#otmp .mp-b{ flex:none; width:40px; height:40px; border:0; border-radius:50%; background:transparent; display:grid; place-items:center; padding:9px; color:#d6d6dc; transition:background .18s, color .18s, transform .18s; }
#otmp .mp-b:hover{ background:rgba(255,255,255,.1); color:#fff; }
#otmp .mp-b:active{ transform:scale(.9); }
#otmp .mp-b.on{ color:var(--mc); }
#otmp .mp-b.on::after{ content:""; position:absolute; margin-top:26px; width:4px; height:4px; border-radius:50%; background:var(--mc); }
#otmp .mp-b{ position:relative; }
#otmp .mp-pp{ background:#fff; color:#111; width:46px; height:46px; padding:12px; box-shadow:0 6px 18px -6px rgba(0,0,0,.6); }
#otmp .mp-pp:hover{ background:#fff; color:#000; transform:scale(1.06); }
#otmp .mp-big{ width:70px; height:70px; padding:19px; }
#otmp .mp-mini{ display:none; }
#otmp .mp-t{ font-size:11.5px; color:#aeaeb6; font-variant-numeric:tabular-nums; min-width:34px; text-align:center; direction:ltr; }
#otmp .mp-range{ -webkit-appearance:none; appearance:none; flex:1; min-width:0; height:4px; border-radius:4px; outline:none; cursor:pointer; direction:ltr; --v:0%;
  background:linear-gradient(to right,var(--mc) var(--v),rgba(255,255,255,.2) var(--v)); }
#otmp .mp-range::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 6px rgba(0,0,0,.5); transform:scale(0); transition:transform .15s; }
#otmp .mp-range::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:#fff; border:0; transform:scale(0); transition:transform .15s; }
#otmp .mp-range:hover::-webkit-slider-thumb,#otmp .mp-range:active::-webkit-slider-thumb,#otmp .mp-range:focus-visible::-webkit-slider-thumb{ transform:scale(1); }
#otmp .mp-range:hover::-moz-range-thumb,#otmp .mp-range:active::-moz-range-thumb{ transform:scale(1); }
#otmp .mp-seek{ display:flex; align-items:center; gap:10px; direction:ltr; width:100%; }

/* معادل نمایشی (میله‌های متحرک) */
#otmp .mp-eq{ position:absolute; inset:0; display:none; align-items:flex-end; justify-content:center; gap:3px; padding-bottom:30%; background:rgba(0,0,0,.45); border-radius:inherit; }
#otmp .mp-eq i{ width:3px; height:30%; border-radius:2px; background:#fff; animation:mpEq .9s ease-in-out infinite; transform-origin:bottom; }
#otmp .mp-eq i:nth-child(2){ animation-delay:-.3s; } #otmp .mp-eq i:nth-child(3){ animation-delay:-.6s; }
@keyframes mpEq{ 0%,100%{ height:22%; } 50%{ height:62%; } }
#otmp:not(.is-play) .mp-eq i{ animation-play-state:paused; }
#otmp .mp-cv .mp-eq{ display:flex; }
#otmp:not(.is-play) .mp-cv .mp-eq{ display:none; }

/* ───── نوار پایین ───── */
#otmp .mp-bar{
  position:fixed; inset-inline:0; bottom:0; height:78px; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,620px) minmax(0,1fr); align-items:center; gap:18px; padding:0 22px;
  background:linear-gradient(180deg,rgba(24,24,30,.86),rgba(12,12,16,.94)); -webkit-backdrop-filter:blur(24px) saturate(1.6); backdrop-filter:blur(24px) saturate(1.6);
  border-top:1px solid rgba(255,255,255,.09); box-shadow:0 -18px 40px -22px rgba(0,0,0,.9);
  transform:translateY(110%); transition:transform .55s cubic-bezier(.2,.9,.2,1), opacity .3s;
}
#otmp.on .mp-bar{ transform:none; }
#otmp .mp-bar::before{ content:""; position:absolute; top:-1px; inset-inline:0; height:1px; background:linear-gradient(90deg,transparent,var(--mc),transparent); opacity:.55; pointer-events:none; }
#otmp .mp-prog{ display:none; }
#otmp .mp-meta{ display:flex; align-items:center; gap:13px; min-width:0; }
#otmp .mp-cv{ position:relative; flex:none; width:52px; height:52px; padding:0; border:0; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#2a2a33,#15151a); box-shadow:0 6px 18px -6px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
#otmp .mp-cv img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .28s ease; }
#otmp .mp-cv img.is-ld{ opacity:1; }
#otmp .mp-tt{ min-width:0; border:0; background:none; padding:0; text-align:start; display:flex; flex-direction:column; gap:2px; }
#otmp .mp-tt b{ font-size:14.5px; font-weight:700; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#otmp .mp-tt em{ font-style:normal; font-size:12.5px; color:#a9a9b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#otmp .mp-mid{ display:flex; flex-direction:column; align-items:center; gap:4px; direction:ltr; min-width:0; }
#otmp .mp-ctl{ display:flex; align-items:center; justify-content:center; gap:10px; direction:ltr; }
#otmp .mp-mid .mp-seek{ max-width:620px; }
#otmp .mp-end{ display:flex; align-items:center; justify-content:flex-start; gap:8px; }
#otmp .mp-volw{ display:flex; align-items:center; gap:6px; width:140px; direction:ltr; }
#otmp .mp-volw .mp-b{ width:34px; height:34px; padding:7px; }
#otmp .mp-ex{ margin-inline-start:4px; }
#otmp.is-load .mp-pp svg{ opacity:.35; }
#otmp.is-load .mp-pp::before{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid transparent; border-top-color:var(--mc); animation:mpSpin .8s linear infinite; }
@keyframes mpSpin{ to{ transform:rotate(360deg); } }

/* ───── صفحه‌ی پخش ───── */
#otmp::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.62); opacity:0; transition:opacity .4s; pointer-events:none; }
#otmp.open::before{ opacity:0; pointer-events:none; }
#otmp .mp-full{
  position:fixed; inset:var(--ban,0px) 0 78px; display:flex; flex-direction:column; overflow:hidden; border-radius:0; background:#0b0b10; isolation:isolate;
  opacity:0; transform:translateY(40px) scale(.97); visibility:hidden; transition:transform .5s cubic-bezier(.2,.9,.2,1), opacity .35s, visibility 0s .5s;
}
#otmp.open .mp-full{ opacity:1; transform:none; visibility:visible; transition:transform .5s cubic-bezier(.2,.9,.2,1), opacity .35s; }
#otmp .mp-bgc{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(160deg,var(--ac),#0b0b10 70%); }
#otmp .mp-bgc img{ opacity:0; transition:opacity .9s ease; position:absolute; inset:-60px; width:calc(100% + 120px); height:calc(100% + 120px); object-fit:cover; filter:brightness(.5) saturate(1.5) blur(70px); transform:scale(1.1); will-change:opacity; }
#otmp .mp-bgc img.on{ opacity:.9; }
/* نویز ریز (دیدرینگ) روی گرادیان‌های تیره: پله‌پله‌شدنِ (banding) محو و پس‌زمینه یک‌دست و نرم می‌شود */
#otmp .mp-bgc::after{ content:""; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px, radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(5,5,8,.7)); }
#otmp .mp-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; flex:none; position:relative; touch-action:none; }
#otmp .mp-now{ font-size:12.5px; letter-spacing:.02em; color:#cfcfd6; opacity:.85; }
#otmp .mp-grab{ display:none; }
#otmp .mp-body{ flex:1; min-height:0; display:flex; }
#otmp .mp-left{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:0 28px 28px; }
#otmp .mp-stage{ position:relative; width:min(100%, 64vh, 600px); aspect-ratio:1/1; border-radius:26px;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07), 0 0 140px -34px var(--mc); }
#otmp .mp-sq{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; background:#09090d; }
#otmp .mp-sq canvas{ width:100%; height:100%; display:block; }
#otmp .mp-sq::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 38px 10px rgba(4,4,8,.62), inset 0 0 0 1px rgba(255,255,255,.05); }
#otmp .mp-info{ display:flex; align-items:center; gap:12px; width:min(100%,64vh,600px); }
#otmp .mp-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
#otmp .mp-ft{ font-size:22px; font-weight:800; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#otmp .mp-fc2{ font-size:14px; color:#bdbdc6; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#otmp .mp-fc2:hover{ color:#fff; }
#otmp .mp-fc2{ margin-right:auto; max-width:100%; }   /* کلیک فقط روی خودِ متن نام کانال، نه فضای خالی ردیف */
#otmp .mp-fctl{ display:none; }
#otmp .mp-q{ display:none; width:370px; flex:none; margin:0 0 20px 20px; border-radius:20px; background:rgba(14,14,20,.62); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); overflow:hidden; flex-direction:column; }
#otmp.q-open .mp-q{ display:flex; }
#otmp .mp-q h3{ margin:0; padding:16px 18px 8px; font-size:14px; font-weight:800; color:#ddd; }
#otmp .mp-ql{ flex:1; overflow-y:auto; padding:4px 8px 12px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
#otmp .mp-qi{ width:100%; display:flex; align-items:center; gap:11px; padding:7px 8px; border:0; border-radius:12px; background:transparent; text-align:start; transition:background .15s; }
#otmp .mp-qi:hover{ background:rgba(255,255,255,.08); }
#otmp .mp-qi.cur{ background:rgba(255,255,255,.12); }
#otmp .mp-qc{ position:relative; flex:none; width:44px; height:44px; border-radius:8px; overflow:hidden; background:#1c1c22; }
#otmp .mp-qc img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .28s ease; }
#otmp .mp-qc img.is-ld{ opacity:1; }
#otmp .mp-qi.pl .mp-eq{ display:flex; }
#otmp .mp-qt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#otmp .mp-qt b{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#otmp .mp-qt em{ font-style:normal; font-size:12px; color:#a2a2ab; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#otmp .mp-qi.cur .mp-qt b{ color:var(--mc); }
#otmp .mp-qd{ font-size:11.5px; color:#8f8f98; direction:ltr; font-variant-numeric:tabular-nums; }

/* جا برای نوار در صفحه‌ی اصلی */
html.mp-on body{ padding-bottom:78px; }
html.mp-on .yt-side{ bottom:78px; }
html.mp-on .yt-toast{ bottom:96px; }
@media (max-width:1100px){ #otmp .mp-bar{ grid-template-columns:minmax(0,1fr) minmax(260px,480px) auto; } #otmp .mp-volw{ display:none; } }
@media (max-width:900px) and (min-width:721px){ #otmp .mp-q{ width:300px; } }

/* ───── موبایل ───── */
@media (max-width:720px){
  html.mp-on body{ padding-bottom:calc(62px + 74px + env(safe-area-inset-bottom)); }
  html.mp-on .yt-side{ bottom:0; }
  html.mp-on .yt-toast{ bottom:calc(150px + env(safe-area-inset-bottom)); }
  body.side-m ~ #otmp.on .mp-bar{ transform:translate3d(calc(-100% - 10px),0,0); }
  body.side-m ~ #otmp .mp-bar{ pointer-events:none; }
  #otmp .mp-bar{
    inset-inline:10px; bottom:calc(62px + env(safe-area-inset-bottom) + 8px); height:58px; display:flex; gap:6px; padding:0 8px 0 6px; border-radius:18px; overflow:hidden;
    background:linear-gradient(135deg,rgba(40,34,46,.78),rgba(20,20,26,.88)); border:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 34px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.1);
    transform:translateY(160%); transition:transform .66s cubic-bezier(.25,.8,.25,1);
  }
  #otmp .mp-bar::before{ display:none; }
  #otmp .mp-bar::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--mc) 22%,transparent),transparent 60%); pointer-events:none; }
  #otmp .mp-meta{ flex:1; position:relative; z-index:1; gap:10px; }
  #otmp .mp-cv{ width:42px; height:42px; border-radius:9px; }
  #otmp .mp-tt b{ font-size:13.5px; } #otmp .mp-tt em{ font-size:11.5px; }
  #otmp .mp-mid,#otmp .mp-volw,#otmp .mp-ex{ display:none; }
  #otmp .mp-end{ position:relative; z-index:1; gap:2px; }
  #otmp .mp-mini{ display:grid; }
  #otmp .mp-end .mp-pp{ width:38px; height:38px; padding:9px; }
  #otmp .mp-end .mp-b:not(.mp-pp){ width:36px; height:36px; padding:8px; }
  #otmp .mp-prog{ display:block; position:absolute; left:10px; right:10px; bottom:0; height:2.5px; border-radius:2px; background:rgba(255,255,255,.12); z-index:1; direction:ltr; overflow:hidden; }
  #otmp .mp-prog i{ display:block; height:100%; transform-origin:left; transform:scaleX(0); background:var(--mc); }
  #otmp::before{ display:none; }
  #otmp .mp-full{ inset:var(--ban,0px) 0 0; border-radius:0; transform:translateY(100%); opacity:1; box-shadow:none; padding-top:env(safe-area-inset-top); transition:transform .5s cubic-bezier(.2,.9,.2,1), visibility 0s .5s; }
  #otmp.open .mp-full{ transform:none; transition:transform .5s cubic-bezier(.2,.9,.2,1); }
  #otmp .mp-top{ padding:10px 12px 4px; }
  #otmp .mp-grab{ display:block; position:absolute; left:50%; top:7px; width:38px; height:4px; margin-left:-19px; border-radius:3px; background:rgba(255,255,255,.28); }
  #otmp .mp-body{ flex-direction:column; position:relative; }
  #otmp .mp-left{ justify-content:flex-start; gap:0; padding:6px 22px calc(22px + env(safe-area-inset-bottom)); }
  #otmp .mp-stage{ width:min(100%, 44vh, 440px); margin-top:2vh; border-radius:22px; }
  #otmp .mp-info{ width:100%; margin-top:3.4vh; }
  #otmp .mp-ft{ font-size:19px; }
  #otmp .mp-fctl{ display:flex; flex-direction:column; gap:12px; width:100%; margin-top:auto; padding-top:2vh; }
  #otmp .mp-fctl .mp-ctl{ justify-content:space-between; gap:0; padding:0 4px; }
  #otmp .mp-fctl .mp-b{ width:46px; height:46px; padding:11px; }
  #otmp .mp-fctl .mp-big{ width:72px; height:72px; padding:20px; }
  #otmp .mp-fctl .mp-range{ height:5px; }
  #otmp .mp-fctl .mp-range::-webkit-slider-thumb{ transform:scale(1); }
  #otmp .mp-fctl .mp-range::-moz-range-thumb{ transform:scale(1); }
  #otmp .mp-q{ display:flex; position:absolute; inset-inline:0; bottom:0; width:auto; height:66%; margin:0; border-radius:24px 24px 0 0; background:rgba(16,16,22,.94); transform:translateY(105%); transition:transform .45s cubic-bezier(.2,.9,.2,1); z-index:5; box-shadow:0 -20px 50px -20px #000, inset 0 1px 0 rgba(255,255,255,.1); }
  #otmp.q-open .mp-q{ transform:none; }
  #otmp .mp-ql{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}
@media (max-height:640px) and (max-width:720px){ #otmp .mp-stage{ width:min(100%, 34vh); } #otmp .mp-fctl{ gap:6px; } #otmp .mp-fctl .mp-big{ width:60px; height:60px; padding:16px; } }
@media (prefers-reduced-motion:reduce){ #otmp *,#otmp::before{ transition-duration:.01s !important; animation-duration:.01s !important; } }

/* ───── پلیر موسیقی: چیدمان چپ‌چین (عنوان/کانال/کاور سمت چپ) ───── */
#otmp .mp-bar,#otmp .mp-full{ direction:ltr; }
#otmp .mp-end{ justify-content:flex-end; }
#otmp .mp-tt,#otmp .mp-tx,#otmp .mp-qt{ text-align:left; }
#otmp .mp-q h3{ text-align:right; direction:rtl; }   /* عنوان فارسی «صف پخش» راست‌چین؛ آیتم‌های انگلیسی چپ */
#otmp .mp-q{ margin:0 0 20px 20px; order:-1; }
@media (max-width:900px) and (min-width:721px){ #otmp{ --qw:300px; } }
@media (min-width:721px){
  /* لیست پخش با انیمیشن باز می‌شود؛ ویژوالایزر/عنوان همراهش روان جابه‌جا می‌شوند */
  #otmp .mp-q{ display:flex; width:0; margin:0; opacity:0; pointer-events:none; box-shadow:none; transition:width .65s cubic-bezier(.2,.9,.2,1), margin .65s cubic-bezier(.2,.9,.2,1), opacity .4s ease; }
  #otmp .mp-q > *{ width:var(--qw,370px); flex-shrink:0; }
  #otmp .mp-ql{ flex:1 1 0; min-height:0; }
  #otmp.q-open .mp-q{ width:var(--qw,370px); margin:0 0 20px 20px; opacity:1; pointer-events:auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
  #otmp .mp-left{ transition:padding .65s cubic-bezier(.2,.9,.2,1); }
}
@media (max-width:720px){
  #otmp .mp-q{ margin:0; }
  #otmp .mp-q > *{ width:auto; }
}

/* آیکون پخش: مثلث از نظر بصری وسط دایره (مرکز جرم، نه جعبه‌ی دورش) */
#otmp .mp-pp svg.i-play{ transform:translateX(-7%); }
@media (min-width:721px){ #otmp .mp-mid{ margin-top:6px; } }   /* فاصله‌ی بالای دکمه‌ی پخش = فاصله‌ی خط زمان تا لبه‌ی پایین */

a.yt-sup,a.yt-sup:hover{ text-decoration:none; }

/* فوتر ساید بار: TUBE قرمز مثل لوگو */
.yt-side-foot .x{ color:var(--accent); }
/* دکمه‌های تبلیغات/حمایت مالی ساید بار: کمی کوچک‌تر (غیر موبایل) */
@media (min-width:721px){
  .yt-side-act{ height:36px; min-height:36px; gap:7px; }
  .yt-side .yt-side-act .yt-ads-btn,.yt-side .yt-side-act .yt-sup{ height:36px; min-height:36px; border-radius:18px; font-size:12.5px; padding:0 9px; gap:5px; }
  .yt-side .yt-side-act .yt-sup-ic svg{ width:17px; height:17px; }
  .yt-side .yt-side-act .yt-ads-ic svg{ width:17px; height:17px; }
}
@container (max-width:150px){
  @media (min-width:721px){ .yt-side .yt-side-act .yt-sup{ width:36px; height:36px; } .yt-side .yt-side-act .yt-sup-ic svg{ width:19px; height:19px; } }
}

/* ═════════ دنبال کردن: اجزای مشترک (دکمه‌ها، سنجاق ساید بار، توست) ═════════ */
.w-follow,.ch-follow{ position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:none; border:0; cursor:pointer; font-family:inherit; font-weight:800; white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:background .25s,color .25s,transform .18s,box-shadow .3s; }
.w-follow .fo-ic,.ch-follow .fo-ic{ position:relative; width:18px; height:18px; flex:none; display:grid; place-items:center; }
.fo-ic svg{ grid-area:1/1; width:100%; height:100%; transition:transform .38s cubic-bezier(.3,1.5,.5,1),opacity .2s; }
.fo-c{ opacity:0; transform:scale(.3) rotate(-40deg); }
.fo-p{ opacity:1; }
[data-follow].on .fo-c{ opacity:1; transform:none; }
[data-follow].on .fo-p{ opacity:0; transform:scale(.3) rotate(90deg); }
.fo-t .fo-b,.fo-t .fo-u{ display:none; }
[data-follow].on .fo-t .fo-a{ display:none; }
[data-follow].on .fo-t .fo-b{ display:inline; }
@media (hover:hover) and (pointer:fine){ [data-follow].on:hover .fo-t .fo-b{ display:none; } [data-follow].on:hover .fo-t .fo-u{ display:inline; } }
[data-follow]::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0; box-shadow:0 0 0 0 rgba(255,255,255,.55); }
[data-follow].pop::after{ animation:foBurst .7s ease-out; }
[data-follow].pop{ animation:foPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes foBurst{ 0%{ opacity:.9; box-shadow:0 0 0 0 rgba(255,255,255,.55); } 100%{ opacity:0; box-shadow:0 0 0 14px rgba(255,255,255,0); } }
@keyframes foPop{ 0%{ transform:scale(.92); } 60%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
[data-follow]:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ساید بار: کانال‌های سنجاق‌شده (دنبال‌شده‌ها) */
.mych-it.pinned{ background:linear-gradient(270deg,hsl(var(--h,0) 70% 50% / .13),transparent 78%); }
.mych-it.pinned:hover{ background:linear-gradient(270deg,hsl(var(--h,0) 70% 50% / .2),rgba(255,255,255,.05) 80%); }
.mych-it.pinned.current{ background:linear-gradient(270deg,rgba(255,32,32,.2),hsl(var(--h,0) 70% 50% / .06) 75%); }
.mych-it.pinned + .mych-it:not(.pinned){ margin-top:8px; position:relative; }
.mych-it.pinned + .mych-it:not(.pinned)::before{ content:""; position:absolute; top:-5px; inset-inline:14px; height:1px; background:linear-gradient(270deg,rgba(255,255,255,.14),transparent); }
.mych-pin{ flex:none; display:grid; place-items:center; width:16px; height:16px; margin-inline-start:6px; color:hsl(var(--h,0) 85% 72%); opacity:.85; transform:rotate(38deg); }
.mych-t + .mych-pin{ margin-inline-start:auto; }
.mych-pin svg{ width:13px; height:13px; }
.mych-it.just{ animation:mychJust 1.9s ease-out; }
.mych-it.just .mych-av{ animation:mychPopAv .9s cubic-bezier(.3,1.6,.5,1); }
@keyframes mychJust{ 0%{ background:hsl(var(--h,0) 85% 55% / .55); transform:translate3d(0,-10px,0) scale(.97); opacity:.2; } 25%{ opacity:1; transform:none; } 100%{ } }
@keyframes mychPopAv{ 0%{ transform:scale(.4); } 100%{ transform:scale(1); } }
/* سنجاق فقط در ساید بارِ باز دیده می‌شود؛ در حالت مینی نمی‌آید تا آواتارها هم‌راستا بمانند */
body.side-mini:not(.side-ovl) .mych-pin{ display:none; }
@media (max-width:1199px){ body:not(.side-ovl) .mych-pin{ display:none; } }

/* توست دنبال کردن */
.ot-ftoast{ position:fixed; z-index:2147482000; inset-inline:0; margin-inline:auto; bottom:calc(76px + env(safe-area-inset-bottom)); width:max-content; max-width:min(440px,calc(100vw - 28px)); display:flex; align-items:center; gap:10px; padding:11px 16px 11px 18px; border-radius:999px; direction:rtl; color:#fff; font-size:13.5px; font-weight:700; line-height:1.6; background:rgba(28,28,32,.94); border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 44px -14px rgba(0,0,0,.8); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); animation:ftIn .4s cubic-bezier(.2,.9,.3,1.2) both,ftOut .35s ease 2.8s forwards; pointer-events:none; }
.ot-ftoast i{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); }
.ot-ftoast.on i{ background:linear-gradient(135deg,#ff4040,#c40e1e); }
.ot-ftoast i svg{ width:14px; height:14px; }
.ot-ftoast span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
@keyframes ftIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes ftOut{ to{ opacity:0; transform:translateY(10px) scale(.97); } }
@media (min-width:721px){ .ot-ftoast{ bottom:28px; } }
@media (prefers-reduced-motion:reduce){ [data-follow].pop,[data-follow].pop::after,.mych-it.just,.mych-it.just .mych-av{ animation:none; } .ot-ftoast{ animation:ftIn .01s both,ftOut .01s 3s forwards; } }

/* ───── پلیر موسیقی: اکولایزر مینیمال (دکمه کنار «دیدن ویدیو»، کادر شیشه‌ای بالای ردیف عنوان) ───── */
#otmp .mp-info{ position:relative; }
#otmp .mp-eqb[aria-expanded="true"]{ background:rgba(255,255,255,.14); color:#fff; }
#otmp .mp-eqp{ position:absolute; z-index:8; bottom:calc(100% + 12px); left:50%; width:min(340px, calc(100vw - 24px)); box-sizing:border-box; padding:12px 14px 14px; border-radius:20px; direction:rtl;
  background:linear-gradient(180deg,rgba(30,28,38,.94),rgba(16,16,22,.96)); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 24px 60px -18px #000, 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08); transform:translateX(-50%); animation:eqIn .24s cubic-bezier(.2,.9,.25,1); }
#otmp .mp-eqp[hidden]{ display:none; }
#otmp .mp-eqp.out{ animation:eqOut .26s cubic-bezier(.4,0,.6,1) forwards; pointer-events:none; }
@keyframes eqOut{ from{ opacity:1; transform:translate(-50%,0) scale(1); } to{ opacity:0; transform:translate(-50%,8px) scale(.97); } }
@keyframes eqIn{ from{ opacity:0; transform:translate(-50%,10px) scale(.97); } to{ opacity:1; transform:translate(-50%,0); } }
#otmp .eq-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
#otmp .eq-t{ font-size:13.5px; font-weight:800; color:#f1f1f5; letter-spacing:.01em; }
#otmp .eq-hb{ display:flex; align-items:center; gap:8px; }
#otmp .eq-rs{ width:28px; height:28px; padding:6px; border:0; border-radius:50%; background:rgba(255,255,255,.07); color:#cfcfd8; display:grid; place-items:center; transition:background .18s,color .18s,transform .3s; }
#otmp .eq-rs:hover{ background:rgba(255,255,255,.14); color:#fff; transform:rotate(-40deg); }
#otmp .eq-sw{ position:relative; width:36px; height:21px; padding:0; border:0; border-radius:12px; background:rgba(255,255,255,.16); transition:background .2s; direction:ltr; }
#otmp .eq-sw i{ position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); transition:transform .22s cubic-bezier(.3,.9,.3,1); }
#otmp .eq-sw[aria-checked="true"]{ background:var(--mc); }
#otmp .eq-sw[aria-checked="true"] i{ transform:translateX(15px); }
#otmp .eq-prs{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
#otmp .eq-prs::-webkit-scrollbar{ display:none; }
#otmp .eq-pr{ flex:none; height:28px; padding:0 12px; border:0; border-radius:14px; background:rgba(255,255,255,.07); color:#c9c9d2; font-size:12px; font-weight:600; white-space:nowrap; transition:background .18s,color .18s; }
#otmp .eq-pr:hover{ background:rgba(255,255,255,.13); color:#fff; }
#otmp .eq-pr.on{ background:var(--mc); color:#120a0a; font-weight:800; }
#otmp .eq-sl{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; direction:ltr; padding:2px 4px 0; }
#otmp .eq-band{ --p:50%; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
#otmp .eq-o{ font-size:12px; font-weight:700; color:#fff; direction:ltr; font-variant-numeric:tabular-nums; height:16px; line-height:16px; }
#otmp .eq-o.z{ color:#8d8d98; font-weight:600; }
#otmp .eq-tr{ position:relative; width:36px; height:108px; touch-action:none; cursor:pointer; outline:none; border-radius:12px; }
#otmp .eq-tr::before{ content:""; position:absolute; left:50%; top:4px; bottom:4px; width:5px; margin-left:-2.5px; border-radius:3px; background:rgba(255,255,255,.12); }
#otmp .eq-tr::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; margin:-1px 0 0 -8px; border-radius:2px; background:rgba(255,255,255,.3); }
#otmp .eq-fill{ position:absolute; left:50%; width:5px; margin-left:-2.5px; border-radius:3px; bottom:calc(4px + (100% - 8px) * min(var(--p),50%) / 100%); height:calc((100% - 8px) * (max(var(--p),50%) - min(var(--p),50%)) / 100%); background:linear-gradient(0deg,#cfcfd8,#fff); transition:background .2s; }
#otmp .eq-th{ position:absolute; left:50%; width:20px; height:20px; margin:0 0 -10px -10px; border-radius:50%; bottom:calc(4px + (100% - 8px) * var(--p) / 100%); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.08); transition:box-shadow .18s, transform .18s; }
#otmp .eq-tr:hover .eq-th,#otmp .eq-tr:focus-visible .eq-th{ box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.14); }
#otmp .eq-tr.drag .eq-th{ transform:scale(1.12); }
#otmp .eq-band.is-bass .eq-fill{ background:linear-gradient(0deg,var(--ac2,#ff5a5a),var(--mc)); box-shadow:0 0 14px -2px var(--mc); }
#otmp .eq-band.is-bass .eq-th{ background:var(--mc); box-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 0 4px color-mix(in srgb,var(--mc) 30%,transparent), 0 0 16px -2px var(--mc); }
#otmp .eq-band.is-bass .eq-n{ color:#fff; }
#otmp .eq-n{ font-size:11.5px; font-weight:700; color:#a9a9b4; }
#otmp .mp-eqp.off .eq-sl,#otmp .mp-eqp.off .eq-prs{ opacity:.4; }
@media (max-width:720px){
  #otmp .mp-eqp{ width:min(340px, calc(100vw - 28px)); padding:11px 12px 12px; }
  #otmp .eq-tr{ height:88px; width:32px; }
  #otmp .eq-th{ width:15px; height:15px; margin:0 0 -7.5px -7.5px; box-shadow:0 2px 6px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.08); }
  #otmp .eq-band.is-bass .eq-th{ box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 0 3px color-mix(in srgb,var(--mc) 30%,transparent), 0 0 12px -2px var(--mc); }
  #otmp .eq-tr:hover .eq-th,#otmp .eq-tr:focus-visible .eq-th{ box-shadow:0 2px 6px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.14); }
  #otmp .eq-n{ font-size:11px; }
}
@media (max-height:560px){ #otmp .eq-tr{ height:76px; } #otmp .eq-prs{ padding-bottom:8px; } }