/* =====================================================
   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);
  --hdr:56px;
  --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; }
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:0; left:0; right:0;
  height:var(--hdr);
  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(--hdr); }
.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; --hdr: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:76px; }
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-x:hidden; overflow-y:auto; scrollbar-width:none;
  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:940; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; }
.yt-side-scrim.show{ opacity:1; }
body.side-ovl{ overflow:hidden; }
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,.85); background:rgba(15,15,15,.97); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
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; }

/* موبایل: بدون ساید بار */
@media (max-width:720px){
  .yt-side,.yt-side-scrim,.yt-side-toggle{ display:none !important; }
}

/* ─────────────── نوار پایین موبایل ─────────────── */
.yt-bnav{ display:none; }
@media (max-width:720px){
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  .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; } }

/* ─────────────── تبلیغات ─────────────── */
.yt-ads{
  display:grid;
  gap:12px;
  margin:0 auto 18px;
  max-width:970px;
}
.yt-ads.double{ max-width:1100px; grid-template-columns:1fr 1fr; }
.yt-ad{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  line-height:0;
  background:var(--surface);
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .25s, transform .25s var(--ease);
}
.yt-ad:hover{ box-shadow:0 0 0 1px rgba(255,64,64,.45), 0 12px 32px -10px rgba(0,0,0,.7); transform:translateY(-1px); }
.yt-ad img{ display:block; width:100%; height:auto; user-select:none; pointer-events:none; }
.yt-ad-tag{
  position:absolute; top:8px; inset-inline-start:8px;
  line-height:1;
  padding:4px 8px;
  border-radius:6px;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#ddd;
  font-size:10.5px;
  font-weight:700;
}
@media (max-width:720px){ .yt-ads.double{ grid-template-columns:1fr; } }

/* ─────────────── گرید و کارت ویدیو ─────────────── */
.vgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px 16px;
  padding:6px 0 28px;
  transition:opacity .25s;
}
.vgrid.is-loading{ opacity:.45; pointer-events:none; }
.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)); } }
@media (max-width:620px){ .vgrid{ grid-template-columns:minmax(0,1fr); gap:22px; } }
/* تعداد ستون‌ها بر اساس عرض واقعی محتوا (با باز/بسته شدن ساید بار پویا تغییر می‌کند) */
.yt-wrap{ container-type:inline-size; container-name:cw; }
@container cw (max-width:539px){ .vgrid{ grid-template-columns:minmax(0,1fr); gap:22px; } }
@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-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-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,#1a1a1a 30%,#262626 50%,#1a1a1a 70%);
  background-size:220% 100%;
  animation:shimmer 1.3s 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:120% 0; } to{ background-position:-120% 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{
  border-top:1px solid #1f1f1f;
  padding:22px 16px 28px;
  text-align:center;
  color:#7a7a7a;
  font-size:13px;
  letter-spacing:.8px;
  direction:ltr;
}
.yt-footer .x{ color:var(--accent); }

/* ─────────────── توست ─────────────── */
.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); }

/* ─────────────── مودال کلیک تبلیغ (adm) ─────────────── */
.adm-overlay{
  position:fixed; inset:0;
  z-index:99999;
  background:rgba(0,0,0,0);
  -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  pointer-events:none;
  visibility:hidden;
  transition:background .4s ease, backdrop-filter .4s ease, visibility .4s ease;
}
.adm-overlay.adm-open{
  background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  pointer-events:auto;
  visibility:visible;
}
.adm-overlay.adm-fadeout .adm-container{ opacity:0; transform:scale(.94); }
.adm-container{
  width:100%; max-width:360px;
  background:linear-gradient(160deg,#0d1120 0%,#080c18 100%);
  border:1px solid rgba(255,80,80,.2);
  border-radius:24px;
  box-shadow:0 0 0 1px rgba(255,50,50,.07),0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(255,30,30,.07);
  opacity:0;
  transform:translateY(24px) scale(.97);
  transition:opacity .4s cubic-bezier(.22,.68,0,1.2), transform .4s cubic-bezier(.22,.68,0,1.2);
  overflow:hidden;
  direction:rtl;
}
.adm-overlay.adm-open .adm-container{ opacity:1; transform:none; }
.adm-header{ display:flex; align-items:center; gap:10px; padding:18px 22px 14px; border-bottom:1px solid rgba(255,255,255,.06); }
.adm-title-icon{ font-size:20px; }
.adm-title{
  font-size:17px; font-weight:700;
  background:linear-gradient(90deg,#fff,#ffaaaa);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.adm-body{ padding:28px 22px 26px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.adm-countdown-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.adm-countdown-text{ font-size:13px; color:#888; }
.adm-countdown-num{
  font-size:52px; font-weight:700; line-height:1.1;
  background:linear-gradient(135deg,#ff4d4d,#ff9999);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.adm-countdown-unit{ font-size:13px; color:#aaa; }
.adm-reserve-btn{
  display:inline-block;
  padding:9px 22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#bbb;
  font-size:12px; font-weight:700;
  background:rgba(255,255,255,.04);
  transition:border-color .25s, color .25s, background .25s;
}
.adm-reserve-btn:hover{ border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.08); }

@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))); } }
@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; } }

/* ───── نشان «کانال موسیقی»: تصویر آیکون (PNG سفید شفاف) کنار نام کانال، هم‌تراز با متن ───── */
img.mbadge{ display:inline-block; flex:none; width:.82em; height:.82em; margin-inline-start:.16em; vertical-align:-.1em; opacity:.88; border:0; }
.vcard-channel img.mbadge{ width:.88em; height:.88em; margin-inline-start:.14em; }
.ch-name img.mbadge{ width:.56em; height:.56em; margin-inline-start:.16em; vertical-align:-.02em; }
.w-chan-txt b img.mbadge{ width:13px; height:13px; margin-inline-start:4px; vertical-align:-1px; }

/* ───── دکمه‌ی پخش (آیکون اختصاصی): حلقه‌ی سفید + نوارها و مثلث؛ رنگ ثابت قرمز قالب، حالت عادی کاملاً پررنگ و با هاور کمی شفاف ───── */
@property --ic{ syntax:"<color>"; inherits:true; initial-value:#ff2a3a; }
@property --ic2{ syntax:"<color>"; inherits:true; initial-value:#c8001a; }
.pbtn{
  --ic:#ff2a3a; --ic2:#c8001a;
  background:url("../img/play-ring.svg") center/100% 100% no-repeat; opacity:1;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.pbtn i{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,var(--ic),var(--ic2)); }
.pbtn .tri{ -webkit-mask:url("../img/play-tri.svg") center/100% 100% no-repeat; mask:url("../img/play-tri.svg") center/100% 100% no-repeat; }
.pbtn .rb{ -webkit-mask:url("../img/play-ribbon.svg") center/100% 100% no-repeat; mask:url("../img/play-ribbon.svg") center/100% 100% no-repeat; }
.pbtn .rb.b{ transform:rotate(180deg); transform-origin:49.7% 49%; }
@media (hover:hover){
  .pbtn:hover{ opacity:.7; transform:scale(1.08); }
  .pbtn:hover i{ animation:pbSoul 1.1s ease-out; }
}
@keyframes pbSoul{ 0%{ filter:brightness(1); } 35%{ filter:brightness(1.45) saturate(1.2); } 100%{ filter:brightness(1); } }
@supports not ((-webkit-mask:url(x)) or (mask:url(x))){ .pbtn{ background-image:url("../img/play-icon.svg"); } .pbtn i{ display:none; } }
@media (prefers-reduced-motion:reduce){ .pbtn i{ animation:none !important; } }