/**
 * music-classic 皮肤 · /music 榜单页样式
 * 内容区照搬原版 cmsdj_002 绿色榜单主题（#5BA91C / #55a642，960 盒，绿导航条），
 * 底部播放器沿用本站体系，配色由橙色改成主题绿。原版图片走 b 原位引用。
 * 上线前把 cmsdj_002/static/images 拷进本皮肤并把下面 url() 里的训练IDE路径改成本地 images 路径。
 */

/* ========== 内容区：cmsdj_002 绿色榜单 ========== */
.mc-music-page { background: #f5f5f5; padding: 0 0 40px; }
/* 版心：旧值 width: 960px 写死（不是 max-width，所以扫 max-width 根本查不到它），
   1920 屏上两侧各留 480px 空白。改为上限全站口径 1400px、随视口自适应，与顶栏/页脚对齐。 */
.mc-box { width: min(1400px, 100%); margin: 0 auto; padding: 0 clamp(8px, 1.4vw, 28px); box-sizing: border-box; }

/* 频道站头：logo + 搜索（照搬 headerWrap 观感） */
.mc-channel-head {
    display: flex; align-items: center; gap: 24px;
    background: #fff; border: 1px solid #e5e5e5; border-bottom: none;
    padding: 14px 18px; border-radius: 4px 4px 0 0;
}
.mc-channel-logo img { height: 42px; width: auto; display: block; }
.mc-channel-search { margin-left: auto; display: flex; }
.mc-channel-search form { display: flex; }
.mc-channel-search input {
    width: 320px; max-width: 46vw; height: 34px; border: 1px solid #ddd; border-right: none;
    padding: 0 12px; font-size: 13px; color: #666; outline: none; border-radius: 3px 0 0 3px;
}
.mc-channel-search input:focus { border-color: #55a642; }
.mc-channel-search button {
    height: 34px; padding: 0 22px; border: none; background: #55a642; color: #fff;
    font-size: 14px; cursor: pointer; border-radius: 0 3px 3px 0;
}
.mc-channel-search button:hover { background: #4a8a16; }

/* 频道站头（通栏）：白底贴屏幕左右边缘铺满，内容收 1400 版心与绿色分类条/排序条对齐；
   左侧品牌 logo，右侧为音频驱动的城市灯光频谱（canvas#cityVis），铺满剩余宽度 */
.mc-channelbar { background:#fff; border-bottom:1px solid #e5e5e5; }
.mc-channelbar-in {
    width: min(1400px, 100%); margin: 0 auto; padding: 10px clamp(8px, 1.4vw, 28px);
    box-sizing: border-box; display: flex; align-items: center; gap: 24px;
}
.mc-channelbar-in .mc-channel-logo { flex: none; display: flex; align-items: center; }
.mc-channel-vis {
    position: relative; flex: 1 1 auto; min-width: 0; height: 54px;
    border-radius: 4px; overflow: hidden; background:#0b1a12;
}
.mc-channel-vis canvas { position: absolute; left:0; top:0; width:100%; height:100%; display:block; }

/* 绿色分类导航条（照搬 navWrap：绿底 + 白字 + active 反白）
   通栏：绿底贴屏幕左右边缘铺满、随视口自适应（不写死 100vw，避免滚动条留白与横向溢出）；
   分类项收在内层 .mc-catnav-in 的 1400 版心里，与频道头 / 排序条 / 榜单左右边缘对齐。 */
.mc-catnav {
    background: #5fb74b;
    height: 41px;
}
.mc-catnav-in {
    width: min(1400px, 100%); height: 41px; margin: 0 auto;
    padding: 0 clamp(8px, 1.4vw, 28px); box-sizing: border-box;
    display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none;
}
.mc-catnav-in::-webkit-scrollbar { display: none; }
.mc-catnav a {
    flex: none; display: inline-flex; align-items: center; padding: 0 18px;
    color: #fff; font-size: 15px; font-family: 'Microsoft YaHei', sans-serif; text-decoration: none; white-space: nowrap;
}
.mc-catnav a:hover { background: #78c85f; text-decoration: none; }
.mc-catnav a.active {
    background: #f5f5f5;
    color: #333; font-weight: 800;
}

/* 排序条 */
.mc-sortbar {
    background: #fff; border: 1px solid #e5e5e5; border-top: none; height: 40px;
    display: flex; align-items: center; padding: 0 16px; font-size: 13px; color: #666;
}
.mc-sortbar .mc-sort-label { color: #999; margin-right: 6px; }
.mc-sortbar a { padding: 0 12px; color: #666; text-decoration: none; line-height: 40px; }
.mc-sortbar a:hover, .mc-sortbar a.on { color: #55a642; font-weight: 600; }
.mc-sortbar .mc-count { margin-left: auto; color: #999; font-size: 12px; }

/* 榜单面板（照搬 rankBox/mdBox 观感：白底 + 1px 边框 + 行悬停浅绿；表格类名沿用本站播放器 JS 契约 music-table） */
.mc-rankpanel { background: #fff; border: 1px solid #e5e5e5; border-top: none; }
.mc-rankpanel .music-table { width: 100%; border-collapse: collapse; }
.mc-rankpanel .music-table thead th {
    background: #fbfbfb; text-align: left; font-size: 12.5px; color: #888; font-weight: normal;
    padding: 10px 12px; border-bottom: 2px solid #7DC03A;
}
.mc-rankpanel .music-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #666; }
.mc-rankpanel .music-table tbody tr:hover { background: #f7fdec; }
.mc-rankpanel .music-table tbody tr.playing { background: #f2faec; }
.mc-rankpanel .music-table tbody tr.playing .idx { box-shadow: inset 3px 0 0 #5BA91C; }
.mc-rankpanel .music-table .checkbox-col { width: 40px; text-align: center; }
.mc-rankpanel .music-table .checkbox-col input { width: 15px; height: 15px; cursor: pointer; vertical-align: middle; }
.mc-rankpanel .music-table .idx { width: 52px; }
.mc-rankpanel .music-table .idx .mc-num { color: #b1b1b1; font-weight: bold; }
.mc-rankpanel .music-table .idx .mc-num.top { color: #f00; }
.mc-rankpanel .music-table .title-col .title { color: #333; text-decoration: none; font-size: 14px; }
.mc-rankpanel .music-table .title-col .title:hover { color: #55a642; }
.mc-rankpanel .music-table .title-col .title-locked { color: #333; font-weight: 600; margin-right: 6px; }
.mc-rankpanel .music-table .artist { color: #666; }
.mc-rankpanel .music-table .duration { width: 60px; color: #999; }
.mc-rankpanel .music-table .plays { width: 78px; color: #999; }
.mc-rankpanel .music-table .actions { width: 160px; white-space: nowrap; }

.mc-rankpanel .music-table .unlock-btn {
    padding: 3px 10px; font-size: 12px; color: #fff; background: #f47373; border: none;
    border-radius: 3px; cursor: pointer; vertical-align: middle;
}
.mc-rankpanel .music-table .unlock-btn:hover { background: #e2595b; }

.mc-rankpanel .music-table .act-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    color: #8b93a1; cursor: pointer; border-radius: 6px; vertical-align: middle; transition: color .18s, background .18s;
}
.mc-rankpanel .music-table .act-btn:hover { color: #55a642; background: #eaf5df; }
.mc-rankpanel .music-table .act-btn.faved { color: #5BA91C; background: #eaf5df; }
.mc-rankpanel .music-table .act-btn.added { color: #52c41a; background: #effaeb; }
.mc-rankpanel .music-table .act-btn.loading { opacity: .5; pointer-events: none; }
.mc-rankpanel .music-table tr.playing .act-btn:first-child { color: #fff; background: #55a642; }

/* 批量操作浮岛（勾选才浮现，播放器 JS 切 .is-on） */
.batch-bar {
    position: fixed; left: 50%; bottom: 24px; z-index: 60; height: 52px; display: flex; align-items: center;
    padding: 0 22px; gap: 16px; background: #fff; border-radius: 26px; box-shadow: 0 6px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(14px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.batch-bar.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .22s ease, transform .22s ease, visibility 0s; }
.batch-bar .select-all { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #666; cursor: pointer; }
.batch-bar .select-all input { width: 16px; height: 16px; cursor: pointer; }
.batch-bar .selected-count { font-size: 13px; color: #999; }
.batch-bar .selected-count span { color: #55a642; font-weight: bold; }
.batch-bar .batch-download-btn { margin-left: auto; padding: 6px 20px; background: #55a642; color: #fff; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; transition: all .2s; }
.batch-bar .batch-download-btn:hover:not(:disabled) { background: #4a8a16; }
.batch-bar .batch-download-btn:disabled { background: #ccc; cursor: not-allowed; opacity: .6; }

/* 分页（照搬 turn-page：绿当前页） */
.mc-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 15px; }
.mc-pages a, .mc-pages span {
    display: inline-block; padding: 5px 12px; border: 1px solid #ccc; background: #fff;
    color: #666; font-size: 13px; text-decoration: none;
}
.mc-pages a:hover { background: #55a642; border-color: #55a642; color: #fff; }
.mc-pages .on { background: #55a642; border-color: #55a642; color: #fff; font-weight: 800; }
.mc-pages .dis { color: #ccc; border-color: #e5e5e5; cursor: default; }

/* 空状态 */
.mc-empty { background: #fff; border: 1px solid #e5e5e5; border-top: none; text-align: center; padding: 60px 20px; color: #999; }
.mc-empty p { font-size: 16px; color: #666; margin: 0 0 8px; }
.mc-empty span { font-size: 13px; color: #aaa; }

/* ========== 底部播放器（本站体系，橙色改主题绿） ========== */
.player-bar {
    position: relative; width: 100%; height: auto; min-height: 70px; background: #fff;
    border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center;
    padding: 12px 30px; box-sizing: border-box; margin-bottom: 0;
}
.player-bar .info { display: flex; align-items: center; width: 240px; }
.player-bar .cover { width: 44px; height: 44px; background: #f0f0f0; margin-right: 12px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.player-bar .cover img { width: 100%; height: 100%; object-fit: cover; }
.player-bar .song-info { overflow: hidden; }
.player-bar .song-title { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar .song-artist { font-size: 11px; color: #999; margin-top: 2px; }
.player-bar .controls { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.player-bar .btns { display: flex; align-items: center; gap: 12px; }
.player-bar .btns span { cursor: pointer; font-size: 18px; color: #666; user-select: none; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; border-radius: 0; transition: transform .2s; }
.player-bar .btns span:hover { transform: scale(1.1); }
.player-bar .btns .play-btn { width: 44px; height: 44px; min-width: 44px; background: transparent; }
.player-bar .btns .play-btn:hover { transform: scale(1.06); }
.player-bar .btns span img { width: 28px; height: 28px; display: block; }
.player-bar .btns .play-btn img { width: 44px; height: 44px; }
.player-bar .vol span img { width: 24px; height: 24px; display: block; }
.player-bar .progress { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 450px; padding: 0 10px; }
.player-bar .progress .time { font-size: 11px; color: #666; width: 38px; text-align: center; font-family: 'Courier New', monospace; }
.player-bar .progress-track { flex: 1; height: 6px; background: #e8e8e8; border-radius: 3px; cursor: pointer; position: relative; overflow: hidden; }
.player-bar .progress-fill { height: 100%; background: linear-gradient(90deg, #7dc03a, #5BA91C); border-radius: 3px; width: 0; pointer-events: none; transition: width .1s linear; }
.player-bar .progress-track:hover { height: 8px; margin: -1px 0; }
.player-bar .progress-track:hover .progress-fill { border-radius: 4px; }
.player-bar .vol { display: flex; align-items: center; gap: 8px; width: 140px; justify-content: flex-end; }
.player-bar .vol span { font-size: 16px; color: #666; cursor: pointer; }
.player-bar .vol-track { width: 80px; height: 4px; background: #e8e8e8; border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; }
.player-bar .vol-fill { height: 100%; background: linear-gradient(90deg, #7dc03a, #5BA91C); border-radius: 2px; width: 80%; pointer-events: none; }
.player-bar .extra-controls { display: flex; align-items: center; gap: 15px; margin-left: 20px; }
.player-bar .extra-controls .playlist-btn { display: inline-flex; align-items: center; cursor: pointer; font-size: 13px; color: #666; user-select: none; position: relative; padding: 5px 12px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa; white-space: nowrap; transition: all .2s; }
.player-bar .extra-controls .playlist-btn:hover, .player-bar .extra-controls .playlist-btn.active { color: #55a642; border-color: #55a642; background: #eef7e6; }
.player-bar .extra-controls .playlist-btn .playlist-label { line-height: 1; }
.player-bar .extra-controls .playlist-btn .playlist-arrow { font-size: 12px; margin-left: 5px; line-height: 1; }
.player-bar .btns .mode-btn { font-size: 16px; opacity: .7; }
.player-bar .btns .mode-btn:hover { opacity: 1; }
.player-bar .btns .mode-btn.active { color: #55a642; opacity: 1; }
.player-bar .extra-controls .playlist-btn .badge { position: absolute; top: -7px; right: -7px; background: #55a642; color: #fff; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; text-align: center; padding: 0 4px; }

/* 播放列表面板 */
.playlist-panel { position: absolute; bottom: 100%; right: 30px; width: 320px; max-height: 0; background: #fff; border-radius: 8px 8px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.15); overflow: hidden; transition: max-height .3s ease; z-index: 100; }
.playlist-panel.show { max-height: 360px; }
.playlist-panel .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; background: #fafafa; }
.playlist-panel .panel-header .title { font-size: 14px; color: #333; font-weight: 500; }
.playlist-panel .panel-header .title span { color: #999; font-weight: normal; margin-left: 4px; }
.playlist-panel .panel-header .clear-btn { font-size: 12px; color: #999; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all .2s; }
.playlist-panel .panel-header .clear-btn:hover { color: #55a642; background: #eef7e6; }
.playlist-panel .panel-header .mode-indicator { font-size: 11px; color: #55a642; background: #eef7e6; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
.playlist-panel .panel-body { max-height: 300px; overflow-y: auto; }
.playlist-panel .panel-body::-webkit-scrollbar { width: 6px; }
.playlist-panel .panel-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.playlist-panel .playlist-item { display: flex; align-items: center; padding: 10px 16px; cursor: pointer; transition: background .2s; }
.playlist-panel .playlist-item:hover { background: #fafafa; }
.playlist-panel .playlist-item.playing { background: #f2faec; }
.playlist-panel .playlist-item .item-info { flex: 1; overflow: hidden; }
.playlist-panel .playlist-item .item-title { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-panel .playlist-item.playing .item-title { color: #55a642; }
.playlist-panel .playlist-item .item-artist { font-size: 11px; color: #999; margin-top: 2px; }
.playlist-panel .playlist-item .remove-btn { color: #ccc; font-size: 16px; cursor: pointer; padding: 4px; margin-left: 8px; transition: color .2s; opacity: 0; }
.playlist-panel .playlist-item:hover .remove-btn { opacity: 1; }
.playlist-panel .playlist-item .remove-btn:hover { color: #e05a4f; }
.playlist-panel .empty-msg { text-align: center; padding: 30px; color: #999; font-size: 13px; }

/* Toast */
.syhuo-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #55a642; color: #fff; padding: 12px 24px; border-radius: 6px; font-size: 14px; z-index: 10000; box-shadow: 0 4px 12px rgba(85,166,66,.4); animation: mcToastIn .3s ease; }
.syhuo-toast.fade-out { animation: mcToastOut .3s ease forwards; }
@keyframes mcToastIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes mcToastOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }

/* ========== 响应式 ========== */
@media (max-width: 999.98px) {
    .mc-box { width: 100%; }
    .mc-channel-head { flex-wrap: wrap; gap: 12px; }
    .mc-channel-search { margin-left: 0; width: 100%; }
    .mc-channel-search input { width: 100%; max-width: none; }
}

@media (max-width: 767.98px) {
    .mc-music-page { padding: 0 0 30px; }
    .mc-channel-head { padding: 12px; }
    .mc-channel-logo img { height: 34px; }
    .mc-catnav a { padding: 0 14px; font-size: 14px; }
    .mc-sortbar { padding: 0 12px; overflow-x: auto; }
    .mc-sortbar a { flex: none; padding: 0 10px; }
    /* 窄屏隐藏勾选/时长/播放量列，保正文可读 */
    .mc-rankpanel .music-table th.checkbox-col, .mc-rankpanel .music-table td.checkbox-col,
    .mc-rankpanel .music-table th.duration, .mc-rankpanel .music-table td.duration,
    .mc-rankpanel .music-table th.plays, .mc-rankpanel .music-table td.plays { display: none; }
    .mc-rankpanel .music-table thead th, .mc-rankpanel .music-table tbody td { padding: 9px 8px; }
    .mc-rankpanel .music-table .title-col .title { font-size: 13px; }
    .mc-rankpanel .music-table .actions { width: auto; }
    .mc-rankpanel .music-table .act-btn { width: 32px; height: 32px; background: #f6f7f9; }
    .mc-rankpanel .music-table tr.playing .act-btn:first-child { background: #55a642; }
    .batch-bar { left: 12px; right: 12px; bottom: 12px; padding: 0 16px; transform: translateY(14px); }
    .batch-bar.is-on { transform: translateY(0); }
    .player-bar { flex-wrap: wrap; padding: 10px 15px; min-height: auto; gap: 10px; }
    .player-bar .info { width: 100%; order: 1; }
    .player-bar .controls { order: 2; width: 100%; flex-direction: column; gap: 8px; }
    .player-bar .progress { width: 100%; max-width: 100%; padding: 0; }
    .player-bar .vol { order: 3; width: auto; justify-content: center; }
    .player-bar .extra-controls { order: 4; margin-left: 0; }
    .playlist-panel { right: 0; left: 0; width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; }
    .playlist-panel.show { max-height: 50vh; }
}