/* MaterialDesignIcons.com */
@font-face {font-family:"Material Design Icons";src:url("https://cdn.bootcdn.net/ajax/libs/MaterialDesign-Webfont/2.4.85/fonts/materialdesignicons-webfont.eot");src:url("https://cdn.bootcdn.net/ajax/libs/MaterialDesign-Webfont/2.4.85/fonts/materialdesignicons-webfont.eot") format("embedded-opentype"),url("https://cdn.bootcdn.net/ajax/libs/MaterialDesign-Webfont/2.4.85/fonts/materialdesignicons-webfont.woff2") format("woff2"),url("https://cdn.bootcdn.net/ajax/libs/MaterialDesign-Webfont/2.4.85/fonts/materialdesignicons-webfont.woff") format("woff"),url("https://cdn.bootcdn.net/ajax/libs/MaterialDesign-Webfont/2.4.85/fonts/materialdesignicons-webfont.ttf") format("truetype"),url("https://cdn.bootcdn.net/ajax/libs/MaterialDesign-Webfont/2.4.85/fonts/materialdesignicons-webfont.svg") format("svg");font-weight:normal;font-style:normal}
.lkicon {display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0,0)}
.lkicon-chevron-down:before {content:"\F140"}
.lkicon-pause:before {content:"\F3E4"}
.lkicon-skip-next:before {content:"\F4AD"}
.lkicon-skip-next-circle:before {content:"\F661"}
.lkicon-skip-next-circle-outline:before {content:"\F662"}
.lkicon-skip-previous:before {content:"\F4AE"}
.lkicon-skip-previous-circle:before {content:"\F663"}
.lkicon-skip-previous-circle-outline:before {content:"\F664"}
.lkicon-play:before {content:"\F40A"}
.lkicon-volume-high:before {content:"\F57E"}
/* 底部播放器样式 */
.box {max-width:90%;width:calc(100% - 40px);margin:auto;}
.music-player {position:fixed;bottom:0;left:0;width:100%;transition:all 0.3s ease;z-index:999;}
.toggle-player {position:absolute;bottom:88px;right:15px;background:#0d0d0d;border:none;color:#fff;cursor:pointer;font-size:2.2em;width:35px;height:35px;border-radius:5px 5px 0 0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(0,0,0,0.3);z-index:10;transition:all 0.3s ease;}
.toggle-player:hover {color:#db1d40;}
.music-player.collapsed .toggle-player {bottom:0;}
.music-player.collapsed .toggle-player i {transform:rotate(180deg);}
.player-content {background-color:#0d0d0d;color:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.3);display:flex;flex-direction:column;transition:all 0.3s ease;transform:translateY(0);opacity:1;}
.music-player.collapsed .player-content {transform:translateY(100%);opacity:0;}
.progres-container-top {width:90%;margin: auto;}
.progres-bar {height:7px;background-color:#535353;cursor:pointer;position:relative;border-radius: 10px;margin-top: 7px;}
.progres {height:100%;background-color:#378dee;width:0%;transition:width 0.1s linear;border-radius: 10px;}
.player-container {display:flex;justify-content:space-between;align-items:center;padding:7px 0px;}
.player-left {display:flex;align-items:center;width:40%;}
.album-cover {width:60px;height:60px;margin-right:15px;overflow:hidden;border-radius:4px;}
.album-cover img {width:100%;height:100%;object-fit:cover;}
.song-info {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;align-items:flex-start;}
.song-title {font-weight:600;margin-bottom:3px;font-size:16px;}
.song-artist {font-size:12px;color:#b3b3b3;}
.player-center {width:20%;display:flex;justify-content:center;}
.control-buttons {display:flex;align-items:center;}
.control-btn {background:none;border:none;color:#fff;cursor:pointer;margin:0 5px;font-size:1.2em;transition:all 0.2s ease;}
.control-btn:hover {color:#ffffff;background:#00BFFF;}
.play-btn {width:50px;height:50px;background:#379aec;border-radius:50%;}
.play-btn i,.prev-btn i,.next-btn i {font-size:28px;}
.player-right {width:40%;display:flex;align-items:center;justify-content:flex-end;}
.time-display {display:flex;align-items:center;font-size:14px;margin-right:15px;}
.time-display span {margin:0 3px;}
.volume-control {display:flex;align-items:center;}
.volume-btn {background:none;border:none;color:#fff;cursor:pointer;margin-right:0px;font-size:20px;}
.volume-slider {width:100px;}
.volume-slider input {width:100%;-webkit-appearance:none;height:4px;background:#535353;border-radius:2px;outline:none;margin-bottom: 13px;}
.volume-slider input::-webkit-slider-thumb {-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer;transition:all 0.15s ease;}
.volume-slider input::-webkit-slider-thumb:hover {background:#378dee;transform:scale(1.2);}
/* 响应式调整 */
@media (max-width:768px) {.player-left {display:none;}
.player-center {width:42%;}
.player-right {width:30%;}
.volume-slider {display:none;}
}