@charset "utf-8";
/**************************************************
 * MKOnlinePlayer v2.41
 * 播放器样式表文件
 * 编写：mengkun(https://mkblog.cn)
 * 时间：2018-3-13
 *************************************************/
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, input, lengend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0
}
body, button, input, select, textarea, th {
    color: #333;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin, 'PingFang SC', Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
    font-family: Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif/9
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%
}
li {
    list-style: none
}
img {
    border: 0 none;
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality
}
input[type=button], input[type=submit] {
    cursor: pointer
}
button {
    cursor: pointer
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
a {
    color: #333;
    text-decoration: none
}
a:hover {
    color: #31c27c;
    text-decoration: none
}
a:focus, button:focus, input:focus {
    outline: 0
}
.text-center {text-align: center;}
.clear-fix {zoom: 1;}
.clear-fix:before, .clear-fix:after {display: table;line-height: 0;content: "";}
.clear-fix:after {clear: both; }
.hidden {display: none !important;}
.userSelect{
    -webkit-user-select: none;
    -moz-user-select: none; /*禁止双击选定*/
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/*滚动条美化*/
.mCSB_scrollTools .mCSB_dragger {
    right: -10px !important;
}
#home,#main-list,#sheet,#artist,#mv,.mv-container,.mvComment,#album,#dj,.hot-search,#mysub,#style,.comment-container{
    -ms-overflow-style: none;  /* 针对 Internet Explorer 和旧版 Edge 隐藏滚动条 */
    scrollbar-width: none;  /* 针对 Firefox 隐藏滚动条 */
}
#home::-webkit-scrollbar,
#main-list::-webkit-scrollbar,
#sheet::-webkit-scrollbar,
#artist::-webkit-scrollbar,
#mv::-webkit-scrollbar,
#album::-webkit-scrollbar,
#dj::-webkit-scrollbar,
#mysub::-webkit-scrollbar,
#style::-webkit-scrollbar,
.mv-container::-webkit-scrollbar,
.mvComment::-webkit-scrollbar,
.comment-container::-webkit-scrollbar,
.hot-search::-webkit-scrollbar,
.mCSB_container::-webkit-scrollbar{
    width:0;
    height:0;
    display: none;
}
#lyric::-webkit-scrollbar{
    width:0;
    height:0;
    display: none;
}

html,body{
    height: 100%;
    width: 100%;
    background-color: #777970;
    overflow: hidden;
}
body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&0.38+0,0.17+61,0.8+100 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: #000000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000');
    background-image: -webkit-linear-gradient(200deg, #7f7280, #000000);
    background-image: -moz-linear-gradient(200deg, #7f7280, #000000);
    background-image: -o-linear-gradient(200deg, #7f7280, #000000);
    background-image: -ms-linear-gradient(200deg, #7f7280, #000000);
    background-image: linear-gradient(200deg, #7f7280, #000000);
    
    overflow: hidden;
}
/* 模糊图像层 */
#blur-img {
    position: fixed;
    height: 100%;
    left: -10%;
    width: 120%;
    overflow: hidden;
}
/* 移动端使用的模糊图像层 */
#mobile-blur {
    -webkit-filter: blur(300px);
    filter: blur(300px);
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background-size: cover;
    background-position: bottom center;
}
/* 图像遮罩层 */
.blur-mask {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5; 
    opacity:0.5;
    top: 0;
    left: 0;
    overflow: hidden;
}

.mobile-mask {
    filter:alpha(opacity=60); 
    -moz-opacity:0.6; 
    opacity:0.6;
}

#mkplayer{
    display: none;
}
.header {
    width: 100%;
    height: 50px;
    position: absolute;
}
/*登录*/
.logo,.login,.user {
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    display: inline-block;
    font-size: 23px;
    color: #829194;
    cursor: pointer;
    margin: 10px 20px;
}
.login,.user{
    position:absolute;
    right:20px;
    font-size: 16px;
}
.logo:hover,.login:hover,.loginout:hover {
    color: #fff;
}
.user-info {
    float: left;
    margin-right: 15px;
    cursor: pointer;
}
.user-info .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
}
.user-info span {
    margin-left: 10px;
}
.loginout {
    float: left;
    cursor: pointer;
}

/* 登录弹窗整体样式 */
#login-modal {
    width: 260px;
    padding: 20px;
    background: #fff;
    /*border-radius: 8px;*/
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
    overflow: hidden; /* 防止内容溢出 */
}
 
.login-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
 
.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止字体换行 */
}
 
.tab.active  {
    color: #333;
    border-bottom: 2px solid #31c27c; /* 统一颜色 */
}
 
.tab:hover {
    color: #31c27c; /* 统一颜色 */
}
 
.tab-content {
    margin-top: 20px;
    overflow: hidden; /* 防止内容溢出 */
}
 
.tab-pane {
    display: none;
}
 
.tab-pane.active  {
    display: block;
}
 
/* 二维码登录样式 */
#qr-code {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: block;
}
#qr-code img{
    width:100%;
    height:100%;
}
#qr-status {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}
.login-tiq-status{
    text-align: center;
    font-size: 12px;
    color: #F44336;
    margin-top: 10px;
}
/* 手机验证码登录样式 */
#phone, #captcha {
    width: calc(100% - 40px); /* 左右 margin 各 20px */
    padding: 10px;
    margin: 0 20px 10px 20px; /* 左右 margin 各 20px */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* 防止 padding 和 border 导致宽度溢出 */
}
 
.captcha-container {
    display: flex;
    align-items: baseline;
    margin: 0 20px 10px 20px; /* 左右 margin 各 20px */
}
 
#captcha {
    flex: 1;
    margin-left: 0;
    box-sizing: border-box; /* 防止 padding 和 border 导致宽度溢出 */
}
 
#send-captcha {
    padding: 10px;
    background: #31c27c; /* 统一颜色 */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
    box-sizing: border-box; /* 防止 padding 和 border 导致宽度溢出 */
}
 
#send-captcha:hover {
    background: #2a9f6a; /* 统一颜色加深 */
}
/* 禁用按钮的样式 */
#send-captcha:disabled {
    background-color: #ccc; /* 灰色背景 */
    color: #888; /* 灰色文字 */
    cursor: not-allowed; /* 禁用鼠标指针 */
    border: 1px solid #ddd; /* 灰色边框 */
}
#login-phone {
    width: calc(100% - 40px); /* 左右 margin 各 20px */
    padding: 10px;
    margin: 0 20px 10px 20px; /* 左右 margin 各 20px */
    background: #31c27c; /* 统一颜色 */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
    box-sizing: border-box; /* 防止 padding 和 border 导致宽度溢出 */
}
 
#login-phone:hover {
    background: #2a9f6a; /* 统一颜色加深 */
}
 
/* 邮箱登录样式 */
#email, #password {
    width: calc(100% - 40px); /* 左右 margin 各 20px */
    padding: 10px;
    margin: 0 20px 10px 20px; /* 左右 margin 各 20px */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* 防止 padding 和 border 导致宽度溢出 */
}
 
#login-email {
    width: calc(100% - 40px); /* 左右 margin 各 20px */
    padding: 10px;
    margin: 0 20px 10px 20px; /* 左右 margin 各 20px */
    background: #31c27c; /* 统一颜色 */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
    box-sizing: border-box; /* 防止 padding 和 border 导致宽度溢出 */
}
 
#login-email:hover {
    background: #2a9f6a; /* 统一颜色加深 */
}


/* 宽度约束容器 */
.container{
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.player_style_normal,.player_style_only{
    width: 100%;
    height: 100%;
}
/* 中部主要容器 */
.center{
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 100px;
}

/* 顶部按钮条 */
.btn-bar {
    position: absolute;
    display: inline-block;
    left: 0;
    right: 400px;
    height: 55px;
}


/* 顶部按钮区域 */
.btn-box {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    overflow-x: hidden; /* 隐藏水平滚动条 */
    white-space: nowrap; /* 禁止换行 */
}
/* 常规按钮 */
.btn {
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    display: inline-block;
    position: relative;
    border-radius: 2px;
    border: 1px solid #fff;
    border: 1px solid rgba(150,150,150,.5);
    color: #fff;
    opacity: .8;
    filter: alpha(opacity=80);
    cursor: pointer;
    font-size: 14px;
    padding: 6px 20px;
    margin: 0 2px;
}
.btn:hover {
    border: 1px solid #fff;
    opacity: 1;
    filter: alpha(opacity=100);
}
#btn-area .active{
    border: 1px solid #fff;
    opacity: 1;
    filter: alpha(opacity=100);
}
.btn[data-action='player'] {
    display: none;
}

/* 搜索区域样式 */
#search-area,#br-area {
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
 
.search-group {
    position: relative;
    display: flex;
    /*gap: 10px;*/
    /*margin-bottom: 20px;*/
}

.clear-btn {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 20px;
    display: none;
}
.clear-btn.visible  {
    display: block; /* JS控制显示 */
}
.search-group input[type="text"] {
    width: 90%;
    padding: 5px;
    border: 1px solid #e5e5e5;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    outline: none;
}
 
.search-group input[type="text"]:focus {
    border-color: #31c27c;
    /*box-shadow: 0 0 0 2px rgba(22, 183, 119, 0.2);*/
}
 
.search-group button.search-submit  {
    position:relative;
    display:block;
    width:50px;
    background-color: #31c27c;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    cursor: pointer;
}
.search-group button.search-submit span{
    position:absolute;
    display: inline-block;
    width:23px;
    height:23px;
    left:13px;
    top:5px;
    background-image: url("../images/icon_sprite.png");
    background-position: 0 -260px;
    transition: opacity 0.3s ease;
    opacity: 0.8;
    filter: Alpha(opacity = 80);
}
.search-group button.search-submit:hover span{
    opacity: 1;
    filter: Alpha(opacity = 100);
}
 
/* 隐藏原生 radio 元素 */
.card-group input[type="radio"] {
    display: none;
}
 
/* 卡片组样式 */
.card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
 
/* 卡片样式 */
.card {
    flex: 1 1 calc(50% - 10px); /* 每排两个，间距 10px */
    padding: 5px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 14px;
    color: #333;
    position: relative;
    box-sizing: border-box;
}
 
/* 卡片悬停效果 */
.card:hover {
    border-color: #31c27c;
    box-shadow: 0 2px 8px rgba(22, 183, 119, 0.2);
}
/*禁用状态*/
.card.disabled {
    border-color: #e5e5e5;
    background-color: #eee;
    box-shadow: none;
    cursor: not-allowed;
}
/* 选中状态下的卡片样式 */
.card.selected  {
    border-color: #31c27c;
    background-color: rgba(22, 183, 119, 0.1);
    color: #31c27c;
}
.card.selected:before{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    /*border: 1px solid red;*/
    bottom: 4px;
    right: 4px;
    background-image: url("../images/icon_sprite.png");
    background-position: -63px -84px;
    z-index: 1;
}
/* 右下角三角形选择框 */
.custom-radio {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-width: 10px;
    border-style: dashed;
    border-color: transparent;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 6px;
    border-bottom-color: #16b777;
    border-bottom-style: solid;
    border-right-color: #16b777;
    border-right-style: solid;
    overflow: hidden;
    display: none;
}
 
/* 选中状态下的三角形选择框 */
.card input[type="radio"]:checked + .custom-radio {
    display: block;
}
/*热搜榜*/
.hot-search {
    height: 110px;
    overflow-y: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    /*border-radius: 4px;*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hot-search-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    color:rgba(0,0,0,.3);
}
.hot-search-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hot-search-item {
    font-size: 12px;
    padding: 4px 6px;
    background-color: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    color:rgba(0,0,0,.5);
}
.hot-search-item:hover {
    background-color: #d0d0d0;
}

/* 左侧主体数据区 */
.data-area {
    position: absolute;
    left: 0;
    right: 400px;
    top: 60px;
    bottom: 0;
    /*overflow: hidden;*/
}

/* 数据区域容器 */
.data-box {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow-y: auto;
}

/*以下是播放列表 css 样式*/
/* 列表头 */
.list-head {
    height: 40px;
}

/* 一项数据 */
.list-item,.list-comment-item,.my-list-item {
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #bdbdbe;
    color: rgba(225,225,225,.8);
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid rgba(150,150,150,.1);
    cursor: default;
    position: relative;
}
/*评论列表*/
.list-comment-head{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
}
#main-list .mCSB_container {
    overflow: visible !important;
}
.item-comment{
    height: auto;
    padding: 15px 15px 15px 68px;
    box-sizing: border-box;
}
.reply-item{
    padding: 15px 0 15px 68px;
    border: none;
}
.comment-item-pic {
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
    width: 68px;
    height: 68px;
    overflow: hidden;
}
.avatar-frame {
    display: inline-block;
    width: 100%; /* 头像框尺寸 */
    height: 100%; /* 头像框尺寸 */
    background-size: cover; /* 背景图片覆盖 */
    background-position: center; /* 背景图片居中 */
    position: absolute;
    left:0;
    top:0;
    border-radius: 50%; /* 圆形头像框 */
}
.cover-img {
    width: 38px;
    height: 38px;
    -o-object-fit: cover;
    object-fit: cover;
    margin-top:15px;
    margin-left:15px;
    border-radius: 50%;
}
.comment-item-title {
    height: 20px;
    line-height: 20px;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.comment-item-title a{
    color: hsla(0, 0%, 100%, .6);
    &:hover{
        color: rgba(225,225,225);
    }
}
.comment-item-title .vipRights,.userInfos-container .vipRights,.userfollows-container .vipRights{
    position:relative;
    display:inline-block;
    margin-left: 5px;
    width:42px;
    height:14px;
    top:3px;
    -o-object-fit: cover;
    object-fit: cover;
    background-size:cover;
}
.userInfos-container .vipRights,.userfollows-container .vipRights{
    width: 80px;
    height: 27px;
    top: 5px
}
.userInfos-container .gender,.userfollows-container .gender{
    position:relative;
    display:inline-block;
}
.userInfos-container .gender.active,.userfollows-container .gender.active{
    margin-left: 5px;
    width: 20px;
    height: 20px;
    top:3px;
    background-size:cover;
    
}
.follows-gender{
    margin-left: 5px;
    width: 13px;
    height: 13px;
    top:3px;
    background-size:cover;
    display: inline-block;
}
.comment-item-disc,.richNickname {
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 25px;
    text-align: justify;
    color: hsla(0, 0%, 100%, .6);
}
.richNickname a{
    font-size:12px;
    color: hsla(0, 0%, 100%, .3);
    &:hover{
        color: rgba(225,225,225);
    }
}
.comment-item-opt {
    font-size: 10px;
    color: rgba(255,255,255, .3);
    margin-top: 0;
    margin-bottom: 2px;
    line-height: 15px;
    text-align: right;
    overflow: hidden;
}
.comment-item-opt .comment-opt-date {
    float: left;
    line-height: 15px;
}
.comment-item-opt .comment-opt-ip {
    float: left;
    line-height: 15px;
    margin-left: 5px;
}
.comment-item-opt .comment-opt-liked {
    display: inline-block;
    height: 15px;
    line-height: 15px;
}
.iconfont {
    display: inline-block;
    width: 15px;
    height: 15px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    vertical-align: baseline;
    text-transform: none;
    background-image: url("../images/liked.png");
    background-size: cover;
    margin-bottom: -2px;
    color: hsla(0, 0%, 100%, .6);
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0.3;
    filter: Alpha(opacity = 30);
    cursor: pointer;
    &:hover{
        opacity: 1;
        filter: Alpha(opacity=100);
    }
}
.iconfont.active{
    background-image: url("../images/liked-active.png");
}
.comment-item-reply i{
    position:absolute;
    display:inline-block;
    width:12px;
    height:12px;
    background-image: url(../images/icon_sprite.png);
    background-position: -140px -297px;
}
.comment-item-reply i.refresh{
    margin-top:3px;
    background-position: -80px -140px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    animation: rotation 1s linear infinite;
    -moz-animation: rotation 1s linear infinite;
    -webkit-animation: rotation 1s linear infinite;
    -o-animation: rotation 1s linear infinite;
}
@keyframes rotation {
    from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotation {
    from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    }
}
@-moz-keyframes rotation {
    from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    }
}
.comment-item-reply{
    line-height: 15px;
    margin-top:5px;
    text-align: left;
}
.comment-item-reply span{
    font-size: 12px;
    color: #31c27c;
    opacity: 0.3;
    filter: Alpha(opacity = 30);
}
.comment-item-reply span:hover{
    opacity: 1;
    filter: Alpha(opacity=100);
    cursor: pointer;
}

/*评论标头名字*/
.music-comment {
    position: relative;
    display: block;
    width: auto;
    padding-left: 15px;
    height: 100%;
}
.comment-sortType{
    position:absolute;
    top: 0;
    right:15px;
    height:100%;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .6);
}
.comment-sortType .sortType{
    font-size: 12px;
    color: hsla(0, 0%, 100%, .6);
    cursor:pointer;
    &:hover{
        color: rgba(225,225,225);
    }
}
.comment-sortType .sortType.active{
    color: rgba(225,225,225);
}

/* 容器样式 */
.mv-container,.layer-comment-container,.layer-djListCat-container,.layer-userInfos-container,.layer-userfollows-container,.layer-addSongsToPlaylist-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
/* 视频样式 */
.dplayer {
    z-index: 1;
}
.dplayer-notice {
    display:none !important; /* 取消提示 */
}
/* 隐藏右键菜单 */ 
.dplayer-menu.dplayer-menu-show {
    display: none !important;
}
/*进度条*/
.dplayer-bar-wrap {
    padding: 8px 0 !important;
    top: -10px; /* 调整上移距离 */
}
/* 取消鼠标移出时的隐藏效果 */
.dplayer.dplayer-hide-controller .dplayer-controller{
    opacity: 1 !important;
}
/* 评论区域样式 */
.mv-container .mvComment,.comment-container,.djListCat-container,.userInfos-container,.userfollows-container {
    flex: 1; /* 自适应剩余高度 */
    /*padding: 10px;*/
    background-color: rgba(0,0,0,.8); /* 背景色 */
    overflow-y: auto;
}
.addSongsToPlaylist-container{
    flex: 1; /* 自适应剩余高度 */
    overflow-y: auto;
}
.djListCat-container,.userInfos-container,.userfollows-container,.addSongsToPlaylist-container {
    scrollbar-width: thin;
    scrollbar-color: #31c27c rgba(0,0,0,0.1);
}
/* 正在播放的那项 */
.list-playing {
    color: #fff;
}
.list-sub-span{
    display: block;
    width: 40px;
    height: 100%;
    padding-left: 3px;
    padding-top: 10px;
    text-align: center;
    float: left;
    overflow: hidden;
}
.mv-sub-span{
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    /*border:1px solid red;*/
    text-align: center;
    top: 10px;
    right: 10px;
    z-index: 2;
    cursor: pointer;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 1;
        filter: Alpha(opacity = 100);
    }
}
.slidesub-i{
    display: block;
    width: 16px;
    height: 16px;
    background: url(../images/icon_sprite.png);
    background-position: -60px -18px;
    cursor: pointer;
}
.slidesub-i.active{
    background: url(../images/icon_sprite.png);
    background-position: 0 -78px;
}
.slideaddplaylist-i{
    display: block;
    width: 16px;
    height: 16px;
    background: url(../images/play-add.png);
    background-size: cover;
    cursor: pointer;
}
.slideaddplaylist-i-active{
    position: absolute;
    margin-top: 4px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/play-add-active.png);
    background-size: cover;
    cursor: pointer;
}
.slideaddplay-i{
    display: block;
    width: 16px;
    height: 16px;
    background: url(../images/icon_sprite.png);
    background-position: -20px -20px;
    cursor: pointer;
}
.addSongsToPlaylist-list-item-head .list-head{
    background: #e6e6e6;
    cursor: pointer;
}
.addSongsToPlaylist-list-item .list-item{
    color: rgba(0,0,0,.6);
    cursor: pointer;
    &:hover{
        background: #e6e6e6;
    }
}

.addSongsToPlaylist-container{
    padding-right: 2px;
}
.add-songs-to-playlist-new{
    position: relative;
    display: flex;
    width: auto;
    margin-left: 30px;
    margin-right: 10px;
    height: 100%;
    color: rgba(0,0,0,.8);
    line-height: 50px;
    align-items: center;
}
.add-songs-to-playlist{
    position: relative;
    width: auto;
    margin-left: 30px;
    margin-right: 10px;
    height: 100%;
    color: rgba(0,0,0,.8);
    line-height: 50px;
    display: flex;          /* 使用flex布局 */
    align-items: center;    /* 垂直居中 */
    overflow: hidden;
}
.add-songs-to-playlist-cover{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: cover;    /* 保持图片比例 */
}
.add-songs-to-playlist-name{
    position: absolute;
    width: 90%;
    top: 5px;
    left: 50px;
    height:15px;
    line-height:15px;
    display: block;       /* 独占一行 */
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.add-songs-to-playlist-songsNum{
    position: absolute;
    bottom: 5px;
    left: 50px;
    display: block;
    height:15px;
    line-height:15px;
    font-size: 12px;
    color: rgba(0,0,0,.5);
}
.sildeaddSongsToP-i{
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
    background: url(../images/icon-play-add-3.png);
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
}

/*编辑歌单*/
.dialog-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    font-size: 14px;
    color: #666;
}

.form-input {
    width: 70%;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s;
}
.form-input:focus {
    border-color: #31c27c;
    outline: none;
}

.cover-upload {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-preview {
    width: 120px;
    height: 120px;
    background-color: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 20px;
    position: relative;
}

.cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.upload-btn {
    padding: 8px 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-btn:hover {
    background-color: #eee;
    border-color: #ccc;
}
.selectTags{
    color: #31c27c;
    cursor: pointer;
}




/* 列表数字 */
.list-num {
    display: block;
    width: 30px;
    text-align: center;
    float: left;
    overflow: hidden;
}
/* 正在播放的那项数字 */
.list-playing .list-num {
    background: url("../images/wave.gif") 10px 20px no-repeat;
    text-indent: -99px;
}
.artist-tab-content .list-playing .list-num,.style-tab-content .list-playing .list-num{
    background-color:#ccc;
}
/* 音乐名字 */
.music-name,.artist-music-name,.style-music-name {
    position: relative;
    display: block;
    width: auto;
    margin-left: 40px;
    margin-right: 300px;
    height: 100%;
}
.artist-music-name{
    margin-right: 150px;
}

/* 鼠标滑过时音乐名字被截断 */
.music-name-cult {
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-item:hover .music-name-cult,.my-list-item:hover .music-name-cult{
    padding-right: 250px;
}
.list-playing:hover .music-name-cult {
    padding-right: 200px;
}
/* 作者名称与音乐专辑 */
.auth-name,.music-album {
    position: relative;
    display: block;
    width: 150px;
    float: right;
    height: 100%;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 移动端的菜单图标 */
.list-mobile {
    display: none;
}

/*列表中滑动出现的菜单*/
.list-menu {
    position: absolute;
    right: 10px;
    top: 50%;
    overflow: hidden;
    font-size: 0;
    height: 36px;
    margin-top: -18px;
    float: right;
    display: none;
}
.list-item:hover .list-menu,.my-list-item:hover .list-menu{
    display: block;
}
.list-head:hover .list-menu {
    display: none;
}

/* 列表中滑动出现的小图标 */
.list-icon {
    display: block;
    width: 36px;
    height: 36px;
    background-image: url("../images/icon_list_menu.png");
    float: left;
    margin-left: 10px;
    cursor: pointer;
}
.list-playing .icon-play,.list-playing .artist-icon-play{
    display: none;
}
.icon-play {
    background-position: -80px 0;
}
.icon-play:hover {
    background-position: -120px 0;
}
.icon-download {
    background-position: -80px -120px;
}
.icon-download:hover {
    background-position: -120px -120px;
}
.icon-share {
    background-position: -80px -40px;
}
.icon-share:hover {
    background-position: -120px -40px;
}
.icon-delete {
    background-position: -80px -160px;
}
.icon-delete:hover {
    background-position: -120px -160px;
}
.icon-add,.icon-add-all {
    background-position: -80px -80px;
}
.icon-add:hover,.icon-add-all:hover {
    background-position: -120px -80px;
}
.icon-addPlay{
    background: url(../images/icon-play-add-4.png);
    background-size: cover;
}
.icon-addPlay:hover{
    background: url(../images/icon-play-add-2.png);
    background-size: cover;
}
.artist-icon-addPlay{
    background: url(../images/icon-play-add-3.png);
    background-size: cover;
}
.artist-icon-addPlay:hover{
    background: url(../images/icon-play-add-1.png);
    background-size: cover;
}
.artist-icon-play {
    background-position: 0 0;
}
.artist-icon-play:hover {
    background-position: -40px 0;
}
.artist-icon-download {
    background-position: 0 -120px;
}
.artist-icon-download:hover {
    background-position: -40px -120px;
}
.artist-icon-share {
    background-position: 0 -40px;
}
.artist-icon-share:hover {
    background-position: -40px -40px;
}
.artist-icon-delete {
    background-position: 0 -160px;
}
.artist-icon-delete:hover {
    background-position: -40px -160px;
}
.artist-icon-add,.artist-icon-add-all {
    background-position: 0 -80px;
}
.artist-icon-add:hover,.artist-icon-add-all:hover {
    background-position: -40px -80px;
}
.icon-all,.artist-icon-all{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
}

.icon-add-all,.artist-icon-add-all{
    right: 10px;
}

@media (any-hover: hover){
    .list-item:hover .music-info-name-search,.my-list-item:hover .music-info-name-search {
        padding-right: 60px;
    }
}

/* 分享弹窗中的链接框 */
.share-url {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset;
    color: #333;
    height: 35px;
}
.share-tips {
    font-size: 12px;
    color: #a9a9a9;
}

/* 列表中可以被点击的横条 */
.list-clickable {
    cursor: pointer;
}

/*首页轮播图*/
.home-banner{
    position:relative;
    width: 100%;
    height: 300px;
}
.home-banner-images{
    position:absolute;
    width: 100%;
    height:100%;
    left:0;
    right:0;
    margin:0 auto;
    cursor: pointer;
}

.home-banner-controls{
    position:absolute;
    width: 35px;
    height:50px;
    top: 50%;
    transform: translateY(-50%);  /* 反向偏移自身高度的50% */
    background-image: url(../images/banner.png);
    cursor: pointer;
}
.home-banner-controls-left{
    left: 15px;
    background-position: 0 -365px;
    &:hover{
        background-position: 0 -435px;
    }
}
.home-banner-controls-right{
    right: 15px;
    background-position: 0 -513px;
    &:hover{
        background-position: 0 -583px;
    }
}
/* 以下是歌单|mv|专辑|电台 css 样式 */
/* 歌单中的一项 */
.playlist-container {
    display: flex;
    /*background-color: #fff;*/
    /*border-radius: 8px;*/
    /*padding: 10px;*/
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
    max-width: 1200px;
    margin: 0 auto;
}
.playlist-container .color-one{
    color: #333;
}
.playlist-container .color-two{
    color: #666;
}
.playlist-container .color-three{
    color: #999;
}
#main-list .playlist-container .color-one,.userInfos-container .playlist-container .color-one,.userfollows-container .playlist-container .color-one{
    color: rgba(255,255,255,.8);
}
#main-list .playlist-container .color-two,.userInfos-container .playlist-container .color-two,.userfollows-container .playlist-container .color-two{
    color: rgba(255,255,255,.6);
}
#main-list .playlist-container .color-three,.userInfos-container .playlist-container .color-three,.userfollows-container .playlist-container .color-three{
    color: rgba(255,255,255,.3);
}
.playlist-container .cover-container {
    width: 200px;
    height: 200px;
    margin-top: 7px;
    margin-right: 30px;
    position: relative;
    flex-shrink: 0;
}
.playlist-container .cover-container:before{
    content: '';
    position: absolute;
    width: 208px;
    height: 208px;
    top: 0px;
    left: 0px;
    background: url(../images/coverall.png) no-repeat;
    background-position: 0 -1285px;
}
.playlist-container .cover-img-con {
    width: 100%;
    height: 100%;
    margin-top:4px;
    margin-left:4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.playlist-container .info-container {
    flex: 1;
}

.playlist-container .playlist-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    /*color: #333;*/
}

.playlist-container .creator-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.playlist-container .creator-avatar-con {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}

.playlist-container .creator-name-con {
    font-size: 14px;
    /*color: #666;*/
    margin-right: 15px;
}

.playlist-container .create-time {
    font-size: 12px;
    /*color: #999;*/
    margin-right: 15px;
}

.playlist-container .play-count-num {
    font-size: 12px;
    /*color: #999;*/
}

.playlist-container .action-buttons {
    display: flex;
    margin-bottom: 20px;
}

.playlist-container .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 15px;
    margin-right: 15px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    background-color: #f0f0f0;
    color: white;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 1;
        filter: Alpha(opacity = 100);
    }
}

#main-list .playlist-container .action-btn{
    background-color: rgba(0,0,0,.5);
    color: white;
}

.playlist-container .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.playlist-container .tags-container {
    display: flex;
    margin-bottom: 15px;
}

.playlist-container .tag {
    padding: 4px 10px;
    background-color: #f8f8f8;
    border-radius: 12px;
    font-size: 12px;
    /*color: #666;*/
    margin-right: 10px;
}
#main-list .playlist-container .tag{
    background-color: rgba(0,0,0,.3);
}
.playlist-container .description {
    font-size: 14px;
    max-height: 105px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;  /* 限制显示行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.playlist-container .user-level-info{
    font-size:12px;
}
.playlist-container .icon {
    /*margin-right: 5px;*/
    font-size: 16px;
}
.userInfos-container-con,.userfollows-container-con{
    padding: 15px;
}
.follows-num-i,.followed-num-i,.follows-name{
    color: rgba(255,255,255,.6);
    cursor: pointer;
    &:hover{
        color: rgba(255,255,255,.8);
    }
}
.songsList{
    position: relative;
    width: 100%;
    /*border: 1px solid red;*/
}
.songsList span{
    display: inline-block;
    height: 25px;
    font-size: 14px;
    line-height: 25px;
    text-align: left;
    color: #fff;
    cursor: pointer;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 1;
        filter: Alpha(opacity = 100);
    }
}
.sheet-item,.artist-item,.mv-item,.album-item,.dj-item,.dj-cat-item,.my-create-item,.my-sub-item,.follows-item {
    position: relative;
    display: block;
    width: 25%;
    float: left;
    text-align: center;
    z-index: 1;
}
.follows-item{
    width: 50%;
    height: 75px;
    margin-top: 15px;
}
.home-playlist{
    margin-top: 30px;
    margin-bottom: 30px;
}
.home-playlist .sheet-item,.mv-item{
    width: 33.33%;
}
.artist-tab-content .mv-item{
    width: 33.3%;
}
.dj-cat-item{
    width: 16.6%;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 1;
        filter: Alpha(opacity = 100);
    }
}
.mv-item-cover{
    position:relative;
    width: 200px;
    height: 113px;
    margin: 10px auto;
}
.artist-tab-content .mv-item-cover{
    width: 150px;
    height: 85px;
}
.dj-cat-item-cover{
    position:relative;
    width: 50px;
    height: 50px;
    margin: 10px auto;
}
.item-cover{
    position:relative;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}
.follows-item-cover{
    position:relative;
    width: 60px;
    height: 60px;
    float: left;
    margin-left: 15px;
}
.follows-item-container{
    float: left;
    width: 65%;
    margin-left: 10px;
}
.follows-item-follow{
    float: right;
    width: 75px;
    padding-top: 15px;
}
.follows-item-container p{
    font-size:12px;
    text-align: left;
    margin-bottom: 3px;
    color: rgba(255,255,255,.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.follows-desc{
    margin-bottom: 6px;
}
.line{
    margin: 0 8px;
    color: #999;
}
/* 歌单封面 */
.sheet-cover,.artist-cover,.mv-cover,.album-cover,.dj-cover,.dj-cat-cover,.my-create-cover,.my-sub-cover,.follows-cover {
    display: block;
    width: 100%;
    height: 100%;
    /*margin: 10px auto;*/
    cursor: pointer;
}
.sheet-item:after,.my-create-item:after,.my-sub-item:after{
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px auto;
    background-image: url(../images/coverall.png);
    background-position: -240px -70px;
    cursor: pointer;
    pointer-events: none; /* 允许点击事件穿透 */
}
.album-item .item-cover:after{
    content: '';
    position: absolute;
    width: 116px;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
    background-image: url(../images/coverall.png);
    background-position: 0 -570px;
    cursor: pointer;
    pointer-events: none; /* 允许点击事件穿透 */
}
/*歌手列表*/
/* 外层容器 */
.artist_selectors,.artisttop_selectors,.mv_selectors,.mvtop_selectors,.album_selectors,.dj_selectors {
    width: calc(100% - 20px);
    padding: 0 10px;
}
 
/* 分类项 */
.selectorItem {
    margin-bottom: 10px;
}
 
.selectorItem:last-child {
    margin-bottom: 0;
}
 
/* 分类标题 */
.title {
    font-size: 14px;
    font-weight: bold;
    color: rgba(255,255,255,.3);
    margin-bottom: 10px;
}
 
/* 导航栏 */
.navBar {
    display: flex;
    overflow-x: hidden; /* 隐藏水平滚动条 */
    white-space: nowrap; /* 禁止换行 */
    gap: 8px;
    padding-bottom: 8px; /* 为滚动条留出空间 */
    cursor: grab; /* 鼠标样式为抓取 */
}
 
/* 导航项 */
.barItem,#playlist-all-cat-btn {
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    padding: 6px 12px;
    font-size: 12px;
    color: white; /* 字体颜色为白色 */
    border: none; /* 边框颜色 */
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0; /* 禁止缩小 */
    background-color: transparent; /* 无背景颜色 */
    opacity: 0.6;
    filter: Alpha(opacity = 60);
}

/* 激活状态 */
.barItem.active  {
    color: #31c27c;
    background-color: #31c27c20;
    font-weight: bold; /* 激活状态字体加粗 */
}
#playlist-all-cat-btn{
    position: relative;
    background-color: #555;
    font-weight: bold; /* 激活状态字体加粗 */
}
#playlist-all-cat-btn span{
    position:absolute;
    display:inline-block;
    width:12px;
    height:12px;
    top: 50%;
    transform: translateY(-50%);  /* 反向偏移自身高度的50% */
    background-image: url(../images/icon_sprite.png);
    background-position: -38px -260px;
}

#playlist-all-cat .cat-group ul {
    display: flex;
    flex-wrap: wrap;  /* 允许换行 */
    padding: 0;
    margin: 0 -5px;   /* 补偿li的边距 */
}
 
#playlist-all-cat .cat-group li {
    width: 25%;       /* 10个li占满100%宽度 */
    box-sizing: border-box;
    padding: 5px;
    list-style: none;
    text-align: center;
    white-space: nowrap;  /* 防止文字换行 */
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    &:hover{
        color: #31c27c;
    }
}

#playlist-all-cat .cat-group li.active{
    color: #31c27c;
}
 
#playlist-all-cat .cat-group li.hot::after  {
    content: " 🔥";    /* 热门标签视觉强化 */
}
/* 悬停效果 */
.barItem:hover,#playlist-all-cat-btn:hover {
    color: #31c27c;
    opacity: 1;
    filter: Alpha(opacity = 100);
}
#playlist-all-cat-btn:hover span{
    background-position: -118px -60px;
}
/* 正在播放的列表  */
.sheet-playing:before {
    content: url(../images/wave.gif);
    position: absolute;
    top: 90px;
    left: 50%;
    margin-left: -45px;
    z-index:1;
}

/*歌手榜单*/
.add-artist-top-item .artist-cover{
    border-radius: 50%;
}

/* 歌单名字 */
.sheet-name,.artist-name,.mv-name,.album-artist-name,.dj-name,.dj-cat-name,.my-create-name,.my-sub-name {
    /*padding: 0 5px;*/
    display: inline-block;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
}
.mv-name{
    max-width: 200px;
}
.artist-tab-content .mv-name{
    max-width: 150px;
}
.dj-cat-name{
    max-width: 50px;
}
.play-count,
.fans-count,
.mv-play-count,
.songNum-count,
.creator-name,
.program-count{
    position: absolute; /* 绝对定位 */
    max-width: 88px;
    top: 0; /* 距离顶部 0px */
    right: 0; /* 距离右侧 0px */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
    color: white; /* 文字颜色 */
    padding: 3px 6px; /* 内边距 */
    font-size: 10px; /* 字体大小 */
    pointer-events: none; /* 禁止点击事件 */
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中 */
    gap: 4px; /* 图标和文字间距 */
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

.play-count::before,
.fans-count::before,
.mv-play-count::before{
    content: ''; /* 伪元素内容 */
    display: inline-block; /* 行内块元素 */
}
 
.play-count::before {
    width: 12px; /* 图标宽度 */
    height: 12px; /* 图标高度 */
    background-image: url(../images/icon_sprite.png);
    background-position: -180px -300px;
}

.mv-play-count::before {
    width: 14px; /* 图标宽度 */
    height: 14px; /* 图标高度 */
    background-image: url(../images/icon_sprite.png);
    background-position: -180px -279px;
}

.fans-count::before {
    width: 16px; /* 图标宽度 */
    height: 16px; /* 图标高度 */
    background-image: url('../images/avatar.png');
    background-size: cover; /* 背景图片覆盖 */
    background-position: center; /* 背景图片居中 */
}
.mysub-del-btn,.mycreate-del-btn,.mycreate-edit-btn{
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    position: absolute; /* 绝对定位 */
    display:block;
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0; /* 距离右侧 0px */
    background-color: rgba(0, 0, 0, 0.2); /* 半透明背景 */
    padding:5px;
    color: white; /* 文字颜色 */
    text-align: center; /* 垂直居中 */
    cursor:pointer;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 0.8;
        filter: Alpha(opacity = 80);
    }
}
.slidedel-i,.slideedit-i{
    position:absolute;
    display:block;
    width:16px;
    height:16px;
    left:0;
    right:0;
    margin:0 auto;
    top:50%;
    margin-top:-8px;
    background-image: url(../images/icon_sprite.png);
}
.slidedel-i{
    background-position: -99px -20px;
}
.slideedit-i{
    background-position: -140px -20px;
}
/* 播放列表分割标题栏 */
#sheet-bar,#hotplaylisttop-bar,#highquality-bar,#allplaylist-bar,#artist-bar,#artisttop-bar,#mv-bar,#mvtop-bar,#album-bar,#dj-bar,#programtoplist-bar,#programrecommend-bar,#toplistpay-bar,#paygift-bar,#recommend-bar,#personalized-bar,#personalizerecommend-bar,#hot-bar,#toplisthours-bar,#toplist-bar,#newtoplist-bar,#hottoplist-bar,#djcathot-bar,#MysubArtist-bar,#MysubAlbum-bar,#MysubMv-bar,#MysubPlaylist-bar,#MysubDj-bar {
    display: block;
}
.sheet-title-bar,.artist-title-bar,.artisttop-title-bar,.mv-title-bar,.mvtop-title-bar,.album-title-bar,.dj-title-bar {
    border-radius: 2px;
    margin: 20px 0;
    text-align: center;
    line-height: 40px;
    height: 40px;
    color: #C5C5C5;
    background-color: rgba(0, 0, 0, 0.12);
}
.login-btn {
    cursor: pointer;
}
.login-btn:hover {
    color: #31c27c;
}

 
/* 列表头部样式 */
.add-list-head,.toplist-add-list-head {
    position: relative; /* 确保伪元素定位正确 */
    padding-bottom: 10px; /* 为线条留出空间 */
    margin-bottom: 10px;
    width: 100%; /* 宽度 100% */
    border-bottom: 1px solid rgba(150, 150, 150, .1);
}
.add-list-head-title,.add-list-head-refresh,.add-list-head-addnew{
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    display: inline-block;
    height: 25px;
    font-size: 15px;
    line-height: 25px;
    text-align: left;
    color: #fff;
    cursor: pointer;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 0.8;
        filter: Alpha(opacity = 80);
    }
}
.slidetoggle-i,.sliderefresh-i,.style-slidetoggle-i{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../images/icon_sprite.png);
}
.slidetoggle-i{
    position: absolute;
    top: 10px;
    background-position: -160px -260px;
}
.add-list-head-refresh,.add-list-head-addnew{
    color: #ccc;
    float: right;
    margin-right: 10px;
}
.add-list-head-addnew{
    margin-right: 30px;
}
.slideaddnew-i{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/icon_sprite.png);
    position: relative;
    top: 2px;
    right:5px;
    background-position: -40px -80px;
}
.sliderefresh-i{
    position: relative;
    right:5px;
    background-position: -80px -120px;
}
.sliderefresh-i.refresh{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    animation: rotation .5s linear infinite;
    -moz-animation: rotation .5s linear infinite;
    -webkit-animation: rotation .5s linear infinite;
    -o-animation: rotation .5s linear infinite;
}
.slidetoggle-i.active{
    background-position: -100px -260px;
}
.dj-djcatrecommend,.dj-djcathot,.userdj-add,.userplaylist-add,.follows-add{
    margin-top: 20px;
}
.dj-djcatrecommend .add-list-head-title,.dj-djcathot .add-list-head-title,.userdj-add .add-list-head-title,.userplaylist-add .add-list-head-title,.follows-add .add-list-head-title{
    margin-left: 15px;
}
/*.dj-djcatrecommend .slidetoggle-i,.dj-djcathot .slidetoggle-i{*/
/*    top: 9px;*/
/*    background-image: url(../images/icon_sprite.png);*/
/*    background-position: -119px -258px;*/
/*}*/
/*.dj-djcatrecommend .slidetoggle-i.active,.dj-djcathot .slidetoggle-i.active{*/
/*    background-position: -119px -268px;*/
/*}*/
.dj-djcatrecommend .sheet-item,.dj-djcathot .sheet-item{
    width: 25%;
}
/*.dj-djcatrecommend .sheet-name,.dj-djcathot .sheet-name{*/
/*    color: rgba(0,0,0,.8);*/
/*}*/
/*#more-djcathot{*/
/*    color: rgba(0,0,0,.6);*/
/*}*/
/*首页歌曲排行榜*/
.toplist-add-list-head{
    text-align: center;
}
.toplist-add-list-head .add-list-head-title{
    opacity: 1;
    filter: Alpha(opacity = 100);
}
/* 最新热门专辑列表项样式 */
.add-album-newest-item {
    display: flex; /* 启用 flex 布局 */
    overflow-x: hidden; /* 支持水平滚动 */
    padding-bottom: 10px; /* 为滚动条留出空间 */
    gap: 15px; /* 项目之间的间距 */
}
.album-newest .album-item {
    display: inline-block; /* 启用 inline-block 布局 */
    margin-right: 15px; /* 项目之间的间距 */
    text-align: center; /* 文字居中 */
}
 
.album-newest .album-item:last-child {
    margin-right: 0; /* 最后一个项目去掉右侧间距 */
}
.floating-player {
    position: fixed !important;
}
/*返回顶部*/
#back-to-top,#mv-back-to-top,#artist-back-to-top,#style-back-to-top,#comment-back-to-top,#djCat-back-to-top,.userInfos-back-to-top,.userfollows-back-to-top,#addSongsToPlaylist-back-to-top{
    display:none;
    position:absolute;
    width:30px;
    height:30px;
    right:10px;
    bottom:-30px;
    background-color:rgb(0,0,0,.3);
    box-sizing: border-box;
    cursor:pointer;
    text-align:center;
    overflow: hidden;
    z-index:999;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 1;
        filter: Alpha(opacity = 100);
    }
}
#mv-back-to-top,#artist-back-to-top,#style-back-to-top,#comment-back-to-top,#djCat-back-to-top,.userInfos-back-to-top,.userfollows-back-to-top,#addSongsToPlaylist-back-to-top{
    bottom:10px;
}
#back-to-top i,#mv-back-to-top i,#artist-back-to-top i,#style-back-to-top i,#comment-back-to-top i,#djCat-back-to-top i,.userInfos-back-to-top i,.userfollows-back-to-top i,#addSongsToPlaylist-back-to-top i{
    display:inline-block;
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    right:0;
    top:50%;
    margin:0 auto;
    margin-top:-4px;
    background-image: url(../images/icon_sprite.png);
    background-position: -99px -260px;
}


/*歌手详情*/
/* 基础布局 */
#bannerInfos,#loginInfos,#artistInfos,#styleInfos,#commentInfos,#userInfos,#djCatInfos,#addSongsToPlaylist,#editPlaylist,.layer-touch .layui-layer-content{
    padding: 0 !important;
}

.artist-detail,.style-detail {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
 
/* 头部信息区 */
.artist-header,.style-header {
    display: flex;
    padding: 25px;
    height: 200px;
    position: relative;
    background-repeat: no-repeat;       /* 禁止平铺 */
    background-position: center center; /* 居中显示 */
    background-size: cover;             /* 自适应填充 */
    /* 兼容性增强 */
    object-fit: cover;                  /* 备用方案 */
}
.style-head-sort-container{
    position: -webkit-sticky;
    position: sticky;
    height: 30px;
    line-height: 30px;
    top: 0;
    z-index: 10;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
}
.style-head-sort-action{
    position: relative;
    display: block;
    width: auto;
    padding-left: 15px;
    font-size: 12px;
    height: 100%;
}
.style-head-sort{
    position: absolute;
    top: 0;
    right: 15px;
    height: 100%;
    font-size: 12px;
    color: rgba(0, 0, 0, .6);
}
.style-head-sort .sortType{
    font-size: 12px;
    color: rgba(0, 0, 0, .4);
    cursor: pointer;
    &:hover{
        color: rgba(0,0,0,.8);
    }
}
.style-head-sort .sortType.active{
    color: rgba(0, 0, 0, .8);
}
.artist-header::after,.style-header::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, #31c27c);
    z-index: 1;
}
/* 数据统计容器 */
.artist-stats,.style-stats {
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 2;
    display: flex;
    gap: 20px;
}
 
/* 统计项样式 */
.stat-item {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    padding: 4px 12px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
}
 
/* 图标样式 */
.stat-item i {
    /*margin-right: 5px;*/
    /*font-size: 16px;*/
}

.artist-info {
    margin-left: 25px;
    flex: 1;
    z-index: 2;
}
.artist-info h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 5px 0 8px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.alias {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 15px;
}
 
/* 导航标签 */
.artist-tabs,.style-tabs {
    display: flex;
    justify-content: space-around; /* 平均分配空间 */
    border-bottom: 1px solid #eaeaea;
    background: #fafafa;
    position: relative;
    z-index: 3;
}
 
.artist-tab,.style-tab {
    position: relative;
    flex: 1; /* 等分宽度 */
    min-width: 0; /* 防止文本溢出 */
    padding: 12px 5px; /* 调整内边距 */
    font-size: 16px;
    text-align: center; /* 文字居中 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出显示省略号 */
    cursor: pointer;
}
.artist-tab.active,.style-tab.active  {
    color: #31c27c;
    font-weight: 500;
}
.artist-tab.active::after,.style-tab.active::after  {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;          /* 调整为百分比单位 */
    right: 15%;         /* 与左侧对称 */
    height: 3px;
    background: #31c27c;
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease; /* 添加过渡动画 */
}
.artist-tab:hover:not(.active),.style-tab:hover:not(.active) {
    color: #333;
    background: rgba(0, 0, 0, 0.03);
}
 
/* 内容区 */
/* 内容区容器 */
.artist-content,.style-content {
    flex: 1;
    overflow-y: auto;
}
 
/* 标签内容区 */
.artist-tab-content,.style-tab-content {
    display: none;
    height: 100%;
    padding: 0 5px 0 5px;
    overflow-y: auto; /* 启用内部滚动 */
    scrollbar-width: thin;
    scrollbar-color: #31c27c rgba(0,0,0,0.1);
}
.artist-tab-content.active,.style-tab-content.active  {
    display: block;
}
 
/* 滚动条美化（Webkit） */
.artist-tab-content::-webkit-scrollbar,.style-tab-content::-webkit-scrollbar,.djListCat-container::-webkit-scrollbar,.userInfos-container::-webkit-scrollbar {
    width: 6px;
}
.artist-tab-content::-webkit-scrollbar-thumb,.style-tab-content::-webkit-scrollbar-thumb,.djListCat-container::-webkit-scrollbar-thumb,.userInfos-container::-webkit-scrollbar-thumb {
    background: #31c27c;
    border-radius: 3px;
    cursor: pointer;
}

/* 操作按钮容器 */
.artist-actions {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
}
/*关注按钮*/
.follow-btn,.selectedTag-btn{
    position:relative;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.3);
    color: white;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 0.8;
        filter: Alpha(opacity = 80);
    }
}
.follow-btn{
    bottom: 3px;
}
.selectedTag-btn{
    width:20px;
    color: rgba(0,0,0,.8);
    text-align: center; /* 文字居中 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden;
}
.closeThisTag{
    display:inline-block;
    width:12px;
    height:12px;
    background: url(../images/icon_sprite.png);
    background-position: -160px -121px;
    margin-left: 5px;
}
.icon-follow{
    display:inline-block;
    width:12px;
    height:12px;
    background: url(../images/icon_sprite.png);
    background-position: -22px -22px;
    margin-right: 5px;
}
.follow-btn.active{
    border: 1px solid #31c27c;
    color: #31c27c;
}
.follow-btn.active .icon-follow{
    background-position: -60px -100px;
}
/* 收藏按钮基础样式 */
.collect-btn {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.3);
    color: white;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 0.8;
        filter: Alpha(opacity = 80);
    }
}

/* 已收藏状态 */
.collect-btn[data-collected="0"] {
    background: #31c27c;
    border-color: #31c27c;
}
 
/* 图标样式 */
.icon-collect {
    width:16px;
    height:16px;
    background: url(../images/icon_sprite.png);
    background-position: -60px -18px;
    margin-right: 5px;
}
.icon-collect.active {
    background: url(../images/icon_sprite.png);
    background-position: 0 -78px;
}
.artist-tab-content .list-item,.style-tab-content .list-item{
    color:rgba(0,0,0,.6);
}
.artist-tab-content .music-info-name,.artist-tab-content .album-artist-name,.artist-tab-content .mv-name,.artist-tab-content .sheet-name{
    color: rgba(0,0,0,.6);
    &:hover{
        color: rgba(0,0,0,.8);
    }
}
.style-tab-content .music-info-name,.style-tab-content .album-artist-name,.style-tab-content .mv-name,.style-tab-content .sheet-name,.style-tab-content .artist-name{
    color: rgba(0,0,0,.6);
    &:hover{
        color: rgba(0,0,0,.8);
    }
}
/* 详情卡片容器 */
.detail-card {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
 
/* 详情模块标题 */
.detail-title {
    font-size: 18px;
    color: #333;
    margin: 25px 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}
.detail-title i {
    margin-right: 8px;
    width: 5px;
    height: 16px;
    background: #31c27c;
}
 
/* 简介文本样式 */
.detail-text {
    line-height: 1.8;
    color: #666;
    text-align: justify;
}

/*曲风界面css*/
/* 配套CSS建议 */
.music-genre-card {
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.genre-cover {
    height: 70px;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
}
.genre-cover:hover .genre-title{
    opacity: 0.8;
    filter: Alpha(opacity = 80);
}
.genre-overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    position: absolute;
    inset: 0;
}
.genre-title {
    color: white;
    position: absolute;
    padding: 8px 12px;
    bottom: 16px;
    left: 16px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    cursor: pointer;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
}
.genre-cover .style-slidetoggle-i{
    position: absolute;
    top: 14px;
    background-position: -40px -260px;
}
.subgenre-ul .style-slidetoggle-i{
    background-position: -120px -40px;
    margin-top:5px;
    float:right;
}
.subgenre-ul{
    display: none;
}
.subgenre-list {
    padding: 12px;
    background: #f8f9fa;
    display: grid;
    gap: 8px;
}
.subgenre-item {
    padding: 8px 12px;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    opacity: 0.6;
    filter: Alpha(opacity = 60);
    &:hover{
        opacity: 0.8;
        filter: Alpha(opacity = 80);
    }
}
.subgenre-item small {
    color: #6c757d;
    font-size: 0.8em;
    margin-left: 4px;
}


/* 以下是界面右侧 css 样式 */
/* 播放器主体(歌词和封面) */
.player {
    /*border: 1px solid red;*/
    height: 100%;
    width: 400px;
    /*float: right;*/
    right: 0;
    position: absolute;
}
/*音乐盒*/
:root {
    --rotate-speed: 0;
    --needle-angle: -15deg;
    --disc-bg: #1e1e1e; /* 底层圆盘背景色 */
}

.music-box {
    width: 226px;
    height: 226px;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
}

/* 外层圆盘容器 */
.disc-outer {
    width: 100%;
    height: 100%;
    /*background: var(--disc-bg);*/
    border-radius: 50%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-top: 50px;
}

/* 中层光盘 */
.disc-middle {
    width: 206px;
    height: 206px;
    top: 10px;
    left: 10px;
    background: url('../images/coverall.png');
    background-position: -140px -580px;
    border-radius: 50%;
    position: absolute;
    /*box-shadow: inset 0 0 15px rgba(0,0,0,0.8);*/
}

/* 内层封面 */
.disc-inner {
    width: 130px;
    height: 130px;
    background: url('../images/artist-cover.jpg')  center/cover;
    border-radius: 50%;
    position: absolute;
    top: 37px;
    left: 37px;
    border: 1px solid;
}
.disc-inner:before{
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    border-radius:50%;
    z-index:-1;
    box-shadow: inset 0 0 0 60px rgba(255,0,0,0.8);
}
/* 旋转控制 */
.disc-rotate {
    animation: rotate linear infinite;
    animation-duration: calc(20s / var(--rotate-speed));
    animation-play-state: paused;
}

/* 唱针 */
.needle {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 88px;
    height: 72px;
    transform-origin: 5px 5px;
    transform: rotate(var(--needle-angle));
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 10;
}
/* 切换时的抬起状态 */
.needle.lifting  {
    transform: rotate(-15deg); /* 复合动画 */
}
.needle img{
    width:100%;
    height:100%;
}
/* 新增固定底座 */
.needle::before {
    content: '';
    position: absolute;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    top: -4px; /* 根据实际图片调整 */
    left: -4px;
    z-index: -1;
}

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

/* 交互状态 */
.playing .disc-rotate {
    animation-play-state: running;
}
.playing .needle {
    --needle-angle: 22deg;
}

/* 歌曲封面区域 */
.cover {
    position: relative;
    display: block;
    width: 186px;
    height: 186px;
    margin: auto;
    cursor: pointer;
}

.cover:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 0;
    width: 201px;
    height: 180px;
    background: url(../images/album_cover_player.png) 0 0 no-repeat;
    pointer-events: none;
}
/* 歌曲封面图片 */
.music-cover {
    vertical-align: middle;
    width: 186px;
    height: 186px;
}
.song-singer{
    position: absolute;
    left: 10px;
    right: 10px;
    top: 280px;
    text-align: center;
    color: rgba(225,225,225,.8);
    overflow: hidden;
}
.song-singer.active{
    top: 195px;
}
.song-name,.singer-name,.album-name{
    display: block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 0;
}
.song-info-name a,.music-info-name,.music-info-name-search{
    cursor: pointer;
    color: rgba(225,225,225,.8);
    &:hover{
        color: rgba(225,225,225);
    }
}
/* 歌词显示区域 */
.lyric {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 380px;
    bottom: 10px;
    overflow: hidden;
    text-align: center;
    color: #bdbdbe;
    color: rgba(225,225,225,.8);
    line-height: 28px;
    padding: 20px 0;
}
.lyric.active{
    top: 300px;
}
/*歌词上下阴影*/
.tbShadow {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(15%, hsla(0, 0%, 100%, .6)), color-stop(25%, #fff), color-stop(75%, #fff), color-stop(85%, hsla(0, 0%, 100%, .6)), to(hsla(0, 0%, 100%, 0)));
    -webkit-mask-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .6) 15%, #fff 25%, #fff 75%, hsla(0, 0%, 100%, .6) 85%, hsla(0, 0%, 100%, 0));
    mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(15%, hsla(0, 0%, 100%, .6)), color-stop(25%, #fff), color-stop(75%, #fff), color-stop(85%, hsla(0, 0%, 100%, .6)), to(hsla(0, 0%, 100%, 0)));
    mask-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .6) 15%, #fff 25%, #fff 75%, hsla(0, 0%, 100%, .6) 85%, hsla(0, 0%, 100%, 0));
}
/* 歌词ul */
#lyric {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
    /*overflow-y: auto;*/
    -ms-overflow-style: none;  /* 针对 Internet Explorer 和旧版 Edge 隐藏滚动条 */
    scrollbar-width: none;  /* 针对 Firefox 隐藏滚动条 */
}
#lyric>li {
    /*word-break: keep-all;*/
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    padding:5px 0;
    /*transition: all 1s ease;*/
    /*-webkit-transition: all 1s ease;*/
    /*-moz-transition: all 1s ease;*/
    /*-o-transition: all 1s ease;*/
    /*-ms-transition: all 1s ease;*/
}
/* 正在播放的那一句歌词 */
#lyric .lplaying {
    /*color: #31c27c;*/
    /*scale: 1.5;*/
    /*font-size: 18px;*/
    font-weight: 700;
    background: -webkit-linear-gradient(left, #ffffff 10%, #FFEB3B 40%, #FF9800 50%, #FF5722 80%);
    background: -moz-linear-gradient(to right, #ffffff 10%, #FFEB3B 40%, #FF9800 50%, #FF5722 80%);
    background: -o-linear-gradient(to right, #ffffff 10%, #FFEB3B 40%, #FF9800 50%, #FF5722 80%);
    background: -ms-linear-gradient(to right, #ffffff 10%, #FFEB3B 40%, #FF9800 50%, #FF5722 80%);
    background: linear-gradient(to right, #ffffff 10%, #FFEB3B 40%, #FF9800 50%, #FF5722 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
/* 歌词显示区显示的提示语(如加载中、无歌词等) */
.lyric-tip {
    position: absolute;
    width: 100%;
    top: 50%;
}
#lyric li .shell {
    display:inline-block;
    line-height:20px;
}

/*#lyric .lplaying .shell {*/
/*    line-height:24px;*/
/*}*/
/*纯净模式歌词*/
.lyric-only,.lyric-only.active{
    top: 30px;
    width: 100%;
}
.lyric-only #lyric li{
    font-size: 22px;
    padding:15px 0;
}
.lyric-only #lyric .lplaying{
    /*font-size: 26px;*/
    letter-spacing: 1px;
}
.lyric-only #lyric li .shell{
    line-height:28px;
}
/*.lyric-only #lyric .lplaying .shell{*/
/*    line-height:32px;*/
/*}*/

/*歌手写真*/
.singer-pic,.singer-pic-controls{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
.player-singer .singer-pic-controls.active{
    display: block;
}
.singer-pic:before{
    content: '';
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute; /* 伪元素需要绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.player-singer-lrc-middle .singer-pic:before{
    background-color: rgba(0, 0, 0, 0.6);
}
/*写真开启模式*/
.player-singer{
    box-shadow: 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.8);
}

.player-singer .music-box, .player-singer .cover, .player-singer .song-singer{
    display: none !important;
}
.player-singer .singer-pic{
    display: block;
}
/*写真模式下的歌词*/
.player-singer .lyric{
    top: 80%;
}
.player-singer-lrc-middle.player-singer .lyric{
    top: 300px;
}
.player-singer #lyric li{
    color: #ffffff;
}
.player-singer .lyric-only{
    top: 60%;
}
.player-singer-lrc-middle .lyric-only{
    top: 30px;
}
/*写真控制按钮*/
@media (any-hover: hover){
    .player-singer:hover .singer-pic-controls{
        display: block !important;
    }
}
.pic-tips{
    display:none;
    position: absolute;
    height: 12px;
    line-height: 12px;
    /*border: 1px solid red;*/
    top: 40px;
    right: 5px;
    font-size: 8px;
    color: rgba(255,255,255,.6);
}
/*.slideTip-i{*/
/*    display: block;*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    background: url(../images/icon_sprite.png);*/
/*    background-position: -80px -320px;*/
/*    margin-right: 5px;*/
/*}*/
.pic-times,.pic-pre-next,.pic-lrc-control{
    transition: opacity 0.25s ease;
    -webkit-transition: opacity 0.25s ease;
    -moz-transition: opacity 0.25s ease;
    -o-transition: opacity 0.25s ease;
    -ms-transition: opacity 0.25s ease;
    font-size:10px;
    text-align: center;
    line-height: 22px;
    width:22px;
    height:22px;
    margin-bottom: 10px;
    color:#fff;
    border:2px solid #fff;
    border-radius:50%;
    z-index: 2;
    cursor:pointer;
    opacity: 0.3;
    filter: Alpha(opacity = 30);
    &:hover{
        opacity: 1;
        filter: Alpha(opacity=100);
    }
}
.pic-times-0,.pic-fade-times{
    position:absolute;
    top:50%;
    left: 10px;
}
.pic-times-0{
    margin-top:-46px;
}
.pic-fade-times{
    display: none;
    width: 26px;
    height: 132px;
    margin-top:-152px;
    z-index: 1;
    &:hover{
         display:block;
    }
}
.pic-times-0:hover+.pic-fade-times{
    display: block;
}
.pic-times.active{
    color:#31c27c;
    border:2px solid #31c27c;
}
.pic-times-0 span{
    position:relative;
    display: block;
    width: 16px;
    height: 16px;
    margin: 3px auto;
    background-image: url(../images/unlock.png);
    background-size: cover;
}
.pic-times-0.active span{
    background-image: url(../images/lock.png);
}
.pic-pre-next{
    position:absolute;
    top:50%;
    margin-top: -11px;
    margin-bottom: 0;
    z-index: 1;
}
.pic-pre{
    left: 10px;
}
.pic-next{
    right: 10px;
}
.pic-pre span{
    position:relative;
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px auto;
    background-image: url(../images/icon_sprite.png);
    background-position: -58px -260px;
}
.pic-next span{
    position:relative;
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px auto;
    background-image: url(../images/icon_sprite.png);
    background-position: -37px -260px;
}
/*歌词箭头*/
.pic-lrc-control{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 75%;
    left: 0;
    right: 0;
    border: none;
    margin: auto;
    background-image: url("../images/lrc-up.png");
    background-size: cover;
}
.player_style_only .pic-lrc-control{
    top: 55%;
}
.player-singer-lrc-middle .pic-lrc-control{
    top: 265px;
    background-image: url("../images/lrc-down.png");
}
.player_style_only.player-singer-lrc-middle .pic-lrc-control{
    top: 0;
    background-image: url("../images/lrc-down.png");
}
/* 歌曲信息按钮 */
.music-info {
    transition: opacity 0.25s ease;
    -webkit-transition: opacity 0.25s ease;
    -moz-transition: opacity 0.25s ease;
    -o-transition: opacity 0.25s ease;
    -ms-transition: opacity 0.25s ease;
    position: absolute;
    width: 26px;
    height: 26px;
    right: 10px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-weight: bold;
    background-image: url(../images/player.png);
    opacity: 0.3;
    filter: Alpha(opacity=30);
}

.music-info:hover {
    opacity: 1;
    filter: Alpha(opacity=100);
}
#music-info{
    bottom: 10px;
    border-radius: 13px;
    background-color: #353535;
    background-position: -28px -367px;
}
#music-speed{
    background-image: url(../images/speed.png);
    background-size: cover;
    bottom: 50px;
}
#music-speed.active{
    background-image: url(../images/speed-active.png);
}
#music-singer{
    background-image: url(../images/singer.png);
    background-size: cover;
    bottom: 90px;
}
#music-singer.active{
    background-image: url(../images/singer-active.png);
}
#music-mv{
    background-image: url(../images/mv.png);
    background-size: cover;
    bottom: 130px;
}
#music-comment{
    background-image: url(../images/player-new.png);
    background-position: 1px -400px;
    bottom: 170px;
}
#music-tlyric{
    display: none;
    bottom: 210px;
    background-position: -29px -340px;
}
#music-br{
    width: 22px;
    height: 16px;
    bottom: 250px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 16px;
    /*background-color: #353535;*/
    border: 2px solid #FF5722;
    color: #FF5722;
    background-image:none;
}

/*倍速播放滑块样式*/
.slider-container {
    position: relative;
    width: 260px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    margin: 20px auto;
}
 
.slider-track {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}
 
.slider-progress {
    position: absolute;
    height: 100%;
    background: #31c27c;
    border-radius: 3px;
    cursor: pointer;
}
 
.slider-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border:2px solid #31c27c;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    top: 50%;
    transition: transform 0.2s ease; /* 添加平滑过渡效果 */
}
 
.slider-thumb.left  {
    width: 18px;
    height: 18px;
    left: 0%;
    border-color: #ddd;
}
 
.slider-thumb.right  {
    left: 0%;
}

/* 悬停时显示数字块并放大圆点 */
.slider-thumb.right:hover  {
    transform: translate(-50%, -50%) scale(1.2); /* 放大圆点 */
}
 
.slider-thumb.right:hover ~ .layui-slider-tips {
    display: block !important;
    opacity: 1;
}

.layui-slider-tips {
    position: absolute;
    display: none;
    top: -40px;
    left: 15%;
    z-index: 1;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
    background: #000;
    border-radius: 3px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
}
.layui-slider-tips:after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

/* 标题 */
.info-title {
    color: #B2AFAF
}
.info-btn {
    cursor: pointer;
    color: #31c27c;
}
.info-btn:hover {
    text-decoration: underline;
}
/* 底部 */
.footer {
    height: 100px;
    bottom: 0;
    width: 100%;
    position: absolute;
}

/* 带图片的按钮 */
.player-btn {
    background-image: url("../images/player.png");
    opacity: .8;
    filter: alpha(opacity=80)
}
.player-btn:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}
/* 暂停状态 */
.btn-state-paused {
    background-position: -30px 0;
}
/* 控制按钮(上一首、播放、下一首)区域 */
.con-btn {
    float: left;
    width: 130px;
    height: 100%;
    position: relative;
    margin: 0 10px;
}
.con-btn a{
    /*display: inline-block;*/
    position: absolute;
    top: 50%; 
}
.btn-prev{
    background-position: 0 -30px;
    width: 19px;
    height: 20px;
    margin-top: -10px; 
}

.btn-play{
    width: 21px;
    height: 30px;
    margin-top: -14.5px; 
    left: 36%;
    margin-left: -10.5px; 
}
.btn-next{
    background-position: 0 -52px;
    right: 30%;
    width: 19px;
    height: 20px;
    margin-top: -10px; 
}
.btn-order{
    background-position: 0 -173px;
    background-size: 450%;
    right: 0;
    width: 25px;
    height: 24px;
    margin-top: -10px; 
}
.btn-order-single {
    background-position: 0 -196px;
}
.btn-order-list {
    background-position: 0 -173px;
}
.btn-order-random {
    background-position: 0 -62px;
    height: 18px;
    margin-top: -9px;
}
.music-only{
    float: right;
    width: 74px;
    height: 100%;
    position: relative;
    margin: 0 10px;
}
.btn-only{
    display: inline-block;
    position: absolute;
    top: 50%;
    background-position: 0 -282px;
    width: 74px;
    height: 26px;
    margin-top: -10px; 
}
/* 音乐进度条区域 */
.progress {
    width: auto;
    margin-left: 190px;
    margin-right: 340px;
    height: 100%;
    position: relative;
}

/* 限制进度条的盒子 */
.progress-box {
    position: absolute;
    height: 20px;
    left: 10px;
    right: 0;
    top: 50%;
    margin-top: -9px;
}

.lists-box{
    display: none;
    position: absolute;
    right: 0;
}
.song-lists{
    width: 20px;
    height: 21px;
    margin-top:-10px;
    background-position: 0 -260px;
}
.song-box{
    width: 6px;
    height: 6px;
    margin-top:-10px;
    border:8px solid #fff;
    border-radius:50%;
    background-position: 0 -400px;
}
/* 音量控制区域 */
.vol {
    float: right;
    width: 180px;
    height: 100%;
    right: 0;
    position: relative;
}

.quiet {
    width: 40px;
    height: 100%;
    position: relative;
    float: left;
}
.btn-quiet{
    display: inline-block;
    position: absolute;
    width: 26px;
    height: 21px;
    top: 50%;
    right: 0;
    margin-top: -10px;
    background-position: 0 -144px;
}
.btn-state-quiet {
    background-position: 0 -182px;
}
.volume {
    position: relative;
    margin-left: 40px;
    height: 100%;
    overflow: hidden;
}
/* 限制声音进度条的盒子 */
.volume-box {
    position: absolute;
    height: 20px;
    left: 10px;
    right: 10px;
    top: 50%;
    margin-top: -10px;
}

/* 以下是孟坤进度条控件样式区域 */
/* 进度条可点击区域 */
.mkpgb-area {
    position: relative;
    cursor: pointer;
    height: 100%;
}
/* 进度条有背景区域 */
.mkpgb-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px; 
    margin-top: -1px; 
    border-radius: 2px;
    background-color: #808284;
    overflow: hidden;
}
/* 进度条已完成区域 */
.mkpgb-cur {
    position: absolute;
    background-color: #D8D8D8; 
    width: 0; 
    height: 2px; 
    top: 50%;
    margin-top: -1px; 
    border-radius: 2px;
    /*transition: all 0.25s ease;*/
    /*-webkit-transition: all 0.25s ease;*/
    /*-moz-transition: all 0.25s ease;*/
    /*-o-transition: all 0.25s ease;*/
    /*-ms-transition: all 0.25s ease;*/
}
/* 进度条小点 */
.mkpgb-dot {
    width: 10px; 
    height: 10px; 
    background-color: #fff; 
    border-radius: 5px; 
    overflow: hidden; 
    position: absolute; 
    left: 0px; 
    margin-left: -5px; 
    top: 50%; 
    margin-top: -5px;
    /*transition: all 0.25s ease;*/
    /*-webkit-transition: all 0.25s ease;*/
    /*-moz-transition: all 0.25s ease;*/
    /*-o-transition: all 0.25s ease;*/
    /*-ms-transition: all 0.25s ease;*/
}
/* 进度条禁止点击样式 */
.mkpgb-locked {
    cursor: default;
}
.mkpgb-ztime {
    position: absolute;
    margin-left: -50px;
    color: #efe9e8;
}
.mkpgb-ttime {
    position: absolute;
    margin-right: -50px;
    right: 0;
    color: #efe9e8;
}
/* 闪动效果作者：qiuye */
.dot-move {
    -webkit-box-shadow: 0 0 20px #fff;
    -moz-animation: dot-move 3s linear 2s infinite;
    -webkit-animation: dot-move 3s linear 2s infinite;
    -o-animation: dot-move 3s linear 2s infinite;
    -ms-animation: dot-move 3s linear 2s infinite;
}
@-webkit-keyframes dot-move{0%{-webkit-box-shadow: 0 0 20px #fff;}25%{-webkit-box-shadow: 0 0 10px #fff;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 10px #fff;}100%{-webkit-box-shadow: 0 0 20px #fff;}}
@keyframes dot-move{0%{-webkit-box-shadow: 0 0 10px #363333;}25%{-webkit-box-shadow: 0 0 7px #363333;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 6px #fff;}100%{-webkit-box-shadow: 0 0 10px #363333;}}


/*音效调节*/
.audio-enhance-panel {
  padding: 15px;
}
.control-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.control-row label {
  width: 80px;
  font-size: 14px;
}
.control-row input[type="range"] {
  flex: 1;
  height: 6px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
}
.control-row .value {
  width: 50px;
  text-align: right;
  font-family: monospace;
}

* {
    touch-action: pan-y;
}
/* layer弹窗插件自定义其他任意主题  */
.class-layer-demo-custom .layui-layer-title{
    background: #31c27c;
    color: #fff;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none; /*禁止双击选定*/
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.class-layer-demo-custom .layui-layer-btn .layui-layer-btn0{
    background: #31c27c;
    border-color: #31c27c;
}
.class-layer-demo-custom .layui-layer-content {
    padding: 20px;
    scrollbar-width: thin;
    scrollbar-color: #31c27c rgba(0,0,0,0.1);
}
.dplayer-layer .layui-layer-content{
    padding: 0 !important;
}
.class-layer-demo-custom .layui-layer-input {
    display: block;
    width: 220px;
    height: 30px;
    margin: 0 auto;
    line-height: 30px;
    padding: 0 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1) inset;
    color: #333;
}

/* 滚动条美化（Webkit） */
.class-layer-demo-custom .layui-layer-content::-webkit-scrollbar {
    width: 6px;
}
.class-layer-demo-custom .layui-layer-content::-webkit-scrollbar-thumb {
    background: #31c27c;
    border-radius: 3px;
    cursor: pointer;
}
/*锁屏界面*/
.class-demo-layer-lockscreen{background: url("../images/bg.jpg") #16b777 center; background-size: cover; color: rgba(255,255,255,1);}
.class-demo-layer-lockscreen .layui-form{position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%);}
/*.class-demo-layer-lockscreen .layui-form > div{margin-bottom: 8px;}*/
.class-demo-layer-pin{width: 100%; height: 38px; padding: 0 8px; background-color: rgba(255,255,255,.8); border: none; border-radius: 3px; box-sizing: border-box;}
.layer-demo-lock-tips{color:rgba(0,0,0,.5);}
.class-demo-layer-lockscreen .layui-input-suffix, .class-demo-layer-lockscreen .layui-input-affix{
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 10px;
    width: 35px;
    height: 38px;
    text-align: center;
    transition: all .3s;
    box-sizing: border-box;
    pointer-events: auto;
    background-color: rgba(0,0,0,.5);
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}
.class-demo-layer-lockscreen .layui-input-suffix:hover .layui-icon-right{
    background-position: -116px -58px;
}
.class-demo-layer-lockscreen .layui-input-suffix .layui-icon-right{
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("../images/icon_sprite.png");
    background-position: -35px -258px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none; /*禁止双击选定*/
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.class-demo-layer-lockscreen .layui-input-affix{
    background-color: rgba(0, 0, 0, 0);
    right: 35px;
}
.class-demo-layer-lockscreen .layui-input-affix .layui-icon-eye-invisible{
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("../images/eye-slash-regular.png");
    background-size: cover;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none; /*禁止双击选定*/
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.title-container {  
    position: relative;
    text-align: center;  
    top: 20%;  
}  

.main-title {  
    font-size: 24px;  
    font-weight: bold;  
    color: #333;  
    margin: 0;  
}  

.sub-title {  
    font-size: 14px;  
    color: #666;  
    margin: 5px 0 0 0;  
}

@keyframes slideDown {
    from {transform: translateY(0);}
    to {transform: translateY(100%);}
}
@keyframes slideUp {
    from {transform: translateY(100%);}
    to {transform: translateY(0);}
}
.slide-down {
    animation: slideDown 0.3s ease forwards;
}
.slide-up {
    animation: slideUp 0.3s ease forwards;
}