/* ═══════════════════════════════════════════════════════════════════════════
   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; --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 است، پس هیچ‌کدام از اینها روی
   صفحه‌های مهاجرت‌نکرده اثر ندارد.
   ═══════════════════════════════════════════════════════════════════════ */
body.v3{background:var(--bg);color:var(--ink)}

.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)
}
.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} }

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

   مارک‌آپِ آن صفحه رفتار حمل می‌کند و جابه‌جا نشده، پس قالب باید خودش را
   به کلاس‌های موجود برساند، نه برعکس. این بخش فقط همان‌ها را می‌پوشاند.
   ═══════════════════════════════════════════════════════════════════════ */
/* song.css هنوز روی این صفحه بار می‌شود چون بخشِ متن ترانه را هنوز خودش
   می‌چیند. پس قالب باید تخصصش را بالا ببرد تا هیرو را پس بگیرد — نه با
   !important، با یک لنگرِ id که همان‌جا هست. وقتی متن هم مهاجرت کرد،
   song.css از این صفحه برداشته می‌شود و این‌ها ساده می‌شوند. */
#appMain .songpg.v3{padding:0}
#appMain .songpg.v3 .songtop .player{
  /* تمام‌عرضِ واقعی. ظرفِ پوسته پدینگ دارد و کاور را ۱۴ پیکسل از هر طرف
     تو می‌برد؛ این دو خط از هر پدینگی بیرون می‌زنند بی‌آن‌که عددش را
     بدانیم، پس اگر پوسته عوض شد این نمی‌شکند. */
  width:100vw; margin-inline:calc(50% - 50vw);
  max-width:none;height:auto;aspect-ratio:1/1;border-radius:0;
  background-size:cover;background-position:center;background-repeat:no-repeat
}
#appMain .songpg.v3 .info{padding:14px var(--gut) 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}
}