/* =====================================================
   OPENTUBE — صفحه‌ی کانال (روی yt.css لود می‌شود)
   ساختار یوتیوبی، با هویت قرمز/تیره و رنگ شخصی هر کانال (--h)
   ===================================================== */

@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.chp{
  --ch:hsl(var(--h) 85% 58%);
  --ch-soft:hsl(var(--h) 80% 55% / .16);
  position:relative;
  overflow-x:clip;
}
.ch-wrap{ max-width:1320px; }

/* درخشش محیطی پشت صفحه — از رنگ شخصی کانال */
.ch-glow{
  position:absolute; inset:0 0 auto 0; height:560px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 70% at 78% 0%, hsl(var(--h) 70% 40% / .14), transparent 70%),
    radial-gradient(45% 60% at 12% 8%, rgba(255,32,32,.12), transparent 70%);
  -webkit-mask-image:linear-gradient(#000 40%, transparent);
  mask-image:linear-gradient(#000 40%, transparent);
}

/* ─────────────── بنر ─────────────── */
.ch-banner{
  position:relative;
  width:100%; max-width:100%; /* بدون این، min-height با aspect-ratio عرض بنر را بیشتر از قاب می‌کرد */
  margin-top:14px;
  aspect-ratio:2560/423;
  min-height:120px;
  border-radius:20px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 22px 50px -34px hsl(var(--h) 55% 38% / .28);
  animation:chIn .6s var(--ease) both;
}
.ch-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ch-banner::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(0deg,rgba(15,15,15,.55),transparent); pointer-events:none;
}
/* بنر پیش‌فرض (وقتی چنل آرت ندارد): شفق + نقطه‌چین + حرف اول */
.ch-banner.is-fb{
  background:
    radial-gradient(70% 140% at 85% 20%, hsl(var(--h) 85% 48%), transparent 62%),
    radial-gradient(60% 120% at 12% 90%, hsl(calc(var(--h) + 55) 80% 40%), transparent 60%),
    linear-gradient(120deg,#16161a,#0f0f12);
}
.fb-aurora{
  position:absolute; inset:-30%;
  background:conic-gradient(from var(--a) at 50% 50%, transparent, hsl(var(--h) 90% 60% / .35), transparent 30%, rgba(255,32,32,.25), transparent 65%);
  filter:blur(46px); animation:spin 22s linear infinite;
}
.fb-dots{
  position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.3px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 5%,#000 60%);
  mask-image:linear-gradient(100deg,transparent 5%,#000 60%);
}
.fb-letter{
  position:absolute; inset-inline-start:6%; top:50%; transform:translateY(-52%);
  font-size:clamp(120px,22vw,300px); line-height:1; font-weight:700;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.14);
  user-select:none;
}
@keyframes spin{ to{ --a:360deg; } }
@keyframes chIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ─────────────── هویت ─────────────── */
.ch-id{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:28px;
  padding:0 8px 20px;
  animation:chIn .6s .08s var(--ease) both;
}
.ch-av{
  --a:0deg;
  position:relative;
  width:168px; height:168px;
  margin-top:-58px;
  padding:5px;
  border-radius:50%;
  background:conic-gradient(from var(--a), hsl(var(--h) 62% 24%), hsl(var(--h) 66% 40%), hsl(var(--h) 60% 28%), hsl(var(--h) 68% 44%), hsl(var(--h) 62% 24%));
  box-shadow:0 16px 36px -22px hsl(var(--h) 55% 38% / .32), 0 0 0 7px var(--bg);
  animation:spin 9s linear infinite;
  flex:none;
}
.ch-av-in{
  display:grid; place-items:center;
  width:100%; height:100%;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,hsl(var(--h) 60% 22%),#16161a);
  border:4px solid var(--bg);
}
.ch-av-in img{ width:100%; height:100%; object-fit:cover; display:block; }
.ch-av-in b{ font-size:68px; font-weight:700; color:hsl(var(--h) 90% 78%); line-height:1; }

.ch-info{ min-width:0; padding-top:16px; }
.ch-title-row{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.ch-name{
  margin:0;
  font-size:clamp(26px,3.4vw,40px);
  font-weight:700; line-height:1.35;
  letter-spacing:0;
  overflow-wrap:anywhere;
}
.ch-live{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 11px; border-radius:999px;
  font-size:12px; font-weight:700; color:#7dffb4;
  background:rgba(53,208,127,.12); box-shadow:inset 0 0 0 1px rgba(53,208,127,.35);
}
.ch-live i{ width:7px; height:7px; border-radius:50%; background:#35d07f; box-shadow:0 0 0 0 rgba(53,208,127,.7); animation:pulse 1.8s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(53,208,127,0); } 100%{ box-shadow:0 0 0 0 rgba(53,208,127,0); } }

.ch-meta{ display:flex; flex-wrap:wrap; gap:4px 0; margin-top:4px; color:var(--muted); font-size:14px; }
.ch-meta span+span::before{ content:"•"; margin-inline:10px; opacity:.5; }
.ch-meta b{ color:var(--text); font-weight:700; }

.ch-desc{
  display:flex; align-items:baseline; gap:6px;
  margin:12px 0 0; max-width:760px;
  color:#d9d9d9; font-size:14px; line-height:1.9;
}
.ch-desc span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ch-more{ flex:none; border:0; background:none; color:var(--muted); font-weight:700; font-size:13.5px; padding:0; cursor:pointer; }
.ch-more:hover{ color:var(--text); }

.ch-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ch-link{
  display:inline-flex; align-items:center; gap:7px;
  height:32px; padding:0 13px; border-radius:999px; border:0;
  background:rgba(255,255,255,.07); color:#7cc0ff;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:background .2s, transform .2s var(--ease);
  max-width:100%;
}
.ch-link svg{ width:15px; height:15px; flex:none; }
.ch-link span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-link:hover{ background:rgba(255,255,255,.13); transform:translateY(-1px); }
.ch-link-more{ color:var(--muted); }

.ch-acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.ch-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:40px; padding:0 20px; border:0; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer;
  transition:transform .18s var(--ease), background .2s, box-shadow .25s;
}
.ch-btn svg{ width:19px; height:19px; flex:none; }
.ch-btn:active{ transform:scale(.96); }
.ch-btn.light{ background:#f1f1f1; color:#0f0f0f; }
.ch-btn.light:hover{ background:#fff; box-shadow:0 10px 28px -10px rgba(255,255,255,.5); transform:translateY(-1px); }
.ch-btn.dark{ background:var(--surface-2); color:var(--text); }
.ch-btn.dark:hover{ background:var(--surface-3); }

/* ─────────────── تب‌ها ─────────────── */
.ch-tabs{
  position:sticky; top:calc(var(--hdr) - 1px); z-index:895;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ch-tabs-in{ max-width:1320px; display:flex; align-items:center; gap:14px; height:52px; }
.ch-tablist{ position:relative; display:flex; align-items:stretch; height:100%; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; }
.ch-tablist::-webkit-scrollbar{ display:none; }
.ch-tablist a{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:0 20px; white-space:nowrap;
  color:var(--muted); font-size:14.5px; font-weight:700;
  transition:color .2s;
}
.ch-tablist a:hover{ color:var(--text); }
.ch-tablist a.on{ color:var(--text); }
.ch-tablist a em{ font-style:normal; font-size:11.5px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--muted); }
.ch-tablist a .soon{ font-size:10.5px; padding:2px 8px; border-radius:999px; color:#ffb35a; background:rgba(255,179,90,.12); box-shadow:inset 0 0 0 1px rgba(255,179,90,.3); }
.ch-ind{
  position:absolute; bottom:0; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#ff2a2a,#ff7a3d);
  box-shadow:0 0 14px rgba(255,42,42,.7);
  transition:transform .35s var(--ease), width .35s var(--ease);
  left:0; right:auto; width:0;
}

/* هویت کوچک: وقتی هدر اصلی از دید خارج شد */
.ch-mini{
  display:flex; align-items:center; gap:10px; flex:none;
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap; padding-inline:0;
  transform:translateY(8px); pointer-events:none;
  transition:max-width .4s var(--ease), opacity .3s, transform .35s var(--ease);
}
.chp.is-stuck .ch-mini{ padding-inline:4px; max-width:240px; opacity:1; transform:none; pointer-events:auto; margin-inline-end:6px; }
.ch-mini-av{ width:32px; height:32px; border-radius:50%; overflow:hidden; display:grid; place-items:center; flex:none; background:linear-gradient(135deg,hsl(var(--h) 60% 24%),#16161a); }
.ch-mini-av img{ width:100%; height:100%; object-fit:cover; }
.ch-mini-av b{ font-size:14px; color:hsl(var(--h) 90% 78%); }
.ch-mini-n{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; max-width:170px; }

/* جستجوی درون کانال */
.ch-tsearch{ display:flex; align-items:center; flex:none; height:38px; border-radius:999px; transition:background .2s, width .35s var(--ease), box-shadow .2s; width:38px; overflow:hidden; }
.ch-tsbtn,.ch-tsx{ flex:none; width:38px; height:38px; border:0; background:none; color:var(--text); display:grid; place-items:center; cursor:pointer; border-radius:50%; }
.ch-tsbtn:hover,.ch-tsx:hover{ background:rgba(255,255,255,.1); }
.ch-tsbtn svg,.ch-tsx svg{ width:21px; height:21px; }
.ch-tsearch input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:var(--text); font-family:inherit; font-size:14px; padding:0 6px; text-align:right; opacity:0; }
.ch-tsx{ display:none; }
.ch-tsearch.open{ width:min(340px,58vw); background:#121212; box-shadow:inset 0 0 0 1px #303030; }
.ch-tsearch.open:focus-within{ box-shadow:inset 0 0 0 1px rgba(255,64,64,.7), 0 0 0 3px rgba(255,32,32,.12); }
.ch-tsearch.open input{ opacity:1; }
.ch-tsearch.open .ch-tsx{ display:grid; }

/* ─────────────── پنل‌ها ─────────────── */
.ch-panes{ padding-top:26px; padding-bottom:30px; min-height:55vh; }
.ch-pane{ animation:chIn .45s var(--ease) both; }
.ch-pane[hidden]{ display:none; }

.ch-empty{ text-align:center; color:var(--muted); padding:80px 16px; }
.ch-empty svg{ width:56px; height:56px; opacity:.4; margin-bottom:10px; }
.ch-empty h3{ margin:0 0 6px; color:var(--text); font-size:18px; }

/* ─────────────── تیزر (محبوب‌ترین ویدیو) ─────────────── */
.tz{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  gap:34px; align-items:center;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  overflow:hidden; isolation:isolate;
  margin-bottom:30px;
}
.tz-amb{
  position:absolute; inset:-40% -10% -40% -10%; width:120%; height:180%; object-fit:cover;
  z-index:-1; opacity:.2; filter:blur(70px) saturate(1.8); pointer-events:none;
}
.tz-info{ min-width:0; padding-inline:6px; }
.tz-badge{
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 13px; border-radius:999px;
  background:linear-gradient(135deg,rgba(255,42,42,.25),rgba(255,122,61,.18));
  box-shadow:inset 0 0 0 1px rgba(255,90,60,.45);
  color:#ffb09a; font-size:12.5px; font-weight:700;
}
.tz-badge svg{ width:15px; height:15px; color:#ff7a3d; }
.tz-title{ margin:14px 0 0; font-size:clamp(19px,2.2vw,26px); font-weight:700; line-height:1.7; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.tz-title a:hover{ color:#fff; text-shadow:0 0 24px rgba(255,255,255,.35); }
.tz-meta{ display:flex; flex-wrap:wrap; margin-top:8px; color:var(--muted); font-size:13.5px; }
.tz-meta span+span::before{ content:"•"; margin-inline:9px; opacity:.5; }
.tz-meta b{ color:var(--text); }
.tz-q{ direction:ltr; unicode-bidi:isolate; font-weight:700; }
.tz-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tz-tags span{ font-size:12.5px; color:#8ab4ff; background:rgba(138,180,255,.1); padding:3px 11px; border-radius:999px; }
.tz-acts{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.tz-sub{ font-size:12.5px; font-weight:700; color:#fff; background:rgba(255,32,32,.9); padding:6px 12px; border-radius:8px; }
.tz-media{ min-width:0; }
.tz-media .vcard-thumb{ border-radius:18px; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -24px rgba(0,0,0,.9); }
.tz-media .vcard-thumb::before{ display:none; }
.tz-media .pi{ position:absolute; z-index:3; top:50%; left:50%; width:16%; min-width:46px; max-width:72px; aspect-ratio:1; translate:-50% -50%; border-radius:50%; -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4); box-shadow:0 12px 34px -6px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14); }
.tz-media .vcard-thumb.is-previewing .pi{ opacity:0 !important; }

/* ─────────────── موضوع‌ها ─────────────── */
.topics{ display:flex; align-items:center; gap:14px; margin:0 0 26px; }
.topics-l{ flex:none; font-weight:700; color:var(--muted); font-size:13px; }
.topics-c,.vt-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.topic{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px; border:0; border-radius:999px;
  background:var(--surface-2); color:#cfd8ff; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  transition:background .2s, color .2s, transform .2s var(--ease);
}
.topic em{ font-style:normal; font-size:11px; color:var(--muted); background:rgba(255,255,255,.08); padding:0 7px; border-radius:999px; line-height:18px; }
.topic:hover{ background:var(--surface-3); transform:translateY(-1px); }
.topic.on{ background:var(--text); color:#0f0f0f; }
.topic.on em{ color:#333; background:rgba(0,0,0,.1); }

/* ─────────────── قفسه‌ها ─────────────── */
.shelf{ margin:0 0 34px; }
.shelf-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.shelf-h h2{ display:flex; align-items:center; gap:9px; margin:0; font-size:19px; font-weight:700; }
.shelf-h h2 svg{ width:19px; height:19px; color:#ff5a3d; }
.shelf-all{ border:0; background:none; font-family:inherit; font-weight:700; font-size:13px; color:#8ab4ff; padding:6px 12px; border-radius:999px; cursor:pointer; transition:background .2s; }
.shelf-all:hover{ background:rgba(138,180,255,.12); }
.shelf-wrap{ position:relative; }
.shelf-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  padding:6px 2px 10px; margin:-6px -2px -10px;
}
.shelf-track::-webkit-scrollbar{ display:none; }
.shelf-track .vcard{ flex:0 0 clamp(250px,23vw,320px); scroll-snap-align:start; }
.sh-arrow{
  position:absolute; top:calc(50% - 40px); z-index:4; width:44px; height:44px; border-radius:50%;
  border:0; display:none; place-items:center; cursor:pointer; color:var(--text);
  background:rgba(28,28,28,.92); box-shadow:0 8px 24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .2s var(--ease), background .2s;
}
.sh-arrow svg{ width:22px; height:22px; }
.sh-arrow:hover{ background:#3a3a3a; transform:scale(1.07); }
.sh-start{ right:-14px; }
.sh-end{ left:-14px; }
.sh-end svg{ transform:scaleX(-1); }
.shelf-wrap.can-start .sh-start,.shelf-wrap.can-end .sh-end{ display:grid; }
@media (hover:none){ .sh-arrow{ display:none !important; } }
/* قفسه‌ی کانال‌ها */
.shelf-ch .shelf-track{ gap:14px; }
.och{
  flex:0 0 150px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  padding:18px 10px 16px; border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, --h .45s ease;
}
.och:hover{ transform:translateY(-4px); background:var(--surface-2); box-shadow:inset 0 0 0 1px hsl(var(--h) 80% 55% / .6), 0 16px 30px -20px hsl(var(--h) 60% 40% / .3); }
.och-av{ width:78px; height:78px; border-radius:50%; overflow:hidden; display:grid; place-items:center; margin-bottom:8px; background:linear-gradient(135deg,hsl(var(--h) 60% 24%),#16161a); box-shadow:0 0 0 3px var(--bg), 0 0 0 5px hsl(var(--h) 85% 58% / .85); }
.och-av img{ width:100%; height:100%; object-fit:cover; }
.och-av b{ font-size:30px; color:hsl(var(--h) 90% 78%); }
.och-n{ font-weight:700; font-size:14px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.och-c{ font-size:12px; color:var(--muted); }

/* ─────────────── تب ویدیوها ─────────────── */
.vt-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.vt-sort{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; }
.vt-sort::-webkit-scrollbar{ display:none; }
.vt-state{ display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.vt-state button{ border:0; background:rgba(255,32,32,.14); color:#ff8a80; font-family:inherit; font-weight:700; font-size:12.5px; padding:5px 12px; border-radius:999px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,64,64,.4); }
.vt-tags{ margin-bottom:22px; }
.ch-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 16px; padding:6px 0 20px; transition:opacity .25s;
}
.ch-grid.is-loading{ opacity:.45; pointer-events:none; }
.ch-grid.fade{ animation:gridIn .45s var(--ease); }
.ch-grid .yt-empty{ grid-column:1/-1; }
.vt-more{ display:flex; justify-content:center; padding:6px 0 16px; }
.vt-more .ch-btn{ min-width:200px; }

/* ─────────────── ویدیوهای کوتاه (به‌زودی) ─────────────── */
.sh-soon{ display:flex; flex-direction:column; align-items:center; gap:34px; padding:26px 0 40px; text-align:center; }
.sh-stage{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:16px; height:min(380px,64vw); width:100%; max-width:760px; }
.ph{
  position:relative; flex:0 0 clamp(70px,15vw,150px); aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,hsl(var(--h) 55% 22%),#17171c 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 24px 40px -22px rgba(0,0,0,.9);
  animation:floaty 6s ease-in-out infinite;
}
.ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%); background-size:220% 100%; animation:shimmer 2.4s linear infinite; }
.ph i{ position:absolute; inset-inline:10px; bottom:34px; height:9px; border-radius:6px; background:rgba(255,255,255,.22); }
.ph u{ position:absolute; inset-inline:10px; bottom:18px; height:8px; width:62%; border-radius:6px; background:rgba(255,255,255,.12); text-decoration:none; }
.ph u.s{ display:none; }
.p1{ transform:translateY(-16px) rotate(-7deg); animation-delay:-1s; opacity:.55; }
.p2{ transform:translateY(-6px) rotate(-3.5deg); animation-delay:-2s; opacity:.8; }
.p3{ flex-basis:clamp(92px,19vw,190px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 36px 56px -28px hsl(var(--h) 60% 38% / .35); animation-delay:0s; z-index:2; }
.p4{ transform:translateY(-6px) rotate(3.5deg); animation-delay:-3s; opacity:.8; }
.p5{ transform:translateY(-16px) rotate(7deg); animation-delay:-4s; opacity:.55; }
.ph-play{ position:absolute; top:50%; left:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:grid; place-items:center; background:rgba(255,32,32,.9); box-shadow:0 0 0 10px rgba(255,32,32,.2); z-index:3; }
.ph-play svg{ width:26px; height:26px; margin-inline-start:-2px; }
@keyframes floaty{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
.sh-pill{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 14px; border-radius:999px; color:#ffb35a; background:rgba(255,179,90,.12); box-shadow:inset 0 0 0 1px rgba(255,179,90,.35); font-size:13px; font-weight:700; }
.sh-pill svg{ width:14px; height:14px; }
.sh-copy h2{ margin:14px 0 8px; font-size:clamp(22px,3vw,30px); }
.sh-copy p{ margin:0 auto; max-width:480px; color:var(--muted); line-height:2; }
.sh-copy p b{ color:var(--text); }

/* ─────────────── درباره ─────────────── */
.ab{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:34px; align-items:start; }
.ab-h{ margin:0 0 14px; font-size:22px; }
.ab-h2{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:30px 0 12px; font-size:16px; }
.ab-h2 small{ font-size:12px; font-weight:400; color:var(--muted); }
.ab-desc{ white-space:pre-wrap; overflow-wrap:anywhere; line-height:2.1; color:#e4e4e4; font-size:14.5px; }
.ab-desc a{ color:#7cc0ff; }
.ab-desc a:hover{ text-decoration:underline; }
.ab-none{ color:var(--muted); }
.ab-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.ab-link{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:background .2s, transform .2s var(--ease), box-shadow .2s; min-width:0;
}
.ab-link:hover{ background:var(--surface-2); transform:translateY(-2px); box-shadow:inset 0 0 0 1px hsl(var(--h) 80% 55% / .55); }
.ab-link-ic{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:16px; direction:ltr; color:hsl(var(--h) 90% 80%); background:var(--ch-soft); }
.ab-link-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ab-link-t b{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ab-link-t small{ color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.ab-link>svg{ width:17px; height:17px; flex:none; color:var(--muted); }
.ab-side{ display:grid; gap:16px; position:sticky; top:calc(var(--hdr) + 66px); }
.ab-card{ padding:20px; border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.ab-stats{ margin:0; display:grid; }
.ab-stats>div{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed rgba(255,255,255,.09); font-size:14px; }
.ab-stats>div:last-child{ border-bottom:0; padding-bottom:0; }
.ab-stats dt{ color:var(--muted); }
.ab-stats dd{ margin:0; font-weight:700; }
.ab-share{ width:100%; height:46px; }

/* نبض انتشار */
.pulse{ display:flex; align-items:flex-end; gap:6px; height:92px; padding-top:6px; }
.pb{ position:relative; flex:1; height:100%; display:flex; align-items:flex-end; cursor:default; }
.pb i{ display:block; width:100%; height:max(6%,calc(var(--v) * 100%)); border-radius:6px 6px 3px 3px; background:linear-gradient(0deg,#c4161c,#ff5a3d); transition:filter .2s, transform .2s; transform-origin:bottom; animation:grow .7s var(--ease) both; }
.pb.z i{ background:rgba(255,255,255,.1); }
.pb:hover i{ filter:brightness(1.25); transform:scaleY(1.04); }
.pb::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:4px 9px; border-radius:7px; background:#f1f1f1; color:#0f0f0f; font-size:11.5px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .15s; z-index:5;
}
.pb:hover::after{ opacity:1; }
@keyframes grow{ from{ transform:scaleY(.05); } }
.pulse-ax{ display:flex; justify-content:space-between; margin-top:8px; font-size:11.5px; color:var(--muted); }

/* ─────────────── واکنش‌گرا ─────────────── */
@media (max-width:1200px){
  .ch-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:980px){
  .tz{ grid-template-columns:1fr; gap:20px; padding:16px; }
  .tz-media{ order:-1; }
  .ab{ grid-template-columns:1fr; gap:10px; }
  .ab-side{ position:static; }
}
@media (max-width:860px){
  .ch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .ch-banner{ aspect-ratio:16/5; min-height:96px; border-radius:16px; margin-top:8px; }
  .ch-id{ grid-template-columns:auto minmax(0,1fr); gap:14px; padding:0 2px 14px; }
  .ch-av{ width:92px; height:92px; margin-top:-34px; padding:4px; box-shadow:0 10px 24px -16px hsl(var(--h) 55% 38% / .32), 0 0 0 5px var(--bg); }
  .ch-av-in{ border-width:3px; }
  .ch-av-in b{ font-size:38px; }
  .ch-info{ padding-top:10px; display:contents; }
  .ch-title-row,.ch-meta{ grid-column:2; }
  .ch-title-row{ align-self:end; }
  .ch-desc,.ch-links,.ch-acts{ grid-column:1/-1; }
  .ch-acts .ch-btn{ flex:1; }
  .ch-desc{ margin-top:6px; }
  .ch-tabs-in{ gap:6px; height:48px; }
  .ch-tablist a{ padding:0 14px; font-size:14px; }
  .ch-tsearch.open{ position:absolute; inset-inline:8px; top:5px; width:auto; z-index:5; background:#121212; }
  .chp.is-stuck .ch-mini{ display:none; }
  .shelf-track .vcard{ flex-basis:76vw; }
  .topics{ align-items:flex-start; flex-direction:column; gap:8px; }
  .sh-start{ right:-6px; } .sh-end{ left:-6px; }
}
@media (max-width:560px){
  .ch-grid{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .ab-links{ grid-template-columns:1fr; }
}

.ch-handle{direction:ltr;unicode-bidi:isolate;font-weight:600;color:hsl(var(--h) 70% 72%);letter-spacing:.2px}

/* ستون‌های گرید بر اساس عرض واقعی (پویا با ساید بار) */
@container cw (max-width:539px){ .ch-grid{ grid-template-columns:minmax(0,1fr); gap:22px; } }
@container cw (min-width:540px) and (max-width:819px){ .ch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container cw (min-width:820px) and (max-width:1699px){ .ch-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container cw (min-width:1700px) and (max-width:2399px){ .ch-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container cw (min-width:2400px){ .ch-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }