/* 搜索结果信息样式 */
.search-result-info {
    position: absolute;
    bottom: 10px; /* 根据您的布局调整位置 */
    left: 10px;
    background-color: rgba(141, 75, 187, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 36px;
    display: flex;
    align-items: center;
    z-index: 1000;
}

.search-result-info svg {
    margin-right: 8px;
}




 body {
     height: 100vh;
     display: flex;
     flex-direction: column;
     /*background: linear-gradient(135deg, #667eea, #764ba2);*/
     color: #fff;
     background-color: #60515a;
     z-index: -1;
     transition: background-color 0.5s ease;
     /* 0.5秒的背景颜色过渡效果 */
 }
 .blur-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #6c87ff, #932aff);
     background-size: cover;
     z-index: 2;
 }
 /* 添加遮罩效果 */

 .blur-background-after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 1;
 }
 body::-webkit-scrollbar {
     display: none;
     /* For Chrome, Safari, and Opera */
 }
 .song-title {
     width: 240px;
     /* Adjust the width as needed */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 .content {
     position: relative;
     z-index: 100;
     /* 确保内容在最上层 */
     flex: 1;
     display: flex;
 }
 .right-panel {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     overflow: hidden;
     max-height: calc(100vh - 130px);
 }
 .left-panel {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     overflow: hidden;
     max-height: calc(100vh - 130px);
 }
 .left-panel {
     width: 30%;
     padding: 15px 0;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     /*      border-radius: 15px;*/
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
 }
 /* Hide the scrollbar but allow scrolling */

 .left-panel {
     overflow-y: auto;
 }
 /* Custom scrollbar track */

 .left-panel::-webkit-scrollbar-track {
     background-color: transparent;
     /* Makes the track transparent */
     border-radius: 10px;
 }
 /* Custom scrollbar handle */

 .left-panel::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.2);
     /* Semi-transparent black */
     border-radius: 10px;
 }
 /* Removes default buttons at the top and bottom of the scrollbar */

 .left-panel::-webkit-scrollbar-button {
     display: none;
 }
 /* Set the size of the scrollbar */

 .left-panel::-webkit-scrollbar {
     width: 8px;
     /* Adjust the width to make the scrollbar thinner */
 }
 .left-panel {
     scrollbar-width: thin;
     /* Makes the scrollbar "thin" */
     scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
     /* Sets the handle color and track color */
 }
 .right-panel {
     width: 70%;
     padding: 15px;
 }
 .song-item {
     background: transparent;
     border-radius: 5px;
     padding: 15px;
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     transition: background 0.3s ease, transform 0.2s ease;
     cursor: pointer;
 }
 .song-item:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-5px);
 }
 .song-item img {
     width: 50px;
     height: 50px;
     object-fit: cover;
     border-radius: px;
     margin-right: 10px;
 }
 .left-panel-title {
     padding: 0 15px;
 }
 .song-item .song-info h6 {
     margin-bottom: 5px;
 }
 .playing-module {
     position: relative;
     z-index: 100;
     /* 确保内容在最上层 */
     background: rgba(0, 0, 0, 0.3);
     color: #fff;
     padding: 30px 40px 40px 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* border-radius: 10px; */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 .playing-module .btn {
     padding: 10px 20px;
     /* Increase padding to make the button larger */
     font-size: 1.5rem;
     /* Increase font size for larger icons */
     border-radius: 5px;
     /* Optional: Adjust the border-radius for rounded corners */
 }
 .playing-module .btn i {
     margin-right: 5px;
     /* Adds some space between icon and text if there's text inside the button */
 }
 .progress-bar {
     background: linear-gradient(to right, #764ba2, #667eea);
 }
 .btn-outline-light {
     border-color: #fff;
 }
 .btn-outline-light:hover {
     background: #fff;
     color: #764ba2;
 }
 #lyricsContent {
     overflow-y: scroll;
     height: 100%;
     /* Adjust based on your layout */
     text-align: center;
     scrollbar-width: none;
     /* For Firefox */
     -ms-overflow-style: none;
     /* For Internet Explorer and Edge */
 }
 #lyricsContent::-webkit-scrollbar {
     display: none;
     /* For Chrome, Safari, and Opera */
 }
 .lyric-line {
     opacity: 0.8;
     color: #CCC;
     padding: 5px 0;
     font-size: 24pt;
 }
 .current {
     opacity: 1.0;
     font-weight: bold;
     font-size: 28pt;
     color: #FFF;
     /* White color for the active line */
 }
 /* Additional CSS to initially position the first line in the middle */

 #lyricsContent::before {
     /*    content: '';*/
     display: block;
     height: 50%;
     /* Pushes the first line to the middle */
     margin-bottom: -18px;
     /* Adjust based on your font-size to align text baseline */
 }
 .current-song {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-5px);
 }