.player,.player_seek{width:100%;position:fixed;left:0;right:0;height:5px;transition:height .18s ease;}.player_seek:hover{height:15px;}.player_seek .bg{position:absolute;width:0;height:100%;background:#607d8b5e}.player_seek{bottom:60px;background:#e7e7e7;display:flex;flex-direction:row;justify-content:space-between;min-height:6px;height:auto}.player,.player_wrap{height:60px;bottom:0;display:flex;background:#fff}.player{justify-content:space-between}.player_left,.player_right{display:flex}.curr_time,.duration{position:absolute;z-index:10;margin-top:3px;font-size:.9em}.player_wrap,.rel{position:relative}.curr_time{margin-left:13px}.duration{right:13px}.controls>.fa{cursor:pointer;margin-right:14px}.controls>.fa:before{color:#607d8b;font-size:25px}.controls.small>.fa:before{font-size:20px}.controls{margin:16px}.controls>.hover.fa:before,.controls>.selected.fa:before{color:#3f525b}.controls_title{margin:22px}.player_label,.player_title{cursor:pointer;font-weight:500;max-width:500px;color:#474747;padding:20px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player_wrap{justify-content:space-between;width:100%;max-width:1000px;margin:auto}@media (max-width:360px){.controls{margin-left:5px}}@media (max-width:640px){.left .controls.small,.nonmobile,.player_title,.sound_date,.sound_time{display:none}}@media (max-width: 640px) {.volume_wrap{display:none}}.volume_wrap>.fa-volume-up::before{color:#607d8b;font-size:26px}.player .fa-list-ul::before{font-size:24px!important}.vol_cont{position:absolute;bottom:calc(100%);background:#fff;height:100px;width:30px;box-shadow:0 0 10px rgba(0,0,0,.3)}.progress_cont{width:10px;height:80px;margin:10px;background:#afafaf;transform:rotate(180deg)}.progress_seek{width:100%;height:0;background:#607d8b}

/* по умолчанию скрыто */
.player_seek .curr_time,
.player_seek .duration{
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}

/* при наведении на таймбар */
.player_seek:hover .curr_time,
.player_seek:hover .duration{
  opacity:1;
}
.player_playlist{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:60px;
  width:100vw;
  background:#fff;
  color:#111827;
  z-index:9999;
  display:flex;
  flex-direction:column;
  border-bottom:1px solid #e5e7eb;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
  animation:playlistFade .18s ease;
}

.player_playlist_list{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:16px 0;
  background:#fff;
}

.player_playlist_list_el{
  padding:14px 18px;
  border-bottom:1px solid #eef2f5;
  min-height:56px;
  font-weight:500;
  color:#374151;
  background:#fff;
}

.player_playlist_list_el:hover{
  background:#f3f6f9;
}

/* базовая подсветка выбранного */
.player_playlist_list_el_current{
  background:#e8f0fe;
  color:#2563eb;
  position:relative;
  padding-left:40px;
}

/* ===== PLAY (спектрум) ===== */
.player_playlist_list_el_playing::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  display:block;
  background:linear-gradient(to top,#2563eb 0 2px,transparent 2px),
             linear-gradient(to top,#2563eb 0 6px,transparent 6px),
             linear-gradient(to top,#2563eb 0 10px,transparent 10px);
  background-size:3px 100%,3px 100%,3px 100%;
  background-position:0 100%,5px 100%,10px 100%;
  background-repeat:no-repeat;
  animation:playlistEq 1s infinite ease-in-out;
}

/* ===== LOAD (spinner) ===== */
.player_playlist_list_el_loading::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  border:2px solid #93c5fd;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:playlistSpin 0.8s linear infinite;
}

/* спектрум анимация */
@keyframes playlistEq{
  0%{background-size:3px 20%,3px 60%,3px 40%}
  25%{background-size:3px 60%,3px 30%,3px 70%}
  50%{background-size:3px 30%,3px 80%,3px 40%}
  75%{background-size:3px 70%,3px 40%,3px 60%}
  100%{background-size:3px 20%,3px 60%,3px 40%}
}

/* spinner */
@keyframes playlistSpin{
  to{transform:translateY(-50%) rotate(360deg)}
}
.player_playlist_close{
  position:absolute;
  top:16px;
  right:16px;
  font-size:22px;
  color:#9ca3af;
  cursor:pointer;
}
.item-play .icon-pause,
.item-play .icon-load{
  display:none;
}

.item-play.playing .icon-play{display:none;}
.item-play.playing .icon-pause{display:inline-flex;}

.item-play.loading .icon-play,
.item-play.loading .icon-pause{
  display:none;
}

.item-play.loading .icon-load{
  display:inline-flex;
}

.spin{
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
/* базово */
.item-play .icon-play{display:inline-flex;}
.item-play .icon-pause,
.item-play .icon-load{display:none;}

/* playing */
.item-play.playing .icon-play{display:none !important;}
.item-play.playing .icon-pause{display:inline-flex !important;}

/* loading */
.item-play.loading .icon-play,
.item-play.loading .icon-pause{display:none !important;}
.item-play.loading .icon-load{display:inline-flex !important;}

/* круг кнопки */
.item-ctrl.item-play{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative;
}

/* контейнер иконок */
.item-play .icon{

  align-items:center;
  justify-content:center;
}

/* svg */
.item-play svg{
  width:16px;
  height:16px;
  display:block;
}
@media(max-width:640px){

  .player_title{
    display:flex!important;
    flex-direction:column;
    max-width:160px;
    overflow:hidden;
  }

  .player_title_track,
  .player_title_artist{
    overflow:hidden;
    white-space:nowrap;
  }

  .player_title_track_text,
  .player_title_artist_text{
    display:inline-block;
    white-space:nowrap;
  }

}
@media(max-width:640px){
  .player_left{min-width:0}
  .player_title{min-width:0;flex:1 1 auto}
}
  .player_title_track{font-size:13px;font-weight:600;color:#111827}
  .player_title_artist{font-size:12px;color:#6b7280}
}
.player_left{min-width:0}
.player_title{min-width:0;flex:1 1 auto;overflow:hidden}
.player_title_track,
.player_title_artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player_full{
position:fixed;
inset:0;
background:#111827;
color:#fff;
z-index:99999;
display:flex;
justify-content:center;
transform:translateY(100%);
transition:transform .35s cubic-bezier(.22,.8,.25,1);
will-change:transform;
pointer-events:none;
}

.player_full.open{
transform:translateY(0);
pointer-events:auto;
}

.player_full.dragging{
transition:none!important;
}

.player_full_inner{
width:100%;
max-width:420px;
padding:20px 22px 40px;
display:flex;
flex-direction:column;
align-items:center;
}

.player_full_close{
align-self:flex-start;
cursor:pointer;
opacity:.8;
margin-bottom:10px;
}

.player_full_close svg{
width:28px;
height:28px;
display:block;
fill:#fff;
}

.player_full_cover img{
width:100%;
border-radius:16px;
margin:10px 0 20px;
}

.player_full_title{
font-size:22px;
font-weight:700;
text-align:center;
margin-bottom:4px;
}

.player_full_artist{
font-size:14px;
opacity:.7;
margin-bottom:20px;
}

.player_full_seek{
width:100%;
height:4px;
background:#374151;
border-radius:4px;
overflow:hidden;
margin:10px 0 6px;
}

.player_full_seek_prog{
height:100%;
background:#22d3ee;
}

.player_full_time{
width:100%;
display:flex;
justify-content:space-between;
font-size:12px;
opacity:.7;
margin-bottom:30px;
}

.player_full_controls{
display:flex;
align-items:center;
gap:36px;
}

.player_full_controls .icon{
cursor:pointer;
opacity:.9;
display:flex;
align-items:center;
justify-content:center;
}

.player_full_controls svg{
width:28px;
height:28px;
display:block;
fill:currentColor;
}

.player_full_controls .big svg{
width:44px;
height:44px;
}
.player_full_handle{
width:36px;
height:4px;
border-radius:3px;
background:#9ca3af;
opacity:.6;
margin:6px 0 10px;
}

.player_full{
touch-action:none;
}

.player_full.dragging{
transition:none!important;
}
.player{touch-action:none}
.spinner_ajax{position:absolute;left:calc(50% - 20px);width:40px;top:70px}.main.fx-1{position:relative}.tip_add_artist,.tip_add_sound{position:absolute;background-color:#2196f3;color:#fff;padding:21px;min-width:177px;left:-64px;margin-top:10px;z-index:1000}.tip_add_artist{left:45px}.tip_add_artist:before,.tip_add_sound:before{content:'';position:absolute;top:-5px;right:79px;width:10px;height:10px;background-color:#2196f3;transform:rotate(45deg)}.tip_add_artist:before{right:99px}.tip_add_sound_btn{display:flex;justify-content:center;align-items:center;height:40px;margin-top:15px;border-radius:3px;background-color:#ffec54;padding:0 20px}