:is(#ss,#sb){
  /* ===== رنگ‌ها: برای عوض کردن، این‌ها رو در Additional CSS قالب override کن ===== */
  --acc:#d6a93c; --active:#1b1608;
  --bg:#101012; --line:#26262b; --mut:#9b9ba3; --wf:#5f5f67; --field:#1a1a1d;
  /* ======================================================================== */
  font-family:Inter,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#fff;
  direction:ltr;padding-bottom:84px;-webkit-tap-highlight-color:transparent;line-height:1.4}
:is(#ss,#sb) *{box-sizing:border-box}
:is(#ss,#sb) .wrap{max-width:1100px;margin:0 auto}
/* جلوگیری از استایل دکمه‌ی قالب (مثل Hello Elementor) روی hover */
:is(#ss,#sb) button:hover,:is(#ss,#sb) button:focus{background-color:transparent;outline:0}

/* ---- search / tools ---- */
:is(#ss,#sb) .tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 10px}
:is(#ss,#sb) .sbox{flex:1 1 100%;display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--line);
  border-radius:999px;padding:0 12px;height:40px;transition:border-color .15s}
:is(#ss,#sb) .sbox:focus-within{border-color:var(--acc)}
:is(#ss,#sb) .sbox svg{width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
:is(#ss,#sb) .sbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:14px;font-family:inherit;box-shadow:none;padding:0;height:100%;margin:0}
:is(#ss,#sb) .sbox input::placeholder{color:#6f6f77}
:is(#ss,#sb) .sbox .clr,:is(#ss,#sb) .sbox .clr:hover{display:none;border:0;background:#2a2a2f;color:#ccc;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:12px;line-height:1;padding:0}
:is(#ss,#sb) .sbox.has .clr{display:block}
:is(#ss,#sb) select{flex:1 1 30%;width:auto!important;min-width:0;max-width:100%;height:34px;background:var(--field);color:#ddd;border:1px solid var(--line);border-radius:999px;
  padding:0 10px;font-size:12px;font-family:inherit;outline:0;cursor:pointer;margin:0}
:is(#ss,#sb) select:focus{border-color:var(--acc)}
:is(#ss,#sb) .count{flex:1 1 100%;font-size:11px;color:var(--mut)}

/* ---- key picker ---- */
:is(#ss,#sb) .kbtn{flex:1 1 30%;min-width:0;height:34px;display:flex;align-items:center;justify-content:space-between;gap:6px;
  background-color:var(--field);color:#ddd;border:1px solid var(--line);border-radius:999px;padding:0 12px;
  font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap}
:is(#ss,#sb) .kbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s}
:is(#ss,#sb) .kbtn:hover,:is(#ss,#sb) .kbtn.open{background-color:var(--field);border-color:var(--acc)}
:is(#ss,#sb) .kbtn.open svg{transform:rotate(180deg)}
:is(#ss,#sb) .kbtn.on{color:var(--acc);border-color:var(--acc)}
:is(#ss,#sb) .kpanel{display:none;flex:1 1 100%;background:#151518;border:1px solid var(--line);border-radius:14px;padding:12px 12px 4px}
:is(#ss,#sb) .kpanel.open{display:block}
:is(#ss,#sb) .kgrp{margin-bottom:10px}
:is(#ss,#sb) .kgrp h4{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600}
:is(#ss,#sb) .kgrid{display:flex;flex-wrap:wrap;gap:6px}
:is(#ss,#sb) .kchip{height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background-color:var(--field);color:#ddd;
  font-size:12px;font-family:inherit;cursor:pointer}
:is(#ss,#sb) .kchip.off{opacity:.45}
:is(#ss,#sb) .kchip:hover{background-color:var(--field);border-color:var(--acc);color:#ddd}
:is(#ss,#sb) .kchip.on,:is(#ss,#sb) .kchip.on:hover{background-color:var(--acc);border-color:var(--acc);color:#111;font-weight:600;opacity:1}

/* ---- list ---- */
:is(#ss,#sb) .head{display:none}
:is(#ss,#sb) .row{display:grid;grid-template-columns:44px 40px 1fr auto;align-items:center;gap:10px;
  padding:9px 10px;border-bottom:1px solid var(--line);cursor:pointer}
:is(#ss,#sb) .row:hover{background:#17171a}
:is(#ss,#sb) .row.active{background:var(--active)}
:is(#ss,#sb) .cover{width:44px;height:44px;border-radius:3px;background:linear-gradient(135deg,#3a3a3f,#18181a) center/cover no-repeat}
:is(#ss,#sb) .row .cover,:is(#ss,#sb) .now .cover{cursor:pointer;transition:opacity .15s}
:is(#ss,#sb) .row .cover:hover,:is(#ss,#sb) .now .cover:hover{opacity:.75}
:is(#ss,#sb) .pbtn{width:30px;height:30px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;color:#8d8d95;cursor:pointer}
:is(#ss,#sb) .pbtn svg{width:20px;height:20px;fill:currentColor}
:is(#ss,#sb) .row.active .pbtn{color:var(--acc)}
:is(#ss,#sb) .info{min-width:0}
:is(#ss,#sb) .name{font-size:13px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#ss,#sb) .tags{display:flex;gap:7px;margin-top:2px;font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden}
:is(#ss,#sb) .tags .x{color:#c9c9d0}
:is(#ss,#sb) canvas{display:block;width:100%;height:24px;margin-top:5px}
:is(#ss,#sb) .col{display:none}
:is(#ss,#sb) .acts{display:flex;align-items:center;gap:2px}
:is(#ss,#sb) .ab.ph{visibility:hidden;pointer-events:none}
:is(#ss,#sb) .ab.midi:hover svg,:is(#ss,#sb) .ab:hover svg{stroke:var(--acc)}
:is(#ss,#sb) .tags a.tg{color:inherit;text-decoration:none;transition:color .15s}
:is(#ss,#sb) .tags a.tg:hover{color:var(--acc);text-decoration:underline}
:is(#ss,#sb) .tagbar{flex:1 1 100%;display:none}
:is(#ss,#sb) .tagbar.on{display:flex}
:is(#ss,#sb) .tagchip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 13px;border-radius:999px;background:var(--acc);color:#111;font-size:12px;font-weight:600}
:is(#ss,#sb) .tagchip a{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.18);color:#111;font-size:10px;text-decoration:none}
:is(#ss,#sb) .ab{width:32px;height:32px;border:0;background:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;text-decoration:none}
:is(#ss,#sb) .ab svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(#ss,#sb) .ab.like.on svg{fill:var(--acc);stroke:var(--acc)}
:is(#ss,#sb) .empty{padding:40px 10px;text-align:center;color:var(--mut);font-size:14px}

/* ---- pagination ---- */
:is(#ss,#sb) .pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;padding:20px 10px 8px}
:is(#ss,#sb) .pager button{min-width:34px;height:34px;padding:0 10px;background-color:var(--field);color:#ddd;border:1px solid var(--line);
  border-radius:8px;font-size:13px;font-family:inherit;cursor:pointer}
:is(#ss,#sb) .pager button:hover:not(:disabled){background-color:var(--field);border-color:var(--acc);color:#ddd}
:is(#ss,#sb) .pager button.on,:is(#ss,#sb) .pager button.on:hover{background-color:var(--acc);border-color:var(--acc);color:#111;font-weight:600}
:is(#ss,#sb) .pager button:disabled{opacity:.35;cursor:default}
:is(#ss,#sb) .pager .dots{color:var(--mut);padding:0 2px}

/* ---- bottom player ---- */
:is(#ss,#sb) .bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;height:64px;background:#1c1c1f;border-top:1px solid #2c2c31;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;gap:10px}
:is(#ss,#sb) .bar .prog{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--acc)}
:is(#ss,#sb) .ctrl{display:flex;align-items:center;gap:6px}
:is(#ss,#sb) .ctrl button{width:34px;height:34px;border:0;background:none;color:#cfcfd6;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
:is(#ss,#sb) .ctrl svg{width:22px;height:22px;fill:currentColor}
:is(#ss,#sb) .now{display:flex;align-items:center;gap:8px;min-width:0}
:is(#ss,#sb) .now .cover{width:38px;height:38px}
:is(#ss,#sb) .now span{display:none;font-size:12px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#ss,#sb) .vol{justify-self:end;display:flex;align-items:center;gap:6px;color:#cfcfd6}
:is(#ss,#sb) .vol svg{width:20px;height:20px;fill:currentColor}
:is(#ss,#sb) .vol input{display:none;width:90px;accent-color:var(--acc)}

/* ---- موبایل: بدون waveform، بزرگ‌تر، سفید نرم‌تر و خواناتر ---- */
:is(#ss,#sb) .info canvas{display:none}
@media(max-width:767px){
  :is(#ss,#sb) .sbox{height:44px}
  :is(#ss,#sb) .sbox input{font-size:16px}
  :is(#ss,#sb) .kbtn,:is(#ss,#sb) select{height:38px;font-size:13px}
  :is(#ss,#sb) .row{grid-template-columns:52px 44px 1fr auto;gap:10px;padding:12px 10px}
  :is(#ss,#sb) .cover{width:52px;height:52px}
  :is(#ss,#sb) .pbtn{width:34px;height:34px}
  :is(#ss,#sb) .pbtn svg{width:24px;height:24px}
  :is(#ss,#sb) .name{font-size:15px;line-height:1.3;color:rgba(255,255,255,.9);white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  :is(#ss,#sb) .tags{font-size:12px;color:#a9a9b2;flex-wrap:wrap;white-space:normal;gap:3px 8px;margin-top:4px}
  :is(#ss,#sb) .tags .x{color:rgba(255,255,255,.72)}
  :is(#ss,#sb) .acts{gap:0}
  :is(#ss,#sb) .ab{width:34px;height:34px}
  :is(#ss,#sb) .ab svg{width:21px;height:21px;stroke:rgba(255,255,255,.78)}
  :is(#ss,#sb) .ab.like.on svg{stroke:var(--acc)}
}

@media(min-width:768px){
  :is(#ss,#sb) .tools{padding:16px 14px 12px}
  :is(#ss,#sb) .sbox{flex:1 1 320px;height:42px}
  :is(#ss,#sb) select{flex:0 0 auto;height:38px;font-size:13px}
  :is(#ss,#sb) .kbtn{flex:0 0 auto;height:38px;font-size:13px;min-width:140px}
  :is(#ss,#sb) .count{flex:none;margin-left:auto;font-size:12px}
    :is(#ss,#sb) .head,:is(#ss,#sb) .row{display:grid;grid-template-columns:52px 44px minmax(160px,1.3fr) 220px 46px 54px 54px auto;gap:14px;padding:10px 14px}
  :is(#ss,#sb) .head{padding-top:8px;padding-bottom:8px;font-size:12px;color:var(--mut);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  :is(#ss,#sb) .head .pk{grid-column:span 2}
  :is(#ss,#sb) .head .ac{width:100px}
  :is(#ss,#sb) .cover{width:52px;height:52px}
  :is(#ss,#sb) .name{font-size:15px}
  :is(#ss,#sb) .tags{font-size:12px}
  :is(#ss,#sb) .info canvas,:is(#ss,#sb) .mob{display:none}
  :is(#ss,#sb) .col{display:block}
  :is(#ss,#sb) .wfd canvas{height:40px;margin:0}
  :is(#ss,#sb) .col.t{font-size:13px;color:#c9c9d0}
  :is(#ss,#sb) .now span{display:block}
  :is(#ss,#sb) .vol input{display:block}
}

/* ---- دکمه‌ی MIDI (نوشته‌ی MIDI به‌جای آیکون) ---- */
:is(#ss,#sb) .mpill{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:26px;min-width:52px;padding:0 10px;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;font-size:11px;letter-spacing:.06em;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;margin:0 4px}
:is(#ss,#sb) .mpill b{font-weight:700}
:is(#ss,#sb) .mpill svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:is(#ss,#sb) .mpill:hover{border-color:var(--acc);color:var(--acc)}
:is(#ss,#sb) .mpill.lock{color:var(--mut);border-color:var(--line)}
:is(#ss,#sb) .mpill.lock:hover{color:var(--acc);border-color:var(--acc)}
:is(#ss,#sb) .mpill.ph{visibility:hidden;pointer-events:none}
@media(max-width:767px){:is(#ss,#sb) .mpill{height:28px;font-size:12px;min-width:56px}}
@media(min-width:768px){:is(#ss,#sb) .head .ac{width:130px}}

/* ---- Favorites chip ---- */
:is(#ss,#sb) .fbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  background-color:var(--field);color:#ddd;font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap;flex:0 0 auto}
:is(#ss,#sb) .fbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
:is(#ss,#sb) .fbtn i{font-style:normal;font-size:11px;color:var(--mut)}
:is(#ss,#sb) .fbtn:hover{background-color:var(--field);border-color:var(--acc);color:#ddd}
:is(#ss,#sb) .fbtn.on,:is(#ss,#sb) .fbtn.on:hover{background-color:var(--acc);border-color:var(--acc);color:#111;font-weight:600}
:is(#ss,#sb) .fbtn.on svg{fill:#111}:is(#ss,#sb) .fbtn.on i{color:#111}
@media(min-width:768px){:is(#ss,#sb) .fbtn{height:38px;font-size:13px}}

/* ---- Share (آیکون ظریف کنار لایک) ---- */
:is(#ss,#sb) .ab.share svg{width:17px;height:17px;stroke:rgba(255,255,255,.62)}
:is(#ss,#sb) .ab.share:hover svg{stroke:var(--acc)}
:is(#ss,#sb) #slib-toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,10px);z-index:10000;padding:9px 18px;border-radius:999px;
  background:#26262b;border:1px solid rgba(214,169,60,.4);color:#fff;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
:is(#ss,#sb) #slib-toast.on{opacity:1;transform:translate(-50%,0)}
:is(#ss,#sb) .row.flash{animation:slibflash 2.6s ease-out}
@keyframes slibflash{0%,40%{background:rgba(214,169,60,.28)}100%{background:transparent}}
@media(min-width:768px){:is(#ss,#sb) .head .ac{width:170px}}

/* ---- موبایل: دکمه‌ها زیر اسم، تا اسم جا داشته باشد و شلوغ نشود ---- */
@media(max-width:767px){
  :is(#ss,#sb) .row{grid-template-columns:52px 44px 1fr;row-gap:2px}
  :is(#ss,#sb) .row .cover{grid-row:1/3;align-self:start}
  :is(#ss,#sb) .row .pbtn{grid-row:1/3;align-self:center}
  :is(#ss,#sb) .row .acts{grid-column:3;grid-row:2;justify-content:flex-start;gap:4px;margin-top:6px}
  :is(#ss,#sb) .row .acts .mpill{margin:0 6px}
}

/* ---- Drag به DAW ---- */
@media (hover:hover) and (pointer:fine){
  :is(#ss,#sb) .row[draggable=true]{cursor:grab}
  :is(#ss,#sb) .row[draggable=true] .info .name::after{content:"⋮⋮";margin-inline-start:8px;color:#55555c;font-size:12px;letter-spacing:-2px;opacity:0;transition:opacity .15s}
  :is(#ss,#sb) .row[draggable=true]:hover .info .name::after{opacity:1}
  :is(#ss,#sb) .row.dragging{opacity:.55;background:#1d1a12}
}

/* ---- وقتی هم سمپل و هم بیت در صفحه است، فقط پلیر فعال دیده شود ---- */
:is(#ss,#sb) .bar.off{display:none}
/* ---- WAV + MIDI pills: ستون ثابت تا ردیف‌ها هم‌تراز بمانند ---- */
@media(min-width:768px){#ss .head .ac{width:250px}#ss .row .acts{min-width:250px;justify-content:flex-end}}
#ss .mpill.wpill{min-width:52px}
/* ---- download credits ---- */
#ss .mpill.cr{border-color:rgba(214,169,60,.6);color:var(--acc)}
#ss .mpill.cr svg{fill:currentColor;stroke:none;width:11px;height:11px}
#ss .mpill.cr:hover{background:rgba(214,169,60,.12)}
#ss .credbtn{text-decoration:none;border-color:rgba(214,169,60,.5);color:var(--acc)}
#ss .credbtn svg{fill:currentColor;stroke:none}
#ss .credbtn i{color:var(--acc);font-weight:700}
#ss .credbtn.zero{border-color:var(--line);color:#ddd}
#ss .credbtn.zero i{color:var(--mut)}

/* ======== Trending · پرطرفدارها ======== */
#ss .trend{padding:18px 10px 4px}
#ss .trend[hidden]{display:none}
#ss .tr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
#ss .tr-head h2{margin:0;font-size:21px;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px;line-height:1.2}
#ss .tr-head .fire{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#efc762,#c9962a);font-size:17px}
#ss .tr-head small{font-size:13px;font-weight:600;color:var(--mut);font-family:Vazirmatn,Tahoma,inherit}
#ss .tr-right{display:flex;gap:10px;align-items:center}
#ss .tr-tabs{display:flex;gap:6px}
#ss .tr-tabs button,#ss .tr-tabs button:hover{height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background-color:var(--field);color:#ccc;font-family:inherit;font-size:12px;cursor:pointer}
#ss .tr-tabs button.on,#ss .tr-tabs button.on:hover{background-color:var(--acc);border-color:var(--acc);color:#111;font-weight:700}
#ss .tr-arrows{display:flex;gap:6px}
#ss .tr-arrows button,#ss .tr-arrows button:hover{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background-color:var(--field);color:#ddd;cursor:pointer;font-size:17px;line-height:1;padding:0}
#ss .tr-arrows button:hover{border-color:var(--acc);color:var(--acc)}
#ss .tr-rail{display:grid;grid-auto-flow:column;grid-auto-columns:196px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:#333 transparent}
#ss .tr-rail::-webkit-scrollbar{height:6px}
#ss .tr-rail::-webkit-scrollbar-thumb{background:#2c2c31;border-radius:6px}
#ss .tc{scroll-snap-align:start;position:relative;background:#151518;border:1px solid var(--line);border-radius:16px;padding:10px;cursor:pointer;min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s}
#ss .tc:hover{transform:translateY(-3px);border-color:rgba(214,169,60,.5);box-shadow:0 14px 30px rgba(0,0,0,.45)}
#ss .tc.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
#ss .tc-cv{position:relative;aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:#222 center/cover no-repeat}
#ss .tc-cv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 35%,transparent 55%,rgba(0,0,0,.72))}
#ss .tr-rk{position:absolute;z-index:2;left:8px;top:6px;font-size:32px;font-weight:900;line-height:1;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);letter-spacing:-1px}
#ss .tc:nth-child(-n+3) .tr-rk{color:var(--acc)}
#ss .tr-hot{position:absolute;z-index:2;right:8px;top:8px;font-size:10px;font-weight:800;color:#111;background:var(--acc);border-radius:999px;padding:3px 8px;letter-spacing:.04em}
#ss .tr-hot.new{background:#fff}
#ss .tr-pl,#ss .tr-pl:hover,#ss .tr-pl:focus{position:absolute;z-index:2;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;border:0;padding:0;
  background-color:rgba(12,12,14,.6);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.85);transition:.2s}
#ss .tc:hover .tr-pl,#ss .tc.on .tr-pl{opacity:1;transform:none}
@media(hover:none){#ss .tr-pl,#ss .tr-pl:hover{opacity:1;transform:none}}
#ss .tc.on .tr-pl,#ss .tc.on .tr-pl:hover{background-color:var(--acc);color:#111}
#ss .tr-pl svg{width:22px;height:22px;fill:currentColor}
#ss .tr-stat{position:absolute;z-index:2;left:8px;right:8px;bottom:7px;display:flex;justify-content:space-between;font-size:11px;color:#e6e6ea}
#ss .tr-stat span{display:flex;align-items:center;gap:3px}
#ss .tr-stat svg{width:11px;height:11px;fill:currentColor}
#ss .tr-bar{height:3px;background:#2a2a30;border-radius:3px;margin:10px 0 8px;overflow:hidden}
#ss .tr-bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .25s linear}
#ss .tr-nm{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ss .tr-mt{display:flex;gap:6px;margin-top:3px;font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden}
#ss .tr-mt b{color:#c9c9d0;font-weight:500}
#ss .tr-ac{display:flex;gap:6px;margin-top:9px}
#ss .tr-ac .mpill{flex:1;margin:0;min-width:0}
#ss .tr-ac .mpill.ph{display:none}
@media(max-width:767px){
  #ss .trend{padding:14px 10px 2px}
  #ss .tr-rail{grid-auto-columns:150px;gap:10px}
  #ss .tr-rk{font-size:25px}
  #ss .tr-head h2{font-size:18px}
  #ss .tr-arrows{display:none}
  #ss .tr-nm{font-size:13px}
}
/* Trending: دکمه‌ی دانلود + MIDI/WAV */
#ss .tr-ac{flex-wrap:nowrap}
#ss .tr-dl{flex:1.3;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;border-radius:999px;background:var(--acc);color:#111;
  font-size:11px;font-weight:700;text-decoration:none;transition:filter .15s}
#ss .tr-dl:hover{filter:brightness(1.08);color:#111}
#ss .tr-dl svg{width:13px;height:13px;stroke:#111;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#ss .tr-ac .mpill{height:28px;font-size:10.5px;padding:0 8px}
@media(max-width:767px){#ss .tr-dl span{display:none}#ss .tr-dl{flex:0 0 34px}}
#ss .tr-dl{flex:0 0 34px}
#ss .tr-dl span{display:none}

/* ---- دکمه‌ی پخش گرد و بزرگ‌تر + گوشه‌ی گرد کاور ---- */
:is(#ss,#sb) .cover{border-radius:8px}
:is(#ss,#sb) .now .cover{border-radius:7px}
:is(#ss,#sb) button.pbtn,:is(#ss,#sb) button.pbtn:focus{width:40px;height:40px;border-radius:50%;background-color:#26262b;color:#e6e6ea;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background-color .15s,color .15s,transform .15s}
:is(#ss,#sb) button.pbtn svg{width:18px;height:18px;margin-left:2px}
:is(#ss,#sb) .row:hover button.pbtn,:is(#ss,#sb) button.pbtn:hover{background-color:#34343a;color:#fff;transform:scale(1.06)}
:is(#ss,#sb) .row.active button.pbtn,:is(#ss,#sb) .row.active button.pbtn:hover{background-color:var(--acc);color:#111}
@media(max-width:767px){
  :is(#ss,#sb) button.pbtn,:is(#ss,#sb) button.pbtn:focus{width:42px;height:42px}
  :is(#ss,#sb) button.pbtn svg{width:19px;height:19px}
}
@media(max-width:767px){
  :is(#ss,#sb) .row{grid-template-columns:52px 40px minmax(0,1fr)!important;gap:8px}
  :is(#ss,#sb) button.pbtn,:is(#ss,#sb) button.pbtn:focus{width:40px;height:40px}
  :is(#ss) .row .acts .mpill{margin:0 2px;padding:0 8px;min-width:0}
  :is(#ss) .row .acts{gap:2px}
}

/* ---- موبایل: دکمه‌ی پخش مینیمال (بدون دایره) مثل Splice ----
   حالت عادی: آیکون موج صدا؛ در حال پخش: علامت پخش/مکث طلایی */
@media(max-width:767px){
  :is(#ss,#sb) .row{grid-template-columns:52px 30px minmax(0,1fr)!important;gap:10px}
  :is(#ss,#sb) button.pbtn,:is(#ss,#sb) button.pbtn:focus,:is(#ss,#sb) .row:hover button.pbtn,:is(#ss,#sb) button.pbtn:hover,
  :is(#ss,#sb) .row.active button.pbtn,:is(#ss,#sb) .row.active button.pbtn:hover{
    width:30px;height:30px;border-radius:0;background-color:transparent;box-shadow:none;transform:none;color:#a1a1aa}
  :is(#ss,#sb) .row:not(.active) button.pbtn svg{display:none}
  :is(#ss,#sb) .row:not(.active) button.pbtn::before{content:"";display:block;width:22px;height:22px;background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='9' width='2.2' height='6' rx='1.1'/%3E%3Crect x='6.5' y='5.5' width='2.2' height='13' rx='1.1'/%3E%3Crect x='11' y='2' width='2.2' height='20' rx='1.1'/%3E%3Crect x='15.5' y='5.5' width='2.2' height='13' rx='1.1'/%3E%3Crect x='20' y='9' width='2.2' height='6' rx='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='9' width='2.2' height='6' rx='1.1'/%3E%3Crect x='6.5' y='5.5' width='2.2' height='13' rx='1.1'/%3E%3Crect x='11' y='2' width='2.2' height='20' rx='1.1'/%3E%3Crect x='15.5' y='5.5' width='2.2' height='13' rx='1.1'/%3E%3Crect x='20' y='9' width='2.2' height='6' rx='1.1'/%3E%3C/svg%3E") center/contain no-repeat}
  :is(#ss,#sb) .row.active button.pbtn,:is(#ss,#sb) .row.active button.pbtn:hover,:is(#ss,#sb) .row.active button.pbtn:focus{color:var(--acc)}
  :is(#ss,#sb) .row.active button.pbtn svg{width:26px;height:26px;margin:0}
}
/* موبایل: کاور و آیکون پخش دقیقاً هم‌تراز (هر دو وسط ردیف) */
@media(max-width:767px){
  :is(#ss,#sb) .row .cover{grid-row:1/3;align-self:center}
  :is(#ss,#sb) .row .pbtn{grid-row:1/3;align-self:center}
}

/* ---- موبایل (حالت B): آیکون پخش روی خود کاور ---- */
@media(max-width:767px){
  :is(#ss,#sb) .row{grid-template-columns:56px minmax(0,1fr)!important;column-gap:12px}
  :is(#ss,#sb) .row .cover{grid-column:1;grid-row:1/3;align-self:center;width:56px;height:56px}
  :is(#ss,#sb) .row button.pbtn,:is(#ss,#sb) .row button.pbtn:hover,:is(#ss,#sb) .row button.pbtn:focus,
  :is(#ss,#sb) .row.active button.pbtn,:is(#ss,#sb) .row.active button.pbtn:hover,:is(#ss,#sb) .row.active button.pbtn:focus{
    grid-column:1;grid-row:1/3;align-self:center;justify-self:center;z-index:2;width:56px;height:56px;border-radius:8px;
    background-color:rgba(0,0,0,.34);color:#fff;transform:none;box-shadow:none}
  :is(#ss,#sb) .row.active button.pbtn,:is(#ss,#sb) .row.active button.pbtn:hover,:is(#ss,#sb) .row.active button.pbtn:focus{background-color:rgba(0,0,0,.5);color:var(--acc)}
  :is(#ss,#sb) .row .info{grid-column:2}
  :is(#ss,#sb) .row .acts{grid-column:2!important;grid-row:2}
  :is(#ss,#sb) .row .licp{grid-column:1/-1}
}

/* موبایل: کاور تمیز در حالت عادی؛ فقط سمپل در حال پخش علامت طلایی روی کاور دارد */
@media(max-width:767px){
  :is(#ss,#sb) .row:not(.active) button.pbtn,:is(#ss,#sb) .row:not(.active) button.pbtn:hover,:is(#ss,#sb) .row:not(.active) button.pbtn:focus{background-color:transparent}
  :is(#ss,#sb) .row:not(.active) button.pbtn::before{display:none}
}

/* ---- credits bar (top of samples, sticky) ---- */
#ss .credbar{position:sticky;top:12px;z-index:30;display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:10px 12px 10px 10px;border-radius:16px;
  background:rgba(20,20,23,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(214,169,60,.45);box-shadow:0 10px 28px rgba(0,0,0,.35)}
body.admin-bar #ss .credbar{top:44px}
#ss .credbar .cb-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#efc762,#c9962a);color:#111}
#ss .credbar .cb-ic svg{width:19px;height:19px;fill:currentColor}
#ss .credbar .cb-tx{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
#ss .credbar .cb-n{color:#fff;font-size:15px}
#ss .credbar .cb-n i{font-style:normal;font-size:22px;font-weight:800;color:var(--acc);display:inline-block;font-variant-numeric:tabular-nums}
#ss .credbar .cb-tx b{font-weight:700}
#ss .credbar small{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ss .credbar .cb-go{flex:none;height:36px;line-height:36px;padding:0 16px;border-radius:10px;background:var(--acc);color:#111!important;font-weight:700;font-size:13px;text-decoration:none!important}
#ss .credbar.zero{border-color:var(--line)}
#ss .credbar.zero .cb-ic{background:#26262b;color:var(--mut)}
#ss .credbar.zero .cb-n i{color:var(--mut)}
#ss .credbar.sub .cb-tx b{color:var(--acc);font-size:15px}
#ss .credbar.bump .cb-n i{animation:slibBump .5s ease-out}
@keyframes slibBump{0%{transform:scale(1)}30%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
@media(max-width:767px){
  #ss .credbar{top:8px;padding:8px 8px 8px 8px;gap:10px;border-radius:14px}
  body.admin-bar #ss .credbar{top:54px}
  #ss .credbar .cb-ic{width:34px;height:34px;border-radius:10px}
  #ss .credbar .cb-n i{font-size:20px}
  #ss .credbar small{font-size:11px}
  #ss .credbar .cb-go{height:34px;line-height:34px;padding:0 12px;font-size:12.5px}
}

/* ---- follow-to-download modal ---- */
.slib-fg{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.slib-fg.on{opacity:1}
.slib-fg .fg-card{box-sizing:border-box;position:relative;width:100%;font-family:Outfit,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;max-width:400px;padding:26px 22px 22px;border-radius:22px;background:#141417;border:1px solid rgba(214,169,60,.45);box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center;color:#e8e8ec;font-family:inherit;transform:translateY(10px) scale(.98);transition:transform .2s}
.slib-fg.on .fg-card{transform:none}
.slib-fg .fg-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:0;background:#222227;color:#bbb;font-size:12px;cursor:pointer;padding:0}
.slib-fg .fg-ig{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);box-shadow:0 10px 26px rgba(214,36,159,.35)}
.slib-fg .fg-ig svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2}
.slib-fg .fg-ig svg .d{fill:#fff;stroke:none}
.slib-fg h3{margin:0 0 8px;font-size:21px;font-weight:800;color:#fff}
.slib-fg p{margin:0 0 8px;font-size:14px;line-height:1.7;color:#b9b9c1}
.slib-fg p b{color:#d6a93c}
.slib-fg p.fa{font-family:Vazirmatn,Tahoma,sans-serif;color:#d9d9df;margin-bottom:16px}
.slib-fg .fg-go{display:block;height:46px;line-height:46px;border-radius:13px;margin-bottom:10px;font-weight:800;font-size:14.5px;color:#fff!important;text-decoration:none!important;
  background:linear-gradient(90deg,#f58529,#dd2a7b 45%,#8134af 75%,#515bd4)}
.slib-fg .fg-dl{box-sizing:border-box;display:block;width:100%;height:44px;border-radius:13px;border:1px solid #33333a;background:transparent;color:#77777f;font-weight:700;font-size:14px;font-family:inherit;cursor:not-allowed;transition:all .2s}
.slib-fg .fg-dl.ready{background:#d6a93c;border-color:#d6a93c;color:#111;cursor:pointer}
.slib-fg .fg-icons{display:flex;justify-content:center;gap:10px;margin-bottom:14px}
.slib-fg .fg-icons .fg-ig{margin:0}
.slib-fg .fg-yt{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:#ff0033;box-shadow:0 10px 26px rgba(255,0,51,.3)}
.slib-fg .fg-yt svg{width:34px;height:34px}
.slib-fg .fg-yt svg .d{fill:#fff}
.slib-fg .fg-go{position:relative}
.slib-fg .fg-go i{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;line-height:24px;border-radius:50%;background:rgba(255,255,255,.22);font-style:normal;font-size:12px}
.slib-fg .fg-go.yt{background:#ff0033}
.slib-fg .fg-go.did{opacity:.55}
.slib-fg .fg-go.did i{background:#fff;color:#111}
.slib-fg .fg-go.did i::before{content:"✓";position:absolute;inset:0;background:#fff;border-radius:50%}
.slib-fg p.fg-sm{font-size:12.5px;color:#85858e;margin:-2px 0 16px}

/* ==== 3.5: floating glass player (desktop: waveform seek · mobile: compact card) ==== */
:is(#ss,#sb){padding-bottom:110px}
:is(#ss,#sb) .bar.pbar{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:min(1100px,calc(100% - 32px));height:auto;box-sizing:border-box;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;padding:12px 18px;border-radius:20px;
  background:rgba(22,22,26,.86);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:is(#ss,#sb) .bar.pbar{background:#18181c}}
:is(#ss,#sb) .bar.pbar .prog{display:none}
:is(#ss,#sb) .pbar .now{gap:12px}
:is(#ss,#sb) .pbar .now .cover{position:relative;flex:none;width:48px;height:48px;border-radius:12px;background-color:#26262b;box-shadow:0 6px 16px rgba(0,0,0,.4)}
:is(#ss,#sb) .pbar .now .eq{position:absolute;right:4px;bottom:4px;display:flex;gap:2px;align-items:flex-end;height:12px;max-width:none;opacity:0;transition:opacity .2s}
:is(#ss,#sb) .pbar.playing .now .eq{opacity:1}
:is(#ss,#sb) .pbar .now .eq i{width:3px;height:3px;background:var(--acc);border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.6)}
:is(#ss,#sb) .pbar.playing .now .eq i{animation:slibEq 1s infinite ease-in-out}
:is(#ss,#sb) .pbar .now .eq i:nth-child(2){animation-delay:.2s}
:is(#ss,#sb) .pbar .now .eq i:nth-child(3){animation-delay:.4s}
@keyframes slibEq{0%,100%{height:3px}50%{height:12px}}
:is(#ss,#sb) .pbar .ntx{min-width:0;display:flex;flex-direction:column;gap:3px}
:is(#ss,#sb) .pbar .ntx b{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#ss,#sb) .pbar .ntx small{font-size:12px;color:#9b9ba3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#ss,#sb) .pbar .ntx small em{font-style:normal;color:var(--acc);font-weight:600}
:is(#ss,#sb) .pbar .mid{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(520px,44vw)}
:is(#ss,#sb) .pbar .ctrl{gap:14px}
:is(#ss,#sb) .pbar .ctrl button{width:32px;height:32px;color:#c9c9d0}
:is(#ss,#sb) .pbar .ctrl button:hover{color:#fff}
:is(#ss,#sb) .pbar .ctrl svg{width:20px;height:20px}
:is(#ss,#sb) .pbar .ctrl button.pp,:is(#ss,#sb) .pbar .ctrl button.pp:hover,:is(#ss,#sb) .pbar .ctrl button.pp:focus{width:44px;height:44px;border-radius:50%;background-color:var(--acc);color:#111;box-shadow:0 6px 18px rgba(214,169,60,.35)}
:is(#ss,#sb) .pbar .ctrl button.pp:hover{filter:brightness(1.08)}
:is(#ss,#sb) .pbar .seek{display:flex;align-items:center;gap:10px;width:100%;font-size:11px;color:#8a8a93;font-variant-numeric:tabular-nums}
:is(#ss,#sb) .pbar .seek span{flex:none;min-width:30px;text-align:center}
:is(#ss,#sb) .pbar .seek canvas{flex:1;min-width:0;height:30px;cursor:pointer;display:block}
:is(#ss,#sb) .pbar .right{justify-self:end;display:flex;align-items:center;gap:12px;color:#c9c9d0}
:is(#ss,#sb) .pbar .ic,:is(#ss,#sb) .pbar .ic:hover,:is(#ss,#sb) .pbar .ic:focus{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1px solid #2f2f36;background-color:transparent;color:#c9c9d0;padding:0;cursor:pointer;text-decoration:none}
:is(#ss,#sb) .pbar .ic:hover{border-color:var(--acc);color:var(--acc)}
:is(#ss,#sb) .pbar .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(#ss,#sb) .pbar .ic.lk.on{color:var(--acc);border-color:rgba(214,169,60,.55)}
:is(#ss,#sb) .pbar .ic.lk.on svg{fill:currentColor}
:is(#ss,#sb) .pbar .vol{justify-self:auto}
:is(#ss,#sb) .pbar .vol svg{width:18px;height:18px}
:is(#ss,#sb) .pbar .vol input{display:block;width:90px}
@media(max-width:767px){
  :is(#ss,#sb){padding-bottom:96px}
  :is(#ss,#sb) .bar.pbar{bottom:10px;width:calc(100% - 20px);grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:10px 10px 13px;border-radius:18px}
  :is(#ss,#sb) .bar.pbar .prog{display:block;left:16px;right:auto;top:auto;bottom:5px;height:3px;border-radius:3px;width:calc((100% - 32px) * var(--p,0))!important}
  :is(#ss,#sb) .bar.pbar::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:3px;border-radius:3px;background:#2c2c32;z-index:-1}
  :is(#ss,#sb) .pbar .mid{width:auto}
  :is(#ss,#sb) .pbar .seek,:is(#ss,#sb) .pbar .ctrl .pv,:is(#ss,#sb) .pbar .ctrl .nx,:is(#ss,#sb) .pbar .vol,:is(#ss,#sb) .pbar .ic.lk{display:none}
  :is(#ss,#sb) .pbar .ctrl button.pp,:is(#ss,#sb) .pbar .ctrl button.pp:hover,:is(#ss,#sb) .pbar .ctrl button.pp:focus{width:42px;height:42px}
  :is(#ss,#sb) .pbar .now .cover{width:44px;height:44px;border-radius:11px}
  :is(#ss,#sb) .pbar .ic{width:40px;height:40px;border-radius:12px}
}
/* 3.5.1: sleek seek bar instead of a second waveform */
:is(#ss,#sb) .pbar .seek{gap:12px}
:is(#ss,#sb) .pbar .trk{position:relative;flex:1;min-width:0;height:18px;cursor:pointer;touch-action:none}
:is(#ss,#sb) .pbar .trk::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#2f2f36;transition:height .15s,margin .15s}
:is(#ss,#sb) .pbar .trk i{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:calc(var(--p,0) * 100%);border-radius:4px;background:linear-gradient(90deg,#a87b22,var(--acc) 70%,#efc762);box-shadow:0 0 12px rgba(214,169,60,.35);transition:height .15s,margin .15s}
:is(#ss,#sb) .pbar .trk b{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(214,169,60,.28),0 2px 6px rgba(0,0,0,.5);transform:scale(0);transition:transform .15s}
:is(#ss,#sb) .pbar .trk:hover::before,:is(#ss,#sb) .pbar.drag .trk::before,:is(#ss,#sb) .pbar .trk:hover i,:is(#ss,#sb) .pbar.drag .trk i{height:6px;margin-top:-3px}
:is(#ss,#sb) .pbar .trk:hover b,:is(#ss,#sb) .pbar.drag .trk b,:is(#ss,#sb) .pbar.playing .trk b{transform:scale(1)}
:is(#ss,#sb) .pbar .seek span{font-size:11.5px;color:#9b9ba3;letter-spacing:.02em}
/* 3.5.2: desktop waveform seek again + close button */
:is(#ss,#sb) .pbar .seek canvas{flex:1;min-width:0;height:30px;cursor:pointer;display:block;touch-action:none}
:is(#ss,#sb) .pbar .pclose,:is(#ss,#sb) .pbar .pclose:hover,:is(#ss,#sb) .pbar .pclose:focus{position:absolute;top:-10px;right:-10px;z-index:2;width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;background-color:#26262b;border:1px solid #3a3a42;color:#bbb;box-shadow:0 4px 12px rgba(0,0,0,.5);transition:color .15s,border-color .15s}
:is(#ss,#sb) .pbar .pclose:hover{color:#fff;border-color:var(--acc)}
:is(#ss,#sb) .pbar .pclose svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media(max-width:767px){:is(#ss,#sb) .pbar .pclose,:is(#ss,#sb) .pbar .pclose:hover,:is(#ss,#sb) .pbar .pclose:focus{top:-9px;right:-6px;width:24px;height:24px}}
/* 3.5.3: played part of waveforms = white (calmer than gold) */
:is(#ss,#sb){--wf-played:#f4f4f6}
@media(max-width:767px){:is(#ss,#sb) .bar.pbar .prog{background:#f4f4f6}}
/* 3.5.4: white play button + volume; waveform seek on mobile too */
:is(#ss,#sb) .pbar .ctrl button.pp,:is(#ss,#sb) .pbar .ctrl button.pp:hover,:is(#ss,#sb) .pbar .ctrl button.pp:focus{background-color:#f4f4f6;color:#111;box-shadow:0 6px 18px rgba(255,255,255,.12)}
:is(#ss,#sb) .pbar .vol input{accent-color:#f4f4f6}
:is(#ss,#sb) .pbar .vol{color:#c9c9d0}
@media(max-width:767px){
  :is(#ss,#sb) .bar.pbar{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"now ctrl right" "seek seek seek";row-gap:8px;padding:10px 12px 8px}
  :is(#ss,#sb) .bar.pbar .now{grid-area:now}
  :is(#ss,#sb) .bar.pbar .mid{display:contents}
  :is(#ss,#sb) .bar.pbar .ctrl{grid-area:ctrl}
  :is(#ss,#sb) .bar.pbar .right{grid-area:right}
  :is(#ss,#sb) .bar.pbar .seek{grid-area:seek;display:flex;gap:8px}
  :is(#ss,#sb) .bar.pbar .seek span{min-width:26px;font-size:10.5px}
  :is(#ss,#sb) .bar.pbar .seek canvas{height:28px}
  :is(#ss,#sb) .bar.pbar .prog,:is(#ss,#sb) .bar.pbar::after{display:none}
  :is(#ss,#sb){padding-bottom:130px}
}
/* 3.5.5: softer play/volume (text colour, no glow); mobile = slim seek bar + prev/next, no waveform */
:is(#ss,#sb) .pbar .ctrl button.pp,:is(#ss,#sb) .pbar .ctrl button.pp:hover,:is(#ss,#sb) .pbar .ctrl button.pp:focus{background-color:#cfcfd6;color:#141417;box-shadow:none}
:is(#ss,#sb) .pbar .ctrl button.pp:hover{background-color:#dcdce2;filter:none}
:is(#ss,#sb) .pbar .vol input{accent-color:#a9a9b2}
:is(#ss,#sb) .pbar .mtrk{display:none}
:is(#ss,#sb) .pbar .trk i{background:#cfcfd6;box-shadow:none}
:is(#ss,#sb) .pbar .trk b{background:#e6e6ea;box-shadow:0 1px 4px rgba(0,0,0,.5)}
@media(max-width:767px){
  :is(#ss,#sb) .bar.pbar .seek canvas{display:none}
  :is(#ss,#sb) .bar.pbar .mtrk{display:block;height:22px}
  :is(#ss,#sb) .bar.pbar .ctrl .pv,:is(#ss,#sb) .bar.pbar .ctrl .nx{display:grid;width:34px;height:34px}
  :is(#ss,#sb) .bar.pbar .ctrl{gap:4px}
  :is(#ss,#sb) .bar.pbar .now .ntx small{max-width:120px}
  :is(#ss,#sb){padding-bottom:120px}
}
/* 3.5.6: player hidden until something plays, then slides up */
:is(#ss,#sb) .bar.pbar:not(.off){animation:slibBarUp .28s cubic-bezier(.2,.8,.2,1)}
@keyframes slibBarUp{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}

/* ==== 3.6: Splice-style docked player — slim line, plain play icon, doesn't cover content ==== */
:is(#ss,#sb){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
:is(#ss,#sb) .bar.pbar{left:0;right:0;bottom:0;transform:none;width:auto;border-radius:0;border:0;border-top:1px solid #2a2a30;
  padding:10px 56px calc(10px + env(safe-area-inset-bottom,0px)) 18px;gap:18px;background:rgba(20,20,23,.94);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
:is(#ss,#sb) .bar.pbar:not(.off){animation:slibDock .25s cubic-bezier(.2,.8,.2,1)}
@keyframes slibDock{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
/* plain play icon, no circle */
:is(#ss,#sb) .pbar .ctrl button.pp,:is(#ss,#sb) .pbar .ctrl button.pp:hover,:is(#ss,#sb) .pbar .ctrl button.pp:focus{width:40px;height:40px;border-radius:0;background-color:transparent;color:#e4e4e8;box-shadow:none}
:is(#ss,#sb) .pbar .ctrl button.pp svg{width:30px;height:30px}
:is(#ss,#sb) .pbar .ctrl button.pp:hover{color:#fff}
:is(#ss,#sb) .pbar .ctrl{gap:10px}
:is(#ss,#sb) .pbar .ctrl button{color:#bdbdc4}
/* line instead of waveform on desktop too */
:is(#ss,#sb) .pbar .seek canvas{display:none!important}
:is(#ss,#sb) .pbar .mtrk{display:block;height:18px}
:is(#ss,#sb) .pbar .mid{gap:4px}
/* close button inside the bar */
:is(#ss,#sb) .pbar .pclose,:is(#ss,#sb) .pbar .pclose:hover,:is(#ss,#sb) .pbar .pclose:focus{top:50%;right:14px;margin-top:-13px;background-color:transparent;border:1px solid #33333a;box-shadow:none}
:is(#ss,#sb) .pbar .now .cover{width:44px;height:44px;border-radius:8px}
@media(max-width:767px){
  :is(#ss,#sb){padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  :is(#ss,#sb) .bar.pbar{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"now ctrl right";row-gap:0;gap:8px;
    padding:8px 44px calc(8px + env(safe-area-inset-bottom,0px)) 10px;border-radius:0}
  :is(#ss,#sb) .bar.pbar .seek{position:absolute;left:0;right:0;top:-9px;display:block;height:18px;z-index:2}
  :is(#ss,#sb) .bar.pbar .seek span{display:none}
  :is(#ss,#sb) .bar.pbar .mtrk{position:absolute;inset:0;height:18px}
  :is(#ss,#sb) .bar.pbar .mtrk::before,:is(#ss,#sb) .bar.pbar .mtrk i{height:3px;margin-top:-1.5px;border-radius:0}
  :is(#ss,#sb) .bar.pbar .mtrk b{transform:scale(0)}
  :is(#ss,#sb) .bar.pbar.drag .mtrk b{transform:scale(1)}
  :is(#ss,#sb) .pbar .now .cover{width:40px;height:40px;border-radius:7px}
  :is(#ss,#sb) .pbar .ctrl button.pp,:is(#ss,#sb) .pbar .ctrl button.pp:hover,:is(#ss,#sb) .pbar .ctrl button.pp:focus{width:38px;height:38px}
  :is(#ss,#sb) .pbar .ctrl button.pp svg{width:28px;height:28px}
  :is(#ss,#sb) .bar.pbar .ctrl .pv,:is(#ss,#sb) .bar.pbar .ctrl .nx{width:32px;height:32px}
  :is(#ss,#sb) .pbar .ic{width:36px;height:36px;border-radius:10px}
  :is(#ss,#sb) .pbar .pclose,:is(#ss,#sb) .pbar .pclose:hover,:is(#ss,#sb) .pbar .pclose:focus{right:8px;width:26px;height:26px}
}