/* MUSIC FOLDER — on-demand | исходник: 3928..4038 */

/* ═══ On-demand панель (трек из рейтинга / истории) ═══ */
.od-panel{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:317;
width:min(720px,calc(100% - 24px));border-radius:20px;border:1px solid rgba(255,255,255,.10);
--od-glow:0;
background:linear-gradient(180deg,rgba(18,20,38,.97),rgba(10,11,22,.98));
box-shadow:
0 0 0 1px rgba(0,0,0,.4),
0 24px 70px -18px rgba(0,0,0,.92),
0 0 calc(20px + var(--od-glow)*40px) -6px color-mix(in srgb,var(--c1) 50%,transparent),
0 0 calc(50px + var(--od-glow)*90px) -14px color-mix(in srgb,var(--c2) 38%,transparent);
backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
animation:odIn .4s cubic-bezier(.2,.9,.25,1.1);
touch-action:pan-x;
padding:16px 18px 14px;
display:flex;flex-direction:column;gap:10px}
@keyframes odIn{from{opacity:0;transform:translateX(-50%) translateY(34px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* радарные кольца в момент открытия */
.od-ring{position:absolute;inset:-7px;border-radius:29px;pointer-events:none;opacity:0;z-index:3}
.od-panel.od-attention .od-ring{animation:odPing 1.25s ease-out 3}
@keyframes odPing{0%{opacity:0;box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 75%,transparent)}30%{opacity:1}100%{opacity:0;box-shadow:0 0 0 30px transparent}}
/* яркий проблеск по рамке: пролетает ОДИН раз при открытии панели */
.od-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:4}
.od-shine::after{content:"";position:absolute;top:-20%;bottom:-20%;width:34%;left:-45%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
transform:skewX(-18deg);opacity:0}
.od-panel.od-attention .od-shine::after{animation:odSweep 1.1s cubic-bezier(.4,0,.2,1) .15s 1}
@keyframes odSweep{0%{left:-45%;opacity:1}100%{left:115%;opacity:1}}
/* чип «играет трек из подборки» */
.od-chip{position:absolute;top:-14px;left:18px;z-index:6;max-width:calc(100% - 80px);overflow:hidden;
display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
background:linear-gradient(135deg,var(--c1),var(--c2));color:#070810;
font-size:11px;font-weight:800;letter-spacing:.04em;white-space:nowrap;
box-shadow:0 8px 24px -6px color-mix(in srgb,var(--c1) 70%,transparent),0 0 14px -2px color-mix(in srgb,var(--c2) 50%,transparent);
animation:chipIn .5s cubic-bezier(.2,1.5,.35,1)}
@keyframes chipIn{from{opacity:0;transform:translateX(-50%) translateY(12px) scale(.7)}}
.od-chip-eq{display:inline-flex;gap:2.5px;align-items:flex-end;height:11px}
.od-chip-eq i{width:2.5px;background:#070810;border-radius:2px;animation:eqk .85s ease-in-out infinite}
.od-chip-eq i:nth-child(2){animation-delay:.18s}
.od-chip-eq i:nth-child(3){animation-delay:.36s}
.od-seekrow{display:flex;align-items:center;gap:10px;padding:0 40px 0 0;position:relative;z-index:1}
.od-seekrow .od-time{font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px}
.od-seekrow .od-time:last-child{text-align:right}
.od-seekwrap{position:relative;flex:1;min-width:0;display:flex;align-items:center}
#odSeek{flex:1;width:100%;min-width:0;height:16px;border-radius:999px}
/* сердечки лайков над шкалой on-demand плеера */
.od-hearts{position:absolute;left:2px;right:2px;top:-17px;height:18px;pointer-events:none;z-index:2}
.od-heart{position:absolute;top:0;width:12px;height:12px;transform:translateX(-50%);opacity:.65;transition:opacity .3s,transform .3s;filter:drop-shadow(0 0 4px rgba(255,68,102,.6))}
.od-heart svg{width:100%;height:100%;fill:#ff4466;display:block}
.od-heart-count{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:9px;line-height:1;font-weight:800;color:#ff4466;white-space:nowrap;text-shadow:0 0 4px rgba(0,0,0,.9)}
.od-seekrow:hover .od-heart{opacity:.95}
.od-body{display:grid;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto;gap:8px 14px;align-items:center;position:relative;z-index:1;padding:0}
.od-cover{grid-row:1/3;grid-column:1}
.od-meta{grid-row:1/3;grid-column:2}
.od-ctrls{grid-row:1;grid-column:3;display:flex;align-items:center;gap:8px}
.od-vol{grid-row:2;grid-column:3;display:flex;align-items:center;gap:8px}
.od-extra{grid-row:2;grid-column:3;display:none}
.od-side{grid-row:1;grid-column:3;display:none}
.od-cover{position:relative;flex:none;width:52px;height:52px;border-radius:12px;overflow:hidden;display:grid;place-items:center;
background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 35%,transparent),color-mix(in srgb,var(--c2) 35%,transparent));
transition:box-shadow .4s;box-shadow:0 4px 16px -4px rgba(0,0,0,.5)}
.od-cover::before{content:"♪";position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:rgba(255,255,255,.85)}
.od-cover img{position:relative;width:100%;height:100%;object-fit:cover;display:block}
body.od-playing .od-cover{box-shadow:0 0 26px -4px color-mix(in srgb,var(--c1) 65%,transparent)}
/* кольцо при «приземлении» летящей обложки + смена трека */
.od-cover::after{content:"";position:absolute;inset:-5px;border-radius:19px;pointer-events:none;
border:2px solid color-mix(in srgb,var(--c2) 85%,transparent);opacity:0}
.od-cover.pulse::after{animation:odLand .7s ease-out}
@keyframes odLand{0%{opacity:.95;transform:scale(.75)}100%{opacity:0;transform:scale(1.4)}}
.od-cover.swap img{animation:odSwapImg .5s ease}
@keyframes odSwapImg{0%{opacity:0;transform:scale(.65)}100%{opacity:1;transform:scale(1)}}
.od-meta{flex:1;min-width:0}
.od-meta b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden}
.od-t-in{display:inline-block;white-space:nowrap}
.od-meta b.marquee .od-t-in{animation:scrollT var(--dur,12s) linear infinite}
.od-meta span{display:block;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-ctrls{display:flex;align-items:center;gap:8px;flex:none}
.od-ctrls .od-like{margin-left:6px}
.cbtn.od-sm{width:40px;height:40px}
.od-play{position:relative;flex:none;width:54px;height:54px;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 10px 30px -8px color-mix(in srgb,var(--c1) 65%,transparent);transition:transform .2s}
.od-play:hover{transform:scale(1.07)}
.od-play:active{transform:scale(.94)}
.od-play .spin{position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:#fff;opacity:0;animation:rot 1s linear infinite;transition:opacity .2s}
.od-play.loading .spin{opacity:.9}
/* громкость в on-demand панели (синхронизирована с основной) */
.od-vol{display:flex;align-items:center;gap:9px;flex:none}
.od-vol input[type=range]{width:92px}
/* дополнительные кнопки on-demand: Bass Boost, таймер сна, поделиться */
.od-extra{display:flex;align-items:center;gap:8px;flex:none}
.od-extra .cbtn.od-sm{width:38px;height:38px}
.od-extra .bass-btn{width:38px;height:38px;border-radius:50%}
.od-side{display:inline-flex;align-items:center;gap:6px;flex:none}
.od-like{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:var(--glass);
border:1px solid var(--line);color:var(--text);font-weight:800;font-size:12.5px;cursor:pointer;
transition:color .2s,border-color .2s,background .2s,transform .2s;font-variant-numeric:tabular-nums;font-family:var(--fb)}
.od-like:hover{border-color:rgba(255,68,102,.4);background:rgba(255,68,102,.08);transform:translateY(-1px)}
.od-like svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:fill .25s,stroke .25s,transform .3s}
.od-like.liked{color:#ff4466;border-color:rgba(255,68,102,.4);background:rgba(255,68,102,.1)}
.od-like.liked svg{fill:#ff4466;stroke:#ff4466;animation:heartPop .45s cubic-bezier(.2,.8,.2,1)}
.od-like.pop{animation:topLikePop .55s cubic-bezier(.2,.9,.3,1.4)}
.od-rankline{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.03em;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:.8}
.od-close{position:absolute;top:10px;right:10px;z-index:20;width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--muted);
display:grid;place-items:center;cursor:pointer;
transition:color .2s,border-color .2s,transform .25s,background .2s,box-shadow .25s}
.od-close:hover{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.14);
box-shadow:0 0 16px -4px color-mix(in srgb,var(--c2) 50%,transparent)}
.od-close svg{transition:transform .25s ease}
.od-close:hover svg{transform:rotate(90deg)}
.od-close:active{transform:scale(.88)}