/* ═══════════════════════════════════════════════════════════════
   درون ۲ — نظامِ طراحی

   سه قاعده‌ی برندبوک که شکسته نمی‌شوند:
     ۱) دو رنگ. مرکّب #323232، کاغذ #FFFFFF. تمِ تیره رنگِ سوم نیست — همان دو، جابه‌جا.
     ۲) فونتِ پیدا، وزن ۴۰۰/۵۰۰/۶۰۰. letter-spacing روی فارسی هرگز.
     ۳) ارتفاعِ خط: متن ۱٫۵۷۵، تیتر ۱٫۲۸. متنِ بلند justify با خطِ آخرِ راست.

   تفاوتِ این بازطراحی با نسخه‌ی ۱: کمتر «کارت»، بیشتر «صفحه».
   خطِ مو به‌جای قاب، فضای خالیِ بیشتر، مقیاسِ تیترِ درشت‌تر.
   ═══════════════════════════════════════════════════════════════ */

@import url('fonts.css');

:root{
  /* پایه‌ی برند */
  --ink:#323232; --paper:#ffffff;

  /* تمِ شب (پیش‌فرض) — مرکّبِ عمیق‌تر، چون صفحه نور می‌تاباند */
  --bg:#141416;
  --bg-2:#1a1b1e;
  --fg:#ededee;
  --sub:#8e9096;
  --faint:#63656b;
  --hair:#26272b;
  --hair-2:#33353a;

  /* تنها لهجه. فقط برای کنش و تأکید، نه برای تزیین. */
  --accent:#e3b062;
  --accent-ink:#141416;

  --ok:#7fb894; --warn:#e0a96d; --bad:#e0796d;

  --lh-text:1.575;
  --lh-head:1.28;

  --col:1080px;
  --gut:24px;
  --r:14px;
  --r-lg:20px;

  --dock-h:0px;
}

:root[data-theme="paper"]{
  --bg:#ffffff;
  --bg-2:#f6f5f2;
  --fg:#323232;
  --sub:#6b6b6b;
  --faint:#96959a;
  --hair:#e7e6e2;
  --hair-2:#d8d7d2;
  --accent:#a8762a;
  --accent-ink:#ffffff;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Peyda',system-ui,'Segoe UI',Tahoma,sans-serif;
  font-weight:500;
  font-size:16.5px;
  line-height:var(--lh-text);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:var(--dock-h);
  transition:background .35s ease,color .35s ease;
}
body.has-dock{--dock-h:86px}

::selection{background:var(--fg);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

/* تیتر: وزن ۶۰۰، ارتفاعِ خطِ ۱٫۲۸، بدونِ letter-spacing */
h1,h2,h3,h4{font-weight:600;line-height:var(--lh-head);letter-spacing:0}

.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}

/* پرشِ دسترس‌پذیری */
/* ⚠ با inset-inline-start:-9999px صفحه‌ی راست‌به‌چپ ۱۰۴۰۰px پهن می‌شد و گوشی افقی می‌لغزید.
   clip-path هیچ فضایی نمی‌گیرد و هیچ سرریزی نمی‌سازد. */
/* ⚠ تورِ ایمنیِ سرریزِ افقی.
   در نسخه‌ی ۱ دو بار صفحه روی گوشی افقی لغزید و هر بار وقت گرفت.
   هر تکه‌ای که عمداً تا لبه‌ی صفحه خونریزی می‌کند (مثلِ .bscene در برگ‌ریزون)
   چند پیکسل از پهنای دید بیرون می‌زند؛ این خط همان‌جا می‌بُرَدش.
   clip به‌جای hidden، چون hidden روی html هدرِ sticky را می‌شکند. */
html{overflow-x:clip}

.skip{position:absolute;inset-inline-start:24px;top:0;z-index:100;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:0 0 var(--r) var(--r)}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none}

:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ════════════════ هدر ════════════════ */

.head{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.3) blur(16px);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);
  border-bottom:1px solid var(--hair)}
.head .bar{display:flex;align-items:center;gap:20px;height:62px}

.brand{flex:none}
.brand .mark{display:block;width:78px;color:var(--fg)}
.brand .mark svg{width:100%;height:auto;display:block}
.wm-txt{font-size:22px;font-weight:600}

.nav{display:flex;align-items:center;gap:2px;margin-inline-end:auto}
.nav a{color:var(--sub);font-size:14.5px;padding:7px 13px;border-radius:9px;transition:color .18s,background .18s}
.nav a:hover{color:var(--fg);background:var(--bg-2)}
.nav a.on{color:var(--fg)}
.nav a.on::after{content:"";display:block;height:2px;margin-top:4px;border-radius:2px;background:var(--accent)}

.tools{display:flex;align-items:center;gap:8px;flex:none}
.who{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--sub);
  padding:5px 10px 5px 6px;border-radius:99px;border:1px solid var(--hair);transition:.18s}
.who:hover{color:var(--fg);border-color:var(--hair-2)}
.who .av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600}
.who .nm{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who.ghost{padding:6px 14px}
@media (max-width:640px){ .who .nm{display:none} }

/* ════════════════ هدر روی گوشی ════════════════
   ⚠ بدونِ این، در ۳۷۵px مجموعِ نشان و ناوبری و ابزارها ۴۳۳px می‌شد
   و کلِ صفحه افقی می‌لغزید. دو چیز با هم درستش می‌کند:
   ۱) کوچک‌کردنِ فاصله‌ها و نشان، تا معمولاً جا شود.
   ۲) min-width:0 روی .nav تا flex واقعاً بتواند کوچکش کند، و اسکرولِ افقیِ
      خودِ نوار به‌عنوانِ تورِ ایمنی — هر چه هم اضافه شود، صفحه دیگر نمی‌لغزد. */
@media (max-width:560px){
  .head .bar{gap:8px}
  .brand .mark{width:58px}
  .nav{min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:13.5px;padding:6px 8px;white-space:nowrap}
  .tools{gap:6px}
  .who.ghost{padding:6px 11px;font-size:13.5px}
  .tgl{width:32px;height:32px}
}

.tgl{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--hair);color:var(--fg);transition:.18s}
.tgl:hover{border-color:var(--hair-2);background:var(--bg-2)}
.tgl svg{width:17px;height:17px}

/* نوارِ باریکِ بارگذاری هنگامِ ناوبریِ نرم */
body.navving .head::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:sweep 1s linear infinite}
@keyframes sweep{from{transform:translateX(100%)}to{transform:translateX(-100%)}}

/* ════════════════ هیرو ════════════════ */

.hero{padding:88px 0 40px}
.hero .kick{color:var(--faint);font-size:13px;font-weight:600;margin-bottom:20px}
.hero h1{font-size:clamp(46px,11vw,104px);font-weight:600;line-height:1.05}
.hero .lead{font-size:clamp(17px,2.3vw,21px);color:var(--sub);max-width:42ch;margin-top:24px}
.hero .say{font-size:clamp(20px,3.4vw,32px);margin-top:28px;font-weight:500}
.hero .say b{font-weight:600}
.hero.sub{padding:56px 0 24px}
.hero.sub h1{font-size:clamp(36px,8vw,74px)}

.crumb{display:inline-flex;align-items:center;gap:7px;color:var(--sub);font-size:14px;
  margin-top:26px;transition:color .18s}
.crumb:hover{color:var(--fg)}
.crumb svg{width:15px;height:15px}
.back svg,.crumb svg{transform:scaleX(-1)}  /* «برگشت» در راست‌به‌چپ رو به راست است */

/* ════════════════ عنوانِ بخش ════════════════ */

section{scroll-margin-top:80px}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.eyebrow h2{font-size:12.5px;font-weight:600;color:var(--faint);white-space:nowrap}
.eyebrow .rule{flex:1;height:1px;background:var(--hair)}
.eyebrow .count{color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums}
.gap{height:1px;background:var(--hair);margin:64px 0}

/* ════════════════ کارتِ تازه‌ترین قسمت ════════════════ */

.now{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;
  padding:22px;border:1px solid var(--hair);border-radius:var(--r-lg);
  transition:border-color .22s,transform .22s}
.now:hover{border-color:var(--hair-2)}
.now .cov{border-radius:var(--r);overflow:hidden;aspect-ratio:1;background:var(--bg-2)}
.now .cov img{width:100%;height:100%;object-fit:cover}
.now .tag{font-size:11.5px;color:var(--faint);font-weight:600}
.now h3{font-size:clamp(21px,3vw,30px);margin:8px 0 8px}
.now p{color:var(--sub);font-size:15px;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.now .row{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
@media (max-width:680px){ .now{grid-template-columns:1fr;gap:18px} .now .cov{max-width:200px} }

/* دکمه‌ی پخش — تنها جایی که لهجه پر می‌شود */
.pbtn{display:inline-flex;align-items:center;gap:9px;padding:10px 20px 10px 16px;
  border-radius:99px;background:var(--accent);color:var(--accent-ink);
  font-size:15px;font-weight:600;transition:transform .16s,filter .16s}
.pbtn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.pbtn:active{transform:translateY(0)}
.pbtn svg{width:15px;height:15px}
.pbtn.ghost{background:none;color:var(--fg);border:1px solid var(--hair-2)}
.pbtn.ghost:hover{background:var(--bg-2)}

.dur{color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums}

/* ════════════════ دو بخش: شمش و شمشک ════════════════ */

.pods{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){ .pods{grid-template-columns:1fr} }

.pod{display:flex;flex-direction:column;gap:14px;padding:30px 28px 28px;
  border:1px solid var(--hair);border-radius:var(--r-lg);position:relative;overflow:hidden;
  transition:border-color .22s,transform .22s}
.pod:hover{border-color:var(--hair-2);transform:translateY(-2px)}
.pod .tag{font-size:11.5px;font-weight:600;color:var(--faint)}
.pod h3{font-size:clamp(26px,4vw,36px)}
.pod p{color:var(--sub);font-size:15px;max-width:44ch}
.pod .meta{color:var(--faint);font-size:12.5px;margin-top:auto;padding-top:10px}
.pod .go{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin-top:6px}
.pod .go svg{width:17px;height:17px;transition:transform .2s}
.pod:hover .go svg{transform:translateX(-5px)}
.pod .art{position:absolute;inset-block:0;inset-inline-start:-40px;width:180px;opacity:.1;
  pointer-events:none;object-fit:cover;height:100%}

/* شمشک استقلالِ خودش را دارد: گوشه‌ی گردتر، پالتِ رنگی، لبخند */
.pod.sk{border-color:transparent;
  background:linear-gradient(165deg,#fffaf2,#fff2e4);border-radius:28px;color:#3b2d5a}
.pod.sk .tag{color:#c13d73}
.pod.sk h3{background:linear-gradient(90deg,#ff5c8a,#9b5de5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#9b5de5}
.pod.sk p{color:#6b5b8a}
.pod.sk .meta{color:#8a7ba8}
.pod.sk .go{color:#9b5de5}
.pod.sk::after{content:"";position:absolute;inset:0;border-radius:28px;padding:2px;pointer-events:none;
  background:linear-gradient(120deg,#ff5c8a,#ffd23f,#2ec4a0,#3a86ff,#9b5de5);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.pod.sk:hover{transform:translateY(-3px) rotate(-.4deg);
  box-shadow:0 24px 40px -28px rgba(155,93,229,.6)}

/* ════════════════ نوارِ برگ‌ریزون در صفحه‌ی اصلی ════════════════
   باریک عمداً: نه آن‌قدر بزرگ که صفحه را بدزدد، نه آن‌قدر کوچک که دیده نشود. */

.bstrip{display:flex;align-items:center;gap:16px;padding:16px 20px;
  border:1px solid var(--hair);border-radius:99px;transition:.22s;flex-wrap:wrap}
.bstrip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.bs-ic{flex:none;width:26px;height:26px;color:#d0652f}
.bs-ic svg{width:100%;height:100%}
.bs-tx{display:flex;flex-direction:column;line-height:1.35;flex:none}
.bs-tx b{font-size:15px;font-weight:600}
.bs-tx span{font-size:12.5px;color:var(--faint)}
.bs-meter{flex:1;min-width:120px;height:6px;border-radius:99px;background:var(--hair);overflow:hidden}
.bs-fill{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#d0652f,#e3b062);transition:width .6s ease}
.bs-n{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums;flex:none}
.bs-n b{color:var(--fg);font-weight:600}
.bs-go{flex:none;color:var(--faint)}
.bs-go svg{width:18px;height:18px}
@media (max-width:620px){
  .bstrip{border-radius:var(--r-lg);gap:12px}
  .bs-meter{order:9;flex-basis:100%}
}

/* ════════════════ شبکه‌ی قسمت‌ها ════════════════ */

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:26px 20px}

.ep{display:flex;flex-direction:column;gap:12px;position:relative}
.ep .cov{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.ep .cov img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ep:hover .cov img{transform:scale(1.04)}
.ep .num{position:absolute;top:9px;inset-inline-end:9px;font-size:11px;
  padding:3px 9px;border-radius:99px;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,#000 55%,transparent);color:#fff;backdrop-filter:blur(6px)}
/* دکمه‌ی پخش روی کاور — با کلید هم در دسترس است، نه فقط با موس */
.ep .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .2s;
  background:color-mix(in srgb,#000 30%,transparent)}
.ep:hover .play,.ep .play:focus-visible{opacity:1}
.ep .play i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink)}
.ep .play svg{width:16px;height:16px}
.ep .work{font-size:16.5px;font-weight:600;line-height:1.4}
.ep .hook{font-size:13.5px;color:var(--sub);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep .meta{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;margin-top:auto}
.ep .meta .st{width:12px;height:12px;fill:var(--accent)}

/* ════════════════ صفحه‌ی قسمت ════════════════ */

.detail{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;padding-top:8px}
.detail .cover{border-radius:var(--r-lg);overflow:hidden;position:sticky;top:80px}
.detail .cover img{width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:820px){
  .detail{grid-template-columns:1fr;gap:26px}
  .detail .cover{position:static;max-width:240px}
}

.back{display:inline-flex;align-items:center;gap:7px;color:var(--sub);font-size:14px;margin:26px 0 20px}
.back:hover{color:var(--fg)}
.back svg{width:15px;height:15px}

.dhead .num{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.dhead h1{font-size:clamp(28px,4.4vw,46px);margin:8px 0 10px}
.dhead .hook{font-size:clamp(16px,2.2vw,20px);color:var(--sub)}
.dmeta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;color:var(--faint);font-size:12.5px}
.dmeta span{border:1px solid var(--hair);border-radius:99px;padding:4px 12px}

.body{margin-top:30px;line-height:2;text-align:justify;text-align-last:right}
.body h3,.chapters h3,.nazar h3{font-size:12.5px;font-weight:600;color:var(--faint);margin-bottom:14px}
.body p{margin:0 0 14px}
.body em{color:var(--sub);font-style:normal}

/* ════════════════ ستاره ════════════════ */

.rate{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 20px;border:1px solid var(--hair);border-radius:var(--r);margin:24px 0}
.stars{display:inline-flex;gap:3px;direction:ltr}
.stars .st{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  color:var(--hair-2);transition:transform .14s,color .14s}
.stars .st svg{width:22px;height:22px;fill:currentColor}
.stars .st.on,.stars .st.avg{color:var(--accent)}
.stars .st.avg{opacity:.45}
.stars:not(.ro) .st:hover{transform:scale(1.18)}
.stars .st.hov{color:var(--accent)}
.stars.busy{opacity:.5;pointer-events:none}
.stars-note{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}

/* ════════════════ فصل‌ها ════════════════ */

.chapters{margin:26px 0}
.chapters ol{list-style:none;display:flex;flex-direction:column}
.chapters li button{width:100%;display:flex;align-items:center;gap:14px;text-align:right;
  padding:9px 12px;border-radius:9px;transition:background .15s}
.chapters li button:hover{background:var(--bg-2)}
.chapters li button.on{background:var(--bg-2)}
.chapters li button.on .tc{color:var(--accent)}
.chapters .tc{font-size:12.5px;color:var(--faint);direction:ltr;min-width:50px;font-variant-numeric:tabular-nums}
.chapters .lb{font-size:14.5px}

/* ════════════════ نظر ════════════════ */

.nazar{margin-top:40px}
.n-form{border:1px solid var(--hair);border-radius:var(--r);padding:16px;margin-bottom:24px}
.n-form textarea{width:100%;min-height:92px;resize:vertical;background:none;border:0;
  outline:none;line-height:1.75;font-size:15px}
.n-form .n-bar{display:flex;align-items:center;gap:12px;margin-top:10px;
  padding-top:12px;border-top:1px solid var(--hair)}
.n-count{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.n-to{font-size:12.5px;color:var(--accent)}
.n-hint{font-size:13px;color:var(--sub);padding:14px 16px;border:1px dashed var(--hair-2);
  border-radius:var(--r);margin-bottom:24px}

.n-list{display:flex;flex-direction:column;gap:22px}
.n-item{display:grid;grid-template-columns:34px 1fr;gap:12px}
.n-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-2);color:var(--sub);font-size:14px;font-weight:600}
.n-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.n-head b{font-weight:600}
.n-head time{color:var(--faint);font-size:12.5px}
.n-badge{font-size:11px;padding:2px 9px;border-radius:99px;border:1px solid var(--hair-2);color:var(--faint)}
.n-badge.wait{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.n-badge.mani{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.n-body{margin-top:5px;font-size:15px;line-height:1.85;white-space:pre-line}
.n-act{margin-top:7px;display:flex;gap:14px;font-size:12.5px;color:var(--faint)}
.n-act button:hover{color:var(--fg)}
.n-kids{margin-top:16px;padding-inline-start:16px;border-inline-start:1px solid var(--hair);
  display:flex;flex-direction:column;gap:16px}

/* ════════════════ پلتفرم‌ها ════════════════ */

.listen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.plat{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--hair);border-radius:var(--r);transition:.2s}
.plat:hover{border-color:var(--hair-2);background:var(--bg-2)}
.plat .ic{width:24px;height:24px;flex:none}
.plat .ic svg{width:100%;height:100%}
.plat .tx b{display:block;font-size:14.5px;font-weight:600}
.plat .tx span{font-size:11.5px;color:var(--faint)}
.plat .go{margin-inline-start:auto;color:var(--faint)}
.plat .go svg{width:16px;height:16px}

/* ════════════════ داکِ پخش ════════════════
   بیرونِ #view می‌نشیند، پس ناوبریِ نرم نابودش نمی‌کند و صدا قطع نمی‌شود. */

.dock{position:fixed;inset-inline:0;bottom:0;z-index:80;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:saturate(1.3) blur(18px);
  -webkit-backdrop-filter:saturate(1.3) blur(18px);
  border-top:1px solid var(--hair);
  padding-bottom:env(safe-area-inset-bottom);
  animation:dockUp .28s cubic-bezier(.2,.8,.3,1)}
@keyframes dockUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.dock audio{display:none}

.dock-bar{display:flex;align-items:center;gap:14px;
  max-width:var(--col);margin-inline:auto;padding:11px var(--gut)}

.d-cover{flex:none;width:52px;height:52px;border-radius:11px;overflow:hidden;background:var(--bg-2)}
.d-cover img{width:100%;height:100%;object-fit:cover}

.d-mid{flex:1;min-width:0}
.d-title{display:block;font-size:14.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-sub{font-size:12px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-seek{display:flex;align-items:center;gap:9px;margin-top:5px}
.d-t{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;direction:ltr;flex:none}

/* نوارِ جست‌وجو: ظاهرِ یکسان در همه‌ی مرورگرها */
#dSeek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;
  height:4px;border-radius:99px;background:var(--hair);cursor:pointer;direction:ltr}
#dSeek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--accent);border:0;cursor:pointer}
#dSeek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:0}

.d-ctl{display:flex;align-items:center;gap:4px;flex:none}
.d-ctl button{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  color:var(--sub);transition:.16s}
.d-ctl button:hover{color:var(--fg);background:var(--bg-2)}
.d-ctl svg{width:19px;height:19px}
.d-play{background:var(--accent)!important;color:var(--accent-ink)!important;width:42px!important;height:42px!important}
.d-play:hover{filter:brightness(1.06)}
.d-play .pause{display:none}
.d-play.playing .play{display:none}
.d-play.playing .pause{display:block}
.d-x{font-size:20px;line-height:1}
@media (max-width:620px){
  .dock-bar{gap:10px;padding:9px 14px}
  .d-cover{width:44px;height:44px}
  #dBack,#dFwd{display:none}
}

.dock-panel{border-top:1px solid var(--hair);max-width:var(--col);margin-inline:auto;
  padding:14px var(--gut) 18px;max-height:44vh;overflow-y:auto}
.dp-row{display:flex;flex-wrap:wrap;gap:10px 16px}
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:1px solid var(--hair);border-radius:11px}
.seg .lbl{font-size:12px;color:var(--faint);padding:0 8px}
.seg button{font-size:13px;color:var(--sub);padding:4px 11px;border-radius:8px;transition:.15s}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--fg);color:var(--bg)}
.seg button[data-rate]{direction:ltr;unicode-bidi:isolate}
.dp-note{font-size:12.5px;color:var(--faint);margin-top:10px;min-height:1.6em}
.dp-chaps{list-style:none;margin-top:12px}
.dp-chaps li button{width:100%;display:flex;gap:12px;padding:7px 10px;border-radius:8px;text-align:right}
.dp-chaps li button:hover{background:var(--bg-2)}
.dp-chaps .tc{font-size:12px;color:var(--faint);direction:ltr;min-width:48px;font-variant-numeric:tabular-nums}
.dp-chaps .lb{font-size:14px}
.dp-chaps li button.on .tc{color:var(--accent)}

/* ════════════════ فرم‌های عمومی ════════════════ */

.field{display:block;margin-bottom:18px}
.field > span{display:block;font-size:13.5px;margin-bottom:7px}
.field > span i{font-style:normal;color:var(--faint);font-size:12px;margin-inline-start:5px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;
  background:var(--bg-2);border:1px solid var(--hair);border-radius:var(--r);
  outline:none;transition:border-color .18s}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field .hint{display:block;font-size:12px;color:var(--faint);margin-top:6px;font-style:normal}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:99px;font-size:15px;font-weight:600;
  background:var(--accent);color:var(--accent-ink);transition:.18s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:disabled{opacity:.55;pointer-events:none}
.btn.wide{width:100%}
.btn.ghost{background:none;color:var(--fg);border:1px solid var(--hair-2)}
.btn.ghost:hover{background:var(--bg-2)}

.msg{padding:12px 16px;border-radius:var(--r);font-size:14px;margin-bottom:18px}
.msg.err{color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.msg.ok{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.msg.warn{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}

/* تله‌ی ضدِ بات.
   ⚠ از left:-9999px استفاده نکن: در صفحه‌ی راست‌به‌رچپ صفحه را ۱۱۰۰۰ پیکسل پهن می‌کند
   و گوشی افقی می‌لغزد. این الگو همان کار را بدونِ آن عارضه می‌کند. */
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ════════════════ فوتر ════════════════ */

.foot{border-top:1px solid var(--hair);margin-top:96px;padding:44px 0 56px;color:var(--faint)}
.foot .in{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot .mark{width:104px;color:var(--fg);margin-bottom:12px}
.foot .mark svg{width:100%;height:auto}
.foot .sig{width:170px;color:var(--hair-2);margin-top:10px}
.foot .sig svg{width:100%;height:auto}
.foot .cr{font-size:12.5px;margin-top:12px}
.foot .cr b{color:var(--sub);font-weight:600}
/* بدونِ flex-wrap، ردیفِ لینک‌ها روی عرضِ ۳۷۵ چهار پیکسل بیرون می‌زد
   و همه‌ی صفحه‌های سایت افقی می‌لغزیدند. */
.foot .links{display:flex;flex-wrap:wrap;gap:14px 18px;font-size:14px;max-width:100%}
.foot .links a{color:var(--sub);transition:color .18s}
.foot .links a:hover{color:var(--fg)}

/* ════════════════ واکنش‌گرا و احترام ════════════════ */

@media (max-width:760px){
  :root{--gut:16px}
  .hero{padding:58px 0 28px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 14px}
  .gap{margin:44px 0}
  .foot{margin-top:64px}
}

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

@media print{ .head,.dock,.foot,.pbtn{display:none!important} }