/* ═══════════════════════════════════════════════════════════════════════════
   main.css — تنها شیت این قالب.

   قالبی مستقل است: پوستهٔ کاغذی (سایهٔ سختِ افست، زیرخطِ مدادی، کجیِ کاور،
   زمینهٔ کِرِم) این‌جا نیست. لوگو همان لوگوی واقعی سایت است و آیکون‌ها از
   Lucide می‌آیند — هیچ چیزی دست‌نویس نیست.

   ساختار و اعداد از docs/FRONT-PATTERN.md می‌آیند و یک‌بار این‌جا نوشته
   می‌شوند. هر صفحه فقط محتوا دارد.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#ffffff;
  --surface:#f4f4f6;
  --ink:#1a1a1d;
  --muted:#6f7285;
  --line:rgba(0,0,0,.09);
  --accent:#e7c873;
  --on-accent:#1a1a1d;
  --dark:#141418;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --live:#e5484d;

  --gut:12px;
  --read:680px;   /* ستونِ خواندن — همان عرضی که landing.css داشت */
  --gap:12px; --r:12px;
  --top-h:56px; --nav-h:56px; --bar-h:62px; --side-w:400px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Vazirmatn,system-ui,sans-serif; font-size:16px;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + var(--bar-h) + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none}
img{display:block}
h1,h2,h3,h4,h5{margin:0}

/* آیکون‌ها: پیش‌فرضِ Lucide، یک‌جا، برای همه */
.lu{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lu.lu-fill{fill:currentColor;stroke:none}

/* ═══ نوار بالا ═════════════════════════════════════════════════════════ */
.topbar{
  position:sticky; top:0; z-index:40; height:var(--top-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gut); background:var(--bg); border-bottom:1px solid var(--line);
}
.brand img{height:30px;width:auto}
.tbicons{display:flex;align-items:center;gap:2px}
.ic{width:40px;height:40px;display:grid;place-items:center;border-radius:10px}
.ic:active{background:var(--surface)}

/* ═══ ریل چیپ ═══════════════════════════════════════════════════════════ */
.chips{
  position:sticky; top:var(--top-h); z-index:39;
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; height:36px; padding:12px 12px 8px;
  font-size:14.4px; font-weight:400; line-height:16.56px;
  color:var(--muted); white-space:nowrap; position:relative;
}
.chip.on{color:var(--ink);font-weight:700}
.chip.on::after{
  content:""; position:absolute; inset-inline:10px; bottom:0; height:2px;
  background:var(--ink); border-radius:2px 2px 0 0;
}
.chip .n{
  font-size:10px;color:var(--on-accent);background:var(--accent);
  border-radius:4px;padding:0 4px;margin-inline-start:4px;vertical-align:2px
}

.wrap{padding:0 var(--gut)}

/* ═══ تیتر بخش ══════════════════════════════════════════════════════════ */
.sec{margin-top:24px}
.sechead{display:flex;align-items:center;justify-content:space-between;margin:0 var(--gut) 12px}
.sechead h4{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.sechead .all{
  display:inline-flex;align-items:center;gap:3px;
  font-size:12px;font-weight:500;color:var(--muted)
}
.sechead .all .lu{width:14px;height:14px}

/* ═══ ریل ═══════════════════════════════════════════════════════════════ */
.rail{
  display:flex; gap:var(--gap); overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:none;
  padding-inline:var(--gut); scroll-padding-inline:var(--gut);
}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 42vw; max-width:190px; scroll-snap-align:start}
.rail.wide > *{flex:0 0 78vw; max-width:340px}

/* ═══ کارت ══════════════════════════════════════════════════════════════ */
.thumb{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.thumb img{width:100%;height:100%;object-fit:cover}
.badge{
  position:absolute;left:12px;bottom:12px;
  background:rgba(0,0,0,.75);color:#fff;
  font-size:10px;font-weight:500;line-height:16px;
  padding:1px 4px;border-radius:4px;display:inline-flex;align-items:center;gap:3px
}
.badge.live{background:var(--live)}
.badge .bdot{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}

.card .t{display:block;font-size:12.5px;font-weight:600;line-height:19px;margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .a{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.sq .thumb{aspect-ratio:1/1}
.card.wide .thumb{aspect-ratio:16/9}
.card.logo .thumb{aspect-ratio:16/9;background:var(--dark);display:grid;place-items:center}
.card.logo .thumb img{width:auto;height:auto;max-width:62%;max-height:58%;object-fit:contain}

.post .t{font-size:14px;font-weight:500;line-height:24px;margin-top:8px;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .trow{display:flex;align-items:flex-start;gap:8px}
.post .by{display:flex;align-items:center;gap:6px;margin-top:6px}
.post .by .av{width:24px;height:24px;flex:0 0 24px;border-radius:50%;object-fit:cover}
.post .by .nm{font-size:11px;font-weight:500;color:var(--muted)}
.post .meta{font-size:11px;font-weight:500;color:var(--muted);margin-top:4px}
.post .kebab{margin-inline-start:auto;color:var(--muted)}
.post .kebab .lu{width:18px;height:18px}

/* ═══ بنر رادیو (صفحهٔ اول) ═════════════════════════════════════════════ */
.radio{
  margin-top:var(--gap);display:flex;align-items:center;gap:12px;
  background:var(--dark);color:#fff;border-radius:var(--r);padding:12px
}
.radio .cov{width:86px;height:86px;flex:0 0 86px;border-radius:9px;overflow:hidden;background:#2a2a2a}
.radio .cov img{width:100%;height:100%;object-fit:cover}
.radio .body{min-width:0;flex:1;display:block}
.radio .t{display:block;font-size:15px;font-weight:700;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .a{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.62);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .play{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center
}
.radio .play .lu{width:18px;height:18px;margin-inline-start:2px}
/* سرِ ستونِ کناری: کاور بزرگ بالا، متن زیرش — همان کاورِ نفس‌کشیدن */
.radio.big{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;position:relative}
.radio.big .cov{width:100%;height:auto;aspect-ratio:1/1;flex:none;border-radius:0}
.radio.big .body{padding:14px 14px 16px}
.radio.big .play{position:absolute;left:14px;top:calc(100% - 96px);box-shadow:0 4px 14px rgba(0,0,0,.35)}

.livelbl{display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.3px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto;
  animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ═══ کارت دعوت ═════════════════════════════════════════════════════════ */
.invite{
  margin-top:var(--gap);background:var(--surface);border-radius:var(--r);padding:16px;
  display:flex;align-items:flex-start;gap:12px
}
.invite .art{
  width:52px;height:52px;flex:0 0 52px;border-radius:12px;
  background:var(--ink);color:var(--accent);display:grid;place-items:center
}
.invite .art .lu{width:26px;height:26px}
.invite h2{font-size:20px;font-weight:700;line-height:1.35}
.invite p{margin:6px 0 0;font-size:12.5px;line-height:1.75;color:var(--muted)}
.invite .cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  background:var(--ink);color:#fff;border-radius:999px;
  padding:9px 16px;font-size:13px;font-weight:600
}
.invite .cta .lu{width:14px;height:14px}

/* ═══════════════════════════════════════════════════════════════════════
   صفحهٔ ترانه — چیدمانِ صفحهٔ ویدئوی الگو
   کاور نقشِ پخش‌کننده را دارد: تمام‌عرض، بدون حاشیه، با دکمهٔ پخش روی خودش.
   هیچ قرصِ شناوری در سفیدی نیست؛ اکشن‌ها ردیفِ سادهٔ آیکون+برچسب‌اند.
   ═══════════════════════════════════════════════════════════════════════ */
.player{position:relative;width:100%;aspect-ratio:1/1;background:var(--surface);overflow:hidden}
.player img{width:100%;height:100%;object-fit:cover}
.player::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none
}
.player .big{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:68px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.28)
}
.player .big .lu{width:26px;height:26px;margin-inline-start:3px}
.player .dur{
  position:absolute;left:12px;bottom:12px;z-index:2;
  background:rgba(0,0,0,.75);color:#fff;
  font-size:10px;font-weight:500;line-height:16px;padding:1px 4px;border-radius:4px
}

.info{padding:14px var(--gut) 0}
.info h1{font-size:20px;font-weight:700;line-height:1.4}
.info .fa{font-size:14px;font-weight:500;color:var(--muted);margin-top:2px}
.info .meta{font-size:12px;font-weight:500;color:var(--muted);margin-top:8px}
.info .meta a{color:var(--ink);font-weight:600}
.info .meta .sep{margin:0 5px}

/* ردیف خواننده — معادلِ ردیف کانالِ الگو. خط مو، نه کارت خاکستری. */
.owner{
  display:flex;align-items:center;gap:10px;
  margin-top:16px;padding:12px var(--gut);
  border-top:1px solid var(--line)
}
.owner img{width:40px;height:40px;flex:0 0 40px;border-radius:50%;object-fit:cover;background:var(--surface)}
.owner .nm{font-size:13.5px;font-weight:700}
.owner .sub{font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}
.owner .go{
  margin-inline-start:auto;background:var(--ink);color:#fff;border-radius:999px;
  padding:8px 14px;font-size:12px;font-weight:600;white-space:nowrap
}

/* نوار اکشن — سادهٔ آیکون+برچسب، می‌لغزد و نمی‌پیچد */
.actbar{
  display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.actbar::-webkit-scrollbar{display:none}
.actbar::before,.actbar::after{content:"";flex:0 0 calc(var(--gut) - 6px)}
.actbar a{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:13px 10px;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap
}
.actbar a .lu{width:19px;height:19px;stroke-width:1.9}
.actbar a.dl{color:var(--ink)}
.actbar a.dl .lu{stroke-width:2.2}

/* ═══ سرِ صفحهٔ خواننده ══════════════════════════════════════════════════ */
.ahead{display:flex;align-items:center;gap:16px;padding:22px var(--gut) 18px;
  border-bottom:1px solid var(--line)}
.ahead .por{width:96px;height:96px;flex:0 0 96px;border-radius:50%;object-fit:cover;
  background:var(--surface)}
.ahead .body{min-width:0}
.ahead h1{font-size:22px;font-weight:700;line-height:1.3}
.ahead .sub{font-size:12.5px;font-weight:500;color:var(--muted);margin-top:4px}
.acts-inline{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;
  border-radius:999px;border:1px solid var(--line);background:var(--bg);
  font-size:12.5px;font-weight:600;white-space:nowrap}
.pill .lu{width:15px;height:15px}
.pill.solid{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ═══ فهرست ترانه‌ها ═════════════════════════════════════════════════════ */
/* فهرست ترانه = واژگانِ دستگاه، پس چپ‌چین (بند L-03، تصمیم T-07):
   شماره و کاور چپ، کنترل‌ها راست. عنوان و خواننده با unicode-bidi:plaintext
   جهتشان را خط‌به‌خط از خودِ متن می‌گیرند، پس نام لاتین و فارسی هر دو درست
   می‌نشینند بی‌آنکه قاب عوض شود. */
.tracks{list-style:none;margin:8px 0 0;padding:0;direction:ltr}
.tracks li + li{border-top:1px solid var(--line)}
.tracks a{display:grid;grid-template-columns:26px 44px minmax(0,1fr) auto auto;
  align-items:center;column-gap:10px;padding:8px var(--gut);min-height:60px}
.tracks .n{font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.tracks .cv{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--surface)}
.tracks .tx{min-width:0;text-align:left}
.tracks .t{display:block;font-size:13.5px;font-weight:600;
  unicode-bidi:plaintext;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracks .a{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px;
  unicode-bidi:plaintext;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracks .d{font-size:11.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.tracks .k{color:var(--muted);display:grid;place-items:center;width:28px}
.tracks .k .lu{width:17px;height:17px}

/* ═══ کاشی‌های دسته‌بندی ═════════════════════════════════════════════════
   همان اعدادِ کارت: حاشیه 12، فاصله 12، گردی 12. فقط دو ستون به‌جای ریل،
   چون این‌ها مقصدند نه محتوا — چیزی نباید پشتِ لبه پنهان شود. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:4px var(--gut) 0}
.tile .thumb{aspect-ratio:16/9}
.tile .tx{display:block;margin-top:8px}
.tile .t{display:block;font-size:13px;font-weight:700}
.tile .m{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}

/* ═══ نوار جست‌وجو ═══════════════════════════════════════════════════════ */
.sbar{display:flex;align-items:center;gap:9px;margin:14px var(--gut) 0;
  padding:0 14px;height:46px;border-radius:999px;background:var(--surface)}
.sbar .lu{width:19px;height:19px;color:var(--muted)}
.sbar input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:13.5px;color:var(--ink)}
.sbar input::placeholder{color:var(--muted)}

/* ═══ سرِ صفحهٔ ساده ═════════════════════════════════════════════════════ */
.phead{padding:22px var(--gut) 16px;border-bottom:1px solid var(--line)}
.phead h1{font-size:22px;font-weight:700;line-height:1.3}
.phead .sub{font-size:12.5px;font-weight:500;color:var(--muted);margin-top:5px}

/* ═══ متنِ بلند ══════════════════════════════════════════════════════════
   عرضِ خطِ خواندنی، حتی وقتی ستون پهن است. متنِ حقوقی 1000 پیکسلی
   خوانده نمی‌شود. */
.prose{padding:18px var(--gut) 0;max-width:68ch;font-size:14px;line-height:2}
.prose h2{font-size:16px;font-weight:700;margin:26px 0 8px}
.prose p{margin:0 0 14px;color:#33343a}
.prose ul{margin:0 0 14px;padding-inline-start:20px;color:#33343a}
.prose li{margin-bottom:6px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:12.5px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:start;vertical-align:top}
.prose th{background:var(--surface);font-weight:700}
.prose .upd{font-size:12px;color:var(--muted)}

/* ═══ برچسب‌ها ═══════════════════════════════════════════════════════════ */
.taglist{display:flex;flex-wrap:wrap;gap:8px;padding:14px var(--gut) 0}
.tag{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-size:13px;font-weight:600}
.tag .n{font-size:11px;font-weight:500;color:var(--muted)}

/* ═══ صفحهٔ فال — بلوکِ مخصوصِ خودش ══════════════════════════════════════
   الگو معادلی برای این ندارد. نزدیک‌ترین چیزی که داریم کارتِ دعوتِ
   صفحهٔ اول است، پس از همان قرض گرفته شده. */
.omen{margin:var(--gap) var(--gut) 0;background:var(--dark);color:#fff;
  border-radius:var(--r);padding:26px 20px;text-align:center}
.omen h2{font-size:20px;font-weight:700;line-height:1.5}
.omen p{margin:8px 0 0;font-size:13px;line-height:1.9;color:rgba(255,255,255,.62)}
.omen .go{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  background:var(--accent);color:var(--on-accent);border-radius:999px;
  padding:12px 22px;font-size:14px;font-weight:700}
.omen .go .lu{width:16px;height:16px}

/* ═══ صفحهٔ خالی / پیدا نشد ══════════════════════════════════════════════ */
.empty{padding:60px var(--gut);text-align:center}
.empty .big{font-size:44px;font-weight:700;letter-spacing:-1px}
.empty h2{font-size:17px;font-weight:700;margin-top:10px}
.empty p{margin:8px auto 0;max-width:42ch;font-size:13px;line-height:1.9;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════
   پوستهٔ واقعی سایت

   مارک‌آپِ پوسته جابه‌جا نشده — JS به شناسه‌هایش چنگ زده. این بخش فقط
   همان عناصر را می‌پوشاند. `.v3` روی body است، پس هیچ‌کدام از اینها روی
   صفحه‌های مهاجرت‌نکرده اثر ندارد.
   ═══════════════════════════════════════════════════════════════════════ */
/* لهجه طلاییِ برند است و بس (P-11). صفحه‌های ایستگاه هر کدام یک
   <style>:root{--accent:…}</style> از رنگِ کاورشان بیرون می‌دهند و چون
   درونِ سند و بعد از شیت می‌آید، ترتیب حریفش نمی‌شود — ولی این انتخابگر
   روی همان <html> است و از :root مشخص‌تر، پس می‌برد. سنجیده شد که چرا
   لازم است: روی یک ایستگاه، مثلثِ پخشِ نوارِ پایین rgb(91,35,23) درآمد
   روی rgb(26,26,29)؛ دو سیاه روی هم. */
html[data-ir2-tpl="v3"]{--accent:#e7c873;--on-accent:#1a1a1d}
body.v3{background:var(--bg);color:var(--ink)}

/* ستونِ اسکرولِ پوسته خودش ۱۴ پیکسل پدینگِ کناری دارد، و هر ریل ۱۲ تای
   خودش را رویش می‌گذارد — گاترِ واقعی می‌شد ۲۶ به‌جای ۱۲، و همه‌چیز
   نسبت به موکاپ ۱۴ پیکسل تو می‌رفت. حاشیه مالِ قالب است، پس این‌جا صفر
   می‌شود و تنها گاترِ صفحه همان --gut می‌ماند. */
.v3 #appScroll{padding-inline:0}
/* این دو با margin منفیِ ۱۴ از پدینگِ همان ظرف بیرون می‌زدند. حالا که
   پدینگ صفر شده، جبرانشان بی‌جفت مانده و ۱۴ پیکسل سرریز می‌کرد. */
.v3 .magband,.v3 .magpost,
.v3 .nwband,.v3 .nwpg,.v3 .nwrband{margin-inline:0;padding-inline:0}

/* ─── نوشتهٔ بلند: /mag/<post>، /news/<item>، /tags، بایگانیِ خبر ─────────

   هر چهار صفحه یک ظرف دارند (.magpost > .magin)، پس یک نگاشت می‌گیرند.

   این یکی آرایشی نیست: landing.css کلِ نوشته را روی تختهٔ زغالی #2e2d2b با
   متنِ سفید می‌گذارد. روی صفحهٔ سفیدِ قالب، متن سفید روی سفید می‌شد. پس
   اول باید آن تخته برداشته شود، بعد رنگ‌ها برگردند به پالتِ P-11.

   تایپوگرافیِ خودِ متن (assets/mag.css، همان سبکی که قالبِ DLE بیرون
   می‌دهد) دست‌نخورده می‌ماند — آن شیت مالِ مقاله است نه مالِ پوسته. */
.v3 .magpost{
  margin:0;padding:0 0 24px;min-height:0;
  background:none;color:var(--ink)
}
.v3 .magpost .magin{
  max-width:var(--read);margin:0 auto;padding:16px var(--gut) 0;border-top:0
}
.v3 .magpost .magkick{
  margin:0;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0
}
.v3 .magpost .magkick a{color:inherit;text-decoration:none}
.v3 .magpost .magh1{
  margin:8px 0 6px;font-size:23px;font-weight:700;line-height:1.5;color:var(--ink)
}
.v3 .magpost .magmeta{
  margin:0 0 18px;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0
}
.v3 .magpost .magmeta a,
.v3 .tagpage .magmeta a{color:var(--muted)}
.v3 .magpost .magbody{font-size:15.5px;line-height:2;color:var(--ink)}
.v3 .magpost .magbody a{color:var(--ink);text-decoration:underline}
.v3 .magpost .magbody img{border-radius:var(--r)}
.v3 .magpost .magback{
  margin-top:26px;font-size:13px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:2px
}

/* ابرِ برچسب و فهرستش */
.v3 .tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.v3 .tagcloud .tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:12.5px;font-weight:600;text-decoration:none
}
.v3 .tagcloud .tag span{color:var(--muted);font-weight:500}
.v3 .taglist{display:grid;gap:2px;margin-top:14px}
.v3 .taglist .tagcard{
  display:flex;align-items:center;gap:11px;padding:10px 0;
  border-top:1px solid var(--line);text-decoration:none;color:inherit
}
.v3 .taglist .tagcard:first-child{border-top:0}
.v3 .taglist .tagim{
  flex:0 0 62px;width:62px;aspect-ratio:1;border-radius:var(--r);
  overflow:hidden;background:var(--surface)
}
.v3 .taglist .tagim img{width:100%;height:100%;object-fit:cover}
.v3 .taglist .tagtx{min-width:0}
.v3 .taglist .tagkick{font-size:11px;font-weight:700;color:var(--muted)}
.v3 .taglist .tagtt{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:2px}
.v3 .taglist .tagdt{font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}

/* دیدگاه‌ها — ته همان ستونِ خواندن */
.v3 .magpost .cmsec{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.v3 .magpost .cmh{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--ink)}
.v3 .magpost .cmh .cmn{color:var(--muted);font-weight:500}
.v3 .magpost .cmform textarea,
.v3 .magpost .cmform input{
  width:100%;box-sizing:border-box;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;
  font:inherit;font-size:13.5px
}
.v3 .magpost .cmsend{
  background:var(--ink);color:#fff;border:0;border-radius:999px;
  padding:10px 22px;font:inherit;font-size:13px;font-weight:700;cursor:pointer
}
.v3 .magpost .cmgate{
  margin-top:14px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);text-align:center
}

/* بایگانیِ خبر: ظرفِ خودش را دارد (.nwpg) و news.css همان تختهٔ زغالی را
   جداگانه رویش می‌کشد، پس نگاشتِ .magpost به آن نمی‌رسید. */
.v3 .nwpg{margin:0;padding:0 0 24px;min-height:0;background:none;color:var(--ink)}
.v3 .nwin{max-width:var(--read);margin:0 auto;padding:16px var(--gut) 0;border-top:0}
.v3 .nwpg .magkick,
.v3 .nwpg .magkick a{color:var(--muted)}
.v3 .nwpg .magh1{margin:8px 0 6px;font-size:23px;font-weight:700;color:var(--ink)}
.v3 .nwpg .magmeta{color:var(--muted);letter-spacing:0}
.v3 .nwempty{color:var(--muted)}
.v3 .nwdays{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:var(--gap);margin-top:16px
}
.v3 .nwday{
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:12px 14px;color:var(--ink);text-decoration:none
}
.v3 .nwday:hover{background:var(--surface);border-color:var(--line)}
.v3 .nwday-d{font-size:14px;font-weight:700;color:var(--ink)}
.v3 .nwday-n{font-size:12px;font-weight:600;color:var(--muted)}
.v3 .nwarchnav{color:var(--muted);font-size:13px}
.v3 .nwarchnav a{color:var(--ink);text-decoration:underline}
.v3 .nwpager{margin-top:24px}
.v3 .nwpg-n{color:var(--muted)}

/* دروازهٔ خبر و بایگانی‌اش */
.v3 .nwgate{
  margin:18px 0;padding:18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);text-align:center
}
.v3 .nwgate .nwgh{font-size:14px;font-weight:700;color:var(--ink)}
.v3 .nwgb{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.v3 .nwbtn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 17px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:inherit;font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer
}
.v3 .nwbtn.go{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.v3 .nwlede{font-size:15px;line-height:1.95;color:var(--ink);margin:0 0 14px}
.v3 .nwgimg img{width:100%;height:auto;border-radius:var(--r);display:block;margin:0 0 14px}
.v3 .nwsrc{font-size:12px;color:var(--muted);margin-top:16px}
.v3 .nwsrc a{color:var(--muted)}

.v3 .app-top.v3top{
  background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:none;height:var(--top-h)
}
.v3 .app-top.v3top .tb-brand img{height:30px;width:auto}
.v3 .app-top.v3top .tb-browse{color:var(--ink);font-weight:600}
.v3 .app-top.v3top .tb-burger,
.v3 .app-top.v3top .tb-searchbtn{color:var(--ink)}
.v3 .app-top.v3top .tb-lang{color:var(--muted);font-weight:600}
.v3 .app-top.v3top .tb-search input{color:var(--ink)}
.v3 .app-top.v3top .tb-search input::placeholder{color:var(--muted)}

/* ریل چیپ زیر نوار بالا می‌چسبد. ارتفاعِ نوار از خودِ عنصر خوانده نمی‌شود
   چون پوستهٔ قدیمی ممکن است عوضش کند؛ همان --top-h قالب ملاک است. */
.v3 .chips.v3chips{
  position:sticky;top:var(--top-h);z-index:39;
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  background:var(--bg);border-bottom:1px solid var(--line)
}
.v3 .chips.v3chips::-webkit-scrollbar{display:none}

/* نوار پایین — بازگشته، با شکلِ قالب. دکمهٔ میانی عملِ امضاست نه مقصد. */
.v3 .app-tabs.bottomnav{
  display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.v3 .app-tabs.bottomnav .bn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:500;color:var(--muted);
  /* دکمهٔ میانی <button> است نه <a> — پوستهٔ پیش‌فرضِ دکمه باید صفر شود
     وگرنه در ردیفی از لینک‌ها قاب و فونتِ دیگری می‌گیرد. */
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer
}
.v3 .app-tabs.bottomnav .bn svg{width:21px;height:21px}
.v3 .app-tabs.bottomnav .bn.on,
.v3 .app-tabs.bottomnav .bn.active{color:var(--ink);font-weight:700}
.v3 .app-tabs.bottomnav .bn.mid{gap:0}
.v3 .app-tabs.bottomnav .bn.mid .knob{
  width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--accent);
  display:grid;place-items:center;margin-top:-8px;box-shadow:var(--shadow)
}
.v3 .app-tabs.bottomnav .bn.mid .knob svg{width:19px;height:19px}
.v3 .app-tabs.bottomnav .bn.mid span{margin-top:2px}
@media(min-width:768px){ .v3 .app-tabs.bottomnav{display:none} }

/* ═══════════════════════════════════════════════════════════════════════
   قلاب‌های تلویزیون، فیلم و مجله

   تلویزیون و فیلم همان واژگانِ صفحهٔ اول را دارند (.lsect / .lh / .strp)
   پس نگاشتِ آن‌جا پوششان می‌دهد و این‌جا فقط سرِ صفحه‌شان می‌ماند.
   مجله گریدِ خودش را دارد.
   ═══════════════════════════════════════════════════════════════════════ */
.v3 .fwrap{padding:0}
.v3 .fh1{margin:18px var(--gut) 0;font-size:22px;font-weight:700;line-height:1.3;color:var(--ink)}
.v3 .fkick{margin:5px var(--gut) 0;font-size:12.5px;font-weight:500;color:var(--muted);opacity:1}
/* وقتی درون .fhead/.fmeta نشسته‌اند، گاتر را ظرف می‌دهد
   و آن‌ها نباید دوباره بدهند — وگرنه تیتر روی ۲۴ می‌نشیند. */
.v3 .fhead .fh1,.v3 .fmeta .fh1,
.v3 .fhead .fkick,.v3 .fmeta .fkick,
.v3 .fshowtxt .fh1,.v3 .fshowtxt .fkick{margin-inline:0}
.v3 .tvmsg{margin:12px var(--gut);font-size:12.5px;color:var(--muted)}
.v3 .tvplayer{margin:0;border-radius:0;background:#000}

/* کارت و قابِ فیلم و سریال.

   film.css هنوز به زبانِ brutal نوشته است: سایهٔ افست 2px 2px 0، پرشِ
   translate(-1px,-1px) روی hover و گوشهٔ ۲ پیکسلی. P-13 آن زبان را
   بازنشسته کرد؛ قاب صاف است، گردی ۱۲، سایهٔ نرم، بدون پرش.

   مُهرِ شمارهٔ قسمت (.fepn) دست‌نخورده می‌ماند — با cqw نسبت به پوستر
   اندازه گرفته شده تا یک قاعده هم به کاشیِ ریل بخورد هم به گرید، و شکلش
   را خودِ او در ۲۰۲۶-۰۹-۱۲ نشاند. فقط سایه‌اش نرم می‌شود. */
.v3 .fpost{
  border:0;border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow);transition:none
}
.v3 .ftile:hover .fpost{transform:none;box-shadow:var(--shadow)}
.v3 .fnop{color:var(--muted)}
.v3 .ftt{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:8px}
.v3 .fmt{font-size:11px;font-weight:500;color:var(--muted)}
.v3 .fepn{background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 2px 6px -2px rgba(0,0,0,.35)}
.v3 .fepn-n{border-color:var(--ink)}
.v3 .fen{color:var(--muted);font-size:12.5px}
.v3 .fempty{color:var(--muted)}
.v3 .fcount{color:var(--muted);font-weight:500}
.v3 .fviews{color:var(--muted);font-size:11.5px}
.v3 .fmeta,.v3 .fhead{padding:0 var(--gut)}
.v3 .fgrid{padding:0 var(--gut)}
.v3 .fbody{
  padding:0 var(--gut);max-width:var(--read);margin-inline:auto;
  font-size:14.5px;line-height:1.95;color:var(--ink)
}
.v3 .fbody a{color:var(--ink)}

/* قرص‌ها و دکمه‌ها */
.v3 .fchips{padding:0 var(--gut);gap:7px;margin:12px 0 16px}
.v3 .fchip{
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
  color:var(--ink);padding:7px 13px;font-size:12.5px;font-weight:600
}
.v3 .fchip span{color:var(--muted)}
.v3 .fchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.v3 .fchip.on span{color:rgba(255,255,255,.7)}
.v3 .fbtn{
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
  color:var(--ink);padding:9px 16px;font-size:12.5px;font-weight:600;box-shadow:none
}
.v3 .fbtn:hover{transform:none;box-shadow:none;background:var(--surface)}
.v3 .fbtn.fplay{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.v3 .fepnav{padding:0 var(--gut);margin-top:14px}

/* سرِ سریال: پوستر چپ، بقیه مقابلش — همان تشریحِ سرِ مجموعه */
.v3 .fshow{gap:14px;padding:0 var(--gut);margin-bottom:20px;direction:ltr}
.v3 .fshowpost{
  flex:0 0 118px;border:0;border-radius:var(--r);
  background:var(--surface);box-shadow:var(--shadow);overflow:hidden
}
.v3 .fshowtxt{unicode-bidi:plaintext;text-align:start}

/* فهرست قسمت‌ها — واژگانِ دستگاه، پس چپ‌چین (L-03) */
.v3 .fseason{margin:16px var(--gut) 6px;font-size:13.5px;font-weight:700;color:var(--ink)}
.v3 .feplist{border-top:0;direction:ltr}
.v3 .feplist li a{
  padding:11px var(--gut);border-bottom:1px solid var(--line);color:var(--ink)
}
.v3 .feplist li a:hover{background:var(--surface)}
.v3 .feplist li.on a{background:var(--surface);color:var(--ink);font-weight:700}
.v3 .feplist li.on .fepdt{color:var(--muted)}
.v3 .fepno{font-size:13px;font-weight:600}
.v3 .fepdt{font-size:11.5px;color:var(--muted)}
.v3 .fplayer{border:0;border-radius:0;margin:0 0 14px;background:#000}

/* کانال‌ها نه ریل‌اند نه .strp — گریدِ خودشان را دارند (.tvgrid)، تمام‌عرض
   و بی‌گاتر، با کاشی‌هایی به نسبت 0.73. سه ریتمِ مختلف در یک سایت.
   همان کارتِ لوگوی قالب را می‌گیرند: قابِ 16:9، لوگو داخلش، نام زیرش.

   قاب روشن است نه تیره، و دلیلش اندازه‌گیری است نه سلیقه: هر ۲۲ لوگو سنجیده
   شد — هشت‌تا شفاف با مرکّبِ تیره، چهارتا شفاف با مرکّبِ روشن، چهارتا با
   پلاکِ خودشان. قابِ تیره اکثریت را ناپدید می‌کرد. لوگوی یک شبکه از اول
   برای زمینهٔ سفید کشیده شده؛ قاب همان را می‌دهد. خطِ مو لازم است چون
   صفحه هم سفید است (P-14). */
.v3 .tvgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  padding:0 var(--gut);margin:0
}
.v3 .tvtile{display:block;border:0;background:none;padding:0}
.v3 .tvtile .tvlogo{
  display:grid;place-items:center;aspect-ratio:16/9;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden
}
.v3 .tvtile .tvlogo img{
  width:auto;height:auto;max-width:62%;max-height:58%;object-fit:contain
}
.v3 .tvtile .ftt{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.v3 .tvtile .fmt{
  display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:1px
}

@media(min-width:760px){
  .v3 .tvgrid{grid-template-columns:repeat(5,1fr)}
}

/* مجله: گریدِ نوشته‌ها همان ریتمِ کاشی‌ها را می‌گیرد */
.v3 .magrid{
  display:grid;grid-template-columns:1fr;gap:18px;
  padding:0 var(--gut);margin:0
}
/* .magpg گاترِ خودش را از فرزندانش می‌گیرد، پس صفر می‌ماند.
   .nwin این‌جا نیست: قبلاً بود و چون این خط بعد از قاعدهٔ خودِ .nwin
   می‌آید، گاترش را پاک می‌کرد و تیترِ /news و /mag از ۰ تا ۳۹۰ می‌رفت.
   آن زمان گاتر از #appScroll می‌آمد؛ دیگر نمی‌آید. */
.v3 .magpg{padding-inline:0}
/* ردیفِ خبر با margin:-8px از قاب می‌زد بیرون — همان الگوی
   شکستنِ قاب که در .magband هم بود. ستون را ۸ پیکسل سرریز می‌کرد. */
.v3 .nwrow{margin-inline:0}
.v3 .magpager{margin:22px var(--gut) 0;display:flex;gap:10px;justify-content:center}
.v3 .nwarchnav{margin:14px var(--gut) 0;font-size:12.5px;font-weight:600;color:var(--muted)}
.v3 .nwempty{margin:24px var(--gut);color:var(--muted)}

@media(min-width:760px){
  .v3 .magrid{grid-template-columns:repeat(3,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   قلاب‌های .tlist — خواننده، آلبوم، لیست

   هر سه یک واژگان دارند: .tlist از .trow، و هر ردیف .th (بندانگشتی)،
   .tt (عنوان)، .ta (خواننده)، .rlike و .idx. این همان «واژگانِ دستگاه»
   بند L-03 است، پس چپ‌چین می‌نشیند با بندانگشتی سمت چپ — دقیقاً مثل
   فهرست ترانه‌ای که در موکاپ ساختیم. یک نگاشت، سه صفحه.
   ═══════════════════════════════════════════════════════════════════════ */
.v3 .tlist{direction:ltr;margin:8px 0 0;padding:0;list-style:none}
.v3 .tlist .trow{
  display:flex;align-items:center;gap:10px;
  padding:8px var(--gut);min-height:60px;
  border:0;border-top:1px solid var(--line);background:none;border-radius:0
}
.v3 .tlist .trow:first-child{border-top:0}
.v3 .tlist .idx{
  flex:0 0 22px;text-align:center;
  font-size:12px;font-weight:600;color:var(--muted)
}
.v3 .tlist .th{
  flex:0 0 44px;width:44px;height:44px;
  border-radius:6px;overflow:hidden;background:var(--surface)
}
.v3 .tlist .th img{width:100%;height:100%;object-fit:cover}
.v3 .tlist .tt{
  display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  unicode-bidi:plaintext;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.v3 .tlist .ta{
  display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px;
  unicode-bidi:plaintext;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.v3 .tlist .meta{font-size:11.5px;font-weight:500;color:var(--muted)}
.v3 .tlist .rlike,.v3 .tlist .rowlike,.v3 .tlist .kebab{
  color:var(--muted);background:none;border:0
}

/* سرِ مجموعه — آلبوم، لیست، رادیو، حال‌وهوا، برنامه.

   هر پنج صفحه یک واژگان دارند، پس یک نگاشت می‌گیرند نه پنج تا. شکلش همان
   شکلِ سرِ ترانه است: کاور چپ، بقیه مقابلش.

   گرید است نه فلکس، چون h1 و .mc خواهرِ .me هستند و هیچ ظرفی دورشان نیست؛
   با فلکس هرکدام یک آیتمِ جدا می‌شدند. گرید بدون دست‌زدن به مارک‌آپ
   جایشان می‌دهد: کاور ستون یک و کشیده، بقیه ستون دو.

   پس‌زمینهٔ تارِ کاور (.mherobg) ترفندِ پوستهٔ قبلی بود و با P-11/P-13
   نمی‌خواند — همان‌جا خاموش می‌ماند. */
.v3 .mspg{padding:0}
/* me.css ظرفِ /me را روی ۱۴ می‌گذاشت (و ۴۰ روی دسکتاپ)؛
   دو پیکسل با بقیهٔ سایت فرق داشت و همین بس است که خطِ
   سرِ صفحه در عبور از یک صفحه به صفحهٔ دیگر بپرد. */
.v3 .mepg{padding:16px var(--gut) 28px}
.v3 .mhero{
  display:grid;grid-template-columns:132px minmax(0,1fr);
  column-gap:14px;align-items:start;
  direction:ltr;padding:16px var(--gut) 0;margin:0;position:static;
  /* پوستهٔ قبلی این‌جا یک شیبِ ۲۵۰پیکسلی از رنگِ ایستگاه می‌کشید. قاب
     صاف است (P-13)، پس شیب می‌رود و ارتفاع از محتوا می‌آید. */
  background:none;min-height:0;border-radius:0;overflow:visible;color:var(--ink)
}
.v3 .mherobg{display:none}
/* .mhero::after یک شیبِ رویِ کاور بود. حالا که .mhero دیگر static است،
   آن شبه‌عنصرِ absolute به جای سرِ صفحه به خودِ پنجره می‌چسبد و
   ۳۹۰×۸۴۴ را خاکستری می‌کند — همان مهی که روی ردیف‌ها هم افتاده بود. */
.v3 .mhero::after{display:none}
.v3 .mhero .me{
  grid-area:1 / 1 / span 4 / span 1;
  width:132px;aspect-ratio:1;margin:0;border-radius:var(--r);
  background-size:cover;background-position:center;box-shadow:var(--shadow)
}
.v3 .mhero h1,
.v3 .mhero .mc{grid-column:2;unicode-bidi:plaintext;text-align:start;margin:0}
.v3 .mhero h1{font-size:20px;font-weight:700;line-height:1.4;color:var(--ink)}
.v3 .mhero .mc{font-size:13px;font-weight:500;color:var(--muted);margin-top:5px}

/* بافتِ رادیو/برنامه بالای سر می‌نشیند، نه شناور روی کاور */
.v3 .mspg > .radioctx{
  margin:12px var(--gut) 0;padding:0;background:none;border:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.v3 .mspg > .radioctx .hdlabel{font-size:12px;font-weight:700;color:var(--muted)}
.v3 .mspg > .radioctx .radioctx-acts{display:flex;gap:4px}
.v3 .mspg > .radioctx button{
  background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;display:flex
}
.v3 .mspg > .radioctx button svg{width:19px;height:19px}
/* بخش‌های صفحهٔ خواننده */
.v3 .asec{margin-top:24px}
.v3 .asec > h2,.v3 .thl{
  margin:0 var(--gut) 12px;font-size:14px;font-weight:700;color:var(--ink)
}

/* ═══════════════════════════════════════════════════════════════════════
   سندهای ساده — /contact، /privacy، /cookies

   این سه تا امروز اصلاً از پوسته رد نمی‌شدند: هرکدام <html> و <style> و
   ناوِ قدیمیِ خودش را داشت. کسی که از /mag می‌آمد، به چیزی می‌رسید که
   انگار سایتِ دیگری است — بی ریلِ چیپ، بی پخش‌کننده، بی راهِ برگشت.
   حالا از پوسته رد می‌شوند و فقط کلاسِ سندِ خودشان را نگه داشته‌اند.

   /privacy و /cookies انگلیسی‌اند و خودشان dir="ltr" می‌گویند: دستگاه
   فارسی است، سند انگلیسی (بند L-01).
   ═══════════════════════════════════════════════════════════════════════ */
.v3 .doc{
  max-width:var(--read);margin:0 auto;padding:20px var(--gut) 32px;color:var(--ink)
}
.v3 .doc h1{font-size:23px;font-weight:700;line-height:1.4;margin:0 0 6px;color:var(--ink)}
.v3 .doc .upd{color:var(--muted);font-size:12px;margin-bottom:26px}
.v3 .doc h2{
  font-size:15px;font-weight:700;color:var(--ink);margin:28px 0 8px
}
.v3 .doc p,
.v3 .doc li{color:var(--ink);font-size:14.5px;line-height:1.95}
.v3 .doc .lead{color:var(--ink)}
.v3 .doc ul{padding-inline-start:20px;margin:6px 0}
.v3 .doc li{margin-bottom:4px}
.v3 .doc strong{color:var(--ink);font-weight:700}
.v3 .doc a{color:var(--ink)}
.v3 .doc .tg{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:9px 17px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none
}
.v3 .doc .home{
  display:inline-block;margin-top:30px;color:var(--muted);
  font-size:13px;text-decoration:none
}

/* /contact — یک پیامِ کوتاه وسطِ صفحه */
.v3 .docpg{max-width:var(--read);margin:0 auto;padding:44px var(--gut);text-align:center}
.v3 .docpg .ce{
  display:inline-grid;place-items:center;width:56px;height:56px;
  border-radius:50%;background:var(--surface);color:var(--ink);margin-bottom:6px
}
.v3 .docpg .ce svg{width:26px;height:26px}
.v3 .docpg h1{font-size:22px;font-weight:700;margin:12px 0 10px;color:var(--ink)}
.v3 .docpg p{
  color:var(--muted);font-size:14px;line-height:1.95;max-width:480px;margin:0 auto
}
.v3 .docpg .soon{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:10px 20px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none
}
.v3 .docpg .soon svg{width:17px;height:17px}

/* ═══════════════════════════════════════════════════════════════════════
   قلاب‌های /shows — بایگانیِ برنامه‌ها

   چیپِ «رادیو» حالا این‌جا می‌رسد، پس درِ ورودیِ آن ستون است.

   تله‌ای که باید نامش نوشته شود: shows.css روی ظرفِ خودش توکن‌ها را از نو
   تعریف می‌کند — .spg{--line:#262630;--muted:rgba(255,255,255,.6)}. هر
   قاعده‌ای از ما که درونِ .spg با var(--line) نوشته شود همان سیاه را
   می‌گیرد، یعنی خطِ مو روی کاغذِ سفید تقریباً مشکی درمی‌آید. پس اول
   توکن‌ها برمی‌گردند سرِ جایشان، بعد بقیهٔ حرف‌ها.
   ═══════════════════════════════════════════════════════════════════════ */
.v3 .spg{
  --line:rgba(0,0,0,.09);--muted:#6f7285;--panel:#f4f4f6;--gold:#e7c873;
  padding:16px 0 28px;color:var(--ink)
}
.v3 .spg .pgtitle,
.v3 .spg .shhero,
.v3 .spg .backlink,
.v3 .spg .pgsub,
.v3 .spg .shgrid,
.v3 .spg .eplist,
.v3 .spg .ep-article,
.v3 .spg .empty{margin-inline:var(--gut)}
.v3 .spg .pgtitle{font-size:21px;font-weight:700;color:var(--ink)}
.v3 .spg .pgsub{font-size:12.5px;color:var(--muted);opacity:1}
.v3 .spg .backlink{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  opacity:1;border-radius:999px;font-size:12.5px;font-weight:600
}
.v3 .spg .backlink:hover{background:var(--surface)}

.v3 .spg .shcard{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden
}
.v3 .spg .shcard .scov{background-color:var(--surface)}
.v3 .spg .shcard .schip{background:var(--accent);color:var(--on-accent)}
.v3 .spg .shcard .stt{color:var(--ink)}
.v3 .spg .shcard .sd,
.v3 .spg .shcard .sh{color:var(--muted)}

/* سرِ برنامه: قابِ گرد می‌ماند (چهرهٔ مجری است، نه کاور)، سایه نرم می‌شود */
.v3 .spg .shhero .hpic{
  width:120px;height:120px;border:1px solid var(--line);
  background-color:var(--surface);box-shadow:var(--shadow)
}
.v3 .spg .shhero .hshow{color:var(--muted);font-size:14px}
.v3 .spg .shhero .hbody,
.v3 .spg .shhero .hd{color:var(--ink)}
.v3 .spg .shhero .hk{color:var(--muted)}

/* قسمت‌ها — واژگانِ دستگاه، پس چپ‌چین (L-03) */
.v3 .spg .eplist{direction:ltr}
.v3 .spg .eprow{
  background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:11px 0;color:var(--ink)
}
.v3 .spg .eprow:hover{background:var(--surface)}
.v3 .spg .eprow .ecov{
  width:56px;height:56px;border-radius:var(--r);background-color:var(--surface)
}
.v3 .spg .eprow .et{font-size:13.5px;font-weight:600;color:var(--ink)}
.v3 .spg .eprow .em,
.v3 .spg .eprow .es{font-size:11.5px;color:var(--muted)}

/* صفحهٔ قسمت */
.v3 .spg .ep-kicker{color:var(--muted);font-size:12px;font-weight:700}
.v3 .spg .ep-titleblock h1{font-size:23px;font-weight:700;color:var(--ink);line-height:1.45}
.v3 .spg .ep-cover{
  max-width:280px;border-radius:var(--r);
  background-color:var(--surface);box-shadow:var(--shadow)
}
.v3 .spg .ep-byline{
  background:var(--surface);border:1px solid var(--line);border-radius:999px
}
.v3 .spg .ep-byline .bp{background-color:var(--bg);border-color:var(--line)}
.v3 .spg .ep-byline .bt{color:var(--muted);font-size:12px}
.v3 .spg .ep-byline .bt b{color:var(--ink)}
.v3 .spg .ep-meta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.v3 .spg .ep-meta .m-pair dt{color:var(--muted)}
.v3 .spg .ep-meta .m-pair dd{color:var(--ink)}
.v3 .spg .ep-playbtn{background:var(--ink);color:#fff;border:0;border-radius:999px}
.v3 .spg .ep-player{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.v3 .spg .chap{
  background:var(--bg);border:0;border-bottom:1px solid var(--line);
  border-radius:0;color:var(--ink)
}
.v3 .spg .chap:hover{background:var(--surface)}
.v3 .spg .chap.on{background:var(--surface);font-weight:700}
.v3 .spg .chidx,.v3 .spg .ct{color:var(--muted)}
.v3 .spg .cl{color:var(--ink)}
.v3 .spg .ep-notes{
  color:var(--ink);font-size:15px;line-height:1.95;max-width:var(--read)
}
.v3 .spg .ep-notes h2,
.v3 .spg .ep-notes h3,
.v3 .spg .ep-notes h4,
.v3 .spg .ep-notes strong{color:var(--ink);font-weight:700}
.v3 .spg .ep-notes a{color:var(--ink)}
.v3 .spg .ep-notes blockquote{
  background:var(--surface);color:var(--ink);
  border-inline-start:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0
}
.v3 .spg .empty{color:var(--muted)}
.v3 .spg .ep-back{color:var(--muted);font-size:13px}

/* ═══ /khanande — صفحهٔ قدیمیِ خواننده ══════════════════════════════════
   پوسته‌اش تا امروز در یک <style> درون‌خطی با هگزِ دستی بود؛ آمد این‌جا. */
.v3 .khw{max-width:var(--read);margin:0 auto;padding:16px var(--gut);line-height:1.8}
.v3 .khw h1{font-size:21px;font-weight:700;color:var(--ink);margin:6px 0 4px}
.v3 .khw .count{color:var(--muted);font-size:12.5px}
.v3 .khw .bio{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:14px 0;color:var(--ink);white-space:pre-wrap;font-size:14px
}
.v3 .khw .grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:var(--gap);margin-top:14px
}
.v3 .khw .grid a{
  text-decoration:none;color:inherit;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:block
}
.v3 .khw .grid img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--surface)
}
.v3 .khw .grid .t{padding:9px 11px;font-size:12.5px;font-weight:600;color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════
   قلاب‌های /search

   search.css برای پوستهٔ تیره نوشته شده: متنِ سفید و جعبه‌هایی از
   rgba(255,255,255,.06) که روی سفید ناپدید می‌شوند. گاترِ خودش هم ۴۰
   است و صفحه را با بقیه ناهم‌تراز می‌کرد.

   دو چیز عمداً می‌مانند: آبیِ کارتِ درخواست، چون رنگِ تلگرام روی دکمه‌ای
   است که تلگرام را باز می‌کند — تابلوست نه تزیین؛ و طلاییِ .tly، چون
   تنها چیزی است که می‌گوید این ردیف چرا جور شد.
   ═══════════════════════════════════════════════════════════════════════ */
.v3 .srchpg{padding:16px 0 28px;--accent:#e7c873}
.v3 .srchpg h1{margin:0 var(--gut);font-size:21px;font-weight:700;color:var(--ink)}
.v3 .srchpg .sub{margin:4px var(--gut) 0;font-size:12.5px;color:var(--muted);opacity:1}
.v3 .srchpg .sbox{
  margin:14px var(--gut) 0;max-width:var(--read);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:11px 16px
}
.v3 .srchpg .sbox:focus-within{background:var(--bg);border-color:var(--ink)}
.v3 .srchpg .sbox svg{opacity:1;color:var(--muted)}
.v3 .srchpg .sbox input{color:var(--ink);font-size:14.5px}
.v3 .srchpg .sbox input::placeholder{color:var(--muted)}
.v3 .srchpg .sclear{color:var(--muted)}
.v3 .srchpg .results,
.v3 .srchpg .hint,
.v3 .srchpg .qptools{padding:0 var(--gut)}
.v3 .srchpg .hint{opacity:1;color:var(--muted);font-size:12.5px}
.v3 .srchpg .empty{opacity:1;color:var(--muted)}

.v3 .srchpg .sgh{font-size:14px;font-weight:700;color:var(--ink);margin:22px 0 10px}
.v3 .srchpg .sgh span{color:var(--muted)}
.v3 .srchpg .tlist{max-width:var(--read);margin-top:6px}
.v3 .srchpg .trow{padding:9px 0;border-radius:0;border-bottom:1px solid var(--line)}
.v3 .srchpg .trow:hover{background:transparent}
.v3 .srchpg .trow .th{
  width:52px;height:52px;border-radius:var(--r);background:var(--surface);box-shadow:none
}
.v3 .srchpg .trow .tt{font-size:13.5px;font-weight:600;color:var(--ink)}
.v3 .srchpg .trow .ta{font-size:11.5px;color:var(--muted);opacity:1}
.v3 .srchpg .trow .tly{font-size:11.5px;color:#9a7f2e;opacity:1}
.v3 .srchpg .rlike{color:var(--muted)}

/* کاشی‌های فیلم و سریال در نتیجه — همان قابِ صافِ بقیهٔ سایت */
.v3 .srchpg .spost{
  border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)
}
.v3 .srchpg .stt{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:8px}
.v3 .srchpg .smt{font-size:11px;color:var(--muted)}
.v3 .srchpg .th.thn{background:var(--surface)}

/* کارتِ درخواست: شیشه صاف می‌شود، آبیِ تلگرام می‌ماند */
.v3 .srchpg .reqcard{
  max-width:var(--read);border-radius:var(--r);
  background:rgba(34,158,217,.08);border:1px solid rgba(34,158,217,.25)
}
.v3 .srchpg .reqlead{opacity:1;color:var(--ink);font-size:12.5px}
.v3 .srchpg .reqbtn{border-radius:999px}
.v3 .srchpg .qpbtn{
  background:var(--ink);color:#fff;border:0;border-radius:999px;
  padding:11px 20px;font-size:13px;font-weight:700
}
.v3 .srchpg .qpbtn.save{
  background:var(--bg);color:var(--ink);border:1px solid var(--line)
}

/* ═══════════════════════════════════════════════════════════════════════
   قلاب‌های /browse

   واژگانش با صفحهٔ اول یکی نیست: این‌جا .sec با .sectitle است و کاشی‌ها
   رنگ و تصویرِ پس‌زمینه دارند نه قاب و متنِ زیر.
   ⚠ کلاس .sec در هر دو طرف هست — در این شیت هم هست. همین‌جا صریح
   می‌نویسم که قاعدهٔ عمومیِ .sec روی این صفحه هم می‌افتد و عمدی است.
   ═══════════════════════════════════════════════════════════════════════ */
.v3 .brw{padding:0}
.v3 .brw .sec{margin-top:24px}
.v3 .brw .sectitle{
  margin:0 var(--gut) 12px;padding:0;border:0;background:none;
  font-size:14px;font-weight:700;color:var(--ink)
}
.v3 .brw .tiles{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  padding:0 var(--gut);margin:0
}
.v3 .brw .tile{
  position:relative;display:flex;align-items:flex-end;
  aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  padding:10px;border:0
}
.v3 .brw .tile .lbl{
  position:relative;z-index:2;color:#fff;font-size:13px;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.55)
}
.v3 .brw .tile .tbg{
  position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center
}
.v3 .brw .backlink{
  display:inline-flex;margin:14px var(--gut) 0;
  font-size:12.5px;font-weight:600;color:var(--muted)
}
/* .brw پدینگِ ۴۰ داشت و صفر شد؛ ولی عنوان و زیرعنوان گاترِ خودشان را
   نداشتند و به لبه چسبیدند. گاتر از قالب می‌آید، مثل هر بلوک دیگر. */
.v3 .brw h1{margin:18px var(--gut) 0;font-size:22px;font-weight:700;line-height:1.3}
.v3 .brw .sub{margin:5px var(--gut) 0;font-size:12.5px;font-weight:500;color:var(--muted);opacity:1}
.v3 .brw .subsec{margin-inline:var(--gut);padding-inline-start:13px;border-inline-start:2px solid var(--line)}
.v3 .brw .subtitle{font-size:12.5px;font-weight:700;color:var(--muted);opacity:1;margin-bottom:10px}
.v3 .brw .sec.bare{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}

/* کاشیِ گروه .grouptile است نه .tile، پس قاعدهٔ بالا به آن نمی‌رسید و
   مربع می‌ماند — دو ریتمِ مختلف روی یک صفحه. همان ۱۶:۹ را می‌گیرد. */
.v3 .brw .grouptile{
  position:relative;display:block;aspect-ratio:16/9;
  border-radius:var(--r);overflow:hidden;border:0
}
.v3 .brw .grouptile .hero{position:absolute;inset:0;background-size:cover;background-position:center}
.v3 .brw .grouptile .gicn{position:absolute;top:8px;inset-inline-end:8px;z-index:2;font-size:15px}
.v3 .brw .grouptile .ginfo{
  position:absolute;inset-inline:0;bottom:0;z-index:2;
  padding:8px 10px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)!important;
  color:#fff!important
}
.v3 .brw .grouptile .gtitle{font-size:13px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.55)}

@media(min-width:760px){
  .v3 .brw .tiles{grid-template-columns:repeat(4,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   قلاب‌های صفحهٔ اول

   خوشبختانه هر دوازده بخشِ آن صفحه یک واژگان دارند، پس نگاشت سه‌کلاسه
   است نه دوازده بلوکِ جدا:
       .lsect → بخش      .lh → تیتر بخش      .strp → ریل
   مارک‌آپ جابه‌جا نشده؛ شناسه‌های JS (vipHistWrap، vipHeroSlot، shSec،
   mradios) دست‌نخورده‌اند.
   ═══════════════════════════════════════════════════════════════════════ */
.v3 .lsect{margin-top:24px}
.v3 .lsect > .lh{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 var(--gut) 12px;padding:0;border:0;background:none
}
.v3 .lsect > .lh h2{
  margin:0;font-size:14px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:6px;letter-spacing:0
}
.v3 .lsect > .lh h2 a{color:inherit}
.v3 .lsect > .lh .more,
.v3 .lsect > .lh .hint{
  font-size:12px;font-weight:500;color:var(--muted);border:0;background:none;padding:0
}

/* ریل: همان اعداد قالب، روی استریپِ موجود */
.v3 .lsect .strp{
  display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;
  padding-inline:var(--gut);scroll-padding-inline:var(--gut);
  margin:0
}
.v3 .lsect .strp::-webkit-scrollbar{display:none}
.v3 .lsect .strp > *{flex:0 0 42vw;max-width:190px;scroll-snap-align:start}

@media(min-width:760px){
  .v3 .lsect .strp > *{flex-basis:186px;max-width:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   قلاب‌های صفحهٔ ترانهٔ واقعی

   مارک‌آپِ آن صفحه رفتار حمل می‌کند و جابه‌جا نشده، پس قالب باید خودش را
   به کلاس‌های موجود برساند، نه برعکس. این بخش فقط همان‌ها را می‌پوشاند.
   ═══════════════════════════════════════════════════════════════════════ */
/* song.css هنوز روی این صفحه بار می‌شود چون بخشِ متن ترانه را هنوز خودش
   می‌چیند. پس قالب باید تخصصش را بالا ببرد تا هیرو را پس بگیرد — نه با
   !important، با یک لنگرِ id که همان‌جا هست. وقتی متن هم مهاجرت کرد،
   song.css از این صفحه برداشته می‌شود و این‌ها ساده می‌شوند. */
#appMain .songpg.v3{padding:0}
#appMain .songpg.v3 .songtop .player{
  /* تمام‌عرض نیست، و دلیلش عدد است: هیروی الگو 16:9 است و روی 390 برابر
     219 پیکسل درمی‌آید. کاورِ ما مربع است، پس تمام‌عرض یعنی 390 — تقریباً
     دو برابر. با نوار بالا و ریل چیپ و نوار جست‌وجو، کلِ صفحهٔ اول پر
     می‌شد و عنوان و دکمه‌ها زیر خط دید می‌افتادند.
     «تمام‌عرض» از الگو منتقل شد ولی نسبتش منتقل نشد.
     کاور مربع می‌ماند (بند P-18: نسبت مالِ مدیاست) و به‌جایش کوچک‌تر
     می‌شود تا کاور و عنوان و اکشن‌ها با هم در یک صفحه جا شوند. */
  max-width:none;height:auto;aspect-ratio:1/1;border-radius:var(--r);
  background-size:cover;background-position:center;background-repeat:no-repeat
}
/* هیروی افقی: کاور چپ، متن مقابلش — همان گرامرِ «دستگاه» در بند L-01
   (کاور چپ) که فهرست ترانه‌ها هم از آن پیروی می‌کند. یک ردیف به‌جای یک
   ستونِ بلند، پس صفحهٔ اول با فاصلهٔ زیاد جا می‌شود. */
#appMain .songpg.v3 .songtop{
  display:flex; flex-wrap:wrap; direction:ltr; align-items:center; gap:14px;
  padding:16px var(--gut) 0
}
#appMain .songpg.v3 .songtop .player{
  flex:0 0 132px; width:132px; margin:0
}
#appMain .songpg.v3 .info{
  flex:1 1 0; min-width:0; padding:0; text-align:left; unicode-bidi:plaintext
}
#appMain .songpg.v3 .info h1{font-size:19px;line-height:1.35}
#appMain .songpg.v3 .lyr-artist{margin-top:4px}
/* نوار اکشن هم داخلِ همین بلوک است (برای گریدِ دسکتاپ). در ردیفِ فلکس
   آیتمِ سوم می‌شد و متن را له می‌کرد — با flex-basis صد درصد خطِ خودش
   را می‌گیرد و زیرِ ردیف می‌نشیند. */
#appMain .songpg.v3 .actbar{
  flex:1 0 100%; justify-content:flex-start; margin-top:14px;
  margin-inline:calc(var(--gut) * -1); padding-inline:0
}
#appMain .songpg.v3 .actbar{margin-top:6px}
.songpg.v3 .info{text-align:start}
.songpg.v3 .lyr-title{font-size:20px;font-weight:700;line-height:1.4;margin:0;cursor:pointer}
.songpg.v3 .lyr-artist{font-size:14px;font-weight:500;color:var(--muted);margin-top:4px}
.songpg.v3 .lyr-fa{color:var(--muted)}
.songpg.v3 .radioctx{text-align:start;margin:0 0 8px;direction:rtl}
.songpg.v3 .radioctx .hdlabel{font-size:12px;font-weight:700;color:var(--muted)}

/* نوار اکشن: همان قرص‌های قبلی، با پوستِ قالب */
.songpg.v3 .actbar{gap:0}
.songpg.v3 .actbar .sng-playbtn,
.songpg.v3 .actbar .sng-dl{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  height:42px;padding:0 18px;border-radius:999px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);text-decoration:none
}
.songpg.v3 .actbar .sng-playbtn{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.songpg.v3 .actbar .sng-dl:hover{background:var(--surface)}
.songpg.v3 .actbar .sng-like,
.songpg.v3 .actbar .sng-menu,
.songpg.v3 .actbar .sng-lyr{
  flex:0 0 auto;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  padding:13px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink)
}
.songpg.v3 .actbar .sng-like svg,
.songpg.v3 .actbar .sng-menu svg,
.songpg.v3 .actbar .sng-lyr .micon{width:19px;height:19px}
.songpg.v3 .actbar .sng-lyr.on{color:var(--ink)}
.songpg.v3 .actbar .sng-lyr:not(.on){color:var(--muted)}

@media(min-width:760px){
  .songpg.v3 .songtop .player{width:320px;height:320px;flex:none}
}

/* ═══ نوار پخش ══════════════════════════════════════════════════════════ */
.bar{
  position:fixed;inset-inline:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index:45;height:var(--bar-h);display:flex;align-items:center;gap:10px;
  padding:0 var(--gut);background:var(--dark);color:#fff
}
.bar img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.bar .txt{min-width:0;flex:1}
.bar .t{display:block;font-size:12.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .a{display:block;font-size:11px;color:rgba(255,255,255,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .pl{width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.bar .pl .lu{width:15px;height:15px;margin-inline-start:2px}
.bar .prog{position:absolute;inset-inline:0;top:0;height:3px;background:rgba(255,255,255,.14)}
.bar .prog i{display:block;height:100%;width:38%;background:var(--accent)}

/* ═══ نوار پایین ════════════════════════════════════════════════════════ */
.bottomnav{
  position:fixed;inset-inline:0;bottom:0;z-index:50;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line)
}
.bn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:500;color:var(--muted)}
.bn .lu{width:21px;height:21px}
.bn.on{color:var(--ink);font-weight:700}
.bn.mid{gap:0}
.bn.mid .knob{
  width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--accent);
  display:grid;place-items:center;margin-top:-8px;box-shadow:var(--shadow)
}
.bn.mid .knob .lu{width:19px;height:19px}
.bn.mid span{margin-top:2px}

/* ═══ بازتاب ════════════════════════════════════════════════════════════ */
@media(min-width:760px){
  :root{--gut:20px}
  .rail > *{flex-basis:186px;max-width:none}
  .rail.wide > *{flex-basis:330px;max-width:none}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .ahead .por{width:120px;height:120px;flex-basis:120px}
  .ahead h1{font-size:28px}
  .bottomnav{display:none}
  .bar{bottom:0}
  body{padding-bottom:calc(var(--bar-h) + 30px)}
  .radio .cov{width:110px;height:110px;flex-basis:110px}
  /* سقفِ عرض مالِ **ظرف** است، نه تک‌تکِ بلوک‌ها. وقتی روی بلوک‌ها بود،
     هرکدام جدا وسط‌چین می‌شد و از خطِ سرِ صفحه بیرون می‌زد: تیترها روی
     1223 می‌نشستند و پرتره روی 1393. حالا همه از یک لبه حساب می‌کنند. */
  .cols{max-width:1400px;margin-inline:auto}

  /* کاور دیگر تمام‌عرض نیست، ولی همچنان قابِ مربعِ خودش است و دکمهٔ پخش
     روی خودش می‌ماند. پخش‌کننده‌ای که کنترلش جدا شناور شود، پخش‌کننده
     نیست. اطلاعات کنارش می‌نشیند، نه زیرش. */
  .songtop{
    display:grid; grid-template-columns:320px minmax(0,1fr);
    column-gap:28px; align-items:start; padding:24px var(--gut) 0;
  }
  /* کاور هر سه ردیف را می‌گیرد، پس کنارش دیگر حفرهٔ سفید نمی‌ماند:
     عنوان، ردیف خواننده و نوار اکشن ارتفاعش را پر می‌کنند. */
  .songtop .player {grid-column:1;grid-row:1 / span 3;width:320px;border-radius:var(--r)}
  .songtop .info   {grid-column:2;grid-row:1;min-width:0;padding:6px 0 0}
  /* margin-inline:auto از قاعدهٔ سقفِ عرض بالا می‌آید، و روی یک آیتمِ گرید
     معنایش «کوچک شو و وسط بنشین» است — برای همین این دو وسطِ ستون معلق
     می‌ماندند به‌جای پر کردنش. این‌جا صفر می‌شود. */
  .songtop .owner  {grid-column:2;grid-row:2;margin:18px 0 0;padding-inline:0;max-width:none}
  .songtop .actbar {grid-column:2;grid-row:3;margin:14px 0 0;max-width:none}
  .songtop .actbar::before,.songtop .actbar::after{display:none}
  .info h1{font-size:28px;line-height:1.3}
  .info .fa{font-size:16px;margin-top:5px}
  .info .meta{font-size:13px;margin-top:14px}
}
/* ═══ دو ستون، مدل صفحهٔ ویدئوی الگو ════════════════════════════════════
   روی موبایل .cols یک بلوک ساده است و ستون کناری زیر محتوا می‌آید، پس
   ریل‌ها ریل می‌مانند. فقط از 1100 به بالا دو ستون می‌شود. */
@media(min-width:1100px){
  .cols.split{
    /* 400 = عرضِ اندازه‌گیری‌شدهٔ ستونِ کناریِ الگو روی 1440 */
    display:grid; grid-template-columns:minmax(0,1fr) 400px;
    column-gap:30px; align-items:start;
    padding-inline:var(--gut);
  }
  /* ستون کناری باید همهٔ ردیف‌های ستون اصلی را بپوشاند، وگرنه فقط در
     ردیف اول می‌نشیند و ارتفاعش ردیف اولِ ستون اصلی را کش می‌دهد. */
  .cols.split .col-side{grid-column:2;grid-row:1 / span 20}
  /* یک ریلِ پرکارت آیتمِ گرید را با خودش باز می‌کرد و کلِ صفحه افقی
     سرریز می‌شد. min-width:0 کافی نبود؛ عرض باید صریح به تراک بسته شود
     (درصد روی آیتمِ گرید نسبت به همان تراک حساب می‌شود)، تا ریل داخلش
     چیزی برای اسکرول‌کردن داشته باشد. */
  .cols.split > :not(.col-side){grid-column:1;min-width:0;width:100%}
  /* حاشیهٔ کناری را خودِ .cols داده، پس بلوک‌ها دوباره ندهند */
  .cols.split .songtop,.cols.split .sec,.cols.split .wrap,
  .cols.split .ahead,.cols.split .tracks a,.cols.split .tiles,
  .cols.split .sbar{padding-inline:0;max-width:none}
  .cols.split .sbar{padding-inline:14px;margin-inline:0}
  .cols.split .rail{padding-inline:0}
  .cols.split .sechead{margin-inline:0}

  /* ── ستون کناری: کاشی‌های مرتب، قالبِ ردیفیِ الگو ──────────────────
     اندازه‌گیریِ الگو روی 1440: ردیف 94 بلند، گامِ ردیف 102، بندانگشتی
     170x96. بندانگشتیِ آن‌ها 16:9 است چون مدیاشان ویدئوست؛ مالِ ما مربع
     است، پس مربع می‌ماند و اندازه‌اش طوری انتخاب شده که همان گامِ 102
     دربیاید: 94 مربع + 8 فاصله. */
  .col-side .sec{margin-top:0}
  .col-side .sec + .sec{margin-top:24px}
  .col-side .sechead{margin:0 0 12px}
  .col-side .rail{flex-direction:column;gap:8px;overflow:visible;padding-inline:0}
  .col-side .rail > *{flex:none;max-width:none;width:100%}
  .col-side .card{
    display:grid;grid-template-columns:94px minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:12px;align-content:center;
    min-height:94px
  }
  .col-side .card .thumb{grid-column:1;grid-row:1 / span 2;width:94px;height:94px}
  .col-side .card .t{
    grid-column:2;grid-row:1;margin-top:0;align-self:end;
    font-size:13px;line-height:19px;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
  }
  .col-side .card .a{grid-column:2;grid-row:2;align-self:start;margin-top:4px}
  .col-side .badge{left:6px;bottom:6px}

  body{padding-bottom:calc(var(--bar-h) + 30px)}
  .side{
    display:block;order:2;flex:0 0 var(--side-w);width:var(--side-w);
    position:sticky;top:0;height:100vh;overflow-y:auto;
    background:var(--dark);color:#fff;padding:22px
  }
  .rail > *{flex-basis:176px}
  .rail.wide > *{flex-basis:320px}
}