/* ==================== Cloud Listen 视觉重构 v2 ==================== */
/* 编辑风：实色 + 硬阴影 + 反色 active；0 毛玻璃；类名沿用项目原有 */

#music {
    /* 默认 oat 主题 */
    --cl-bg-main: #F2F0EB;
    --cl-surface: #FFFFFF;
    --cl-text-main: #2D2926;
    --cl-text-sub: #96928E;
    --cl-accent: #B07D62;
    --cl-accent-soft: rgba(176, 125, 98, 0.12);
    --cl-border: #E0DED9;
    --cl-shadow: 0 12px 40px rgba(45, 41, 38, 0.08);
    --cl-shadow-hard: 6px 6px 0px rgba(45, 41, 38, 0.1);

    /* 兼容旧 alias，供老代码引用 */
    --cl-primary-rose: var(--cl-accent);
    --cl-bg-glass: var(--cl-surface);
    --cl-border-glass: var(--cl-border);
    --cl-white: #ffffff;

    /* JS 直接 setProperty 的歌词变量保留 */
    --cl-lyric-color: #ffffff;
    --cl-lyric-glow: #ffffff;
    --cl-dl-opacity: 1;

    position: relative;
    overflow: hidden;
    font-family: "PingFang SC", "Helvetica Neue", sans-serif;
    background: var(--cl-bg-main) !important;
    color: var(--cl-text-main);
    transition: background 0.3s, color 0.3s;
}

/* === 5 个内置主题色（按 mock：bg-main / border / accent 全换） === */
#music.theme-oat {
    --cl-bg-main: #F2F0EB;
    --cl-surface: #FFFFFF;
    --cl-border: #E0DED9;
    --cl-accent: #B07D62;
    --cl-accent-soft: rgba(176,125,98,0.12);
}
#music.theme-white {
    --cl-bg-main: #FFFFFF;
    --cl-surface: #FFFFFF;
    --cl-border: #E5E5EA;
    --cl-accent: #111111;
    --cl-accent-soft: rgba(17,17,17,0.08);
}
#music.theme-green {
    --cl-bg-main: #EDF2EF;
    --cl-surface: #FFFFFF;
    --cl-border: #D1DAD5;
    --cl-accent: #5B8266;
    --cl-accent-soft: rgba(91,130,102,0.12);
}
#music.theme-red {
    --cl-bg-main: #F7F2F2;
    --cl-surface: #FFFFFF;
    --cl-border: #D9C9C9;
    --cl-accent: #A64444;
    --cl-accent-soft: rgba(166,68,68,0.12);
}
#music.theme-blue {
    --cl-bg-main: #F0F2F7;
    --cl-surface: #FFFFFF;
    --cl-border: #C9D1D9;
    --cl-accent: #446BA6;
    --cl-accent-soft: rgba(68,107,166,0.12);
}

/* 🌟 body 级别主题变量：给 #music 之外的悬浮球（sugar-ball / sugar-panel）继承用 */
body.cl-theme-oat {
    --cl-bg-main: #F2F0EB;
    --cl-surface: #FFFFFF;
    --cl-border: #E0DED9;
    --cl-accent: #B07D62;
    --cl-accent-soft: rgba(176,125,98,0.12);
}
body.cl-theme-white {
    --cl-bg-main: #FFFFFF;
    --cl-surface: #FFFFFF;
    --cl-border: #E5E5EA;
    --cl-accent: #111111;
    --cl-accent-soft: rgba(0,0,0,0.06);
}
body.cl-theme-green {
    --cl-bg-main: #EDF2EF;
    --cl-surface: #FFFFFF;
    --cl-border: #D1DAD5;
    --cl-accent: #5B8266;
    --cl-accent-soft: rgba(91,130,102,0.12);
}
body.cl-theme-red {
    --cl-bg-main: #F7F2F2;
    --cl-surface: #FFFFFF;
    --cl-border: #D9C9C9;
    --cl-accent: #A64444;
    --cl-accent-soft: rgba(166,68,68,0.12);
}
body.cl-theme-blue {
    --cl-bg-main: #F0F2F7;
    --cl-surface: #FFFFFF;
    --cl-border: #C9D1D9;
    --cl-accent: #446BA6;
    --cl-accent-soft: rgba(68,107,166,0.12);
}

/* 旧版 backdrop-filter 模糊背景层：彻底关闭 */
#music .music-bg-layer { display: none !important; }

#music .music-app-container {
    position: relative; z-index: 1; height: 100%; width: 100%;
    display: flex; flex-direction: column;
}
/* ==================== 通用按钮 ==================== */
/* 默认 m-icon-btn：纯图标无装饰（mock 风格），只有特定容器内才加方框 */
#music .m-icon-btn {
    width: 38px; height: 38px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--cl-text-main); font-size: 22px;
    cursor: pointer; transition: 0.15s;
    box-shadow: none;
    padding: 0;
}
#music .m-icon-btn:active {
    transform: scale(0.88);
    box-shadow: none;
    background: transparent;
}

/* ==================== 首页 ==================== */
#music .music-library {
    flex: 1;
    padding: calc(env(safe-area-inset-top, 20px) + 20px) 24px 20px;
    overflow-y: auto;
    display: flex; flex-direction: column;
    background: var(--cl-bg-main);
}
#music .music-library::-webkit-scrollbar { display: none; }

#music .m-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px; position: relative; gap: 8px;
    padding-bottom: 8px;
    border-bottom: none;
}
#music .m-app-title {
    font-size: 15px; font-weight: 600;
    color: var(--cl-text-main);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    flex: 1; text-align: left; padding-left: 4px;
    font-family: "Helvetica Neue", "Arial", "PingFang SC", sans-serif;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

#music .m-top-menu-dropdown {
    position: absolute; top: 56px; right: 0;
    background: var(--cl-surface); color: var(--cl-text-main);
    border-radius: 12px; padding: 6px;
    box-shadow: 4px 4px 0px var(--cl-border);
    border: 1.5px solid var(--cl-text-main);
    display: none; flex-direction: column; gap: 2px;
    z-index: 10; min-width: 150px;
    transform-origin: top right;
    animation: musicPopIn 0.18s ease-out;
}
#music .m-top-menu-dropdown.show { display: flex; }
#music .m-menu-item {
    padding: 10px 12px; border-radius: 8px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 700; color: var(--cl-text-main);
    cursor: pointer; transition: 0.15s;
}
#music .m-menu-item:hover { background: var(--cl-bg-main); }
#music .m-menu-item:active { background: var(--cl-border); }
#music .m-menu-item i { color: var(--cl-accent); font-size: 16px; }

/* 首页搜索框 */
#music .m-search-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--cl-surface);
    border: 1.5px solid var(--cl-border);
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: var(--cl-shadow);
    transition: 0.15s;
}
#music .m-search-bar:focus-within {
    border-color: var(--cl-text-main);
}
#music .m-sb-icon {
    color: var(--cl-text-sub); font-size: 16px; flex-shrink: 0;
}
#music .m-sb-input {
    flex: 1; border: none; outline: none;
    background: transparent;
    font-size: 14px; font-weight: 600;
    color: var(--cl-text-main);
}
#music .m-sb-input::placeholder {
    color: var(--cl-text-sub); font-weight: 500;
}
#music .m-sb-clear {
    cursor: pointer;
    color: var(--cl-text-sub); font-size: 18px;
    transition: 0.15s;
}
#music .m-sb-clear:hover { color: var(--cl-text-main); }

/* AI 评论气泡（播放器内） */
.music-ai-bubble {
    position: absolute;
    bottom: 120px; left: 50%;
    transform: translateX(-50%);
    background: var(--cl-text-main, #2D2926);
    color: var(--cl-bg-main, #F2F0EB);
    padding: 10px 16px;
    border-radius: 12px;
    border: 2px solid var(--cl-text-main, #2D2926);
    box-shadow: 4px 4px 0 var(--cl-accent, #B07D62);
    font-size: 13px; max-width: 80%;
    text-align: center; z-index: 100;
    transition: opacity 0.3s;
}
.music-ai-bubble.is-action {
    box-shadow: 4px 4px 0 #ff6b6b;
}
.music-ai-bubble-name {
    font-size: 10px;
    color: var(--cl-accent, #B07D62);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.music-ai-bubble.is-action .music-ai-bubble-name {
    color: #ff8b8b;
}
.music-ai-bubble-text {
    font-weight: 600; line-height: 1.5;
}

/* 夜间：搜索框 + AI 气泡 */
body.dark-mode #music .m-search-bar,
body.night #music .m-search-bar {
    background: var(--cl-surface);
    border-color: var(--cl-border);
}
body.dark-mode .music-ai-bubble,
body.night .music-ai-bubble {
    background: #1A1A1A;
    color: #E2E2E7;
    border-color: #E2E2E7;
    box-shadow: 4px 4px 0 #9B9B9B;
}
body.dark-mode .music-ai-bubble.is-action,
body.night .music-ai-bubble.is-action {
    box-shadow: 4px 4px 0 #ff6b6b;
}
body.dark-mode .music-ai-bubble-name,
body.night .music-ai-bubble-name {
    color: #9B9B9B;
}
#music .m-sugar-toggle-card {
    margin-bottom: 18px; padding: 14px 16px;
    border-radius: 12px;
    background: var(--cl-surface);
    border: 1.5px solid var(--cl-border);
    box-shadow: var(--cl-shadow);
    display: flex; justify-content: space-between; align-items: center;
}
#music .m-stc-info {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}
#music .m-stc-icon {
    font-size: 20px;
    color: var(--cl-accent);
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cl-accent-soft);
    flex-shrink: 0;
}
#music .m-stc-title {
    font-size: 14px; font-weight: 800;
    color: var(--cl-text-main);
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}
#music .m-stc-desc {
    font-size: 10px; color: var(--cl-text-sub);
    font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase;
}

/* 守护者切换 Banner */
#music .m-companion-banner {
    margin-bottom: 22px; padding: 14px 16px;
    border-radius: 12px;
    background: var(--cl-surface);
    border: 1.5px solid var(--cl-border);
    box-shadow: var(--cl-shadow);
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: 0.15s;
}
#music .m-companion-banner:active { transform: scale(0.98); }
#music .mcb-avatar {
    width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
    border: 1.5px solid var(--cl-border);
}
#music .mcb-avatar img { width: 100%; height: 100%; object-fit: cover; }
#music .mcb-info { flex: 1; min-width: 0; }
#music .mcb-label {
    font-size: 10px; color: var(--cl-accent);
    margin-bottom: 3px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
}
#music .mcb-name {
    font-size: 16px; font-weight: 800;
    color: var(--cl-text-main);
}
#music .mcb-switch {
    font-size: 18px; font-weight: 800;
    color: var(--cl-text-sub); background: transparent;
    padding: 0; border-radius: 0;
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
#music .mcb-switch i { font-size: 20px; }
#music .mcb-switch:active { color: var(--cl-text-main); }

/* 区块标题 */
#music .m-section-header {
    margin-bottom: 14px; font-size: 12px;
    font-weight: 800; color: var(--cl-accent);
    letter-spacing: 2px; text-transform: uppercase;
}

/* 歌曲列表 */
#music .m-song-list {
    display: flex; flex-direction: column; gap: 0;
    padding-bottom: 100px;
}
#music .m-song-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--cl-border);
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    padding: 14px 0;
    transition: 0.15s;
}
#music .m-song-card.is-active {
    background: var(--cl-accent-soft);
    border-radius: 0;
}
#music .m-song-card:active { transform: scale(0.99); }

#music .m-song-item {
    display: flex; align-items: center; gap: 14px;
    padding: 0;
    background: transparent;
}
#music .m-index {
    font-size: 12px; font-weight: 900;
    color: var(--cl-accent);
    letter-spacing: 1px;
    width: 22px; text-align: center;
    flex-shrink: 0;
}
#music .ms-cover {
    width: 64px; height: 64px;
    border-radius: 0; overflow: hidden; flex-shrink: 0;
    background: var(--cl-surface);
    padding: 4px;
    border: 1px solid var(--cl-border);
    box-shadow: 4px 4px 0 var(--cl-border);
    cursor: pointer;
    transition: 0.15s;
}
#music .ms-cover:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--cl-border);
}
#music .ms-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#music .ms-info { flex: 1; min-width: 0; cursor: pointer; }
#music .ms-name {
    font-size: 17px; font-weight: 900;
    color: var(--cl-text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
    letter-spacing: 0;
}
#music .ms-artist {
    font-size: 11px; color: var(--cl-text-sub);
    font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase;
}
#music .ms-actions {
    display: flex; flex-direction: column;
    gap: 10px; align-items: flex-end;
}
#music .m-btn-lyric {
    min-width: 30px; height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    background: transparent;
    border: 1.5px solid var(--cl-text-main);
    color: var(--cl-text-main);
    font-size: 11px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.15s;
}
#music .m-btn-lyric:active {
    background: var(--cl-text-main); color: var(--cl-bg-main);
}
#music .m-btn-del {
    width: 24px; height: 24px;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--cl-text-sub); font-size: 16px;
    cursor: pointer; transition: 0.15s; padding: 0;
}
#music .m-btn-del:active { color: var(--cl-text-main); }

/* 空状态 */
#music .m-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 20px; text-align: center;
}
#music .m-empty-state > * { width: auto !important; }
#music .m-empty-state i {
    font-size: 56px; color: var(--cl-accent);
    opacity: 0.5; margin-bottom: 16px;
}
#music .m-empty-state .m-empty-title {
    font-size: 16px; font-weight: 800;
    color: var(--cl-text-main); margin-bottom: 8px;
    letter-spacing: 1px;
}
#music .m-empty-state .m-empty-desc {
    font-size: 12px; color: var(--cl-text-sub);
    line-height: 1.7; margin-bottom: 24px; font-weight: 600;
}
.m-empty-btn {
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px !important;
    width: fit-content !important;
    padding: 0 28px !important;
    border-radius: 10px !important;
    align-self: center !important;
    margin: 20px auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--cl-text-main, #2D2926) !important;
    color: var(--cl-bg-main, #F2F0EB) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 3px 3px 0px var(--cl-border, #E0DED9) !important;
    cursor: pointer !important;
}
.m-empty-btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0px var(--cl-border, #E0DED9) !important;
}
.m-empty-btn i,
.m-empty-btn svg,
.m-empty-btn img {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* AI 陪伴评论片段 */
#music .m-ai-snippet {
    padding: 10px 12px; margin: 0 12px 12px;
    background: var(--cl-bg-main);
    border-radius: 10px;
    border-left: 3px solid var(--cl-accent);
    border-top: 1px solid var(--cl-border);
    border-right: 1px solid var(--cl-border);
    border-bottom: 1px solid var(--cl-border);
    display: none; gap: 10px; align-items: flex-start;
    cursor: pointer; transition: 0.15s;
}
#music .m-ai-snippet:active { transform: scale(0.98); }
#music .m-ai-snippet-avatar {
    width: 24px; height: 24px; border-radius: 6px;
    border: 1px solid var(--cl-border);
    flex-shrink: 0; overflow: hidden;
}
#music .m-ai-snippet-text {
    font-size: 11px; line-height: 1.6;
    color: var(--cl-text-main); font-weight: 600;
}
/* ==================== Mini Player（白底编辑风，按 mock） ==================== */
#music .m-mini-player {
    position: absolute; bottom: 16px; left: 16px; right: 16px;
    height: 64px;
    background: var(--cl-surface);
    color: var(--cl-text-main);
    border-radius: 12px;
    border: 1.5px solid var(--cl-text-main);
    box-shadow: 4px 4px 0px var(--cl-border);
    display: flex; align-items: center;
    padding: 0 12px 0 8px;
    z-index: 40;
    transform: translateY(150px); opacity: 0;
    transition: 0.4s cubic-bezier(0.3, 1, 0.3, 1);
    cursor: pointer;
}
#music .m-mini-player.show { transform: translateY(0); opacity: 1; }
#music .mmp-cover {
    width: 48px; height: 48px;
    border-radius: 50%; overflow: hidden;
    border: 1px solid var(--cl-border);
    animation: musicSpin 20s linear infinite paused;
    flex-shrink: 0;
}
#music .mmp-cover.playing { animation-play-state: running; }
#music .mmp-cover img { width: 100%; height: 100%; object-fit: cover; }
#music .mmp-info { flex: 1; margin: 0 12px; min-width: 0; }
#music .mmp-name {
    font-size: 14px; font-weight: 800;
    color: var(--cl-text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
}
#music .mmp-ai-tag {
    font-size: 10px; font-weight: 700;
    color: var(--cl-accent);
    display: flex; align-items: center; gap: 4px;
    letter-spacing: 0.5px; text-transform: uppercase;
}
#music .mmp-ctrl {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--cl-text-main); color: var(--cl-bg-main);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: 0.15s;
    flex-shrink: 0;
}
#music .mmp-ctrl:active { transform: scale(0.92); }

/* ==================== 播放器全屏 ==================== */
#music .music-player {
    position: absolute; inset: 0;
    background: var(--cl-bg-main) !important;
    z-index: 50;
    display: flex; flex-direction: column;
    padding: 0 0 30px;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#music .music-player.active { transform: translateY(0); }

#music .mp-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(env(safe-area-inset-top, 20px) + 20px) 24px 14px;
}
#music .mp-status {
    font-size: 11px; font-weight: 800;
    color: var(--cl-text-sub);
    letter-spacing: 3px; text-transform: uppercase;
    flex: 1; text-align: center;
}

/* 唱片套 + 半露黑胶（横向） */
#music .mp-visual {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    overflow: hidden;
    min-height: 280px;
}
#music .mp-sleeve {
    position: relative; z-index: 10;
    width: 220px; height: 220px;
    background: var(--cl-surface);
    padding: 10px;
    border: none;
    box-shadow: 12px 0 24px rgba(0,0,0,0.08);
    flex-shrink: 0;
    /* 让封面整体往左移一点，给右侧黑胶留出露出空间 */
    margin-right: -110px;
}
#music .mp-sleeve-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
#music .mp-disc-shell {
    position: relative;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, #1a1a1c 28%, #000 75%);
    z-index: 5;
    box-shadow: 4px 4px 18px rgba(0,0,0,0.18);
    flex-shrink: 0;
    animation: musicSpin 14s linear infinite paused;
    will-change: transform;
}
#music .mp-disc-shell.playing { animation-play-state: running; }
#music .mp-disc-shell::before {
    content: '';
    position: absolute; inset: 6px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, #0c0c0d 0 2px, #1c1c1e 2px 4px);
    opacity: 0.6;
}
#music .mp-disc-shell::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 70px; height: 70px;
    margin: -35px 0 0 -35px;
    border-radius: 50%;
    background: var(--cl-accent);
    border: 4px solid #0a0a0a;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);
    z-index: 3;
    transition: background 0.3s;
}
#music .mp-disc-img {
    display: none;
}

#music .mp-info-area {
    padding: 0 30px;
    margin-bottom: 18px;
}
#music .mp-i-title {
    font-size: 28px; font-weight: 900;
    color: var(--cl-text-main);
    line-height: 1.15;
    letter-spacing: 0;
}
#music .mp-i-artist {
    font-size: 12px; color: var(--cl-accent);
    margin-top: 8px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
}

/* 歌词容器：左侧 accent 竖线 */
#music .mp-lyrics-container {
    margin: 0 30px 24px;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--cl-accent);
    min-height: 50px;
    display: flex; flex-direction: column; justify-content: center;
    transform: translateY(var(--lyric-pos, 0px));
    opacity: var(--lyric-opacity, 1);
    transition: border-color 0.3s, opacity 0.2s;
}
#music .mp-lyric-text {
    font-size: 16px; font-weight: 800;
    line-height: 1.45;
    color: var(--cl-text-main);
    transition: opacity 0.3s;
}
#music .mp-lyric-sub {
    font-size: 12px; font-weight: 600;
    color: var(--cl-text-sub);
    margin-top: 4px; line-height: 1.4;
}

/* 进度条 */
#music .mp-progress-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 0 30px;
    font-size: 10px; font-weight: 800;
    color: var(--cl-text-sub);
    letter-spacing: 1px;
    margin-bottom: 22px;
}
#music .mp-bar-bg {
    flex: 1; height: 3px;
    background: var(--cl-border);
    border-radius: 2px; overflow: visible;
    position: relative;
}
#music .mp-bar-fill {
    width: 30%; height: 100%;
    background: var(--cl-text-main);
    border-radius: 2px;
    position: relative;
}
#music .mp-bar-fill::after {
    content: ''; position: absolute; right: -5px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px;
    background: var(--cl-text-main); border-radius: 50%;
}

/* 顶栏按钮：纯图标无方框（mock 风格） */
#music .mp-top-bar .m-icon-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
#music .mp-top-bar .m-icon-btn:active {
    transform: scale(0.88);
    background: transparent;
    box-shadow: none;
}

/* 控制按钮：一字排开 */
#music .mp-ctrl-btns {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 30px;
    gap: 8px;
}

/* 控制按钮：mock 是纯黑色线性图标，不染 accent */
#music .mp-c-icon {
    font-size: 22px; color: var(--cl-text-main);
    cursor: pointer; transition: 0.15s;
    background: none; border: none;
    padding: 8px; display: inline-flex;
    align-items: center; justify-content: center;
}
#music .mp-c-icon:active { transform: scale(0.85); opacity: 0.6; }

/* 播放主按钮：纯黑实心方块，不带 accent 阴影 */
#music .mp-play-btn {
    width: 60px; height: 60px;
    border-radius: 14px;
    background: var(--cl-text-main);
    color: var(--cl-bg-main);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    border: none;
    box-shadow: none;
    cursor: pointer; transition: 0.15s;
    flex-shrink: 0;
}
#music .mp-play-btn:active {
    transform: scale(0.94);
    box-shadow: none;
}

/* AI 球：圆形纯黑实心，单层 accent 细描边（按 mock） */
#music .mp-ai-orb {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--cl-text-main);
    border: 1.5px solid var(--cl-accent);
    box-shadow: none;
    color: var(--cl-bg-main); cursor: pointer;
    overflow: hidden; flex-shrink: 0;
    position: relative;
    transition: 0.15s;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}
#music .mp-ai-orb img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.95;
}
#music .mp-ai-orb:active {
    transform: scale(0.94);
}

/* ==================== 桌面歌词 ==================== */
.m-desktop-lyrics {
    position: absolute; top: 20%; left: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none; z-index: 9999; opacity: 0;
    transition: opacity 0.5s, transform 0.1s ease-out;
    --cl-lyric-color: #ffffff;
    --cl-lyric-glow: #ffffff;
    --cl-dl-opacity: 1;
}
.m-desktop-lyrics.show { opacity: var(--cl-dl-opacity); }
.m-dl-container {
    pointer-events: auto; cursor: pointer;
    filter: drop-shadow(0 0 10px var(--cl-lyric-glow));
    display: none;
    flex-direction: column; align-items: center;
    transition: 0.2s;
}
.m-dl-container.show { display: flex; }
.m-dl-container:active { transform: scale(0.95); }
.m-dl-text, .m-dl-sub {
    background: linear-gradient(to right, var(--cl-lyric-color) 50%, rgba(255,255,255,0.25) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cl-lyric-color);
    text-align: center; white-space: nowrap;
    font-family: "Helvetica Neue", sans-serif;
    transition: font-size 0.2s;
}
.m-dl-text { font-size: 22px; font-weight: 800; padding: 0 24px; letter-spacing: 0.5px; }
.m-dl-sub { font-size: 13px; font-weight: 700; margin-top: 6px; letter-spacing: 1px; }
/* ==================== 弹窗通用 ==================== */
#music .m-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    opacity: 0; pointer-events: none;
    transition: 0.3s;
    display: flex; align-items: flex-end;
    padding: 0;
}
#music .m-modal-overlay.show { opacity: 1; pointer-events: auto; }

#music .m-modal-content {
    width: 100%;
    background: var(--cl-bg-main) !important;
    color: var(--cl-text-main) !important;
    border-radius: 20px 20px 0 0;
    border-top: 2px solid var(--cl-text-main) !important;
    border-left: 2px solid var(--cl-text-main) !important;
    border-right: 2px solid var(--cl-text-main) !important;
    padding: 24px 24px 30px;
    transform: translateY(100%);
    transition: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: 78%;
    overflow-y: auto;
    box-shadow: var(--cl-shadow-hard) !important;
}
#music .m-modal-overlay.show .m-modal-content { transform: translateY(0); }
#music .m-modal-content::-webkit-scrollbar { display: none; }

#music .m-modal-title {
    font-size: 14px; font-weight: 900;
    color: var(--cl-text-main);
    letter-spacing: 2px; text-transform: uppercase;
    text-align: left; margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cl-text-main);
}

/* 设置弹窗 */
#music .m-setting-item {
    margin-bottom: 22px;
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--cl-shadow);
}
#music .m-st-label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
    font-size: 12px; font-weight: 800;
    color: var(--cl-text-main);
    letter-spacing: 1px; text-transform: uppercase;
}

#music input[type=range] {
    width: 100%;
    -webkit-appearance: none; appearance: none;
    height: 4px;
    background: var(--cl-border);
    border-radius: 2px;
    outline: none;
}
#music input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--cl-text-main);
    border: 2px solid var(--cl-bg-main);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* 开关 */
#music .m-toggle-switch {
    position: relative; width: 44px; height: 24px; display: inline-block;
}
#music .m-toggle-switch input { opacity: 0; width: 0; height: 0; }
#music .m-toggle-slider {
    position: absolute; inset: 0;
    background-color: var(--cl-border);
    border-radius: 24px;
    transition: .25s; cursor: pointer;
}
#music .m-toggle-slider:before {
    position: absolute; content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: var(--cl-surface);
    border-radius: 50%;
    transition: .25s;
}
#music .m-toggle-switch input:checked + .m-toggle-slider {
    background-color: var(--cl-text-main);
}
#music .m-toggle-switch input:checked + .m-toggle-slider:before {
    transform: translateX(20px);
}

/* 5 主题色泡 */
#music .m-theme-swatches {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 4px 0;
}
#music .m-theme-swatch {
    flex: 1; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--cl-border);
    cursor: pointer; position: relative;
    transition: 0.15s;
    max-width: 36px;
    min-width: 36px;
}
#music .m-theme-swatch:active { transform: scale(0.9); }
#music .m-theme-swatch.active {
    border-color: var(--cl-text-main);
    box-shadow: 0 0 0 2px var(--cl-bg-main), 0 0 0 4px var(--cl-text-main);
}
#music .m-theme-swatch.active::after {
    content: '\eb7b';
    font-family: 'remixicon';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* HSV 调色盘（歌词颜色） */
#music .m-custom-color-picker {
    background: var(--cl-bg-main);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--cl-border);
    margin-top: 8px;
}
#music .mcp-palette {
    position: relative; width: 100%; height: 110px;
    border-radius: 8px; overflow: hidden;
    cursor: crosshair; touch-action: none;
    background-color: #ff0000;
    border: 1px solid var(--cl-border);
}
#music .mcp-palette-white {
    position: absolute; inset: 0;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
    pointer-events: none;
}
#music .mcp-palette-black {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000, rgba(0,0,0,0));
    pointer-events: none;
}
#music .mcp-hue-slider {
    position: relative; width: 100%; height: 14px;
    border-radius: 7px; margin-top: 12px;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    cursor: crosshair; touch-action: none;
    border: 1px solid var(--cl-border);
}
#music .mcp-thumb {
    position: absolute; width: 16px; height: 16px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#music .mcp-controls {
    display: flex; align-items: center; gap: 12px;
    margin-top: 12px;
}
#music .mcp-preview {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 2px solid var(--cl-text-main);
    box-shadow: 2px 2px 0px var(--cl-border);
    transition: background-color 0.1s;
}
#music .mcp-rgb { display: flex; gap: 8px; flex: 1; }
#music .mcp-rgb-col {
    display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
}
#music .mcp-rgb-label {
    font-size: 10px; font-weight: 800;
    color: var(--cl-text-sub); letter-spacing: 1px;
}
#music .mcp-rgb input {
    width: 100%; padding: 6px 0;
    border: 1.5px solid var(--cl-border);
    border-radius: 6px;
    text-align: center;
    font-size: 13px; font-weight: 700;
    color: var(--cl-text-main);
    background: var(--cl-surface);
    outline: none; transition: 0.15s;
}
#music .mcp-rgb input:focus {
    border-color: var(--cl-text-main);
}

/* 歌词导入弹窗 */
#music .m-lyric-opt-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 16px;
}
#music .m-lyric-btn {
    padding: 16px;
    border-radius: 10px;
    border: 1.5px solid var(--cl-text-main);
    background: var(--cl-surface);
    color: var(--cl-text-main);
    font-size: 12px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    cursor: pointer; transition: 0.15s;
    box-shadow: 3px 3px 0px var(--cl-border);
}
#music .m-lyric-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--cl-border);
}
#music .m-lyric-btn i {
    font-size: 22px; color: var(--cl-accent);
}
#music .m-paste-area {
    width: 100%; height: 130px;
    border-radius: 10px;
    border: 1.5px solid var(--cl-border);
    background: var(--cl-surface);
    padding: 12px;
    font-size: 13px; color: var(--cl-text-main);
    margin-bottom: 16px; resize: none;
    font-family: inherit;
    outline: none;
    transition: 0.15s;
}
#music .m-paste-area:focus {
    border-color: var(--cl-text-main);
}
#music .m-btn-full {
    width: 100%; padding: 14px;
    background: var(--cl-text-main); color: var(--cl-bg-main);
    border: 2px solid var(--cl-text-main);
    border-radius: 10px;
    font-size: 13px; font-weight: 900;
    letter-spacing: 2px; text-transform: uppercase;
    margin-top: 8px;
    cursor: pointer; transition: 0.15s;
    box-shadow: var(--cl-shadow-hard);
}
#music .m-btn-full:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--cl-border);
}
#music .m-btn-full.m-btn-secondary {
    background: var(--cl-surface);
    color: var(--cl-text-main);
    margin-top: 10px;
    box-shadow: 3px 3px 0px var(--cl-border);
}
#music .m-btn-full.m-btn-secondary:active {
    box-shadow: 1px 1px 0px var(--cl-border);
}

/* 默认封面预览 */
#music .m-default-cover-preview {
    width: 72px; height: 72px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--cl-border);
    box-shadow: none;
    background: var(--cl-bg-main);
    flex-shrink: 0;
    cursor: pointer;
    transition: 0.15s;
}
#music .m-default-cover-preview:active {
    transform: scale(0.97);
}
/* ==================== 羁绊面板 ==================== */
#music .m-companion-modal .m-modal-content {
    padding: 0;
    background: var(--cl-bg-main);
    height: 78%; max-height: 78%;
    display: flex; flex-direction: column;
}
#music .mcm-header-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 24px 14px;
    background: var(--cl-bg-main);
    flex-shrink: 0;
    border-bottom: 2px solid var(--cl-text-main);
}
#music .mcm-header-bar .m-modal-title {
    border: none; padding: 0; margin: 0;
}
#music .m-character-switcher {
    display: flex; gap: 14px;
    padding: 14px 24px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--cl-bg-main);
    flex-shrink: 0;
    border-bottom: 1px solid var(--cl-border);
}
#music .m-character-switcher::-webkit-scrollbar { display: none; }
#music .m-char-tab {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    cursor: pointer; opacity: 0.45;
    transition: 0.2s; flex-shrink: 0;
}
#music .m-char-tab.active { opacity: 1; transform: translateY(-2px); }
#music .m-char-tab img {
    width: 48px; height: 48px;
    border-radius: 8px; object-fit: cover;
    border: 2px solid transparent;
    transition: 0.2s;
}
#music .m-char-tab.active img {
    border-color: var(--cl-text-main);
    box-shadow: 3px 3px 0px var(--cl-accent);
}
#music .m-char-tab span {
    font-size: 10px; font-weight: 800;
    color: var(--cl-text-main);
    letter-spacing: 1px; text-transform: uppercase;
}
#music .m-char-details-scroll {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
}
#music .m-char-details-scroll::-webkit-scrollbar { display: none; }
#music .m-char-banner {
    padding: 28px 24px 24px;
    text-align: center;
    background: var(--cl-surface);
    border-bottom: 1px solid var(--cl-border);
    position: relative;
    transition: 0.3s;
    flex-shrink: 0;
}
#music .m-char-avatar-large {
    position: relative; z-index: 1;
    width: 92px; height: 92px;
    margin: 0 auto 14px;
    border-radius: 14px; overflow: hidden;
    border: 2px solid var(--cl-text-main);
    box-shadow: var(--cl-shadow-hard);
}
#music .m-char-avatar-large img {
    width: 100%; height: 100%; object-fit: cover;
}
#music .m-char-name-large {
    font-size: 24px; font-weight: 900;
    color: var(--cl-text-main);
    margin-bottom: 4px; transition: 0.3s;
    letter-spacing: 1px;
}
#music .m-char-title {
    font-size: 11px; font-weight: 800;
    color: var(--cl-accent);
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 22px; transition: 0.3s;
}
#music .m-char-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
}
#music .m-stat-box {
    padding: 14px 10px;
    background: var(--cl-bg-main);
    border: 1.5px solid var(--cl-border);
    border-radius: 10px;
    text-align: center;
}
#music .m-stat-num {
    font-size: 22px; font-weight: 900;
    color: var(--cl-text-main);
    font-family: "Helvetica Neue", sans-serif;
}
#music .m-stat-label {
    font-size: 9px; color: var(--cl-text-sub);
    margin-top: 4px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
}

#music .m-memory-song-list {
    padding: 20px 24px 40px;
    display: flex; flex-direction: column; gap: 14px;
}
#music .m-mem-song-card {
    background: var(--cl-surface);
    border: 1.5px solid var(--cl-border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--cl-shadow);
}
#music .m-mem-song-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px dashed var(--cl-border);
    cursor: pointer;
}
#music .m-mem-s-cover {
    width: 44px; height: 44px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--cl-border);
}
#music .m-mem-s-cover img { width: 100%; height: 100%; object-fit: cover; }
#music .m-mem-s-text { flex: 1; min-width: 0; }
#music .m-mem-s-name {
    font-size: 14px; font-weight: 800;
    color: var(--cl-text-main); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#music .m-mem-s-artist {
    font-size: 10px; color: var(--cl-text-sub);
    font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}

/* 心迹评语 */
#music .m-whispers-container { margin-top: 10px; }
#music .m-mem-song-whisper {
    padding: 10px 0 10px 14px;
    border-left: 3px solid var(--cl-accent);
}
#music .m-msw-text {
    font-size: 13px; line-height: 1.6;
    color: var(--cl-text-main);
    font-weight: 600; margin-bottom: 4px;
}
#music .m-msw-time {
    font-size: 10px; color: var(--cl-text-sub);
    letter-spacing: 1px; text-transform: uppercase;
}
#music .m-whisper-divider {
    height: 1px;
    background: var(--cl-border);
    margin: 10px 0 10px 14px;
}
#music .m-mem-comment {
    font-size: 13px; line-height: 1.6;
    color: var(--cl-text-main); font-weight: 600;
    position: relative; padding-left: 14px;
}

/* 心迹列表（外层） */
#music .m-whisper-list {
    display: flex; flex-direction: column; gap: 12px;
}
#music .m-whisper-card {
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-left: 3px solid var(--cl-accent);
    border-radius: 10px;
    padding: 12px 14px;
}
#music .m-whisper-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
#music .m-whisper-avatar {
    width: 22px; height: 22px;
    border-radius: 6px; object-fit: cover;
    border: 1px solid var(--cl-border);
}
#music .m-whisper-name {
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.5px;
}
#music .m-whisper-time {
    font-size: 10px; color: var(--cl-text-sub);
    margin-left: auto; font-weight: 700;
}
#music .m-whisper-content {
    font-size: 12px; line-height: 1.6;
    color: var(--cl-text-main); font-weight: 500;
    margin-bottom: 6px;
}
#music .m-whisper-song {
    font-size: 10px; color: var(--cl-text-sub);
    font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase;
}
#music .m-empty-hint {
    text-align: center; padding: 20px 12px;
    font-size: 12px; color: var(--cl-text-sub);
    line-height: 1.7; font-weight: 600;
}
#music .m-empty-hint span {
    font-size: 11px; opacity: 0.8;
    display: inline-block; margin-top: 4px;
}

/* ==================== 应用内 Dialog ==================== */
.m-app-dialog-overlay {
    position: absolute; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.m-app-dialog-overlay.show { opacity: 1; pointer-events: auto; }
.m-app-dialog-box {
    width: 80%; max-width: 300px;
    background: var(--cl-bg-main, #F2F0EB);
    color: var(--cl-text-main, #2D2926);
    border-radius: 14px;
    border: 2px solid var(--cl-text-main, #2D2926);
    box-shadow: var(--cl-shadow-hard, 6px 6px 0 rgba(45,41,38,0.1));
    padding: 22px 22px 18px;
    transform: scale(0.9);
    transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1);
}
.m-app-dialog-overlay.show .m-app-dialog-box { transform: scale(1); }
.m-app-dialog-title {
    font-size: 14px; font-weight: 900;
    color: var(--cl-text-main, #2D2926);
    text-align: left; margin-bottom: 10px;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cl-text-main, #2D2926);
}
.m-app-dialog-body {
    font-size: 13px; line-height: 1.6;
    color: var(--cl-text-main, #2D2926);
    text-align: left; margin-bottom: 16px;
    word-break: break-word; font-weight: 500;
}
.m-app-dialog-body:empty { margin-bottom: 0; }

.m-app-dialog-input-wrap { margin-bottom: 16px; }
.m-app-dialog-input {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid var(--cl-border, #E0DED9);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px; color: var(--cl-text-main, #2D2926);
    background: var(--cl-surface, #fff);
    outline: none;
    transition: border-color 0.15s;
}
.m-app-dialog-input:focus {
    border-color: var(--cl-text-main, #2D2926);
}

.m-app-dialog-btns { display: flex; gap: 10px; }
.m-dlg-btn {
    flex: 1; padding: 11px 0;
    border: 2px solid var(--cl-text-main, #2D2926);
    border-radius: 8px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer;
    transition: 0.15s;
}
.m-dlg-btn:active {
    transform: translate(2px, 2px);
}
.m-dlg-cancel {
    background: var(--cl-surface, #fff);
    color: var(--cl-text-main, #2D2926);
}
.m-dlg-ok {
    background: var(--cl-text-main, #2D2926);
    color: var(--cl-bg-main, #F2F0EB);
}

/* ==================== 悬浮球 Sugar ==================== */
.sugar-ball {
    position: absolute;
    bottom: 120px; right: -22px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--cl-surface, #fff);
    border: 2px solid var(--cl-text-main, #2D2926);
    box-shadow: var(--cl-shadow-hard, 4px 4px 0 rgba(45,41,38,0.15));
    z-index: 8888;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    touch-action: none;
    transition: left 0.3s ease, right 0.3s ease, transform 0.15s, box-shadow 0.15s;
    -webkit-user-select: none; user-select: none;
}
.sugar-ball:active { cursor: grabbing; transform: scale(0.95); }
.sugar-ball.playing { animation: sugarPulse 2s ease-in-out infinite; }

.sugar-ring {
    position: absolute; inset: -4px;
    width: calc(100% + 8px); height: calc(100% + 8px);
    transform: rotate(-90deg);
    pointer-events: none;
}
.sugar-ring circle {
    fill: none;
    stroke: var(--cl-accent, #B07D62);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 289.03;
    stroke-dashoffset: 289.03;
    transition: stroke-dashoffset 0.3s linear;
}

.sugar-cover {
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--cl-border, #E0DED9);
    background: var(--cl-bg-main, #F2F0EB);
}
.sugar-ball.playing .sugar-cover {
    animation: musicSpin 8s linear infinite;
}
.sugar-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.sugar-ball.dock-l { right: auto; left: -22px; }
.sugar-ball.dock-r { left: auto; right: -22px; }
.sugar-ball.dock-l:hover { left: -6px; }
.sugar-ball.dock-r:hover { right: -6px; }

/* 悬浮球面板 */
.sugar-panel {
    position: absolute;
    bottom: 120px; right: 16px;
    width: 268px;
    max-height: 480px;
    padding: 14px 16px;
    background: var(--cl-bg-main, #F2F0EB);
    color: var(--cl-text-main, #2D2926);
    border-radius: 14px;
    border: 2px solid var(--cl-text-main, #2D2926);
    box-shadow: var(--cl-shadow-hard, 6px 6px 0 rgba(45,41,38,0.15));
    z-index: 8887;
    display: none;
    flex-direction: column;
    gap: 12px;
    animation: sugarPanelIn 0.22s ease;
    overflow: hidden;
}
.sugar-panel.show { display: flex; }

.sp-info { overflow: hidden; padding-right: 22px; }
.sp-title {
    font-size: 14px; font-weight: 900;
    color: var(--cl-text-main, #2D2926);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: 0.5px;
}
.sp-artist {
    font-size: 10px; font-weight: 800;
    color: var(--cl-accent, #B07D62);
    margin-top: 3px;
    letter-spacing: 1.5px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sp-ctrl {
    display: flex; align-items: center; justify-content: space-around;
    background: var(--cl-surface, #fff);
    border: 1.5px solid var(--cl-border, #E0DED9);
    border-radius: 10px;
    padding: 10px;
    gap: 8px;
}
.sp-ctrl i {
    font-size: 22px;
    color: var(--cl-text-main, #2D2926);
    cursor: pointer;
    transition: transform 0.15s, color 0.15s;
}
.sp-ctrl i:active { transform: scale(0.85); }
.sp-ctrl i:nth-child(2) {
    font-size: 22px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--cl-text-main, #2D2926);
    color: var(--cl-bg-main, #F2F0EB);
}

.sp-bottom {
    display: flex; justify-content: space-between;
    border-top: 1px solid var(--cl-border, #E0DED9);
    padding-top: 10px; margin-top: 2px;
}
.sp-bottom span {
    font-size: 10px; font-weight: 700;
    color: var(--cl-text-sub, #96928E);
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    letter-spacing: 0.5px;
    transition: color 0.15s;
}
.sp-bottom span:hover { color: var(--cl-text-main, #2D2926); }
.sp-dismiss i, .sp-goto i { font-size: 12px; }

.sp-close {
    position: absolute; top: 10px; right: 12px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--cl-text-sub, #96928E);
    cursor: pointer;
    transition: color 0.15s;
}
.sp-close:hover { color: var(--cl-text-main, #2D2926); }

/* 功能按钮行（保留交互能力） */
.sp-functions {
    display: flex; gap: 8px; justify-content: center;
    padding: 8px 0;
    border-top: 1px solid var(--cl-border, #E0DED9);
    border-bottom: 1px solid var(--cl-border, #E0DED9);
}
.sp-func-btn {
    flex: 1;
    height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--cl-surface, #fff);
    border: 1.5px solid var(--cl-border, #E0DED9);
    cursor: pointer;
    transition: all 0.15s;
}
.sp-func-btn:active { transform: scale(0.95); }
.sp-func-btn:hover {
    border-color: var(--cl-text-main, #2D2926);
}
.sp-func-btn i {
    font-size: 16px;
    color: var(--cl-text-main, #2D2926);
}
.sp-func-btn.active {
    background: var(--cl-text-main, #2D2926);
    border-color: var(--cl-text-main, #2D2926);
}
.sp-func-btn.active i {
    color: var(--cl-bg-main, #F2F0EB);
}

/* 播放列表 */
.sp-playlist {
    max-height: 240px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--cl-border, #E0DED9);
    padding-top: 10px;
    margin-top: 2px;
}
.sp-playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 8px;
}
.sp-playlist-header span:first-child {
    font-size: 11px; font-weight: 800;
    color: var(--cl-text-main, #2D2926);
    letter-spacing: 1.5px; text-transform: uppercase;
}
.sp-playlist-header span:last-child {
    font-size: 10px; font-weight: 700;
    color: var(--cl-text-sub, #96928E);
}
.sp-playlist-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 2px;
}
.sp-playlist-content::-webkit-scrollbar { width: 4px; }
.sp-playlist-content::-webkit-scrollbar-track {
    background: transparent;
}
.sp-playlist-content::-webkit-scrollbar-thumb {
    background: var(--cl-border, #E0DED9);
    border-radius: 2px;
}
.sp-playlist-content::-webkit-scrollbar-thumb:hover {
    background: var(--cl-text-sub, #96928E);
}

.sp-song-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--cl-surface, #fff);
    border: 1.5px solid var(--cl-border, #E0DED9);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.15s;
}
.sp-song-item:hover {
    border-color: var(--cl-text-main, #2D2926);
}
.sp-song-item.playing {
    background: var(--cl-text-main, #2D2926);
    border-color: var(--cl-text-main, #2D2926);
}
.sp-song-item.playing .sp-song-name {
    color: var(--cl-bg-main, #F2F0EB);
}
.sp-song-item.playing .sp-song-artist {
    color: var(--cl-accent, #B07D62);
}
.sp-song-cover {
    width: 32px; height: 32px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--cl-border, #E0DED9);
}
.sp-song-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-song-info { flex: 1; min-width: 0; }
.sp-song-name {
    font-size: 12px; font-weight: 800;
    color: var(--cl-text-main, #2D2926);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-song-artist {
    font-size: 9px; font-weight: 700;
    color: var(--cl-text-sub, #96928E);
    letter-spacing: 1px; text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.sp-vol-icon {
    font-size: 14px;
    color: var(--cl-accent, #B07D62);
    flex-shrink: 0;
}
.sp-song-item.playing .sp-vol-icon {
    color: var(--cl-bg-main, #F2F0EB);
}

/* ==================== 动画 ==================== */
@keyframes musicSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes musicPopIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes musicFloatOrb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes musicHideTooltip { 100% { opacity: 0; transform: translateX(10px); } }
@keyframes musicSweep { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes sugarPulse {
    0%, 100% { box-shadow: var(--cl-shadow-hard, 4px 4px 0 rgba(45,41,38,0.15)); }
    50% { box-shadow: 4px 4px 0 var(--cl-accent, #B07D62); }
}
@keyframes sugarPanelIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== 夜间模式（统一黑灰，不分主题色） ==================== */
body.dark-mode #music,
body.night #music,
body.dark-mode #music.theme-oat,
body.dark-mode #music.theme-white,
body.dark-mode #music.theme-green,
body.dark-mode #music.theme-red,
body.dark-mode #music.theme-blue,
body.night #music.theme-oat,
body.night #music.theme-white,
body.night #music.theme-green,
body.night #music.theme-red,
body.night #music.theme-blue {
    --cl-bg-main: #000000;
    --cl-surface: #1A1A1A;
    --cl-text-main: #E2E2E7;
    --cl-text-sub: #7A7A7A;
    --cl-accent: #9B9B9B;
    --cl-accent-soft: rgba(255,255,255,0.06);
    --cl-border: #2C2C2E;
    --cl-shadow: 0 12px 40px rgba(0,0,0,0.5);
    --cl-shadow-hard: 6px 6px 0px rgba(0,0,0,0.6);
}

/* 夜间下，几个保持不变的中性灰修正（关键属性加 !important 对抗外部全局通杀） */
body.dark-mode #music .m-modal-content,
body.night #music .m-modal-content {
    background: var(--cl-bg-main) !important;
    color: var(--cl-text-main) !important;
    border-top: 2px solid var(--cl-text-main) !important;
    border-left: 2px solid var(--cl-text-main) !important;
    border-right: 2px solid var(--cl-text-main) !important;
    border-bottom: none !important;
}
body.dark-mode #music .music-player,
body.night #music .music-player {
    background: var(--cl-bg-main) !important;
}
body.dark-mode #music .m-song-card,
body.night #music .m-song-card {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--cl-border) !important;
    box-shadow: none !important;
}
body.dark-mode #music .m-song-card.is-active,
body.night #music .m-song-card.is-active {
    background: var(--cl-accent-soft) !important;
}
body.dark-mode #music .ms-cover,
body.night #music .ms-cover {
    background: var(--cl-surface) !important;
    border-color: var(--cl-border) !important;
    box-shadow: 4px 4px 0 var(--cl-border) !important;
}
body.dark-mode #music .m-companion-banner,
body.night #music .m-companion-banner {
    background: var(--cl-surface) !important;
    border-color: var(--cl-border) !important;
    box-shadow: var(--cl-shadow) !important;
    color: var(--cl-text-main) !important;
}
body.dark-mode #music .ms-name,
body.dark-mode #music .mcb-name,
body.dark-mode #music .mp-i-title,
body.dark-mode #music .m-app-title,
body.night #music .ms-name,
body.night #music .mcb-name,
body.night #music .mp-i-title,
body.night #music .m-app-title {
    color: var(--cl-text-main) !important;
}
body.dark-mode #music .ms-artist,
body.dark-mode #music .mcb-label,
body.dark-mode #music .mp-i-artist,
body.dark-mode #music .m-index,
body.night #music .ms-artist,
body.night #music .mcb-label,
body.night #music .mp-i-artist,
body.night #music .m-index {
    color: var(--cl-accent) !important;
}
body.dark-mode #music textarea,
body.night #music textarea {
    background: var(--cl-surface) !important;
    border: 1.5px solid var(--cl-border) !important;
    color: var(--cl-text-main) !important;
}
body.dark-mode #music button,
body.night #music button {
    /* 不要被全局 button 通杀压成方块 */
    background: initial;
    border: initial;
    color: initial;
}
body.dark-mode #music .m-btn-full,
body.night #music .m-btn-full {
    background: var(--cl-text-main) !important;
    color: var(--cl-bg-main) !important;
    border: 2px solid var(--cl-text-main) !important;
    box-shadow: var(--cl-shadow-hard) !important;
}
body.dark-mode #music .m-btn-full.m-btn-secondary,
body.night #music .m-btn-full.m-btn-secondary {
    background: var(--cl-surface) !important;
    color: var(--cl-text-main) !important;
}
body.dark-mode #music .m-icon-btn,
body.night #music .m-icon-btn {
    background: var(--cl-surface) !important;
    border: 1.5px solid var(--cl-text-main) !important;
    color: var(--cl-text-main) !important;
    box-shadow: 3px 3px 0px var(--cl-border) !important;
}
body.dark-mode #music .m-icon-btn:active,
body.night #music .m-icon-btn:active {
    box-shadow: 1px 1px 0px var(--cl-border) !important;
}
body.dark-mode #music .m-mini-player,
body.night #music .m-mini-player {
    background: var(--cl-surface) !important;
    color: var(--cl-text-main) !important;
    border: 1.5px solid var(--cl-text-main) !important;
    box-shadow: 4px 4px 0px var(--cl-border) !important;
}
body.dark-mode #music .mp-top-bar .m-icon-btn,
body.night #music .mp-top-bar .m-icon-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.dark-mode #music .mp-play-btn,
body.night #music .mp-play-btn {
    background: var(--cl-text-main) !important;
    color: var(--cl-bg-main) !important;
    border: none !important;
    box-shadow: none !important;
}
body.dark-mode #music .mp-ai-orb,
body.night #music .mp-ai-orb {
    background: var(--cl-text-main) !important;
    border: 1.5px solid var(--cl-accent) !important;
    box-shadow: none !important;
}
body.dark-mode #music .mp-c-icon,
body.night #music .mp-c-icon {
    color: var(--cl-text-main) !important;
}
body.dark-mode #music .m-app-dialog-overlay,
body.night #music .m-app-dialog-overlay {
    color: var(--cl-text-main);
}

/* 夜间悬浮球 / 桌面歌词容器同步 */
body.dark-mode .sugar-ball,
body.night .sugar-ball {
    background: #1A1A1A;
    border-color: #E2E2E7;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.6);
}
body.dark-mode .sugar-cover,
body.night .sugar-cover {
    border-color: #2C2C2E;
    background: #000;
}
body.dark-mode .sugar-ring circle,
body.night .sugar-ring circle {
    stroke: #9B9B9B;
}
body.dark-mode .sugar-panel,
body.night .sugar-panel {
    background: #1A1A1A;
    color: #E2E2E7;
    border-color: #E2E2E7;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.6);
}
body.dark-mode .sp-title,
body.night .sp-title { color: #E2E2E7; }
body.dark-mode .sp-artist,
body.night .sp-artist { color: #9B9B9B; }
body.dark-mode .sp-ctrl,
body.night .sp-ctrl {
    background: #000;
    border-color: #2C2C2E;
}
body.dark-mode .sp-ctrl i,
body.night .sp-ctrl i { color: #E2E2E7; }
body.dark-mode .sp-ctrl i:nth-child(2),
body.night .sp-ctrl i:nth-child(2) {
    background: #E2E2E7;
    color: #000;
}
body.dark-mode .sp-bottom,
body.night .sp-bottom { border-top-color: #2C2C2E; }
body.dark-mode .sp-bottom span,
body.night .sp-bottom span { color: #7A7A7A; }
body.dark-mode .sp-bottom span:hover,
body.night .sp-bottom span:hover { color: #E2E2E7; }
body.dark-mode .sp-close,
body.night .sp-close { color: #7A7A7A; }
body.dark-mode .sp-functions,
body.night .sp-functions {
    border-color: #2C2C2E;
}
body.dark-mode .sp-func-btn,
body.night .sp-func-btn {
    background: #000;
    border-color: #2C2C2E;
}
body.dark-mode .sp-func-btn i,
body.night .sp-func-btn i { color: #E2E2E7; }
body.dark-mode .sp-func-btn.active,
body.night .sp-func-btn.active {
    background: #E2E2E7;
    border-color: #E2E2E7;
}
body.dark-mode .sp-func-btn.active i,
body.night .sp-func-btn.active i { color: #000; }
body.dark-mode .sp-playlist,
body.night .sp-playlist { border-top-color: #2C2C2E; }
body.dark-mode .sp-playlist-header span:first-child,
body.night .sp-playlist-header span:first-child { color: #E2E2E7; }
body.dark-mode .sp-playlist-header span:last-child,
body.night .sp-playlist-header span:last-child { color: #7A7A7A; }
body.dark-mode .sp-song-item,
body.night .sp-song-item {
    background: #000;
    border-color: #2C2C2E;
}
body.dark-mode .sp-song-item:hover,
body.night .sp-song-item:hover { border-color: #E2E2E7; }
body.dark-mode .sp-song-item.playing,
body.night .sp-song-item.playing {
    background: #E2E2E7;
    border-color: #E2E2E7;
}
body.dark-mode .sp-song-item.playing .sp-song-name,
body.night .sp-song-item.playing .sp-song-name { color: #000; }
body.dark-mode .sp-song-item.playing .sp-song-artist,
body.night .sp-song-item.playing .sp-song-artist { color: #555; }
body.dark-mode .sp-song-name,
body.night .sp-song-name { color: #E2E2E7; }
body.dark-mode .sp-song-artist,
body.night .sp-song-artist { color: #7A7A7A; }
body.dark-mode .sp-song-cover,
body.night .sp-song-cover { border-color: #2C2C2E; }

/* m-app-dialog 夜间 */
body.dark-mode .m-app-dialog-box,
body.night .m-app-dialog-box {
    background: #1A1A1A;
    color: #E2E2E7;
    border-color: #E2E2E7;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.6);
}
body.dark-mode .m-app-dialog-title,
body.night .m-app-dialog-title {
    color: #E2E2E7;
    border-bottom-color: #E2E2E7;
}
body.dark-mode .m-app-dialog-body,
body.night .m-app-dialog-body { color: #E2E2E7; }
body.dark-mode .m-app-dialog-input,
body.night .m-app-dialog-input {
    background: #000;
    color: #E2E2E7;
    border-color: #2C2C2E;
}
body.dark-mode .m-app-dialog-input:focus,
body.night .m-app-dialog-input:focus {
    border-color: #E2E2E7;
}
body.dark-mode .m-dlg-btn,
body.night .m-dlg-btn {
    border-color: #E2E2E7;
}
body.dark-mode .m-dlg-cancel,
body.night .m-dlg-cancel {
    background: #1A1A1A;
    color: #E2E2E7;
}
body.dark-mode .m-dlg-ok,
body.night .m-dlg-ok {
    background: #E2E2E7;
    color: #000;
}