/* ========== 主题变量定义 ========== */
:root {
    /* 日间模式颜色 */
    --bg-primary: #f5f5f5;
    --bg-card: #ffffff;
    --bg-hover: #f0f7ff;
    --bg-active: #e8f4ff;
    --text-primary: #333333;
    --text-secondary: #999999;
    --text-error: #ff4d4f;
    --primary-color: #3F51B5;
    --border-color: #eeeeee;
    --shadow-color: rgba(0,0,0,0.1);
}

.dark-mode {
    /* 暗色模式颜色 */
    --bg-primary: #121212;
    --bg-card: #1e1e1e;
    --bg-hover: #2d2d2d;
    --bg-active: #383838;
    --text-primary: #e0e0e0;
    --text-secondary: #888888;
    --text-error: #ff6b6b;
    --primary-color: #5a95f5;
    --border-color: #333333;
    --shadow-color: rgba(0,0,0,0.3);
}

/* ========== 全局样式 ========== */
/* 全局隐藏所有滚动条 */
html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.song-list::-webkit-scrollbar,
.lyric-wrap::-webkit-scrollbar,
.container::-webkit-scrollbar,
.artist-list::-webkit-scrollbar {
    display: none !important;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    transition: background 0.3s ease, color 0.3s ease;
}

/* ========== 头部样式 ========== */
.header {
    background: var(--primary-color);
    color: white;
    padding: 15px 10px;
    font-size: 18px;
    font-weight: 600;
    position: fixed; /* 从sticky改成fixed，固定顶部不位移 */
    top: 0;
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.3s ease;
    height: 56px; /* 新增固定高度，播放列表偏移的基准 */
    box-sizing: border-box; /* 新增，确保内边距不撑高header */
}
.dark-mode .header {
    background: #1f1f1f;
    border-bottom: 1px solid #333;
}

/* 主题切换按钮 */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.3);
}
.dark-mode .theme-toggle-btn {
    background: rgba(90, 149, 245, 0.2);
    color: #e0e0e0;
}
.dark-mode .theme-toggle-btn:hover {
    background: rgba(90, 149, 245, 0.3);
}

/* ========== 主容器 ========== */
.container {
    width: 100%;
    height: calc(100vh - 60px) !important; /* 占满“顶部header以下”的全部高度 */
    overflow-y: auto;
    max-width: 750px;
    margin: 0 auto;
    padding: 10px;
    padding-bottom: 120px; /* 只在底部留“播放器的高度”，避免内容被遮挡 */
    position: relative;
    z-index: 10;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ========== 选项卡样式 ========== */
.tab-module {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 1px 3px var(--shadow-color);
}
.tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--text-primary);
}
.tab-item.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* ========== 模块通用样式 ========== */
.module {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px var(--shadow-color);
    position: relative;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.module-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
    padding-left: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========== 搜索模块样式 ========== */
.search-module {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    position: relative; /* 新增：为清空按钮绝对定位做容器 */
}
.search-input {
    flex: 1;
    padding: 8px 12px 8px 12px; /* 右侧留30px给清空按钮 */
    padding-right: 30px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.search-input:focus {
    border-color: var(--primary-color);
}
/* 新增：搜索框清空X按钮样式 */
.clear-search-btn {
    position: absolute;
    right: 85px; /* 定位在搜索框右侧、搜索按钮左侧 */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-secondary);
    display: none; /* 默认隐藏，有内容时JS控制显示 */
    padding: 0;
    line-height: 1;
}
.clear-search-btn:hover {
    color: var(--primary-color); /* hover切换主色 */
}
/* 暗色模式清空按钮hover优化 */
.dark-mode .clear-search-btn:hover {
    color: #5a95f5;
}
.search-btn {
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0; /* 防止按钮被压缩 */
}
.search-tab {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.search-tab-item {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.search-tab-item.active {
    background: var(--primary-color);
    color: white;
}
#search-result-wrap {
    display: none;
}
/* 新增：搜索结果列表 取消高度限制，随内容撑开 */
#search-result {
    width: 100%;
    overflow: visible !important;
}

/* 新增：录入歌单按钮样式 - 和选择榜单按钮风格统一 */
.add-playlist-btn {
    padding: 4px 8px;
    background: rgba(90, 149, 245, 0.1);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px; /* 和左侧选择榜单按钮留间距 */
    transition: all 0.2s ease;
}
.add-playlist-btn:hover {
    background: rgba(90, 149, 245, 0.2);
}
/* 暗色模式录入歌单按钮优化 */
.dark-mode .add-playlist-btn {
    background: rgba(90, 149, 245, 0.15);
}
.dark-mode .add-playlist-btn:hover {
    background: rgba(90, 149, 245, 0.3);
}

/* 新增：录入歌单ID弹窗样式 - 参考现有榜单弹窗，微调布局 */
.add-playlist-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.add-playlist-modal {
    width: 100%;
    max-width: 300px;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 20px 15px;
}
.add-playlist-modal-title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    color: var(--primary-color);
}
.add-playlist-input-wrap {
    margin-bottom: 20px;
}
.add-playlist-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.add-playlist-input:focus {
    border-color: var(--primary-color);
}
.input-tip {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
}
.add-playlist-confirm-btn {
    width: 100%;
    padding: 10px 0;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}
.add-playlist-confirm-btn:hover {
    background: #3375e0;
}
/* 暗色模式确定按钮优化 */
.dark-mode .add-playlist-confirm-btn {
    background: #5a95f5;
}
.dark-mode .add-playlist-confirm-btn:hover {
    background: #4a85e0;
}

/* 移动端适配录入歌单弹窗 */
@media screen and (max-width: 750px) {
    .add-playlist-btn {
        padding: 3px 6px;
        font-size: 11px;
        margin-left: 6px;
    }
    .add-playlist-modal {
        padding: 18px 12px;
    }
    .add-playlist-input {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* 新增：圆形？提示按钮样式 */
.tip-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    vertical-align: middle;
    padding: 0;
    line-height: 1;
}
.tip-btn:hover {
    background: rgba(66,133,244,0.1);
}
.dark-mode .tip-btn:hover {
    background: rgba(90,149,245,0.2);
}

/* 新增：提示弹窗遮罩 */
.tip-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000; /* 层级高于歌单弹窗 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* 提示弹窗容器 */
.tip-modal {
    width: 100%;
    max-width: 300px;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 20px 15px;
}
/* 提示弹窗标题 */
.tip-modal-title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    color: var(--primary-color);
}
/* 提示弹窗内容 */
.tip-modal-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 20px;
    text-align: left;
}
/* 红色高亮数字/字符样式（复用主题错误红，醒目且统一） */
.red-num {
    color: var(--text-error);
    font-weight: 600;
    font-size: 15px;
}
/* 提示弹窗确定按钮 */
.tip-confirm-btn {
    width: 100%;
    padding: 10px 0;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}
.tip-confirm-btn:hover {
    background: #3375e0;
}
.dark-mode .tip-confirm-btn {
    background: #5a95f5;
}
.dark-mode .tip-confirm-btn:hover {
    background: #4a85e0;
}

/* 移动端适配提示弹窗/？按钮 */
@media screen and (max-width: 750px) {
    .tip-btn {
        width: 18px;
        height: 18px;
        font-size: 11px;
        margin-left: 6px;
    }
    .tip-modal {
        padding: 18px 12px;
    }
    .tip-modal-content {
        font-size: 13px;
    }
    .red-num {
        font-size: 14px;
    }
}

/* ========== 歌手二级页面专属样式（新增/修改） ========== */
/* 返回按钮样式 */
.artist-back-btn {
    padding: 8px 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
    display: none; /* 默认隐藏 */
    transition: background 0.2s ease;
}
.artist-back-btn:hover {
    background: #3375e0;
}
.dark-mode .artist-back-btn {
    background: #5a95f5;
}
.dark-mode .artist-back-btn:hover {
    background: #4a85e0;
}

/* 歌手二级页面：隐藏搜索控件 + 歌手列表 | 显示返回按钮 */
.search-module-wrap.artist-page .search-control-wrap {
    display: none !important;
}
.search-module-wrap.artist-page #search-result {
    display: none !important;
}
.search-module-wrap.artist-page .artist-back-btn {
    display: block !important;
}

/* ========== 歌手列表样式（强化三列布局） ========== */
.artist-list {
    /* 已删除：max-height: 400px; overflow-y: auto; 取消高度和局部滚动 */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    padding: 10px 0 !important;
    width: 100% !important;
    overflow: visible !important; /* 关键：随内容撑开，无局部滚动 */
}
.artist-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.artist-item:hover, .artist-item:active {
    background: var(--bg-hover);
}
.artist-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: var(--border-color) !important;
    margin-bottom: 8px !important;
}
.artist-name {
    font-size: 14px !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

/* ========== 歌手歌曲列表容器样式 ========== */
#artist-songs-wrap {
    margin-top: 15px;
    display: none;
}
.artist-songs-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}
/* 新增：歌手单曲列表 取消高度限制，覆盖JS行内样式，随内容撑开 */
#artist-songs-list {
    width: 100%;
    max-height: none !important;
    overflow-y: visible !important;
}

/* ========== 榜单模块容器样式（修改：移除冗余滚动样式，主容器统一滚动） ========== */
#playlist-module-wrap {
    width: 100%;
    /* 已删除：height: 100%; overflow-y: auto; 无需局部滚动，主容器承接 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#playlist-module-wrap::-webkit-scrollbar {
    display: none !important;
}

/* ========== 榜单选择按钮样式 ========== */
.playlist-select-btn,
.add-playlist-btn {
    padding: 4px 8px;
    background: rgba(90, 149, 245, 0.1);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px; /* 统一右侧间距 */
    transition: all 0.2s ease;
    line-height: 1.2; /* 统一行高，避免文字错位 */
}
.playlist-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.playlist-modal {
    width: 100%;
    max-width: 300px;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
}
.playlist-modal-title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    color: var(--primary-color);
}
.playlist-item {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
}
.playlist-item:last-child {
    border-bottom: none;
}
.playlist-item:active {
    background: rgba(90, 149, 245, 0.1);
}
.playlist-name {
    font-size: 14px;
}
.playlist-id {
    display: none;
}

/* ========== 歌曲列表样式 ========== */
.song-list {
    /* 已删除：overflow-y: auto; 取消局部滚动，随内容撑开 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* 播放列表专属：删除按钮样式 */
.song-item .del-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 5px;
    transition: all 0.2s ease;
}
.song-item .del-btn:hover {
    background: var(--text-error);
    color: white;
    border-color: var(--text-error);
}
/* 移动端删除按钮适配 */
@media screen and (max-width: 750px) {
    .song-item .del-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}
/* 暗色模式删除按钮适配 */
.dark-mode .song-item .del-btn {
    border-color: #444;
    color: #888;
}
.dark-mode .song-item .del-btn:hover {
    background: var(--text-error);
    border-color: var(--text-error);
}
.song-item {
    padding: 10px 15px; /* 右侧内边距从10px→15px，给播放按钮留足空间 */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-primary);
    box-sizing: border-box; /* 确保内边距包含在宽度内，防止溢出 */
}
.song-item:last-child {
    border-bottom: none;
}
.song-item:active {
    background: var(--bg-hover);
}
.song-item.active {
    background: var(--bg-active);
    border-left: 3px solid var(--primary-color);
}
.singer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--border-color);
    flex-shrink: 0;
}
.song-info {
    flex: 1;
    overflow: hidden;
}
.song-name {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.song-singer {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.song-duration {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-right: 2px; /* 从5px→2px，减少右侧冗余间距 */
}
.btn {
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.play-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ========== 浮动播放器样式 - 完整修复：半透黑+正常显示 ========== */
.player-float {
    position: fixed !important;
    bottom: 0 !important;  /* 固定在页面底部 */
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important; /* 层级高于所有元素 */
    /* 移除冗余的background: var(--bg-card); 只保留背景图相关，避免和遮罩叠加 */
    background-size: cover;
    background-position: center;
    padding: 10px 15px;
    box-shadow: 0 -2px 8px var(--shadow-color);
    max-width: 750px;
    margin: 0 auto !important; /* 居中 */
    border-radius: 16px 16px 0 0; /* 顶部圆角，底部平 */
    transition: all 0.3s ease;
    display: flex !important; /* 强制显示 */
    flex-direction: column;
    gap: 8px;
    opacity: 1 !important; /* 强制不透明 */
    visibility: visible !important; /* 强制可见 */
    height: auto !important; /* 自适应高度 */
    width: 100% !important; /* 占满宽度 */
}

/* 整个播放器半透黑遮罩 */
.player-float::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    /* 新增：确保遮罩不重复 */
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* 确保播放器内容在遮罩上方 */
.player-float > * {
    position: relative;
    z-index: 2;
}

/* 歌词区 */
.player-lyric-area {
    width: 100% !important;
    overflow: hidden; /* 防止歌词内容溢出 */
    height: 100px; /* 默认高度100px，去掉!important，让JS能修改 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-radius: 8px;
    padding: 0 10px;
    transition: height 0.3s ease; /* 去掉!important，保证过渡动画生效 */
    min-height: 100px; /* 确保初始高度至少100px，避免为空 */
    max-height: none; /* 去掉unset，允许高度扩展到75vh */
    pointer-events: auto !important; /* 强制允许点击 */
    z-index: 10 !important; /* 确保不被遮挡 */
    cursor: pointer; /* 鼠标悬浮显示手型，提示可点击 */
}

/* 操作区 */
.player-operate-area {
    width: 100%;
}

/* 收缩状态：改为缩小显示，而非完全隐藏 */
.player-float.collapsed {
    width: 60px !important;
    height: 60px !important;
    bottom: 120px !important;
    right: 20px !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    border: none !important;
    outline: none !important;
    z-index: 9999 !important; /* 确保层级最高，避免被遮挡 */
}
/* 收缩状态隐藏遮罩和其他内容，只留按钮 */
.player-float.collapsed::before {
    display: none !important;
}
.player-float.collapsed *:not(.collapse-btn) {
    display: none !important; /* 确保除了按钮，其他元素都隐藏 */
}

/* 收缩按钮样式 */
.player-float.collapsed .collapse-btn {
    display: flex !important;
    position: absolute !important; /* 改为绝对定位，居中 */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 精准居中 */
    width: 100% !important; /* 占满收缩容器（60px） */
    height: 100% !important;
    border-radius: 50% !important;
    background: transparent !important; /* 继承容器背景，避免双重背景 */
    color: transparent !important; /* 彻底隐藏原按钮文字 */
    border: none !important;
    font-size: 0 !important; /* 彻底隐藏原按钮文字 */
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    justify-content: center !important;
    align-items: center !important;
}
.player-float.collapsed .collapse-btn::after {
    content: attr(data-status);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white !important;
    font-size: 12px !important;
    width: 100%;
    text-align: center;
    padding: 0 5px;
    box-sizing: border-box;
    line-height: 1.2;
    /* 新增：确保伪元素没有重复阴影/背景 */
    background: transparent !important;
    box-shadow: none !important;
}

/* 收缩/还原按钮 */
.collapse-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
	pointer-events: auto !important;
}
/* ========== play-status样式修改：移除不兼容的contains，新增loading类（浏览器全兼容） ========== */
.play-status {
    text-align: center;
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.3s ease; /* 状态切换柔滑动效 */
    padding: 4px 0;
    border-radius: 4px;
    color: white !important; /* 白色文字，适配半透黑 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* 进度条拖动时间提示框 */
.progress-tooltip {
    position: absolute;
    top: -30px; /* 定位在圆点正上方 */
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    display: none; /* 默认隐藏 */
    pointer-events: none; /* 避免遮挡鼠标事件 */
    white-space: nowrap;
}
/* 加载中提示：浅蓝背景+主色文字，和主题统一 */
.play-status.loading {
    color: var(--primary-color);
    background: rgba(90, 149, 245, 0.1);
}
/* 错误提示：浅红背景+错误色文字，加粗突出 */
.play-status.error {
    color: var(--text-error);
    background: rgba(255, 107, 107, 0.1);
    font-weight: 500;
}

.player-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.progress-bar-wrap {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}
.progress-active {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    width: 0%;
}
.progress-dot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(66,133,244,0.5);
    cursor: pointer;
}
.time-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: white !important; /* 白色文字，适配半透黑 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* 播放器控制按钮 - 核心修改：播放暂停放大，上/下一首/下载缩小，适配hover和暗色模式 */
.play-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 2px;
    width: 100%;
}
/* 核心播放/暂停按钮 - 放大突出，视觉焦点 */
.control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
}
.control-btn:hover {
    background: #3375e0;
}
/* 辅助按钮：上一首/下一首/下载 - 统一缩小，自动适配下载按钮的player-btn类 */
.control-btn.small,
.play-control .player-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.control-btn.small:hover,
.play-control .player-btn:hover {
    background: #3375e0;
}
/* 暗色模式所有按钮hover颜色统一适配 */
.dark-mode .control-btn:hover,
.dark-mode .control-btn.small:hover,
.dark-mode .play-control .player-btn:hover {
    background: #4a85e0;
}

/* ========== 歌词样式 - 核心适配播放器内歌词区 ========== */
#lyric-loading, #lyric-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-secondary);
    padding: 0;
    margin: 0;
    font-size: 14px;
    display: none;
}
.lyric-box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    /* 简化为：直接不设置背景，避免和播放器遮罩叠加 */
}
.lyric-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* 歌词区保留局部滚动，不影响主容器 */
    text-align: center;
    padding: 8px 10px;
    line-height: 2.5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lyric-wrap::-webkit-scrollbar {
    display: none;
}
.lyric-line {
    font-size: 14px;
    height: 35px;
    line-height: 35px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* 白色文字，和深色背景对比 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); /* 文字阴影，防模糊 */
}
.lyric-active {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); /* 高亮歌词也加阴影 */
}

/* ========== 通用辅助样式 ========== */
.loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    display: none !important;
}
.empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-size: 14px;
}
.load-more-wrap {
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 5px;
}
.hide {
    display: none !important;
}

.loading-tip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    display: none;
}
.loading-tip.show {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* ========== 移动端专属适配优化 - 解决播放按钮突出+全场景窄屏兼容 ========== */
/* 通用移动端（750px以下，与主容器最大宽度一致） */
@media screen and (max-width: 750px) {
    /* 核心修复：歌曲项紧凑布局，彻底杜绝播放按钮溢出 */
    .playlist-select-btn,
    .add-playlist-btn {
        padding: 3px 6px;
        font-size: 11px;
        margin-left: 6px;
    }
    .song-item {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    /* 歌曲项内部元素等比缩小，适配窄屏 */
    .singer-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    .song-duration {
        margin-right: 3px !important;
        font-size: 11px !important;
    }
    .play-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
    .song-name {
        font-size: 13px !important;
    }
    .song-singer {
        font-size: 11px !important;
    }

    /* 歌手列表三列布局适配，减少间距避免横向拥挤 */
    .artist-list {
        gap: 10px !important;
        padding: 8px 0 !important;
    }
    .artist-avatar {
        width: 70px !important;
        height: 70px !important;
    }
    .artist-item {
        padding: 8px !important;
    }

    /* 全局模块/容器紧凑化，提升移动端内容利用率 */
    .container {
        padding: 8px !important;
    }
    .module {
        padding: 12px !important;
        margin-bottom: 8px !important;
    }
    .module-title {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    /* 搜索模块紧凑布局，适配移动端操作 */
    .search-module {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    .search-input, .search-btn {
        padding: 7px 10px !important;
        font-size: 13px !important;
    }
    /* 移动端微调清空按钮位置 */
    .clear-search-btn {
        right: 75px !important;
        font-size: 16px !important;
    }
    .search-tab-item {
        padding: 3px 8px !important;
        font-size: 11px !important;
    }

    /* 选项卡/播放器紧凑化，贴合移动端底部空间 */
    .tab-item {
        padding: 10px 0 !important;
        font-size: 15px !important;
    }
    .player-float {
        padding: 8px 12px 8px !important;
    }
    /* 移动端播放器按钮 - 按比例缩小，保持主/辅按钮层次 */
    .control-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
    }
    .control-btn.small,
    .play-control .player-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    /* 回到顶部按钮移动端微调 */
    .back-to-top {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        left: 10px !important;
        bottom: 110px !important;
    }
}

/* ========== 免责说明 - 固定高度120px ========== */
#disclaimer {
    width: 100%;
    height: 120px !important;
    box-sizing: border-box !important;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.disclaimer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.2;
}
.disclaimer-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* 回到顶部按钮 - 移动端适配版 左下角 底部120px 防遮挡 */
.back-to-top {
  position: fixed;
  left: 15px; /* 移动端缩小左侧间距，更贴合屏幕 */
  bottom: 120px; /* 严格匹配你的要求 */
  width: 40px; /* 移动端稍小，更协调 */
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: var(--primary-color); /* 改用主题主色，统一风格 */
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  z-index: 99999; /* 提高层级，绝对不被播放器/弹窗遮挡 */
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 加阴影，更显眼 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮，适配你的页面 */
}
/* 悬浮/点击效果（适配移动端触摸） */
.back-to-top:hover,
.back-to-top:active {
  background-color: #3375e0;
  transform: scale(1.1);
}
/* 深色主题适配 - 修复类名不一致问题（theme-dark→dark-mode） */
.dark-mode .back-to-top {
  background-color: #5a95f5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.dark-mode .back-to-top:hover,
.dark-mode .back-to-top:active {
  background-color: #4a85e0;
}
/* 保留原有hide类，无需修改 */
.hide {
  display: none !important;
}

/* 热门搜索样式 - 修复未定义变量，替换为现有可用变量 */
.hot-search-wrap {
    margin: 12px 0;
    padding: 0 4px;
}
.hot-search-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.hot-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hot-search-tag {
    padding: 4px 12px;
    background-color: var(--bg-primary); /* 替换未定义的--bg-secondary */
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.hot-search-tag:hover {
    background-color: rgba(66,133,244,0.1); /* 替换未定义的--theme-color-light，用主色透明底 */
}
/* 暗色模式热门搜索标签hover优化 */
.dark-mode .hot-search-tag:hover {
    background-color: rgba(90,149,245,0.2);
}


/* ========== 推荐音乐模块样式 ========== */
#recommend-module-wrap {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px var(--shadow-color);
}
.recommend-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-primary);
    padding-left: 8px;
    border-left: 3px solid var(--primary-color); /* 和其他标题统一风格 */
}
/* 卡片容器：默认3列布局 */
.recommend-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
/* 推荐卡片：hover上浮+阴影 */
.recommend-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: 0 1px 3px var(--shadow-color);
}
.recommend-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px var(--shadow-color);
}
/* 卡片图片容器（播放量绝对定位） */
.card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1; /* 正方形图片，和示例图一致 */
}
.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填充不拉伸 */
}
/* 播放量：右上角半透明背景+耳机图标 */
.play-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.play-count span {
    font-size: 14px; /* 耳机图标放大 */
}
/* 卡片标题：最多2行，超出省略 */
.card-title {
    font-size: 13px;
    color: var(--text-primary);
    padding: 8px 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* ========== 移动端适配推荐音乐模块 ========== */
@media screen and (max-width: 750px) {
    .recommend-cards {
        grid-template-columns: repeat(2, 1fr); /* 平板/大屏手机：2列 */
        gap: 10px;
    }
    .card-title {
        font-size: 12px;
    }
    .play-count {
        font-size: 11px;
        padding: 2px 5px;
    }
}
@media screen and (max-width: 375px) {
    .recommend-cards {
        grid-template-columns: 1fr; /* 小屏手机：1列 */
    }
    .card-img-wrap {
        aspect-ratio: 16/9; /* 小屏改用宽屏图片，更适配 */
    }
}

/* 移动端适配 */
@media screen and (max-width: 750px) {
    .disclaimer-title {
        font-size: 14px;
    }
    .disclaimer-text {
        font-size: 11px;
    }
}

/* 小屏移动端极致适配（375px以下，如iPhone SE/小屏安卓） */
@media screen and (max-width: 375px) {
    /* 歌手列表从3列变2列，彻底杜绝横向拥挤 */
    .artist-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 歌曲项进一步紧凑，播放按钮再微调 */
    .song-item {
        gap: 6px !important;
    }
    .play-btn {
        width: 26px !important;
        height: 26px !important;
    }
    /* 歌词字号小幅缩小，适配小屏 */
    .lyric-line {
        font-size: 13px !important;
    }
    .lyric-active {
        font-size: 14px !important;
    }
    /* 小屏再微调清空按钮位置 */
    .clear-search-btn {
        right: 70px !important;
    }
    /* 小屏播放器按钮再紧凑 */
    .control-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
    .control-btn.small,
    .play-control .player-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
}





/* ========== 全局播放列表专属样式（适配原header，统一UI/主题） ========== */
/* 播放列表外层容器：避开56px高的header，占满剩余屏幕 */
#play-list-module {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: calc(100% - 56px);
    background: var(--bg-primary);
    z-index: 999;
    overflow: hidden;
    transition: background 0.3s ease;
}
/* 播放列表固定标题栏：置顶于header下方，适配主题切换 */
.play-list-header {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: 44px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 10;
    box-sizing: border-box;
    transition: background 0.3s ease, border-color 0.3s ease;
}
/* 播放列表标题栏的返回按钮：轻量化样式，和标题栏融合 */
.play-list-header .artist-back-btn {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    display: block !important; /* 关键：覆盖原CSS的display: none */
}
/* 播放列表标题：居中显示，包含歌曲数量 */
.play-list-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}
/* 播放列表歌曲数量：小号次要文字色 */
#play-list-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 4px;
}
/* 清空播放列表按钮：轻量化，和整体按钮风格统一 */
.clear-playlist-btn {
    font-size: 12px;
    padding: 3px 8px;
    /* 替换未定义的--bg-secondary，改用主题基础色，避免背景异常 */
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color); /* 加边框，避免背景透明导致的视觉重复 */
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.clear-playlist-btn:hover {
    background: rgba(90, 149, 245, 0.1);
}
/* 播放列表内容区：在标题栏下方滚动，无重叠 */
.play-list-content {
    width: 100%;
    height: 100%;
    padding-top: 44px;
    box-sizing: border-box;
    overflow-y: auto;
}
/* 播放列表歌曲容器：复用样式，适配内边距 */
#play-list-container {
    padding: 10px 15px;
    min-height: 100%;
    box-sizing: border-box;
}
/* 暗色模式清空按钮hover优化 */
.dark-mode .clear-playlist-btn:hover {
    background: rgba(90, 149, 245, 0.2);
}
/* 移动端小屏播放列表标题栏适配 */
@media screen and (max-width: 375px) {
    .play-list-header {
        padding: 0 10px;
    }
    .clear-playlist-btn {
        padding: 3px 6px;
        font-size: 11px;
    }
}