/* ===== 全局重置 ===== */
@font-face {
    font-family: 'azizam';
    src: url('//69dj.net/static/newdefault/css/azizam.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* ===== 手机版：切换按钮移到左上角 ===== */
@media screen and (max-width: 768px) {
    #themeToggleBtn {
        margin-bottom: 35px;
        margin-right: 2px;
        font-size: 11px !important;
        z-index: 99999999 !important;
    }
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#0d0d0d;color:#ddd;font-family:"azizam",Arial,sans-serif;font-size:13px;line-height:1.5;}
a{color:#ccc;text-decoration:none;}
a:hover{color:#ff8c00;}
ul,li{list-style:none;}
img{border:0;}
.wrap{max-width:1200px;margin:0 auto;padding:0 12px;}
.clearfix:after{content:"";display:block;clear:both;}
.fl{float:left;}
.fr{float:right;}

/* ===== 顶栏 ===== */
.topbar{background:#161616;border-bottom:2px solid #ff8c00;padding:0 16px;height:46px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;position:sticky;top:0;z-index:99;}
.topbar .logo{font-size:20px;font-weight:800;color:#ff8c00;}
.topbar .logo i{background:#ff8c00;color:#111;padding:0 5px;border-radius:3px;margin-right:4px;font-style:normal;}
.topbar .nav{display:flex;gap:16px;flex-wrap:wrap;}
.topbar .nav a{font-size:13px;padding:2px 0;border-bottom:2px solid transparent;}
.topbar .nav a:hover,.topbar .nav a.act{border-bottom-color:#ff8c00;color:#ff8c00;}
.topbar .user{display:flex;gap:8px;align-items:center;}
.topbar .user .btn{background:#ff8c00;color:#111;padding:3px 16px;border-radius:30px;font-size:12px;font-weight:600;}
.topbar .user .btn:hover{background:#e67a00;}
.topbar .user .btn-out{border:1px solid #444;padding:3px 16px;border-radius:30px;font-size:12px;}
.topbar .user .btn-out:hover{border-color:#ff8c00;color:#ff8c00;}
.btn-sm {
    display: inline-block;
    border: 1px solid #444;
    border-radius: 30px;
    font-size: 12px;
    padding: 2px 12px;
    white-space: nowrap;
    color: #ccc;
}

.btn-sm:hover {
    border-color: #ff8c00;
    color: #ff8c00;
}

@media (max-width: 768px) {
    .topbar .user {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    .btn-sm {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }
}
/* ===== 手机版 - 自我推广一行3个 ===== */
@media (max-width: 768px) {
    .grid-6 {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .self-promo .thumb {
        aspect-ratio: 150/170 !important;
    }
    .self-promo .thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .self-promo .name {
        font-size: 12px !important;
    }
    .self-promo .sub {
        font-size: 10px !important;
    }
}
/* ===== 手机版 - 强制所有 grid-6 一行3个 ===== */
@media (max-width: 768px) {
    .grid-6 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .grid-6 .card {
        padding: 6px 4px !important;
    }
    .grid-6 .card .thumb {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 4px !important;
    }
    .grid-6 .card .thumb img {
        width: 80px !important;
        height: 80px !important;
        object-fit: cover !important;
    }
    .grid-6 .card .name {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .grid-6 .card .sub {
        font-size: 10px !important;
    }
}
/* ===== 电脑版 - 打卡达人一行10个 ===== */
@media (min-width: 769px) {
    .daka-grid {
        display: grid !important;
        grid-template-columns: repeat(10, 1fr) !important;
        gap: 6px !important;
    }
}
/* ===== 手机版 - 打卡达人一行5个 ===== */
@media (max-width: 768px) {
    .daka-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }
    .daka-grid .card .thumb {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 4px !important;
    }
    .daka-grid .card .thumb img {
        width: 40px !important;
        height: 40px !important;
        object-fit: cover !important;
    }
    .daka-grid .card .name {
        font-size: 10px !important;
    }
    .daka-grid .card .sub {
        font-size: 9px !important;
    }
}
/* ===== 电脑版 - 各类排行一行10个 ===== */
@media (min-width: 769px) {
    .rank-grid {
        display: grid !important;
        grid-template-columns: repeat(10, 1fr) !important;
        gap: 6px !important;
    }
}
/* ===== 手机版 - 各类排行一行5个 ===== */
@media (max-width: 768px) {
    .rank-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
    }
    .rank-grid .card {
        padding: 6px 4px !important;
    }
    .rank-grid .card .thumb {
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 4px !important;
    }
    .rank-grid .card .thumb img {
        width: 44px !important;
        height: 44px !important;
        object-fit: cover !important;
    }
    .rank-grid .card .name {
        font-size: 10px !important;
    }
    .rank-grid .card .sub {
        font-size: 9px !important;
    }
}
/* ===== 排行标签高亮 ===== */
.rank-tab.active {
    background: #ff8c00 !important;
    color: #111 !important;
    border-color: #ff8c00 !important;
}
/* ===== 公告栏 ===== */
.notice-bar{background:#1a1a1a;border:1px solid #282828;border-radius:4px;padding:6px 12px;margin:10px 0 6px;color:#aaa;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.notice-bar a{color:#ff8c00;}
.notice-bar a:hover{color:#fff;}

/* ===== 搜索框 ===== */
.search-box{text-align:center;padding:12px 0 8px;}
.search-box .search-wrap{display:inline-flex;max-width:500px;width:100%;position:relative;}
.search-box input{width:100%;height:36px;padding:0 40px 0 15px;border-radius:18px;border:1px solid #333;background:#1a1a1a;color:#ddd;font-size:14px;outline:none;}
.search-box input:focus{border-color:#ff8c00;}
.search-box button{position:absolute;right:0;top:0;height:36px;width:36px;background:#f5f5f5;color:#666;border:none;border-radius:0 18px 18px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.search-box button:hover{background:#e5e5e5;}

/* ===== 板块标题 ===== */
.mod-hd{font-size:16px;font-weight:700;margin:24px 0 12px;padding-left:10px;border-left:3px solid #ff8c00;display:flex;align-items:center;}
.mod-hd .more{font-weight:400;font-size:12px;color:#777;margin-left:auto;}
.mod-hd .more a{color:#888;}
.mod-hd .more a:hover{color:#ff8c00;}

/* ===== 广告横幅 ===== */
.banner-text{text-align:center;margin:8px 0;}
.banner-text img{max-width:100%;height:auto;border-radius:6px;}

/* ===== 网格布局 ===== */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}

/* ===== 卡片 ===== */
.card{background:#151515;border-radius:8px;padding:10px 8px 12px;border:1px solid #222;text-align:center;transition:0.2s;}
.card:hover{border-color:#ff8c0044;background:#1a1a1a;}
.card .thumb{background:#1f1f1f;border-radius:6px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:1px solid #282828;margin-bottom:6px;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card .sub{font-size:11px;color:#888;}
.card .tag{display:inline-block;font-size:10px;background:#ff8c0015;color:#ff8c00;padding:0 10px;border-radius:20px;border:1px solid #ff8c0022;margin-top:3px;}

/* ===== 自我推广 ===== */
.self-promo .thumb{aspect-ratio:150/170;}
.self-promo .thumb img{width:100%;height:100%;object-fit:cover;border-radius:5px;}

/* ===== 双栏布局 ===== */
.two-col{display:flex;gap:20px;margin:6px 0 16px;}
.two-col .left{flex:2.4;}
.two-col .right{flex:1.2;background:#141414;border-radius:10px;padding:14px;border:1px solid #252525;}
.right .rtitle {
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #262626;
    padding-bottom: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    border-left: 3px solid #ff8c00;
}
.right .rtitle a{font-size:12px;font-weight:400;color:#777;}
.right .rtitle a:hover{color:#ff8c00;}
.online-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #1e1e1e;font-size:13px;}
.online-item .dot{width:6px;height:6px;background:#44ff88;border-radius:50%;display:inline-block;flex-shrink:0;}
.online-item .uname{flex:1;}
.online-item .utime{color:#666;font-size:11px;margin-right: 20px;}

/* ===== 排行标签 ===== */
.rank-tags{display:flex;flex-wrap:wrap;gap:6px 12px;margin:4px 0 12px;}
.rank-tags a{background:#161616;padding:4px 18px;border-radius:30px;border:1px solid #282828;font-size:13px;cursor:pointer;}
.rank-tags a:hover{background:#ff8c00;color:#111;border-color:#ff8c00;}

/* ===== 友情链接 ===== */
.link-box{background:#131313;border-radius:10px;padding:16px 14px;margin:28px 0 14px;border:1px solid #222;}
.link-box .link-title{text-align:center;font-size:15px;font-weight:600;color:#bbb;margin-bottom:10px;}
.link-box .link-list{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;}
.link-box .link-list a{color:#999;font-size:13px;}
.link-box .link-list a:hover{color:#ff8c00;}
.link-box .apply{text-align:center;margin-top:12px;}
.link-box .apply a{background:#4CAF50;color:#fff;padding:6px 30px;border-radius:4px;font-weight:600;font-size:14px;display:inline-block;}
.link-box .apply a:hover{background:#45a049;}

/* ===== 底部 ===== */
.footer{text-align:center;color:#555;font-size:12px;padding:18px 0 12px;border-top:1px solid #1c1c1c;margin-top:8px;}

/* ===== 响应式 ===== */
@media(max-width:860px){
    .grid-4{grid-template-columns:repeat(3,1fr);}
    .grid-5{grid-template-columns:repeat(3,1fr);}
    .grid-6{grid-template-columns:repeat(3,1fr);}
    .two-col{flex-direction:column;}
}
@media(max-width:560px){
    .grid-4,.grid-5,.grid-6,.grid-3{grid-template-columns:repeat(2,1fr);}
    .topbar{height:auto;padding:8px 12px;gap:6px;}
    .topbar .nav{gap:4px 10px;}
    .search-box input{width:100%;}
}
.topbar {
    background: #161616;
    border-bottom: 2px solid #ff8c00;
    padding: 0 16px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 99;
}
/* ===== 手机版 - 只改样式，不改结构 ===== */
@media (max-width: 768px) {
    .topbar {
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 8px 12px !important;
        gap: 2px !important;
    }
    .topbar > div:first-child {
        width: 100% !important;
        justify-content: center !important;
    }
    .topbar .logo {
        font-size: 18px !important;
    }
    .topbar .nav {
        justify-content: center !important;
        gap: 4px 8px !important;
    }
    .topbar .nav a {
        font-size: 12px !important;
        padding: 2px 4px !important;
    }
    .topbar .user {
        width: 100% !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    .topbar .user > div {
        justify-content: center !important;
    }
    .topbar .user a {
        font-size: 11px !important;
        padding: 8px 22px !important;
    }
}
/* ===== 手机版 - 排行分类一行3个 ===== */
@media (max-width: 768px) {
    .rank-tags {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin: 4px 0 12px !important;
    }
    .rank-tags a {
        display: block !important;
        background: #161616;
        padding: 6px 4px !important;
        border-radius: 30px;
        border: 1px solid #282828;
        font-size: 12px !important;
        cursor: pointer;
        text-align: center !important;
        white-space: nowrap !important;
    }
}
/* ===== 手机版 - 推荐专辑一行4个 ===== */
@media (max-width: 768px) {
    .album-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    .album-grid .card {
        padding: 6px 4px !important;
    }
    .album-grid .card .thumb {
        width: 70px !important;
        height: 70px !important;
        margin: 0 auto 4px !important;
    }
    .album-grid .card .thumb img {
        width: 70px !important;
        height: 70px !important;
        object-fit: cover !important;
    }
    .album-grid .card .name {
        font-size: 10px !important;
    }
}
/* ===== 登陆弹窗 ===== */
.login-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;justify-content:center;align-items:center;}
.login-overlay.active{display:flex;}
.login-box{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:30px 35px;width:400px;max-width:90%;position:relative;}
.login-box .close{position:absolute;top:10px;right:15px;color:#888;font-size:22px;cursor:pointer;}
.login-box .close:hover{color:#fff;}
.login-box h2{color:#ff8c00;text-align:center;font-size:20px;margin-bottom:20px;}
.login-box label{color:#ccc;font-size:13px;display:block;margin-bottom:4px;}
.login-box input{width:100%;padding:10px 14px;border-radius:6px;border:1px solid #333;background:#0d0d0d;color:#ddd;font-size:14px;outline:none;margin-bottom:16px;}
.login-box input:focus{border-color:#ff8c00;}
.login-box .btn-login{width:100%;padding:10px;background:#ff8c00;color:#111;border:none;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;}
.login-box .btn-login:hover{background:#e67a00;}
.login-box .reg-link{text-align:center;margin-top:14px;font-size:13px;color:#888;}
.login-box .reg-link a{color:#ff8c00;}
.login-box .reg-link a:hover{text-decoration:underline;}
.login-box .oauth-section{margin-top:16px;padding-top:16px;border-top:1px solid #2a2a2a;display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;}
.login-box .oauth-section a{display:inline-block;transition:opacity 0.2s;}
.login-box .oauth-section a:hover{opacity:0.8;}
.login-box .oauth-section img{width:134px;height:32px;vertical-align:middle;}
.login-box .bottom-links{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.login-box .bottom-links a{color:#888;font-size:12px;}
.login-box .bottom-links a:hover{color:#ff8c00;}
@media (max-width: 768px) {
    .wrap {
        max-width: 90% !important;
        padding: 0 8px !important;
    }
}
/* ===== 最新上传音乐 - 手机版 ===== */
@media (max-width: 768px) {
    .mod-hd .more {
        font-size: 11px;
    }
    /* 左右两列变上下 */
    .mod-hd + div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .mod-hd + div[style*="display:flex"] > div {
        flex: none !important;
        width: 100% !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list {
        padding: 6px 0 !important;
        border-radius: 6px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list .title {
        padding: 2px 8px !important;
        font-size: 11px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list .title .song {
        padding-left: 14px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list .title .impression {
        width: 40px !important;
        font-size: 11px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li {
        padding: 2px 8px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li .song {
        gap: 3px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li .song input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li .song span {
        min-width: 16px !important;
        font-size: 11px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li .song img {
        width: 16px !important;
        height: 16px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li .song a {
        font-size: 12px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li .impression {
        width: 36px !important;
    }
    .mod-hd + div[style*="display:flex"] .share_list li .impression a {
        font-size: 11px !important;
    }
    /* 底部按钮 */
    .mod-hd + div[style*="display:flex"] + div[style*="padding:4px 12px"] {
        padding: 6px 8px !important;
        gap: 6px !important;
        margin-top: 0 !important;
        justify-content: center !important;
    }
    .mod-hd + div[style*="display:flex"] + div[style*="padding:4px 12px"] a {
        font-size: 12px !important;
        padding: 4px 10px !important;
        background: #222;
        border-radius: 4px;
    }
}

/*播放器页面*/
.play-wrap{max-width:1200px;margin:0 auto;padding:0 12px;}
.play-top{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px;}
.play-left{flex:2;min-width:300px;}
.play-right{flex:1;min-width:200px;}

.player-box{background:#151515;border-radius:10px;padding:20px;border:1px solid #222;margin-top: 15px;}
.player-box .song-title{color:#ddd;font-size:18px;font-weight:600;margin-bottom:8px;}
.player-box .song-title small{color:#888;font-size:13px;font-weight:400;}
.progress-bar{display:flex;align-items:center;gap:12px;padding:6px 0;}
.progress-bar .time{color:#888;font-size:12px;min-width:40px;}
.progress-bar .track{flex:1;height:4px;background:#333;border-radius:4px;cursor:pointer;position:relative;}
.progress-bar .track .fill{height:100%;background:#ff8c00;border-radius:4px;width:0%;}
.controls{display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 0;}
.controls button{background:none;border:none;color:#ddd;font-size:20px;cursor:pointer;opacity:0.7;}
.controls button:hover{opacity:1;color:#ff8c00;}
.controls .play-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.05);font-size:24px;border:2px solid #444;opacity:1;}
.controls .play-btn:hover{background:rgba(255,140,0,0.15);border-color:#ff8c00;}
.controls .play-btn.playing{border-color:#ff8c00;}

.playlist-box{background:#151515;border-radius:10px;padding:16px;border:1px solid #222;margin-top:16px;max-height:300px;overflow-y:auto;}
.playlist-box .pl-title{color:#888;font-size:13px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #2a2a2a;}
.playlist-item{display:flex;align-items:center;padding:5px 8px;border-radius:6px;cursor:pointer;gap:8px;border-bottom:1px solid #222;}
.playlist-item:hover{background:#1a1a1a;}
.playlist-item.active{background:#1a1a1a;border-left:3px solid #ff8c00;}
.playlist-item .num{color:#666;font-size:12px;min-width:28px;}
.playlist-item .name{flex:1;color:#ddd;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.playlist-item .user{color:#666;font-size:11px;}

.user-card{background:#151515;border-radius:10px;padding:16px;border:1px solid #222;text-align:center;margin-top: 15px;}
.user-card .avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 10px;overflow:hidden;border:2px solid #ff8c00;}
.user-card .avatar img{width:100%;height:100%;object-fit:cover;}
.user-card .name{font-size:16px;font-weight:600;color:#ddd;}
.user-card .name a{color:#ddd;}
.user-card .name a:hover{color:#ff8c00;}
.user-card .stats{display:flex;justify-content:center;gap:16px;margin-top:10px;color:#888;font-size:12px;}
.user-card .stats span{text-align:center;}
.user-card .stats b{display:block;color:#ff8c00;font-size:18px;}
.user-card .btns{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.user-card .btns a{display:inline-block;padding:4px 16px;border-radius:30px;font-size:12px;font-weight:600;background:#ff8c00;color:#111;cursor:pointer;}
.user-card .btns a:hover{background:#e67a00;}
.user-card .btns .btn-down{background:#444;color:#ddd;}
.user-card .btns .btn-down:hover{background:#555;}

.song-list-box{background:#151515;border-radius:10px;padding:16px;border:1px solid #222;margin-top:16px;}
.song-list-box .title{color:#ff8c00;font-size:15px;font-weight:600;padding-bottom:8px;border-bottom:1px solid #2a2a2a;margin-bottom:10px;display:flex;justify-content:space-between;}
.song-list-box .title a{color:#888;font-size:12px;font-weight:400;}
.song-list-box .title a:hover{color:#ff8c00;}
.song-item{display:flex;align-items:center;padding:6px 0;border-bottom:1px solid #222;gap:10px;}
.song-item .num{color:#666;font-size:12px;min-width:24px;}
.song-item .name{flex:1;color:#ddd;font-size:13px;}
.song-item .name a{color:#ddd;}
.song-item .name a:hover{color:#ff8c00;}
.song-item .add{color:#ff8c00;font-size:12px;cursor:pointer;padding:2px 8px;}
.song-item .add:hover{background:rgba(255,140,0,0.1);border-radius:4px;}

.info-box{background:#151515;border-radius:10px;padding:16px;border:1px solid #222;}
.info-box .title{color:#ff8c00;font-size:15px;font-weight:600;padding-bottom:8px;border-bottom:1px solid #2a2a2a;margin-bottom:10px;}
.info-box ul{color:#888;font-size:13px;line-height:2;}
.info-box ul li{list-style:none;}
.info-box ul .address a{color:#ff8c00;}
.info-box ul .address a:hover{text-decoration:underline;}

.lrc-box{position:fixed;bottom:20px;right:20px;width:360px;max-height:200px;background:rgba(13,13,13,0.92);border-radius:10px;padding:14px 18px;z-index:999;border:1px solid #333;backdrop-filter:blur(10px);}
.lrc-box .lrc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.lrc-box .lrc-header span{color:#ff8c00;font-size:12px;font-weight:600;}
.lrc-box .lrc-header .actions{display:flex;gap:6px;}
.lrc-box .lrc-header .actions button{background:none;border:none;color:#888;cursor:pointer;font-size:13px;}
.lrc-box .lrc-header .actions button:hover{color:#fff;}
.lrc-box #lrcText{line-height:1.8;max-height:130px;overflow-y:auto;font-size:18px;text-align:center;color:#fff;}
.lrc-box #lrcText::-webkit-scrollbar{width:2px;}
.lrc-box #lrcText::-webkit-scrollbar-thumb{background:#444;border-radius:2px;}
.lrc-toggle{position:fixed;bottom:220px;right:20px;z-index:999;cursor:pointer;color:#fff;background:rgba(0,0,0,0.6);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid #333;}
.lrc-toggle:hover{background:#ff8c00;color:#111;}

@media(max-width:768px){
    .play-top{flex-direction:column;}
    .lrc-box{width:280px;right:10px;bottom:10px;}
    .lrc-box #lrcText{font-size:15px;}
    .lrc-toggle{right:10px;bottom:180px;}
}
/* 歌词容器 - 可拖动 */
.lrc-box {
    position: fixed;
    bottom: 2px;
    left: 39.5%;
    transform: translateX(-50%);
    width: 752px;
    max-height: 220px;
    background: rgba(13, 13, 13, 0.88);
    border-radius: 12px;
    padding: 16px 24px;
    z-index: 999;
    border: 1px solid #333;
    backdrop-filter: blur(12px);
    cursor: move;
    user-select: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.lrc-box .lrc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    cursor: move;
}
.lrc-box .lrc-header span {
    color: #ff8c00;
    font-size: 12px;
    font-weight: 600;
}
.lrc-box .lrc-header .actions {
    display: flex;
    gap: 8px;
}
.lrc-box .lrc-header .actions button {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
}
.lrc-box .lrc-header .actions button:hover {
    color: #fff;
}
.lrc-box #lrcText {
    line-height: 1.8;
    max-height: 150px;
    overflow-y: auto;
    font-size: 24px;
    text-align: center;
    padding: 4px 0;
    /* 默认炫彩颜色 */
    background: -webkit-linear-gradient(left, #ff0000, #ff7d00, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: lrcRainbow 3s infinite linear;
}
@keyframes lrcRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.lrc-box #lrcText::-webkit-scrollbar {
    width: 3px;
}
.lrc-box #lrcText::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
/* 关闭彩虹时恢复白色 */
.lrc-box #lrcText.normal {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    animation: none !important;
}
.lrc-toggle {
    position: fixed;
    bottom: 777px;
    left: 63%;
    transform: translateX(-50%);
    z-index: 999;
    cursor: pointer;
    color: #fff;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid #333;
    margin-left: -300px;
}
.lrc-toggle:hover {
    background: #ff8c00;
    color: #111;
}
@media(max-width:768px){
    .lrc-box{width:316px;bottom:0px;margin-left: 42px;padding:12px 16px;}
    .lrc-box #lrcText{font-size:18px;}
    .lrc-toggle{margin-left:-233px;bottom:100px;}
}

/*舞曲库*/
.music-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;padding:12px;background:#151515;border-radius:8px;border:1px solid #222;}
.music-filter a{padding:4px 16px;border-radius:30px;background:#222;color:#888;font-size:13px;}
.music-filter a:hover,.music-filter a.active{background:#ff8c00;color:#111;}
.music-table{width:100%;background:#151515;border-radius:8px;border:1px solid #222;overflow:hidden;}
.music-table th{background:#1a1a1a;color:#888;font-size:12px;font-weight:400;padding:8px 10px;text-align:left;border-bottom:1px solid #2a2a2a;}
.music-table td{padding:6px 10px;border-bottom:1px solid #2a2a2a;vertical-align:middle;}
.music-table tr:hover{background:#1a1a1a;}
.music-table .song{display:flex;align-items:center;gap:8px;}
.music-table .song input[type="checkbox"]{flex-shrink:0;cursor:pointer;}
.music-table .song img{width:20px;height:20px;border-radius:50%;flex-shrink:0;}
.music-table .song a{color:#ddd;font-size:13px;}
.music-table .song a:hover{color:#ff8c00;}
.music-table .tag{display:inline-block;font-size:10px;background:#ff8c0015;color:#ff8c00;padding:0 8px;border-radius:10px;border:1px solid #ff8c0022;margin-left:4px;}
.music-table .add-btn{color:#ff8c00;font-size:12px;cursor:pointer;}
.music-table .add-btn:hover{text-decoration:underline;}
.music-table .num{color:#555;font-size:12px;min-width:28px;display:inline-block;}
.music-table .duration{color:#888;font-size:12px;}
.page-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:12px 0;gap:10px;}
.page-wrap .page-links{display:flex;gap:4px;flex-wrap:wrap;}
.page-wrap .page-links a{display:inline-block;padding:4px 12px;border-radius:4px;background:#222;color:#888;font-size:13px;}
.page-wrap .page-links a:hover,.page-wrap .page-links a.active{background:#ff8c00;color:#111;}
.page-wrap .page-links a.disabled{opacity:0.3;pointer-events:none;}
.page-wrap .goto{display:flex;align-items:center;gap:6px;font-size:13px;color:#888;}
.page-wrap .goto input{width:50px;padding:4px 6px;border-radius:4px;border:1px solid #333;background:#0d0d0d;color:#ddd;text-align:center;}
.page-wrap .goto button{padding:4px 14px;border-radius:4px;border:none;background:#ff8c00;color:#111;cursor:pointer;font-weight:600;}
.page-wrap .play_button a{cursor:pointer;}
/* ===== 手机版适配 ===== */
@media (max-width: 768px) {
    /* 隐藏时长、添加、下载列 */
    .music-table th:nth-child(4),
    .music-table th:nth-child(6),
    .music-table th:nth-child(7),
    .music-table td:nth-child(4),
    .music-table td:nth-child(6),
    .music-table td:nth-child(7) {
        display: none !important;
    }
    
    /* 分类标签滚动 */
    .music-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .music-filter::-webkit-scrollbar {
        display: none;
    }
    .music-filter a {
        flex: 0 0 auto !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    /* 表格字体缩小 */
    .music-table th,
    .music-table td {
        font-size: 12px !important;
        padding: 4px 6px !important;
    }
    .music-table .song a {
        font-size: 12px !important;
    }
}

/*音乐专辑*/

.album-container{max-width:1200px;margin:0 auto;padding:20px;}
.album-header{display:flex;align-items:center;margin-bottom:30px;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);padding:30px;border-radius:16px;border:1px solid #333;gap:30px;flex-wrap:wrap;}
.album-cover{width:200px;height:200px;border-radius:12px;overflow:hidden;flex-shrink:0;border:2px solid #ff8c00;background:#222;}
.album-cover img{width:100%;height:100%;object-fit:cover;}
.album-info{flex:1;color:#ddd;}
.album-title{font-size:28px;margin:0 0 10px;color:#ff8c00;}
.album-artist{display:flex;align-items:center;margin-bottom:10px;gap:10px;}
.artist-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;}
.artist-avatar img{width:100%;height:100%;object-fit:cover;}
.artist-name a{color:#888;font-size:15px;}
.artist-name a:hover{color:#ff8c00;}
.album-meta span{display:inline-block;margin-right:16px;padding:2px 12px;background:#1a1a1a;border-radius:20px;font-size:13px;color:#888;border:1px solid #2a2a2a;}
.action-bar{background:#151515;border-radius:10px;padding:12px 16px;margin-bottom:20px;border:1px solid #222;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.select-all{display:flex;align-items:center;gap:8px;cursor:pointer;color:#888;font-size:14px;}
.select-all input[type="checkbox"]{cursor:pointer;width:16px;height:16px;}
.play-selected{background:#ff8c00;color:#111;border:none;padding:6px 24px;border-radius:30px;cursor:pointer;font-size:14px;font-weight:600;}
.play-selected:hover{background:#e67a00;}
.song-list{background:#151515;border-radius:10px;border:1px solid #222;overflow:hidden;}
.song-item{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid #2a2a2a;}
.song-item:hover{background:#1a1a1a;}
.song-index{width:60px;display:flex;align-items:center;gap:8px;color:#666;font-size:13px;flex-shrink:0;}
.song-index input[type="checkbox"]{cursor:pointer;width:16px;height:16px;}
.song-title{flex:1;font-size:14px;}
.song-title a{color:#ddd;}
.song-title a:hover{color:#ff8c00;}
.song-duration{width:100px;text-align:center;color:#888;font-size:13px;}
.pagination{display:flex;justify-content:center;gap:6px;padding:16px 0;flex-wrap:wrap;}
.pagination a,.pagination span{display:inline-block;padding:4px 14px;border-radius:4px;background:#222;color:#888;font-size:13px;border:1px solid #2a2a2a;text-decoration:none;}
.pagination a:hover{background:#ff8c00;color:#111;border-color:#ff8c00;}
.pagination .current{background:#ff8c00;color:#111;border-color:#ff8c00;}
.pagination .disabled{opacity:0.3;pointer-events:none;cursor:not-allowed;}
.no-songs{padding:60px;text-align:center;color:#666;}
@media(max-width:768px){
    .album-header{flex-direction:column;text-align:center;}
    .album-cover{width:150px;height:150px;}
    .album-meta span{font-size:12px;margin-right:8px;}
    .song-item{flex-wrap:wrap;gap:4px;}
    .song-index{width:auto;}
    .song-duration{width:auto;}
}
/*排行榜*/
.rank-wrap{max-width:1200px;margin:0 auto;padding:0 12px;}
.rank-box{background:#151515;border-radius:12px;padding:24px;border:1px solid #222;margin-top:10px;}
.rank-box h2{color:#ff8c00;font-size:22px;margin-bottom:20px;}
.rank-tags{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:20px;}
.rank-tags a{background:#222;padding:6px 16px;border-radius:30px;color:#888;font-size:13px;cursor:pointer;text-decoration:none;border:1px solid #333;}
.rank-tags a:hover,.rank-tags a.active{background:#ff8c00;color:#111;border-color:#ff8c00;}
.rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.rank-card{background:#1a1a1a;border-radius:8px;padding:12px;border:1px solid #2a2a2a;text-align:center;}
.rank-card .num{color:#ff8c00;font-size:14px;font-weight:600;}
.rank-card .avatar{width:60px;height:60px;border-radius:50%;margin:0 auto 6px;overflow:hidden;border:2px solid #ff8c00;}
.rank-card .avatar img{width:100%;height:100%;object-fit:cover;}
.rank-card .name{color:#ddd;font-size:14px;}
.rank-card .name a{color:#ddd;text-decoration:none;}
.rank-card .name a:hover{color:#ff8c00;}
.rank-card .sub{color:#888;font-size:12px;}

@media(max-width:768px){
    .rank-box{padding:16px;}
    .rank-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
    .rank-tags a{text-align:center;padding:6px 4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .rank-grid{grid-template-columns:repeat(4,1fr);gap:8px;}
    .rank-card{padding:6px;}
    .rank-card .avatar{width:40px;height:40px;margin:0 auto 4px;}
    .rank-card .num{font-size:10px;}
    .rank-card .name{font-size:10px;}
    .rank-card .name a{font-size:10px;}
    .rank-card .sub{font-size:9px;}
}
@media(max-width:480px){
    .rank-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
    .rank-card .avatar{width:36px;height:36px;}
}
@media (max-width: 768px) {
    .rank-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
    }
    /* ===== 手机版播放页面统一 ===== */
@media (max-width: 768px) {
    /* 播放列表 */
    .playlist-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 4px 6px !important;
    }
    .playlist-item .num {
        min-width: 18px !important;
        font-size: 10px !important;
        color: #666 !important;
        flex-shrink: 0 !important;
    }
    .playlist-item img {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
    .playlist-item .name {
        flex: 1 !important;
        max-width: 110px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 11px !important;
        color: #ddd !important;
    }
    .playlist-item .user {
        font-size: 9px !important;
        color: #666 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        padding-left: 4px !important;
    }

    /* 最新上传同类歌曲 和 用户的其他舞曲 */
    .song-list-box .song-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 3px 6px !important;
    }
    .song-list-box .song-item .num {
        min-width: 18px !important;
        font-size: 10px !important;
        color: #666 !important;
        flex-shrink: 0 !important;
    }
    .song-list-box .song-item img {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
    .song-list-box .song-item .name {
        flex: 1 !important;
        max-width: 130px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 11px !important;
        color: #ddd !important;
    }
    .song-list-box .song-item .add {
        font-size: 10px !important;
        flex-shrink: 0 !important;
        color: #ff8c00 !important;
        margin-left: 72px !important;
        padding-left: 4px !important;
    }
}
.search-wrap{max-width:1200px;margin:0 auto;padding:0 12px;}

@media(max-width:768px){
    .search-box{padding:16px;}
    .search-box .search-form{max-width:100%;}
    .search-box .search-form input[type="text"]{height:40px;font-size:14px;padding:0 14px;}
    .search-box .search-form button{height:32px;padding:0 16px;font-size:13px;}
    .search-logo{padding:16px 0 12px;}
    .search-logo img{max-height:50px;}
    .user-result-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
    .user-card{padding:12px;}
    .user-card .avatar{width:50px;height:50px;}
    .user-card .name{font-size:13px;}
    .user-card .meta{font-size:11px;}
    .page-wrap{flex-direction:column;align-items:center;gap:8px;}
    .page-wrap .play_button{order:2;}
    .page-wrap .page-links{order:1;}
    .page-wrap .goto{order:3;}
    .page-wrap .page-links a{padding:4px 10px;font-size:12px;}
    .page-wrap .goto{font-size:12px;}
    .page-wrap .goto input{width:40px;}
    .search-result .title{font-size:14px;padding:10px 0;}
    .search-result .title .count{font-size:12px;display:block;margin-left:0;margin-top:4px;}
    .section-title{font-size:14px;}
    .search-table th:nth-child(3),
    .search-table th:nth-child(5),
    .search-table th:nth-child(6),
    .search-table td:nth-child(3),
    .search-table td:nth-child(5),
    .search-table td:nth-child(6) {display:none !important;}
}