/* MUSIC FOLDER — likes | исходник: 3624..3666 */

/* ═══ кнопка лайка ═══ */
.heart-btn{position:relative}
.heart-btn svg{transition:fill .25s,stroke .25s,transform .3s}
.heart-btn.liked svg{fill:#ff4466!important;stroke:#ff4466!important;animation:heartPop .45s cubic-bezier(.2,.8,.2,1)}
.heart-btn.liked{border-color:rgba(255,68,102,.35);background:rgba(255,68,102,.08)}
.heart-btn.pop{animation:topLikePop .55s cubic-bezier(.2,.9,.3,1.4)}
@keyframes heartPop{0%{transform:scale(1)}25%{transform:scale(1.35)}50%{transform:scale(.92)}75%{transform:scale(1.1)}100%{transform:scale(1)}}
.heart-btn .like-burst{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,68,102,.5);opacity:0;pointer-events:none}
.heart-btn.liked .like-burst{animation:burstRing .6s ease-out}
@keyframes burstRing{from{transform:scale(.7);opacity:.8}to{transform:scale(1.6);opacity:0}}
.playbtn{position:relative;width:82px;height:82px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;color:#0b0c14;
background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 42%),linear-gradient(135deg,var(--c1),var(--c2));
box-shadow:0 14px 44px -8px color-mix(in srgb,var(--c1) 65%,transparent),0 0 34px -6px color-mix(in srgb,var(--c2) 50%,transparent);
transition:transform .2s,box-shadow .3s}
.playbtn::before{content:"";position:absolute;inset:-12px;border-radius:50%;pointer-events:none;
border:2px dashed color-mix(in srgb,var(--c2) 50%,transparent);opacity:0;transition:opacity .6s;
animation:rot 16s linear infinite;}
body.playing .playbtn::before{opacity:.7;}
.playbtn:hover{transform:scale(1.06)}
.playbtn:active{transform:scale(.95)}
.playbtn .spin{position:absolute;inset:-7px;border-radius:50%;border:2px solid transparent;border-top-color:#fff;opacity:0;animation:rot 1s linear infinite;transition:opacity .2s}
.playbtn.loading .spin{opacity:.9}
.playbtn.attract::after{content:"";position:absolute;inset:-4px;border-radius:50%;
border:2px solid color-mix(in srgb,var(--c2) 70%,transparent);animation:ring 2.2s ease-out infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.55);opacity:0}}
.vol{display:flex;align-items:center;gap:11px;margin:0 auto}
.vbtn{background:none;border:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:6px;transition:color .2s,transform .15s}
.vbtn:hover{color:var(--text)}
.vbtn:active{transform:scale(.88)}
/* заглушено — колонка красная */
.vbtn.is-muted{color:#ff6b6b}
.vbtn.is-muted:hover{color:#ff8f8f}
input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:4px;border-radius:999px;background:rgba(255,255,255,.14);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 10px color-mix(in srgb,var(--c2) 80%,transparent)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:none}
#odSeek{height:6px}
#odSeek::-webkit-slider-thumb{width:20px;height:20px;box-shadow:0 0 14px color-mix(in srgb,var(--c2) 90%,transparent),0 2px 8px rgba(0,0,0,.6);margin-top:-7px}
#odSeek::-moz-range-thumb{width:20px;height:20px;box-shadow:0 0 14px color-mix(in srgb,var(--c2) 90%,transparent),0 2px 8px rgba(0,0,0,.6)}
.empty-panel{text-align:center;padding:44px 20px 52px}
.empty-panel .big{font-size:48px;margin-bottom:16px}
.empty-panel h3{font-family:var(--fd);font-weight:700;font-size:22px;margin-bottom:12px}
.empty-panel p{color:var(--muted);max-width:440px;margin:0 auto}