@charset "UTF-8";
.FanClub-MusicBox {width: 100%; height:750px; display: block;border-radius: 15px; margin-top: 70px;transition: width 0.2s ease-in-out;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(146, 98, 98, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.06);transition: .4s ease-in-out;position: relative;background-size: cover;background-position: center;transition: background-image 1s ease-in-out;}
.FanClub-MusicBox .BlackBG {position: absolute;background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%;border-radius: 15px; z-index: 1;}
.Music-Player {width: 100%;font-size: 0;position: absolute; top: 0; left: 0; z-index: 10;height: 100%;}
.Music-Player .MusicBox-Cover {width: 40%; height: 100%; display: inline-block;text-align: center; vertical-align: top;padding-top: 100px;padding-top: 220px;}
.Music-Player .MusicBox-Cover img {width: 230px; height: 230px; border-radius: 50%;border: 15px solid #000;}
.Music-Player .MusicBox-Lyrics {width: 60%; height: 100%; display: inline-block; vertical-align: top;}
.Music-Player .MusicBox-Lyrics h1 {color: #FFF; font-weight: 500; font-size: 26px;margin: 50px 0 15px 10px;}
.Music-Player .MusicBox-Lyrics h2 {color: #FFF; font-weight: 300; font-size: 18px;margin: 0 0 15px 10px;}
.Music-Player .MusicBox-Lyrics h2 span {color: #b7b7b7; font-weight: 100; font-size: 16px;}
.MusicBoxLogo {position: absolute;left: 20px;top: 13px;}
.MusicBoxLogo img {width: 50px;}
.MusicBox-Controls {position: absolute;display: flex;width: 100%;height: 80px;bottom: 0;z-index: 1000;border-radius:0 0 15px 15px;background-color: rgba(0, 0, 0, 0.5);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #FFF;}
.Music-PlayBut {padding: 0 30px;display: inline-block;width: 220px;margin: 0 auto;}
.lyrics-container {width: 95%;height: 60%;margin-top: 40px;color: #FFF;overflow-y: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
.lyrics-container:hover {overflow-y: auto;}
.lyrics-container::-webkit-scrollbar-thumb {background-color: #5A5A5A;}
.lyrics-container::-webkit-scrollbar-thumb:hover {background-color: #FFF;}
.lyrics-container::-webkit-scrollbar {width: 5px; height: 5px;}
.lyrics-container::-webkit-scrollbar-thumb {border: 0; border-radius: 2px; background-clip: padding-box;}
#lyrics {font-size: 18px;line-height: 2;text-align: left;padding: 0 0 0 10px;}
#lyrics .current {font-size: 24px;color: #fff;font-weight: bold;animation: glow 2s infinite;}
@keyframes glow {0% {text-shadow: 0 0 5px #ff076f;}50% {text-shadow: 0 0 10px #ff076f, 0 0 10px #ff076f;}100% {text-shadow: 0 0 5px #ff076f;}}
@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
.Music-Player .MusicBox-Cover img {width: 230px;height: 230px;border-radius: 50%;border: 15px solid #000;animation: rotate 60s linear infinite;animation-play-state: paused;}
.MusicBox-Controls .prev, .MusicBox-Controls .play, .MusicBox-Controls .next, .MusicBox-Controls .pause {display: inline-block;text-align: center;line-height: 34px;padding: 23px 10px 10px 10px;width: 50px;}
.MusicBox-Controls .prev i, .MusicBox-Controls .play i, .MusicBox-Controls .next i, .MusicBox-Controls .pause i {font-size: 30px;transition: font-size 0.3s ease;}
.MusicBox-Controls .prev i:hover, .MusicBox-Controls .play i:hover, .MusicBox-Controls .next i:hover, .MusicBox-Controls .pause i {font-size: 26px;}
.right-controls {position: absolute;right: 0;top: 10px;width: 200px;display: flex;}
.right-controls .iconfont {font-size: 20px;color: #b9b9b9;display: inline-block;width: 25px;text-align: center;vertical-align: middle;}
.right-wrapper {position: relative;padding: 15px;display: inline-block;width: 50px;}
.progress-bar {position: relative;width: 99%;margin-left: 0.5%;height: 2px;background-color: rgba(255, 255, 255, 0.3);border-radius: 2px;cursor: pointer;}
.progress-bar:hover {height: 4px;}
.progress-fill {position: absolute;height: 100%;background-color: #ff076f;border-radius: 2px;width: 0;}
.progress-thumb {position: absolute;width: 12px;height: 12px;background-color: #ff076f;border-radius: 50%;top: 50%;transform: translate(-50%, -50%);cursor: pointer;left: 0;}
.playlist-popup {position: absolute;right: -5px;bottom: 70px;width: 500px;background-color: rgba(0, 0, 0, 0.8);border-radius: 15px;padding: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);display: none;z-index: 1000;}
.playlist-popup ul {list-style: none;margin: 0;padding: 0;height: 650px;overflow-y: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
.playlist-popup ul li {color: #b9b9b9;padding:8px 12px;cursor: pointer;}
.playlist-popup ul li:first-child {border-radius: 15px 15px 0 0;}
.playlist-popup ul li:last-child {border-radius: 0 0 15px 15px;}
.playlist-popup ul li:nth-child(even) {background-color: rgba(255, 255, 255, 0.05)}
.playlist-popup ul li:hover {color: #FFF;}
.playlist-popup ul li.selected {color: #FFF;background-color: #ff076f;}
.playlist-popup ul:hover {overflow-y: auto;}
.playlist-popup ul::-webkit-scrollbar-thumb {background-color: #5A5A5A;}
.playlist-popup ul::-webkit-scrollbar-thumb:hover {background-color: #FFF;}
.playlist-popup ul::-webkit-scrollbar {width: 5px; height: 5px;}
.playlist-popup ul::-webkit-scrollbar-thumb {border: 0; border-radius: 2px; background-clip: padding-box;}
.volume-popup {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);width: 30px;height: 120px;background-color: rgba(0, 0, 0, 0.8);border-radius: 5px;padding: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);display: none;z-index: 1000;}
.volume-popup input[type="range"] {width: 100px;height: 5px;transform: rotate(-90deg);position: absolute;top: 60px;left: -35px;background: rgba(255, 255, 255, 0.3);border-radius: 2px;cursor: pointer;appearance: none;outline: none;transition: background 0.2s ease;will-change: background;}
.volume-popup input[type="range"]::-webkit-slider-thumb {appearance: none;width: 12px;height: 12px;background-color: #ff076f;border-radius: 50%;cursor: pointer;position: relative;top: 0;transition: transform 0.2s ease;will-change: transform;}
.volume-popup input[type="range"]::-moz-range-thumb {width: 12px;height: 12px;background-color: #ff076f;border-radius: 50%;cursor: pointer;transition: transform 0.2s ease;will-change: transform;}
.mode-btn-container {position: relative;}
.mode-popup {position: absolute;bottom: 40px;left: -30px;width: 110px;background-color: rgba(0, 0, 0, 0.8);border-radius: 5px;padding: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);display: none;z-index: 1000;}
.mode-popup ul {list-style: none;margin: 0;padding: 0;}
.mode-popup ul li {color: #fff;padding: 5px 0;cursor: pointer;}
.mode-popup ul li i {vertical-align: middle;}
.mode-popup ul li:hover, .mode-popup ul li:hover i {color: #ff95b0;}
.mode-popup ul li.selected, .mode-popup ul li.selected i {color: #ff076f;font-weight: bold;}
.progress-container {width: 100%;position: absolute;left: 0;}
.time-display {position: absolute;bottom: 32px;left: 90px;}