/* ===== 主题 CSS 变量（默认值，JS 会覆盖） ===== */
:root {
    --th-bg: #f5f6fa;
    --th-card: #ffffff;
    --th-text: #333333;
    --th-text2: #666666;
    --th-text3: #999999;
    --th-primary: #317ef3;
    --th-primary-hover: #2d78f4;
    --th-border: #e8e8e8;
    --th-player-bg: #ffffff;
    --th-shadow: rgba(0,0,0,0.06);
    --th-bg-image: none;
    --th-overlay: none;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    background: var(--th-bg);
    color: var(--th-text);
    min-height: 100vh;
    padding-bottom: 90px;
    transition: background 0.3s, color 0.3s;
}
/* 背景图层：--th-bg-top 使背景从头部底部开始（背景不延伸到导航区域），
   background-position 用 center top 顶部对齐——宽屏下 cover 按宽度缩放会垂直溢出，
   顶部对齐保证图片上部分始终完整显示（裁掉的只是底部）；
   --th-bg-size/--th-bg-repeat 支持"无痕"无缝平铺，--th-bg-opacity 为背景图透明度 */
body::before {
    content: '';
    position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--th-bg-top, 0px); z-index: -1;
    background-image: var(--th-bg-image);
    background-size: var(--th-bg-size, cover);
    background-position: center top;
    background-repeat: var(--th-bg-repeat, no-repeat);
    opacity: var(--th-bg-opacity, 1);
}
body::after {
    content: '';
    position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--th-bg-top, 0px); z-index: -1;
    background: var(--th-overlay);
}
a { color: var(--th-primary); text-decoration: none; }
a:hover { color: var(--th-primary-hover); }

/* 头部：背景渐变/文字色/文字阴影支持自定义皮肤覆盖（--th-head-* 仅在自定义主题下由 JS 设置，
   其他主题走回退值保持原样）；position/overflow 为固定结构属性 */
.header {
    position: relative;
    overflow: hidden;
    background: var(--th-head-bg, linear-gradient(135deg, var(--th-primary) 0%, var(--th-primary-hover) 100%));
    color: var(--th-head-text, #fff);
    text-shadow: var(--th-head-ts, none);
    padding: 30px 20px 40px;
    text-align: center;
}
.header h1 { font-size: 26px; font-weight: 600; letter-spacing: 2px; }
.header p { margin-top: 8px; font-size: 13px; opacity: .85; }

.search-box {
    max-width: 680px;
    margin: -28px auto 0;
    position: relative; z-index: 1;   /* 上移与导航重叠，须高于导航背景图层，避免被背景图覆盖 */
    background: var(--th-card);
    border-radius: 12px;
    box-shadow: 0 6px 24px var(--th-shadow);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.search-box input {
    flex: 1;
    border: 1px solid var(--th-border);
    outline: none;
    padding: 0 18px;
    font-size: 15px;
    height: 48px;
    border-radius: 24px;
    background: var(--th-bg);
    color: var(--th-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box input:focus {
    border-color: var(--th-primary);
    box-shadow: 0 0 0 3px rgba(29,185,84,0.12);
}
.search-box button {
    border: none;
    background: linear-gradient(135deg, var(--th-primary), var(--th-primary-hover));
    color: #fff;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 600;
    height: 48px;
    border-radius: 24px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(29,185,84,0.3);
}
.search-box button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(29,185,84,0.45);
}
.search-box button:active { transform: translateY(0); }
.search-box button:disabled { background: #aaa; cursor: not-allowed; box-shadow: none; }

/* 自定义音源下拉 */
.source-dropdown { position: relative; flex-shrink: 0; }
.source-trigger {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--th-border);
    border-radius: 24px;
    background: var(--th-bg);
    color: var(--th-text);
    font-size: 14px; font-weight: 600;
    height: 48px; padding: 0 16px;
    cursor: pointer; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.source-trigger:hover { border-color: var(--th-primary); }
.source-trigger.open {
    border-color: var(--th-primary);
    box-shadow: 0 0 0 3px rgba(29,185,84,0.12);
}
.source-arrow { transition: transform 0.25s ease; opacity: 0.5; }
.source-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 180px;
    background: var(--th-card);
    border: 1px solid var(--th-border);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 1000;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top left;
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.source-menu.show {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}
.source-option {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px; font-weight: 500;
    color: var(--th-text2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.source-option:hover { background: var(--th-bg); color: var(--th-text); }
.source-option.active { color: var(--th-primary); font-weight: 600; }
.source-check { opacity: 0; font-size: 14px; color: var(--th-primary); transition: opacity 0.15s; }
.source-option.active .source-check { opacity: 1; }

.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }

.status {
    text-align: center;
    color: var(--th-text2);
    font-size: 14px;
    padding: 30px 0;
}

.song-list { list-style: none; }
.song-item {
    background: var(--th-card);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px var(--th-shadow);
    transition: box-shadow .2s, transform .2s;
}
.song-item:hover { box-shadow: 0 4px 16px var(--th-shadow); transform: translateY(-2px); }
.song-item.active { background: var(--th-card); border: 1px solid var(--th-primary); }
.song-cover {
    width: 50px; height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #eee;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.song-cover.placeholder {
    display: flex; align-items: center; justify-content: center;
    color: #bbb; font-size: 22px;
    background: linear-gradient(135deg, #f0f0f5, #e3e8f5);
}
.song-index {
    width: 30px; text-align: center;
    color: var(--th-text3); font-size: 14px; flex-shrink: 0;
}
.song-info { flex: 1; min-width: 0; }
.song-info .title {
    font-size: 15px;
    font-weight: 500;
    color: var(--th-text);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;   /* 允许 flex 子项被压缩，防止长歌名把右侧 song-actions 挤出 */
}
.song-info .title .song-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}
.song-info .title .badge { margin-left: 0; flex-shrink: 0; }
.song-info .meta { font-size: 12px; color: var(--th-text3); margin-top: 4px; }
.song-info .meta .album { margin-left: 8px; }
.song-info .meta .album-link {
    margin-left: 8px;
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    padding: 2px 10px;
    color: var(--th-primary);
    font-weight: 600;
    text-decoration: none;
    background: rgba(29,185,84,0.1);
    background: color-mix(in srgb, var(--th-primary) 12%, transparent);
    border: 1px solid rgba(29,185,84,0.35);
    border-color: color-mix(in srgb, var(--th-primary) 38%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 4px var(--th-shadow);
    transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.song-info .meta .album-link:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--th-primary), var(--th-primary-hover));
    border-color: transparent;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--th-primary) 45%, transparent);
    transform: translateY(-1px);
}
.song-info .meta .album-icon {
    display: inline-block;
    margin-right: 2px;
    transition: transform .4s ease;
}
.song-info .meta .album-link:hover .album-icon { transform: rotate(180deg) scale(1.15); }
/* 歌手名/专辑名文字链接（meta 行内） */
.meta-link {
    color: var(--th-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--th-primary) 45%, transparent);
    transition: color .2s, border-color .2s, text-shadow .2s;
}
.meta-link:hover {
    color: var(--th-primary-hover);
    border-bottom-style: solid;
    border-bottom-color: var(--th-primary-hover);
    text-shadow: 0 0 8px color-mix(in srgb, var(--th-primary) 45%, transparent);
}
/* 无 SingerID 时的纯文本歌手名（不可点击） */
.singer-plain {
    color: var(--th-text);
    opacity: .78;
}
.badge {
    display: inline-block;
    font-size: 11px;
    color: #fff;
    background: #1db954;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.badge.hq { background: #1db954 }
.badge.normal{background: #999;}
.badge.hig { background: #ff6b00; }
.song-actions { flex-shrink: 0; display: flex; gap: 8px; }
.btn {
    border: 1px solid var(--th-primary);
    background: var(--th-card);
    color: var(--th-primary);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn:hover { background: #317ef3; color: #fff; }
.btn.play { border-color: #52c41a; color: #52c41a; }
.btn.play:hover { background: #52c41a; color: #fff; }
.btn.play.loading, .btn.download.loading { opacity: .6; pointer-events: none; }
.btn.play.playing { background: #52c41a; color: #fff; }
.btn.btn-fav { border-color: #faad14; color: #faad14; }
.btn.btn-fav:hover { background: #faad14; color: #fff; }
.btn.btn-fav.active { background: #faad14; color: #fff; border-color: #faad14; }

/* ===== 收藏浮球（可拖拽） ===== */
.fav-fab {
    position: fixed; left: 30px; bottom: 80px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--th-primary), var(--th-primary-hover));
    color: #fff; font-size: 24px; border: none; cursor: grab;
    box-shadow: 0 4px 16px var(--th-shadow); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s; user-select: none; touch-action: none;
}
.fav-fab:hover { transform: scale(1.1); }
.fav-fab:active { cursor: grabbing; }
.fav-fab .fav-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 4px;
    background: #f5222d; color: #fff; font-size: 12px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    line-height: 1; pointer-events: none;
}

/* ===== 收藏列表面板 ===== */
.fav-panel {
    position: fixed; left: -400px; top: 20px;
    width: 360px; max-height: calc(100vh - 140px); background: var(--th-card); z-index: 1001;
    box-shadow: 2px 0 24px rgba(0,0,0,0.15);
    border-radius: 12px; overflow: hidden;
    transition: left 0.3s; display: flex; flex-direction: column;
}
.fav-panel.open { left: 20px; }
.fav-panel .fav-header {
    background: var(--th-head-bg, linear-gradient(135deg, var(--th-primary), var(--th-primary-hover)));
    color: var(--th-head-text, #fff);
    text-shadow: var(--th-head-ts, none);
    padding: 14px 20px; flex-shrink: 0; position: relative;
}
.fav-panel .fav-header h3 { font-size: 17px; margin-bottom: 2px; }
.fav-panel .fav-header .fav-sub { font-size: 12px; opacity: 0.9; }
.fav-panel .fav-close {
    position: absolute; top: 12px; right: 12px;
    color: var(--th-head-text, #fff); font-size: 20px; cursor: pointer; opacity: 0.8;
    padding: 4px 8px;
}
.fav-panel .fav-close:hover { opacity: 1; }
.fav-panel .fav-controls {
    display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--th-border); flex-shrink: 0;
    flex-wrap: wrap; align-items: center;
}
.fav-controls .mode-btn {
    padding: 5px 10px; border: 1px solid var(--th-border); border-radius: 6px;
    background: var(--th-card); color: var(--th-text2); cursor: pointer; font-size: 12px;
}
.fav-controls .mode-btn.active { background: var(--th-primary); color: #fff; border-color: var(--th-primary); }
.fav-controls .btn-nav {
    width: 32px; height: 32px; border: 1px solid var(--th-primary); border-radius: 6px;
    background: var(--th-card); color: var(--th-primary); cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.fav-controls .btn-nav:hover { background: var(--th-primary); color: #fff; }
.fav-controls .btn-play-all {
    padding: 5px 12px; background: var(--th-primary); color: #fff;
    border: none; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.fav-controls .btn-play-all:hover { background: var(--th-primary-hover); }
.fav-controls .btn-clear {
    padding: 5px 10px; background: var(--th-card); color: #f5222d;
    border: 1px solid #ffa39e; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.fav-controls .btn-clear:hover { background: rgba(245,34,45,0.08); }
.fav-panel .fav-list { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; }
.fav-item {
    display: flex; align-items: center; padding: 8px 12px;
    border-bottom: 1px solid var(--th-border); transition: background 0.2s; gap: 6px;
}
.fav-item:hover { background: rgba(255,255,255,0.06); }
.fav-item .fav-idx { width: 22px; text-align: center; color: var(--th-text3); font-size: 12px; flex-shrink: 0; }
.fav-item .fav-info { flex: 1; min-width: 0; }
.fav-item .fav-title { font-size: 13px; color: var(--th-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-item .fav-singer { font-size: 11px; color: var(--th-text3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-item .fav-btns { display: flex; gap: 4px; flex-shrink: 0; }
.fav-item .btn-play-fav {
    width: 30px; height: 30px; border: none; border-radius: 50%;
    background: var(--th-primary); color: #fff; cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fav-item .btn-play-fav:hover { background: var(--th-primary-hover); }
.fav-item .btn-dl-fav {
    width: 28px; height: 28px; border: 1px solid #1890ff; border-radius: 50%;
    background: var(--th-card); color: #1890ff; cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fav-item .btn-dl-fav:hover { background: #1890ff; color: #fff; }
.fav-item .btn-del-fav {
    width: 28px; height: 28px; border: 1px solid #ffa39e; border-radius: 50%;
    background: var(--th-card); color: #f5222d; cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fav-item .btn-del-fav:hover { background: #fff1f0; }
/* 收藏列表：正在播放 / 暂停指示 */
.fav-item.playing { background: linear-gradient(90deg, rgba(29,185,84,0.15), transparent 70%); box-shadow: inset 3px 0 0 var(--th-primary); }
.fav-item.playing .fav-title { color: var(--th-primary); font-weight: 600; }
.fav-item.playing .fav-idx { color: var(--th-primary); font-weight: 700; }
.fav-item.paused { background: rgba(128,128,128,0.10); box-shadow: inset 3px 0 0 var(--th-text3); }
.fav-item.paused .fav-title { color: var(--th-text2); }
.fav-item .eq { display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; height: 12px; width: 100%; }
.fav-item .eq span { width: 3px; border-radius: 1px; background: var(--th-primary); animation: favEqBar 0.9s ease-in-out infinite; }
.fav-item .eq span:nth-child(2) { animation-delay: 0.25s; }
.fav-item .eq span:nth-child(3) { animation-delay: 0.5s; }
@keyframes favEqBar { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.fav-empty { text-align: center; color: var(--th-text3); padding: 30px 0; font-size: 13px; }
/* 收藏分页 */
.fav-pager {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 12px; border-top: 1px solid var(--th-border);
    position: sticky; bottom: 0; background: var(--th-card);
}
.fav-pager .pager-btn {
    padding: 4px 10px; font-size: 12px; cursor: pointer;
    border: 1px solid var(--th-border); border-radius: 6px;
    background: var(--th-card); color: var(--th-text);
    transition: background 0.2s, color 0.2s;
}
.fav-pager .pager-btn:hover:not(:disabled) { background: var(--th-primary); color: #fff; border-color: var(--th-primary); }
.fav-pager .pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.fav-pager .pager-info { font-size: 12px; color: var(--th-text2); min-width: 64px; text-align: center; }

/* ===== 皮肤切换器（顶部半隐藏把手 + 点击动态展开；置于左上角，避免遮挡右上角的登录/注册/会员入口） ===== */
.theme-switcher {
    position: fixed; top: 0; left: 18px; z-index: 1500;
}
.theme-switcher .theme-btn {
    width: 46px; height: 44px; border-radius: 0 0 22px 22px;   /* 从顶部垂下的半圆把手 */
    border: none; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff; font-size: 20px; cursor: pointer;
    box-shadow: 0 3px 14px rgba(102,126,234,0.45);
    transform: translateY(-46%);   /* 默认半隐藏在顶部边缘外 */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);   /* 回弹动画 */
}
.theme-switcher.open .theme-btn,
.theme-switcher .theme-btn:hover { transform: translateY(0); }
/* 点击瞬间的小弹跳 */
.theme-switcher.open .theme-btn { animation: themeBtnPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes themeBtnPop {
    0% { transform: translateY(-46%) scale(1); }
    55% { transform: translateY(4px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
}
.theme-panel {
    position: absolute; top: 50px; left: 0;
    width: 160px; background: var(--th-card); border-radius: 12px;
    box-shadow: 0 8px 32px var(--th-shadow); padding: 8px;
    display: flex; flex-direction: column; gap: 2px;
    border: 1px solid var(--th-border);
    transform-origin: top left;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-14px) scale(0.88);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.28s;
}
.theme-panel.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
}
.theme-panel-title { font-size: 12px; color: var(--th-text3); padding: 4px 8px; border-bottom: 1px solid var(--th-border); margin-bottom: 4px; }
.theme-item {
    padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
    color: var(--th-text); transition: background 0.2s;
}
.theme-item:hover { background: var(--th-primary); color: #fff; }
.theme-item.active { background: var(--th-primary); color: #fff; font-weight: 600; }

/* ===== 底部播放器 ===== */
.player {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--th-player-bg);
    box-shadow: 0 -2px 12px var(--th-shadow);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 100;
}
.player-cover {
    width: 56px; height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    border: 2px solid #f0f0f5;
    background: linear-gradient(135deg, #e3e8f5, #f0f0f5);
    position: relative;
}
.player-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    animation: cover-spin 12s linear infinite;
    animation-play-state: paused;
}
.player.playing .player-cover img { animation-play-state: running; }
.player-cover::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #317ef3, 0 1px 3px rgba(0,0,0,.3);
    z-index: 2;
}
@keyframes cover-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.player .now { font-size: 13px; color: var(--th-text2); min-width: 120px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player audio { flex: 1; height: 36px; }
.player .close { cursor: pointer; color: var(--th-text3); font-size: 18px; padding: 0 6px; }
.player .close:hover { color: #f5222d; }
.player.hidden { display: none; }

/* ===== 播放器切歌按钮（上一首/下一首）：主题渐变圆钮 ===== */
.player-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.player-nav .pbtn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--th-primary), var(--th-primary-hover));
    color: #fff;
    box-shadow: 0 3px 10px var(--th-shadow), 0 2px 8px rgba(0,0,0,0.14);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, filter 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.player-nav .pbtn svg { width: 19px; height: 19px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.player-nav .pbtn:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 6px 16px var(--th-shadow), 0 4px 12px rgba(0,0,0,0.2);
    filter: brightness(1.1);
}
.player-nav .pbtn:active { transform: translateY(0) scale(0.9); filter: brightness(0.96); }
/* 播放中：波纹光晕呼吸，呼应正在播放状态（不改 transform，避免与 hover 冲突） */
.player.playing .player-nav .pbtn { animation: pbtnGlow 2.6s ease-in-out infinite; }
@keyframes pbtnGlow {
    0%, 100% { box-shadow: 0 3px 10px var(--th-shadow), 0 0 0 0 rgba(255,255,255,0.0); }
    50%      { box-shadow: 0 3px 10px var(--th-shadow), 0 0 0 6px rgba(255,255,255,0.14); }
}

/* ===== 播放器收藏当前歌曲按钮：空心心形，收藏后实心红色 + 弹跳动效 ===== */
.player-nav .pbtn.pbtn-fav {
    background: var(--th-card);
    border: 1px solid color-mix(in srgb, var(--th-border) 85%, transparent);
    color: var(--th-text3);
    box-shadow: 0 3px 10px var(--th-shadow);
}
.player-nav .pbtn.pbtn-fav svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    transition: fill .25s, color .25s;
}
.player-nav .pbtn.pbtn-fav:hover {
    color: #f5222d;
    border-color: color-mix(in srgb, #f5222d 55%, transparent);
    filter: none;
}
.player-nav .pbtn.pbtn-fav:active { transform: translateY(0) scale(0.9); filter: none; }
.player-nav .pbtn.pbtn-fav.faved {
    background: linear-gradient(135deg, #ff7a45, #f5222d);
    border-color: transparent;
    color: #fff;
    animation: favPop .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.player-nav .pbtn.pbtn-fav.faved svg { fill: currentColor; stroke: currentColor; }
@keyframes favPop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===== 歌词面板 ===== */
/* 文字样式变量：--lrc-size 字号 / --lrc-color 颜色 / --lrc-stroke 描边 / --lrc-opacity 透明度（JS 动态写入，可保存） */
.lyrics-panel {
    --lrc-size: 14px;
    --lrc-stroke: 0;
    --lrc-opacity: 1;
    position: fixed;
    right: 20px;
    top: 80px;
    width: 360px;
    max-height: 60vh;
    background: var(--th-card);
    border-radius: 12px;
    box-shadow: 0 4px 24px var(--th-shadow);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 0.3s, opacity 0.3s;
}
/* 透明模式：面板背景消失，歌词悬浮 */
.lyrics-panel.lrc-transparent {
    background: transparent !important;
    box-shadow: none !important;
}
.lyrics-panel.lrc-transparent .lyrics-header {
    background: transparent !important;
    color: var(--th-primary) !important;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}
.lyrics-panel.collapsed .lyrics-box { display: none; }
.lyrics-panel.collapsed { max-height: 50px; }
.lyrics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--th-head-bg, linear-gradient(135deg, var(--th-primary), var(--th-primary-hover)));
    color: var(--th-head-text, #fff);
    text-shadow: var(--th-head-ts, none);
    font-size: 14px;
    font-weight: 600;
    user-select: none;
}
.lyrics-toggle { cursor: pointer; font-size: 12px; opacity: 0.9; }
.lyrics-toggle:hover { opacity: 1; }
.lyrics-transparent-btn {
    cursor: pointer; font-size: 12px; opacity: 0.9;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px; padding: 2px 8px; color: #fff;
}
.lyrics-transparent-btn:hover { opacity: 1; background: rgba(255,255,255,0.3); }
.lyrics-box {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    scroll-behavior: smooth;
    opacity: var(--lrc-opacity, 1);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.lrc-line {
    text-align: center;
    font-size: var(--lrc-size, 14px);
    line-height: 2.2;
    color: var(--lrc-color, var(--th-text3));
    text-shadow: 0 0 calc(var(--lrc-stroke, 0) * 1.2px) rgba(0,0,0, calc(var(--lrc-stroke, 0) * 0.06)),
                 0 1px calc(var(--lrc-stroke, 0) * 0.8px) rgba(0,0,0, calc(var(--lrc-stroke, 0) * 0.05));
    transition: color 0.3s, transform 0.3s;
    padding: 2px 0;
    --lrc-progress: 0%;
}
.lrc-line.active {
    font-weight: 700;
    font-size: calc(var(--lrc-size, 14px) + 2px);
    transform: scale(1.05);
    background: linear-gradient(to right,
        var(--lrc-color, var(--th-primary)) 0%,
        var(--lrc-color, var(--th-primary)) var(--lrc-progress),
        var(--th-text3) var(--lrc-progress),
        var(--th-text3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* 透明模式：用 filter:drop-shadow 替代 text-shadow，适配亮/暗背景 */
.lyrics-panel.lrc-transparent .lrc-line {
    color: rgba(255,255,255,0.6);
    -webkit-text-fill-color: rgba(255,255,255,0.6);
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.lyrics-panel.lrc-transparent .lrc-line.active {
    background: linear-gradient(to right,
        #ffffff 0%,
        #ffffff var(--lrc-progress),
        rgba(255,255,255,0.45) var(--lrc-progress),
        rgba(255,255,255,0.45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* drop-shadow 让透明文字在任何背景上都可见 */
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.95)) drop-shadow(0 1px 3px rgba(0,0,0,0.7)) drop-shadow(0 0 8px rgba(0,0,0,0.4));
}
.lrc-empty {
    text-align: center;
    color: var(--th-text3);
    font-size: 13px;
    padding: 30px 0;
}

/* ===== 歌词面板增强：拖动移动 / 角标伸缩 / 文字样式控件（由 app.js 注入） ===== */
.lyrics-header { gap: 6px; touch-action: none; }
.lyrics-header .lyrics-title { flex-shrink: 0; }
.lrc-grip {
    cursor: grab;
    font-size: 13px;
    opacity: 0.75;
    letter-spacing: -1px;
    flex-shrink: 0;
    user-select: none;
}
.lrc-grip:active { cursor: grabbing; }
.lrc-size-btn, .lrc-gear {
    border: none;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #000000;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 4px;
    transition: background .2s;
}
.lrc-size-btn:hover, .lrc-gear:hover { background: rgba(255,255,255,0.35); }
.lrc-size-val {
    font-size: 11px;
    min-width: 18px;
    text-align: center;
    opacity: 0.9;
    flex-shrink: 0;
}
.lrc-resize {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    cursor: nesw-resize;
    touch-action: none;
    z-index: 6;
    opacity: 0.45;
    background: linear-gradient(135deg,
        transparent 0 46%,
        var(--th-text3) 46% 54%,
        transparent 54% 62%,
        var(--th-text3) 62% 70%,
        transparent 70% 78%,
        var(--th-text3) 78% 86%,
        transparent 86%);
}
.lrc-resize:hover { opacity: 1; }
.lrc-settings {
    display: none;
    padding: 10px 14px;
    border-bottom: 1px solid var(--th-border);
    background: var(--th-bg);
    flex-shrink: 0;
}
.lrc-settings.open { display: block; }
.lrc-set-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--th-text2);
}
.lrc-set-row + .lrc-set-row { margin-top: 8px; }
.lrc-set-row label { flex-shrink: 0; min-width: 56px; }
.lrc-set-row input[type="range"] { flex: 1; accent-color: var(--th-primary); min-width: 0; }
.lrc-set-row input[type="color"] {
    width: 30px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--th-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}
.lrc-set-row .lrc-reset {
    border: 1px solid var(--th-border);
    background: var(--th-card);
    color: var(--th-text2);
    border-radius: 6px;
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.lrc-set-row .lrc-reset:hover { color: var(--th-primary); border-color: var(--th-primary); }

.footer {
    text-align: center;
    color: var(--th-text3);
    font-size: 12px;
    padding: 24px 0;
    line-height: 1.8;
}
.footer a { color: var(--th-text3); }

.result-summary {
    text-align: center;
    color: var(--th-text2);
    font-size: 13px;
    padding: 12px 0 18px;
}
.result-summary b { color: var(--th-primary); }

/* 分页导航 */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 24px 0 12px;
    font-size: 14px;
}
.pagination .page-btn,
.pagination .page-num {
    display: inline-block;
    min-width: 36px;
    height: 36px;
    line-height: 34px;
    padding: 0 10px;
    text-align: center;
    border: 1px solid var(--th-border);
    border-radius: 6px;
    background: var(--th-card);
    color: var(--th-text2);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.pagination .page-btn { padding: 0 14px; }
.pagination a.page-btn:hover,
.pagination a.page-num:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
    background: rgba(0,0,0,0.04);
}
.pagination .page-num.active {
    background: var(--th-primary);
    border-color: var(--th-primary);
    color: #fff;
    cursor: default;
}
.pagination .page-btn.disabled {
    color: var(--th-text3);
    background: var(--th-bg);
    cursor: not-allowed;
}
.pagination .ellipsis {
    color: var(--th-text3);
    padding: 0 4px;
}
.pagination .page-jump {
    margin-left: 12px;
    color: var(--th-text2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pagination .page-jump input {
    width: 56px;
    height: 32px;
    border: 1px solid var(--th-border);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    outline: none;
    background: var(--th-card);
    color: var(--th-text);
}
.pagination .page-jump input:focus { border-color: var(--th-primary); }
.pagination .page-jump button {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--th-primary);
    background: var(--th-primary);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.pagination .page-jump button:hover { background: var(--th-primary-hover); }

/* ===== 音源选择器样式 ===== */
.source-selector {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.source-label {
    font-size: 13px;
    color: #ffffff;
    margin-right: 4px;
}
.source-btn {
    padding: 6px 16px;
    border: 1px solid var(--th-border);
    border-radius: 20px;
    background: var(--th-card);
    color: var(--th-text2);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.source-btn:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
}
.source-btn.active {
    background: var(--th-primary);
    color: #fff;
    border-color: var(--th-primary);
}
.source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 6px;
    vertical-align: middle;
}
.source-badge.kuwo {
    background: var(--th-primary);
    color: #fff;
}
.source-badge.kugou {
    background: var(--th-text3);
    color: #fff;
}
.badge.kuwo-tag {
    background: #722ed1;
    margin-left: 4px;
}
.fav-source-tag {
    display: inline-block;
    font-size: 10px;
    padding: 0 5px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
}
.fav-source-tag.kuwo {
    background: #722ed1;
    color: #fff;
}
.fav-source-tag.netease {
    background: #e60026;
    color: #fff;
}
.fav-source-tag.qq {
    background: #31c27c;
    color: #fff;
}

@media (max-width: 640px) {
    .header h1 { font-size: 20px; }
    .song-item { flex-wrap: wrap; }
    .song-cover { width: 42px; height: 42px; }
    .player .now { max-width: none; font-size: 12px; }
    .player-cover { width: 44px; height: 44px; }
    /* 播放器移动端两行布局：上=封面+曲名+切歌钮+关闭，下=音频条独占整行（避免横向挤压） */
    .player { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px 10px; }
    .player .now { order: 1; flex: 1; min-width: 0; }
    .player .player-nav { order: 2; gap: 8px; }
    .player .close { order: 3; }
    .player audio { order: 4; flex: 1 1 100%; min-width: 0; }
    .player-nav .pbtn { width: 38px; height: 38px; }
    .player-nav .pbtn svg { width: 17px; height: 17px; }
    .source-selector { width: 100%; }
    /* 首页搜索框：小屏改两行（输入框整行，音源+按钮第二行均分），不再挤在一行错位 */
    .search-box { padding: 10px; }
    .search-box form { flex-wrap: wrap; gap: 8px; }
    .search-box form input[name="keyword"] { order: -1; flex: 1 1 100%; min-width: 0; height: 44px; }
    .search-box .source-dropdown { flex: 1 1 auto; min-width: 0; }
    .search-box .source-trigger { width: 100%; justify-content: center; height: 44px; }
    .search-box form button[type="submit"] { flex: 1 1 auto; height: 44px; padding: 0 20px; }
    /* 专辑页顶栏（含首页 AJAX 注入的同结构）：返回键与搜索框等高对齐 */
    .top-nav { gap: 10px; margin-bottom: 14px; }
    .top-nav .back-btn { height: 42px; padding: 0 16px; font-size: 13px; }
    .search-bar-album { min-width: 0; flex: 1; gap: 6px; }
    .search-bar-album input[type="text"] { height: 42px; padding: 0 12px; font-size: 14px; min-width: 0; }
    .search-bar-album button { height: 42px; padding: 0 14px; font-size: 13px; }
    /* 分页：小屏收紧并让跳转独占一行 */
    .pagination { gap: 5px; padding: 16px 4px 8px; }
    .pagination .page-btn, .pagination .page-num { min-width: 34px; height: 34px; line-height: 32px; padding: 0 8px; font-size: 13px; border-radius: 8px; }
    .pagination .page-btn { padding: 0 10px; }
    .pagination .ellipsis { display: none; }
    .pagination .page-jump { width: 100%; justify-content: center; margin-left: 0; margin-top: 4px; }
    /* 歌词行更紧凑 */
    .lrc-line { line-height: 2; }
    /* 专辑链接收紧 */
    .song-info .meta .album-link { max-width: 150px; }
    /* 操作按钮换到第二行右对齐 */
    .song-actions { width: 100%; justify-content: flex-end; padding-top: 4px; }
    /* 歌词面板：手机端固定为底部悬浮面板，不可拖动/伸缩 */
    .lyrics-panel {
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: 86px;
        width: auto !important;
        max-height: 45vh !important;
    }
    .lyrics-panel.collapsed { max-height: 50px !important; }
    .lrc-resize, .lrc-grip { display: none; }
    .lyrics-header { padding: 8px 10px; gap: 4px; font-size: 13px; }
    .lrc-size-val { display: none; }
    .lyrics-transparent-btn { padding: 2px 5px; font-size: 11px; }
    .lyrics-toggle { font-size: 11px; }
}

/* ===== 专辑页面样式（从 album.css 提取，避免冲突） ===== */
/* 专辑介绍区域 - 美化 */
.album-header {
    background: linear-gradient(135deg, var(--th-card) 0%, var(--th-card) 60%, rgba(29,185,84,0.04) 100%);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px var(--th-shadow);
    display: flex;
    gap: 28px;
    align-items: center;
    border: 1px solid var(--th-border);
}
.album-cover {
    width: 180px; height: 180px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    flex-shrink: 0;
    background: var(--th-bg);
}
.album-cover.placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 56px; color: var(--th-text3);
}
.album-info { flex: 1; min-width: 0; }
.album-info h1 {
    font-size: 26px; font-weight: 700; margin-bottom: 10px;
    color: var(--th-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.album-info .singer { color: var(--th-primary); font-size: 15px; margin-bottom: 12px; font-weight: 600; }
.album-info .album-meta { color: var(--th-text2); font-size: 13px; margin-bottom: 4px; }
.album-info .count { color: var(--th-text3); font-size: 13px; margin-bottom: 14px; }
.album-info .album-intro {
    position: relative; margin-top: 10px; padding: 14px 16px;
    background: var(--th-bg); border-radius: 10px;
    border: 1px solid var(--th-border);
}
.album-info .intro-text {
    font-size: 13px; line-height: 1.8; color: var(--th-text2);
    max-height: 60px; overflow: hidden; transition: max-height 0.3s ease;
}
.album-info .intro-text.expanded { max-height: 2000px; }
.album-info .intro-toggle {
    display: inline-block; margin-top: 8px; color: var(--th-primary);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.album-info .intro-toggle:hover { opacity: 0.8; }
/* 顶部导航栏 */
.top-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 24px; height: 48px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--th-primary), var(--th-primary-hover));
    color: #fff; font-size: 15px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(29,185,84,0.3);
    transition: transform 0.15s, box-shadow 0.2s; cursor: pointer; border: none; text-decoration: none; white-space: nowrap;
}
.back-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(29,185,84,0.45); }
.back-btn .arrow { font-size: 20px; }
/* 搜索栏 - 与首页样式一致 */
.search-bar-album { flex: 1; min-width: 200px; display: flex; gap: 8px; align-items: center; }
.search-bar-album input[type="text"] {
    flex: 1; border: 1px solid var(--th-border); outline: none;
    padding: 0 18px; font-size: 15px; height: 48px; border-radius: 24px;
    background: var(--th-bg); color: var(--th-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-bar-album input[type="text"]:focus {
    border-color: var(--th-primary); box-shadow: 0 0 0 3px rgba(29,185,84,0.12);
}
.search-bar-album button {
    border: none;
    background: linear-gradient(135deg, var(--th-primary), var(--th-primary-hover));
    color: #fff; padding: 0 32px; font-size: 15px; font-weight: 600;
    height: 48px; border-radius: 24px; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(29,185,84,0.3);
}
.search-bar-album button:hover {
    transform: translateY(-1px); box-shadow: 0 6px 20px rgba(29,185,84,0.45);
}

/* ===== 夜沫主题：header 复刻 yemoe 源站 .tab1 的背景效果 =====
   45° 象牙白→浅粉渐变打底，其上叠加 40% 透明度的无痕图 img/bg.png（无缝纹理 repeat 平铺，
   与源站 .tab1:after 的 url(bg.png) repeat center + opacity:.4 完全一致） */
body[data-theme="yemoe"] .header {
    position: relative;
    background: linear-gradient(45deg, #FFFFF0 0%, #FFCCCC 100%);
    color: #666;
    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    overflow: hidden;
}
body[data-theme="yemoe"] .header::after {
    content: "";
    position: absolute; inset: 0;
    background: url("../images/bg.png") repeat center;
    opacity: .4;
    pointer-events: none;
}
body[data-theme="yemoe"] .header > * { position: relative; z-index: 1; }
body[data-theme="yemoe"] .header h1 { color: #0059B2; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
body[data-theme="yemoe"] .header p { color: #777; opacity: 1; }

/* ===== 自定义皮肤设置面板 ===== */
#customSkinPanel {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45);
}
#customSkinPanel.open { display: flex; }
#customSkinPanel .cs-box {
    width: min(92vw, 430px); max-height: 86vh; overflow-y: auto;
    background: var(--th-card); color: var(--th-text);
    border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
#customSkinPanel .cs-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; font-weight: 700; font-size: 15px;
    border-bottom: 1px solid var(--th-border);
    position: sticky; top: 0; background: var(--th-card); z-index: 1;
}
#customSkinPanel .cs-close {
    border: none; background: var(--th-bg); color: var(--th-text2);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px;
}
#customSkinPanel .cs-close:hover { background: var(--th-primary); color: #fff; }
#customSkinPanel .cs-body { padding: 14px 18px 18px; }
#customSkinPanel .cs-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
#customSkinPanel .cs-row > label { width: 62px; flex-shrink: 0; font-size: 13px; font-weight: 600; }
#customSkinPanel .cs-row input[type="color"] {
    width: 46px; height: 34px; padding: 2px; border: 1px solid var(--th-border);
    border-radius: 8px; background: var(--th-bg); cursor: pointer;
}
/* 新增控件：透明度滑块 / 无痕平铺复选框 / 权限提示 */
#customSkinPanel .cs-row input[type="range"] {
    flex: 1; max-width: 160px; height: 30px; accent-color: var(--th-primary); cursor: pointer;
}
#customSkinPanel .cs-row input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--th-primary); cursor: pointer; flex-shrink: 0;
}
#customSkinPanel .cs-opacity-val { font-size: 12px; color: var(--th-text2); min-width: 38px; text-align: right; }
#customSkinPanel .cs-perm-tip { font-size: 11px; color: var(--th-text3); flex: 1; min-width: 120px; }
#customSkinPanel .cs-tip { font-size: 11px; color: var(--th-text3); flex: 1; min-width: 120px; }
#customSkinPanel .cs-grad-sep { color: var(--th-text3); font-size: 12px; padding: 0 2px; }
/* 渐变角度时钟表盘：仿 DevTools 渐变角度拾取器，拖动指针旋转设置角度 */
#customSkinPanel .cs-angle-row { align-items: center; }
#customSkinPanel .cs-angle-dial {
    position: relative; width: 64px; height: 64px; border-radius: 50%;
    background: var(--th-bg); border: 1px solid var(--th-border);
    box-shadow: inset 0 1px 4px var(--th-shadow);
    touch-action: none; cursor: grab; flex-shrink: 0; user-select: none;
}
#customSkinPanel .cs-angle-dial:active { cursor: grabbing; }
#customSkinPanel .cs-angle-tick {
    position: absolute; left: 50%; top: 50%; width: 2px; height: 5px;
    margin: -2.5px 0 0 -1px; background: var(--th-text3); border-radius: 1px;
    pointer-events: none;
}
#customSkinPanel .cs-angle-hand {
    position: absolute; left: 50%; top: 50%; width: 2px; height: 27px;
    margin: -27px 0 0 -1px; transform-origin: 50% 100%;
    background: linear-gradient(to top, transparent, var(--th-primary));
    pointer-events: none;
}
#customSkinPanel .cs-angle-knob {
    position: absolute; top: -6px; left: 50%; width: 13px; height: 13px;
    margin-left: -6.5px; border-radius: 50%;
    background: var(--th-primary); border: 2px solid #fff; box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
#customSkinPanel .cs-angle-center {
    position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%; background: var(--th-text2); pointer-events: none;
}
#customSkinPanel .cs-angle-info { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
#customSkinPanel .cs-angle-preview {
    width: 74px; height: 34px; border-radius: 8px; flex-shrink: 0;
    border: 1px solid var(--th-border); background: #ccc;
}
#customSkinPanel .cs-angle-val { font-size: 12px; color: var(--th-text2); min-width: 34px; text-align: right; }
#customSkinPanel .cs-bg-actions { display: flex; gap: 8px; flex: 1; }
#customSkinPanel .cs-upload-btn, #customSkinPanel .cs-clear-btn {
    border: 1px dashed var(--th-primary); color: var(--th-primary);
    background: var(--th-bg); border-radius: 8px; padding: 8px 14px;
    font-size: 13px; cursor: pointer; transition: all .2s;
}
#customSkinPanel .cs-upload-btn:hover, #customSkinPanel .cs-clear-btn:hover {
    background: var(--th-primary); color: #fff; border-style: solid;
}
#customSkinPanel .cs-preview-wrap { text-align: center; margin: 4px 0 10px; }
#customSkinPanel #csBgPreview {
    max-width: 100%; max-height: 130px; border-radius: 8px;
    box-shadow: 0 2px 10px var(--th-shadow);
}
#customSkinPanel .cs-msg {
    min-height: 18px; font-size: 12px; margin-bottom: 8px; text-align: center;
}
#customSkinPanel .cs-msg.ok { color: var(--th-primary); }
#customSkinPanel .cs-msg.err { color: #e74c3c; }
#customSkinPanel .cs-foot { display: flex; gap: 10px; }
#customSkinPanel .cs-save, #customSkinPanel .cs-reset {
    flex: 1; padding: 10px 0; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s;
}
#customSkinPanel .cs-save {
    background: linear-gradient(135deg, var(--th-primary), var(--th-primary-hover)); color: #fff;
}
#customSkinPanel .cs-save:hover { transform: translateY(-1px); box-shadow: 0 4px 14px var(--th-shadow); }
#customSkinPanel .cs-reset {
    background: var(--th-bg); color: var(--th-text2); border: 1px solid var(--th-border);
}
#customSkinPanel .cs-reset:hover { color: var(--th-primary); border-color: var(--th-primary); }
@media (max-width: 640px) {
    #customSkinPanel .cs-box { width: 94vw; max-height: 88vh; }
    #customSkinPanel .cs-row > label { width: 100%; }
    #customSkinPanel .cs-tip { min-width: 100%; order: 3; }
}

/* ===== 轻提示 Toast：底部居中弹出，自动淡入淡出（播放/下载失败等提示） =====
   app.js toastMsg() 添加 .show 显示，2.6 秒后移除 -> 平滑淡出退出 */
.kg-toast {
    position: fixed;
    left: 50%;
    bottom: 100px;   /* 悬浮于播放器上方，避免遮挡控制条 */
    transform: translate(-50%, 14px) scale(0.96);
    max-width: min(86vw, 480px);
    padding: 11px 20px;
    background: rgba(20, 22, 34, 0.88);
    color: #fff;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* 纯提示，永不拦截点击 */
    z-index: 3000;
    word-break: break-word;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0.35s;
}
.kg-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}
@media (max-width: 640px) {
    /* 移动端播放器为两行布局更高，Toast 再上移避免重叠 */
    .kg-toast { bottom: 132px; font-size: 13px; padding: 10px 16px; max-width: 90vw; }
}

/* ===== 搜索页返回首页按钮 ===== */
.back-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--th-border);
    background: var(--th-card);
    color: var(--th-text);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
    margin-bottom: 14px;
}
.back-home-btn:hover {
    color: var(--th-primary);
    border-color: var(--th-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--th-primary) 20%, transparent);
}
.back-home-btn svg { display: block; }

/* ===== 搜索无结果空状态 ===== */
.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px 64px;
    margin: 10px 0 18px;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--th-border) 80%, transparent);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--th-primary) 7%, transparent), transparent 65%),
        var(--th-card);
    animation: searchEmptyIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes searchEmptyIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.search-empty-icon {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    border-radius: 50%;
    margin-bottom: 16px;
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--th-primary) 22%, transparent), transparent 70%),
        color-mix(in srgb, var(--th-primary) 8%, var(--th-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-primary) 18%, transparent);
    animation: searchEmptyFloat 3s ease-in-out infinite;
}
@keyframes searchEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.search-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--th-text);
    margin-bottom: 10px;
}
.search-empty-tips {
    font-size: 13px;
    color: var(--th-text2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.search-empty-tips i {
    font-style: normal;
    opacity: 0.45;
}
.search-empty-tips span {
    padding: 3px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--th-primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--th-border) 70%, transparent);
    transition: all 0.2s;
}
.search-empty-tips span:hover {
    color: var(--th-primary);
    border-color: color-mix(in srgb, var(--th-primary) 45%, transparent);
}
@media (max-width: 640px) {
    .search-empty { padding: 42px 16px 48px; }
    .search-empty-title { font-size: 15px; }
    .search-empty-tips { gap: 6px; font-size: 12px; }
}