.player-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 30rpx 60rpx;
  overflow: hidden;
  background: linear-gradient(160deg, #42a4fc 0%, #7fc8ff 28%, #f4f8fc 64%, #f7f7f7 100%);
}

.player-card {
  margin-top: 38rpx;
  padding: 66rpx 34rpx 54rpx;
  border: 1rpx solid rgba(255, 255, 255, .75);
  border-radius: 36rpx;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24rpx 60rpx rgba(35, 116, 180, .18);
  text-align: center;
}

.record-wrap {
  width: 330rpx;
  height: 330rpx;
  margin: 0 auto 52rpx;
  padding: 18rpx;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(251, 183, 22, .16);
  box-shadow: 0 18rpx 38rpx rgba(48, 66, 84, .2);
}

.record {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #2d3741 0, #2d3741 10rpx, #202832 11rpx, #202832 17rpx);
}

.record-playing .record { animation: recordRotate 7s linear infinite; }
.record-line { position: absolute; border: 2rpx solid rgba(255, 255, 255, .2); border-radius: 50%; }
.line-one { width: 210rpx; height: 210rpx; }
.line-two { width: 150rpx; height: 150rpx; }
.record-core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108rpx;
  height: 108rpx;
  border: 12rpx solid #f7c143;
  border-radius: 50%;
  background: #fbb716;
}
.record-note { color: #fff; font-size: 52rpx; line-height: 1; }

@keyframes recordRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.song-name {
  min-height: 58rpx;
  overflow: hidden;
  color: #1d2a36;
  font-size: 42rpx;
  font-weight: 600;
  line-height: 58rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-count { margin-top: 10rpx; color: #96a0aa; font-size: 24rpx; }
.progress-area { margin-top: 70rpx; }
.progress-slider { margin: 0 -16rpx; }
.time { display: flex; justify-content: space-between; margin-top: 18rpx; color: #87929d; font-size: 25rpx; }

.btnlist { display: flex; align-items: center; justify-content: space-between; margin-top: 58rpx; }
.play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 142rpx;
  height: 142rpx;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffd052, #f5a900);
  box-shadow: 0 16rpx 30rpx rgba(251, 183, 22, .35);
}
.switch-icon { width: 62rpx; height: 62rpx; padding: 12rpx; }
.tool-button { display: flex; flex-direction: column; align-items: center; min-width: 72rpx; color: #7e8994; font-size: 21rpx; }
.tool-icon { width: 50rpx; height: 50rpx; margin-bottom: 5rpx; }

.playlist-mask {
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(13, 26, 39, .48);
}
.playlist-mask-enter { animation: maskFadeIn 240ms ease-out both; }
.playlist-mask-leave { animation: maskFadeOut 240ms ease-in both; }
.playlist-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 38rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
  border-radius: 34rpx 34rpx 0 0;
  background: #fff;
  box-shadow: 0 -16rpx 50rpx rgba(18, 43, 65, .15);
}
.playlist-panel-enter { animation: playlistSlideUp 300ms cubic-bezier(.22, .8, .3, 1) both; }
.playlist-panel-leave { animation: playlistSlideDown 240ms ease-in both; }

@keyframes maskFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes maskFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes playlistSlideUp {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes playlistSlideDown {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 100%, 0); }
}
.playlist-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx 28rpx; }
.playlist-title { color: #172532; font-size: 36rpx; font-weight: 600; }
.playlist-subtitle { margin-top: 6rpx; color: #9aa4ad; font-size: 24rpx; }
.close-button { width: 64rpx; color: #8c969f; font-size: 48rpx; font-weight: 300; line-height: 64rpx; text-align: center; }
.playlist-scroll { max-height: 650rpx; }
.playlist-item { display: flex; align-items: center; min-height: 96rpx; padding: 0 22rpx; border-radius: 18rpx; color: #34424e; }
.playlist-active { color: #eaa400; background: #fff8e8; }
.song-index { width: 52rpx; flex-shrink: 0; color: #a0a9b2; font-size: 26rpx; text-align: left; }
.playlist-active .song-index { color: #f1ac00; }
.playlist-name { overflow: hidden; flex: 1; font-size: 29rpx; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.playing-label { margin-left: 20rpx; color: #f1ac00; font-size: 22rpx; }
.empty-list { padding: 100rpx 0; color: #a0a9b2; font-size: 28rpx; text-align: center; }