@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(./fonts/font.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* --- 字体与全局变量 (MD3优化版) --- */
@font-face {
    font-family: "PingFangSC-Regular";
    src: url(./fonts/PingFangSC-Regular.woff2);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "PingFangSC-Medium";
    src: url(./fonts/PingFangSC-Medium.woff2);
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "SFPro-Regular";
    src: url(./fonts/PingFangSC-Regular.woff2);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "PingFangSC-Semibold";
    src: url(./fonts/PingFangSC-Semibold.woff2);
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "SFPro-Semibold";
    src: url(./fonts/PingFangSC-Semibold.woff2);
    font-weight: 600;
    font-style: normal;
}

:root {
    color-scheme: light dark;
    
    /* MD3 浅色主题 */
    --background: #FEF7FF;
    --surface: #FEF7FF;
    --surface-container: #F3EDF7;
    --surface-container-high: #ECE6F0;
    --surface-variant: #E7E0EC;
    
    --primary: #6750A4;
    --on-primary: #FFFFFF;
    --primary-container: #EADDFF;
    --on-primary-container: #21005D;
    
    --secondary: #625B71;
    --on-secondary: #FFFFFF;
    --secondary-container: #E8DEF8;
    --on-secondary-container: #1D192B;
    
    --on-surface: #1D1B20;
    --on-surface-variant: #49454F;
    --outline: #79747E;
    --outline-variant: #CAC4D0;
    
    --shadow: rgba(0, 0, 0, 0.15);
    --scrim: rgba(0, 0, 0, 0.5);
    
    /* 动态背景颜色变量 */
    --color1: rgba(232, 232, 232, 0.9);
    --color2: rgba(197, 197, 199, 0.9);
    --color3: rgba(255, 255, 255, 0.9);
    --color4: rgba(150, 150, 150, 0.9);
    --color5: rgba(210, 210, 210, 0.9);
    --color1-rgba: rgba(232, 232, 232, 0);
    --color2-rgba: rgba(197, 197, 199, 0);
    --color3-rgba: rgba(255, 255, 255, 0);
    --color4-rgba: rgba(150, 150, 150, 0);
    --color5-rgba: rgba(210, 210, 210, 0);

    /* 新增：性能模式变量 */
    --dynamic-background-blur: blur(60px); /* 模糊，亮度由 --dynamic-background-brightness 控制 */
    /* [新增] 播放界面背景亮度 */
    --player-background-brightness: 0.6; /* 浅色模式下默认亮度 */

    /* 播放栏透明度设置 */
    --player-bar-rgb: 243, 237, 247; /* 浅色模式下 surface-container 的 RGB: F3EDF7 */
    --player-bar-opacity: 1;

    /* [新增] 歌词设置变量 */
    --original-lyric-font-size-base: 36px;
    --translated-lyric-font-size-base: 20px;
    --original-lyric-font-size-scale: 1; /* 100% */
    --translated-lyric-font-size-scale: 1; /* 100% */
    --lyric-line-spacing-px: 10px; /* JS会动态更新，用于计算元素高度 */
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #141218;
        --surface: #141218;
        --surface-container: #211F26;
        --surface-container-high: #2B2930;
        --surface-variant: #49454F;
        
        --primary: #D0BCFF;
        --on-primary: #381E72;
        --primary-container: #4F378B;
        --on-primary-container: #EADDFF;
        
        --secondary: #CCC2DC;
        --on-secondary: #332D41;
        --secondary-container: #4A4458;
        --on-secondary-container: #E8DEF8;
        
        --on-surface: #E6E1E0; /* 浅灰色 */
        --on-surface-variant: #CAC4D0;
        --outline: #938F99;
        --outline-variant: #49454F;
        
        --shadow: rgba(0, 0, 0, 0.4);
        --scrim: rgba(0, 0, 0, 0.7);

        /* 播放栏透明度设置 */
        --player-bar-rgb: 33, 31, 38; /* 深色模式下 surface-container 的 RGB: 211F26 */
        /* [新增] 播放界面背景亮度 */
        --player-background-brightness: 0.4; /* 深色模式下默认亮度 */
    }
}

* {
    font-family: "SFPro-Regular", "PingFangSC-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    overflow: hidden; /* 禁用整个网页的滚动 */
    margin: 0;
    background: var(--background);
    color: var(--on-surface);
    transition: background-color 0.3s ease;
    
    /* 禁用全局水平手势，只允许垂直滚动 (如果子元素没有覆盖) */
    touch-action: pan-y; 
}

#app-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; /* 确保 app-container 也不滚动 */
}

/* --- [新增] 动画 --- */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 动态背景优化 --- */
.dynamic-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    background-color: var(--background);
    background-image:
        radial-gradient(closest-side, var(--color1), var(--color1-rgba)),
        radial-gradient(closest-side, var(--color2), var(--color2-rgba)),
        radial-gradient(closest-side, var(--color3), var(--color3-rgba)),
        radial-gradient(closest-side, var(--color4), var(--color4-rgba)),
        radial-gradient(closest-side, var(--color5), var(--color5-rgba));
    background-size:
        150vmax 150vmax, 100vmax 100vmax, 110vmax 110vmax, 130vmax 130vmax, 110vmax 110vmax;
    background-position:
        -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
    background-repeat: no-repeat;
    animation: 40s movement linear infinite;
    background-attachment: fixed;
    /* 使用 CSS 变量控制模糊和亮度 */
    filter: var(--dynamic-background-blur); 
    transition: opacity 0.8s ease, filter 0.5s ease;
    opacity: 0;
}
.dynamic-background.visible {
    opacity: 1;
    /* [修改] 进入播放界面时，应用背景亮度变量 */
    filter: var(--dynamic-background-blur) brightness(var(--player-background-brightness));
}

@keyframes movement {
    0%, 100% { 
        background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; 
    }
    50% { 
        background-position: 40vmax 40vmax, -40vmax 30vmax, -10vmax -10vmax, 30vmax 10vmax, -50vmax -50vmax; 
    }
}

/* --- 搜索视图优化 --- */
#search-view {
    width: 100%;
    height: 100%;
    padding: 24px;
    padding-bottom: 100px;
    overflow-y: auto; /* 允许垂直滚动 */
    display: flex;
    flex-direction: column;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 覆盖 body 的 touch-action，允许垂直滚动 */
    touch-action: pan-y; 
}
#search-view.hidden {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    position: absolute;
}

.search-header {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.search-input-wrapper {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 16px;
    color: var(--on-surface-variant);
    pointer-events: none;
}

#search-input {
    width: 100%;
    padding: 14px 16px 14px 52px;
    font-size: 16px;
    border: 1px solid var(--outline-variant);
    border-radius: 28px;
    background: var(--surface-container);
    color: var(--on-surface);
    outline: none;
    transition: all 0.2s ease;
}

#search-input:focus {
    border-color: var(--primary);
    background: var(--surface-container-high);
    box-shadow: 0 2px 8px var(--shadow);
}

#search-input::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.8;
}

.icon-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 24px;
    border: none;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.icon-btn:hover {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* 欢迎界面 */
.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.welcome-icon {
    font-size: 80px !important;
    color: var(--primary);
    opacity: 0.8;
}

.welcome-text {
    font-size: 24px;
    font-family: "SFPro-Medium", "PingFangSC-Medium", sans-serif; /* 中粗体 */
    font-weight: 500;
    color: var(--on-surface);
    margin-bottom: 8px;
}

.welcome-subtext {
    font-size: 16px;
    color: var(--on-surface-variant);
}

/* 搜索结果和历史记录容器 */
#search-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- 首页卡片视图样式 --- */
#home-cards-view {
    display: none; 
    grid-template-columns: 1fr; /* 默认单列，用于小屏幕 */
    gap: 24px;
    align-items: flex-start;
    padding: 20px 0;
}
#home-cards-view.visible {
    display: grid;
}

/* [新增] 桌面端首页卡片布局 */
@media (min-width: 1024px) { /* 桌面端宽度 */
    #home-cards-view.visible {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
        gap: 32px; /* 增加列间距 */
    }
    /* 确保榜单卡片在两列布局下也能占据一行 */
    #ranking-card {
        grid-column: span 2; /* 占据两列 */
    }
}

.card-container {
    background: var(--surface-container);
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 4px 12px var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止子元素溢出时撑开卡片宽度 */
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 历史播放折叠/展开逻辑 */
#history-songs-card .card-header.clickable-header,
#my-playlists-card .card-header.clickable-header { 
    cursor: pointer;
    margin-bottom: 0; /* 默认不留间距 */
}

#history-songs-card .card-header .expand-icon,
#my-playlists-card .card-header .expand-icon { 
    margin-left: auto;
    transition: transform 0.3s ease;
    color: var(--on-surface-variant);
}

#history-songs-card.expanded .card-header .expand-icon,
#my-playlists-card.expanded .card-header .expand-icon { 
    transform: rotate(90deg);
}

#history-songs-card .card-content-list,
#my-playlists-card .card-content-list { 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out;
    margin-top: 0;
}

#history-songs-card.expanded .card-content-list {
    max-height: 500px; /* 足够容纳 100 首歌曲 */
    margin-top: 16px;
}

#my-playlists-card.expanded .card-content-list { 
    max-height: 80vh; /* 足够容纳歌单内容 */
    margin-top: 16px;
    overflow-y: auto; /* 歌单歌曲列表可滚动 */
}
/* ------------------------ */


.card-header h4 {
    font-size: 18px;
    font-family: "SFPro-Medium", "PingFangSC-Medium", sans-serif;
    font-weight: 500;
    color: var(--on-surface);
    flex-grow: 1;
    margin: 0;
    line-height: 1.2;
}

.card-icon {
    color: var(--primary);
}

.update-time {
    font-size: 13px;
    font-weight: 400;
    color: var(--on-surface-variant);
}

.text-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 12px;
    transition: background-color 0.2s;
}

.text-btn:hover {
    background-color: var(--primary-container);
}

.text-btn:active {
    transform: scale(0.95);
}

.card-content-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favorite-controls, .playlist-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: flex-end;
}

/* 搜索结果和历史记录项共用样式 */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.search-result-item:hover {
    background-color: var(--surface-container-high);
}

.search-result-item:active {
    transform: scale(0.98);
}

.search-result-item img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background-color: var(--surface-variant);
    box-shadow: 0 1px 4px var(--shadow);
    flex-shrink: 0;
    transition: transform 0.2s ease; 
}

.search-result-item:hover img {
    transform: scale(1.05); 
}

.search-result-item .index {
    font-size: 16px;
    font-weight: 600;
    width: 20px;
    text-align: center;
    color: var(--on-surface-variant);
    flex-shrink: 0;
}

.search-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}

.search-result-info .song-title {
    font-size: 15px;
    font-family: "SFPro-Medium", "PingFangSC-Medium", sans-serif; 
    font-weight: 500;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.search-result-info .song-artist {
    font-size: 13px;
    font-family: "SFPro-Regular", "PingFangSC-Regular", sans-serif; 
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 搜索结果的独立容器 */
#search-results-content {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px; 
}
#search-results-content.visible {
    display: flex;
}

.placeholder-text {
    text-align: center;
    margin-top: 10px;
    color: var(--on-surface-variant);
    font-size: 14px;
}

/* --- 全屏播放器视图重构 --- */
.main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.main.visible {
    opacity: 1;
    pointer-events: auto;
}

#exit-player-btn {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    border: none;
    cursor: pointer;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

#exit-player-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

#exit-player-btn:active {
    transform: scale(0.95);
}

/* 左侧容器 */
.leftcontent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    width: 50%;
    height: 100vh;
    padding: 0; 
    position: relative;
    transition: width 0.4s ease;
}

.album-cover-wrapper {
    flex-grow: 1; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px; 
    padding-top: 80px; 
    min-height: 0; 
}

.album-cover-container {
    width: min(80vw, 70vh, 520px); 
    height: min(80vw, 70vh, 520px); 
    aspect-ratio: 1 / 1; 
    border-radius: 24px; 
    background-color: rgba(255,255,255,0.1);
    background-size: cover;
    background-position: center;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.player-controls-fullscreen {
    width: 100%;
    max-width: 600px; 
    padding: 0 32px 60px 32px; 
    display: flex;
    flex-direction: column;
    gap: 16px; 
    z-index: 10;
}

/* [修改] 歌曲信息部分 */
.song-info-fullscreen {
    text-align: left; 
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* 调整 margin-top 使其整体向下移动，与封面保持距离 */
    margin-top: 20px; /* 增加顶部外边距 */
    margin-bottom: 10px;
    padding: 0 12px;
}

.song-name-fullscreen {
    /* [修改] 减小字体大小 */
    font-size: 24px; /* 从 28px 减小到 24px */
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.artist-name-fullscreen {
    /* [修改] 减小字体大小 */
    font-size: 16px; /* 从 17px 减小到 16px */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.visualizer-integrated-container {
    width: 100%;
    height: 60px; 
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    margin-bottom: -15px; 
    opacity: 0.8;
    position: relative;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
    mask-image: linear-gradient(to top, black 80%, transparent 100%);
}

/*  --- 音频可视化 Canvas 样式 --- */
#visualizer-fullscreen {
    width: 100%;
    height: 100%;
    display: block; /* 确保 canvas 正常显示 */
}
/* --- */

.time-controls-fullscreen {
    display: flex;
    align-items: center;
    gap: 16px;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 2; 
}

.progressbar-fullscreen {
    flex-grow: 1;
    height: 4px; 
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.2s;
}

.progressbar-fullscreen::after {
    content: '';
    position: absolute;
    top: -10px; bottom: -10px; left: 0; right: 0;
}

.progressbar-fullscreen:hover {
    height: 6px;
}

.process-fullscreen {
    width: 0%; 
    height: 100%;
    background: #fff;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
    transition: width 0.1s linear;
}

.process-fullscreen::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.progressbar-fullscreen:hover .process-fullscreen::after,
.progressbar-fullscreen:active .process-fullscreen::after {
    transform: translateY(-50%) scale(1);
}

.start-time-fullscreen, .end-time-fullscreen {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 35px;
}

.conbox-fullscreen {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    margin-top: 10px;
    padding: 0 10px;
}

.control-btn {
    background: transparent !important; 
    border: none;
    color: rgba(255, 255, 255, 0.9); 
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%; 
}

.control-btn:hover {
    color: #fff;
    transform: scale(1.1); 
    background-color: rgba(255,255,255,0.05) !important; 
}

.control-btn:active {
    transform: scale(0.95);
    color: rgba(255,255,255,0.7);
}

.control-btn .material-symbols-outlined {
    font-size: 32px; 
    font-weight: 300; 
}

.control-btn.main-control {
    width: 72px; 
    height: 72px;
}

.control-btn.main-control .material-symbols-outlined {
    font-size: 56px; 
    font-variation-settings: 'FILL' 1; 
}

.prev-btn-fullscreen, .next-btn-fullscreen {
    width: 48px;
    height: 48px;
}
.prev-btn-fullscreen .material-symbols-outlined, 
.next-btn-fullscreen .material-symbols-outlined {
    font-size: 36px;
}

.control-btn.small-btn {
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.6); 
}
.control-btn.small-btn .material-symbols-outlined {
    font-size: 24px;
}

#toggle-favorite-btn.is-favorite {
    color: #FF5252;
}
#toggle-favorite-btn.is-favorite .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    animation: heartBeat 0.3s ease-in-out;
}

/* [新增] 播放模式按钮激活样式 */
#playback-mode-btn-fs.active {
    color: #D0BCFF; /* 深色模式下的 primary color */
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.play-btn-fullscreen { display: flex; }
.pause-btn-fullscreen { display: none; }


/* 右侧歌词区域 */
.rightcontent {
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 40px;
    position: relative; 
    transition: width 0.4s ease, transform 0.4s ease, padding 0.4s ease;
}

/* 桌面端歌词区域的样式调整 */
@media (min-width: 801px) {
    .main.lyric-center-mode .leftcontent {
        width: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }
    
    .main.lyric-center-mode .rightcontent {
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 40px; /* 歌词居中模式下，顶部留出和左右相同的空间 */
        padding-bottom: 40px;
    }
    
    .main.lyric-center-mode .lyrics > .item {
        text-align: center;
    }

    /* 桌面端默认隐藏歌词信息栏 */
    .lyrics-info-bar.desktop-hide {
        display: none;
    }

    /* 歌词居中模式下，即使没有 desktop-hide 类，也隐藏 lyrics-info-bar */
    .main.lyric-center-mode .lyrics-info-bar {
        display: none;
    }

    .lyricscontainer {
        padding-top: 0; /* 默认不额外增加顶部内边距 */
        /* 当 lyrics-info-bar 不显示时，歌词可以向上移动 */
        /* 调整 lyricscontainer 的 mask-image 以适应新的布局 */
        -webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
        mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
    }
}

#visualizer-lyrics-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35vh; 
    pointer-events: none; 
    opacity: 0.15; 
    z-index: 0;
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
}

.lyrics-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* [修改] 调整顶部间距，使其更紧凑 */
    margin-top: 8px;
    margin-bottom: 12px; 
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.lyrics-header .material-symbols-outlined {
    font-size: 20px;
}

/* [新增] 歌词界面顶部信息栏样式 */
.lyrics-info-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    /* [修改] 调整底部间距，使其更紧凑 */
    margin-bottom: 16px; 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2; /* 确保在歌词上方 */
    flex-shrink: 0; /* 防止被挤压 */
    opacity: 0; /* 默认隐藏 */
    transform: translateY(-20px); /* 默认向上偏移 */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.main.show-lyrics .lyrics-info-bar {
    opacity: 1;
    transform: translateY(0);
}

.lyrics-info-bar img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.lyrics-info-text {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
}

#lyrics-info-song {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

#lyrics-info-artist-album {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
}

#lyrics-info-favorite-btn {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    width: 44px;
    height: 44px;
}

#lyrics-info-favorite-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

#lyrics-info-favorite-btn.is-favorite {
    color: #FF5252;
}

.lyricscontainer {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(transparent 0%, black 15%, black 85%, transparent 100%);
    z-index: 1;
}

.lyrics {
    width: 100%;
    height: 100%;
    position: relative;
}

.lyrics > .item {
    position: absolute;
    padding: 12px 20px;
    box-sizing: border-box;
    border-radius: 12px;
    will-change: transform, filter, opacity;
    text-align: left;
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease-in-out;
    opacity: 0.7;
    /* [修复] 移除 margin-bottom，行距通过 JS 计算到 translateY 中 */
    /* margin-bottom: var(--lyric-line-margin); */ 
}

.lyrics > .item > p {
    transition: color 0.5s ease-in-out;
    width: 100%;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.1);
    word-break: break-word; /* 确保长歌词能换行 */
}

.original-lyric {
    font-family: "SFPro-Semibold", "PingFangSC-Semibold", sans-serif;
    font-size: calc(var(--original-lyric-font-size-base) * var(--original-lyric-font-size-scale)); /* [新增] 动态字体大小 */
    font-weight: 700; 
    line-height: 1.3; /* [修复] 确保内部文本行高一致 */
    color: rgba(255, 255, 255, 0.25);
}

.translated-lyric {
    font-family: "SFPro-Regular", "PingFangSC-Regular", sans-serif;
    font-size: calc(var(--translated-lyric-font-size-base) * var(--translated-lyric-font-size-scale)); /* [新增] 动态字体大小 */
    font-weight: 500; 
    margin-top: 0.5em; /* [修复] 翻译行与原文行之间的间距 */
    line-height: 1.4; /* [修复] 确保内部文本行高一致 */
    color: rgba(255, 255, 255, 0.35);
}

.lyrics > .item.active {
    opacity: 1;
    transform: scale(1.05);
}

.lyrics > .item.active .original-lyric {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.lyrics > .item.active .translated-lyric {
    color: rgba(255, 255, 255, 0.85);
}

/* --- 底部播放栏优化 --- */
#player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 88px;
    
    background: rgba(var(--player-bar-rgb), var(--player-bar-opacity));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    color: var(--on-surface);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -2px 16px var(--shadow);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    z-index: 500;
    overflow: hidden;
}

#player-bar.visible {
    transform: translateY(0);
}

body.fullscreen-active #player-bar {
    transform: translateY(100%);
}

#visualizer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.15;
    z-index: 0;
}

/* 进度条在顶部 */
.player-bar-progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    cursor: pointer;
    z-index: 2;
    background: var(--outline-variant);
}

#player-bar-progress-bar {
    width: 100%;
    height: 100%;
    position: relative;
}

#player-bar-process {
    width: 0%;
    height: 100%;
    background: var(--primary);
    transition: width 0.1s linear;
}

.player-bar-progress-container:hover {
    height: 6px;
}

/* 播放栏内容层 */
.player-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 100%;
    position: relative;
    z-index: 1;
    gap: 16px;
}

.player-bar-song-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-grow: 1;
    cursor: pointer;
    min-width: 0;
    transition: opacity 0.2s ease;
}

.player-bar-song-info:hover {
    opacity: 0.8;
}

#player-bar-cover {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: var(--surface-variant);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--shadow);
}

.player-bar-text-info {
    overflow: hidden;
    white-space: nowrap;
    flex-grow: 1;
    min-width: 0;
    font-family: "SFPro-Regular", "PingFangSC-Regular", sans-serif; 
}

#player-bar-title,
#player-bar-artist {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#player-bar-title {
    font-family: "SFPro-Medium", "PingFangSC-Medium", sans-serif; 
    font-weight: 500;
    font-size: 15px;
    color: var(--on-surface);
    margin-bottom: 4px;
}

#player-bar-artist {
    font-family: "SFPro-Regular", "PingFangSC-Regular", sans-serif; 
    font-size: 13px;
    color: var(--on-surface-variant);
}

/* [已修改] 播放栏控制区布局 */
.player-bar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-grow: 1;
    max-width: 320px;
}
.player-bar-controls-left, .player-bar-controls-right {
    flex: 1;
}
.player-bar-controls-left {
    display: flex;
    justify-content: flex-start;
}
.player-bar-controls-right {
    display: flex;
    justify-content: flex-end;
}
.player-bar-controls-center {
    display: flex;
    align-items: center;
    gap: 8px;
}


.bar-control-btn {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--on-surface-variant);
}

.bar-control-btn:hover {
    background-color: var(--surface-container-high);
    color: var(--on-surface);
}

.bar-control-btn:active {
    transform: scale(0.9);
}

.bar-control-btn .material-symbols-outlined {
    font-size: 24px;
}

.bar-control-btn.main-btn {
    width: 48px;
    height: 48px;
    background-color: var(--primary);
    color: var(--on-primary);
}

.bar-control-btn.main-btn:hover {
    background-color: var(--primary);
    filter: brightness(1.1);
    box-shadow: 0 2px 8px var(--shadow);
}

.bar-control-btn.main-btn .material-symbols-outlined {
    font-size: 28px;
}

#player-bar-pause-btn {
    display: none;
}

#player-bar-favorite-btn.is-favorite,
#player-bar-playback-mode-btn.active {
    color: var(--primary); 
}
#player-bar-favorite-btn.is-favorite .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600;
}


/* --- 设置弹窗优化 --- */
#settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--scrim);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#settings-modal.visible {
    display: flex;
    opacity: 1;
}

.settings-panel {
    background: var(--surface);
    color: var(--on-surface);
    padding: 28px;
    border-radius: 28px;
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px var(--shadow);
}

#settings-modal.visible .settings-panel {
    transform: scale(1);
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.settings-header h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}

.icon-btn-small {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-btn-small:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.icon-btn-small:active {
    transform: scale(0.9);
}

.quality-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quality-options label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.quality-options label:hover {
    background-color: var(--surface-container);
}

.quality-options label:has(input:checked) {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    border-color: var(--primary);
}

.quality-options input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
}

.quality-options span {
    font-size: 15px;
    font-weight: 500;
}

.settings-section {
    margin-bottom: 20px;
}

.settings-section h4 {
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 12px;
    font-weight: 600;
    /* [新增] 标题和图标对齐 */
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-section h4 .material-symbols-outlined {
    font-size: 20px;
}


.divider {
    height: 1px;
    background-color: var(--outline-variant);
    opacity: 0.3;
    margin: 16px 0;
}

.toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--surface-container);
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 8px;
}

.toggle-item:active {
    transform: scale(0.98);
}

.toggle-text {
    display: flex;
    flex-direction: column;
}

.toggle-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--on-surface);
}

.toggle-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-top: 2px;
}

.toggle-item input {
    display: none;
}

.toggle-switch {
    width: 48px;
    height: 28px;
    background-color: var(--outline-variant);
    border-radius: 14px;
    position: relative;
    transition: background-color 0.3s ease;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-item input:checked + .toggle-switch {
    background-color: var(--primary);
}

.toggle-item input:checked + .toggle-switch::after {
    transform: translateX(20px);
}

.setting-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.setting-item label {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface-variant);
    margin-bottom: 8px;
}

.setting-item input[type="range"] {
    width: 100%;
    height: 6px;
    background: var(--outline-variant);
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: 0;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 4px var(--shadow);
}


/* --- [新增] 数据管理样式 --- */
.data-management-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.data-management-buttons .text-btn {
    background-color: var(--surface-container);
    padding: 10px 16px;
    border-radius: 20px;
}
.data-management-buttons .text-btn:hover {
    background-color: var(--surface-container-high);
}


/* --- 核心：性能模式覆盖样式 --- */

body.disable-ui-blur .main,
body.disable-ui-blur #exit-player-btn,
body.disable-ui-blur #player-bar,
body.disable-ui-blur #settings-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.disable-ui-blur #exit-player-btn {
    background: rgba(0, 0, 0, 0.6); 
}

body.disable-ui-blur #player-bar {
    background: rgb(var(--player-bar-rgb));
    opacity: var(--player-bar-opacity);
}

body.disable-ui-blur #settings-modal {
    background: rgba(0, 0, 0, 0.85); 
}

/* --- 首页卡片新增样式 (榜单) --- */

.horizontal-scroll {
    width: calc(100% + 32px); 
    margin: 0 -16px; 
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, min-content);
    grid-gap: 16px; 
    overflow-x: auto;
    overflow-y: hidden; 
    padding: 0 16px 10px 16px; 
    margin-top: 16px;
    touch-action: pan-x; 
    -webkit-overflow-scrolling: touch; 
}

.ranking-song-item {
    display: flex;
    flex-direction: column;
    width: 120px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    padding: 8px;
    border-radius: 12px;
}

.ranking-song-item:hover {
    background-color: var(--surface-container-high);
}

.ranking-song-item:active {
    transform: scale(0.98);
}

.ranking-cover-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
}

.ranking-cover-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--shadow);
}

.rank-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rank-badge.rank-1 { background: gold; color: #333; }
.rank-badge.rank-2 { background: silver; color: #333; }
.rank-badge.rank-3 { background: #cd7f32; color: white; }

.ranking-info {
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
}

.ranking-info .song-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: var(--on-surface);
}

.ranking-info .song-artist {
    font-size: 12px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* [新增] 我的歌单卡片样式 */
#my-playlists-card .card-header {
    margin-bottom: 0; /* 默认不留间距 */
    flex-wrap: wrap;
    align-items: flex-start;
}
#my-playlists-card .card-header h4 {
    flex-grow: 0; /* 不让标题撑开太多 */
    margin-right: 8px;
}
#my-playlists-card .card-header .playlist-controls {
    margin-left: auto; /* 推到右边 */
    margin-top: 0; /* 适配flex-wrap */
}
@media (max-width: 600px) { /* 移动端调整 */
    #my-playlists-card .card-header .playlist-controls {
        width: 100%; /* 按钮独占一行 */
        justify-content: flex-start;
        margin-top: 10px;
    }
}

#my-playlists-card .card-header .expand-icon {
    margin-left: auto; /* 推到最右边 */
    transition: transform 0.3s ease;
    color: var(--on-surface-variant);
    flex-shrink: 0; /* 防止被挤压 */
}

#my-playlists-card.expanded .card-header .expand-icon {
    transform: rotate(90deg);
}

#my-playlists-card .card-content-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out;
    margin-top: 0;
}

#my-playlists-card.expanded .card-content-list {
    max-height: 80vh; /* 足够容纳歌单内容 */
    margin-top: 16px;
    overflow-y: auto; /* 歌单歌曲列表可滚动 */
}

.my-playlist-item {
    background: var(--surface-container-high);
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 8px; /* 歌单之间的间距 */
    box-shadow: none; /* 移除卡片阴影，使其更像列表项 */
}

.my-playlist-item .card-header {
    cursor: pointer;
    gap: 12px;
    align-items: center;
}
.my-playlist-item .card-header h4 {
    font-size: 16px;
    font-weight: 500;
}
.my-playlist-item .card-header img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background-color: var(--surface-variant);
    flex-shrink: 0;
}
.my-playlist-item .my-playlist-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
}
.my-playlist-item .playlist-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-playlist-item .playlist-meta {
    font-size: 12px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.my-playlist-item .remove-playlist-btn {
    margin-left: 8px; /* 与展开图标保持距离 */
    color: var(--on-surface-variant);
}
.my-playlist-item .remove-playlist-btn:hover {
    background-color: var(--surface-variant);
    color: var(--on-surface);
}

/* --- [BUG修复] 新增 .my-playlist-item 的展开/折叠样式 --- */
.my-playlist-item .my-playlist-songs-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out;
    margin-top: 0;
}
/* [已修改] 增加max-height，确保动画可以正常执行 */
.my-playlist-item.expanded .my-playlist-songs-list {
    max-height: 80vh; 
    margin-top: 12px;
    overflow-y: auto;
}
.my-playlist-item .card-header .expand-icon {
    transition: transform 0.3s ease;
}
.my-playlist-item.expanded .card-header .expand-icon {
    transform: rotate(90deg);
}

/* --- [新增] 自动更新按钮样式 --- */
.auto-update-playlist-btn {
    margin-left: 0;
    color: var(--on-surface-variant);
}
.auto-update-playlist-btn.active {
    color: var(--primary);
    background-color: var(--primary-container);
}
.auto-update-playlist-btn.active:hover {
    color: var(--on-primary-container);
}


.my-playlist-songs-list {
    margin-top: 12px;
    padding-left: 4px; /* 歌曲列表稍微缩进 */
}
.my-playlist-song-item {
    background: transparent; /* 歌曲列表项背景透明 */
}
.my-playlist-song-item:hover {
    background-color: var(--surface-container);
}


/* --- [新增] 全局导入进度条样式 --- */
#global-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 半透明背景 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 3000; /* 确保在最顶层 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#global-progress-bar.visible {
    opacity: 1;
    pointer-events: auto;
}

.progress-bar-content {
    background: var(--surface-container);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px var(--shadow);
    width: 90%;
    max-width: 300px;
}

#progress-bar-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.progress-bar-wrapper {
    width: 100%;
    height: 8px;
    background: var(--outline-variant);
    border-radius: 4px;
    overflow: hidden;
}

#progress-bar-value {
    width: 0%;
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* [新增] 通知样式 */
.notification {
    position: fixed;
    bottom: 100px; /* 在播放栏上方 */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--surface-container-high);
    color: var(--on-surface);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    z-index: 4000; /* 确保在所有模态框之上 */
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
}

.notification.hide {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.notification.error {
    background-color: #EF9A9A; /* Light Red */
    color: #B71C1C; /* Dark Red */
}

.notification.warning {
    background-color: #FFCC80; /* Light Orange */
    color: #E65100; /* Dark Orange */
}

.notification.success {
    background-color: #A5D6A7; /* Light Green */
    color: #1B5E20; /* Dark Green */
}

/* [新增] QQ 歌单选择模态框样式 */
#qq-playlist-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--scrim);
    z-index: 2500; /* 在设置模态框之上，在全局进度条之下 */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#qq-playlist-selection-modal.visible {
    display: flex;
    opacity: 1;
}

.selection-panel {
    background: var(--surface);
    color: var(--on-surface);
    padding: 24px;
    border-radius: 28px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px var(--shadow);
}

#qq-playlist-selection-modal.visible .selection-panel {
    transform: scale(1);
}

.selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.selection-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}

.selection-content {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 8px; /* 为滚动条留出空间 */
}

.qq-playlist-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    background: var(--surface-container);
    transition: background-color 0.2s;
    margin-bottom: 8px;
}

.qq-playlist-item:hover {
    background-color: var(--surface-container-high);
}

.qq-playlist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.qq-playlist-item img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background-color: var(--surface-variant);
    flex-shrink: 0;
}

.qq-playlist-info {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
}

.qq-playlist-info .playlist-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qq-playlist-info .playlist-meta {
    font-size: 13px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.selection-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.text-btn.primary-btn {
    background-color: var(--primary);
    color: var(--on-primary);
    padding: 8px 16px;
    border-radius: 20px;
}
.text-btn.primary-btn:hover {
    background-color: var(--primary);
    filter: brightness(1.1);
}

/* --- [修改] 响应式自适应优化 --- */

@media (max-width: 800px) {
    body {
        display: block;
    }

    .main {
        width: 200vw;
        flex-direction: row;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .main.show-info {
        transform: translateX(0);
    }

    .main.show-lyrics {
        transform: translateX(-100vw);
    }

    .main.lyric-center-mode .lyrics > .item {
        text-align: center;
    }

    .leftcontent,
    .rightcontent {
        width: 100vw;
        height: 100vh;
        padding: 0; 
    }

    .leftcontent {
        /* [修改] 采用新的flex布局，避免元素被推出屏幕 */
        justify-content: center;
        gap: max(2vh, 10px);
        padding-top: 60px; /* 为退出按钮留出空间 */
        padding-bottom: 20px;
    }

    .album-cover-wrapper {
        /* [修改] 移除垂直内边距，让父级的gap来控制间距 */
        padding: 0 30px;
        flex-grow: 0; /* 不拉伸 */
        flex-shrink: 1; /* 允许收缩 */
        min-height: 0; /* 允许收缩 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .album-cover-container {
        /* [修改] 尺寸主要由视口高度决定，防止在矮屏幕上过大 */
        width: min(85vw, 55vh); 
        height: auto;
        aspect-ratio: 1 / 1; 
        min-width: auto;
    }

    .player-controls-fullscreen {
        /* [修改] 移除垂直内边距，使其更紧凑 */
        width: 100%;
        max-width: 100%;
        padding: 0 24px;
        gap: 10px;
        flex-shrink: 0; /* 防止收缩 */
    }

    /* [修改] 移动端歌曲信息部分 */
    .song-info-fullscreen {
        /* 移动端字体可以再小一些 */
        margin-top: 15px; /* 调整移动端间距 */
    }

    .song-name-fullscreen {
        font-size: 20px; /* 移动端字体 */
        text-align: left; 
    }
    
    .artist-name-fullscreen {
        font-size: 14px; /* 移动端字体 */
        text-align: left;
    }

    .visualizer-integrated-container {
        height: 40px;
        margin-bottom: -5px;
    }

    .conbox-fullscreen {
        justify-content: space-between;
        padding: 0;
    }
    
    .control-btn.main-control {
        width: 60px;
        height: 60px;
    }

    .control-btn.main-control .material-symbols-outlined {
        font-size: 44px;
    }

    .prev-btn-fullscreen, .next-btn-fullscreen {
        width: 44px;
        height: 44px;
    }
    .prev-btn-fullscreen .material-symbols-outlined, 
    .next-btn-fullscreen .material-symbols-outlined {
        font-size: 32px;
    }

    .control-btn.small-btn {
        width: 36px;
        height: 36px;
    }
    .control-btn.small-btn .material-symbols-outlined {
        font-size: 18px;
    }

    .rightcontent {
        justify-content: flex-start;
        padding: 60px 24px 24px 24px;
    }

    /* 移动端歌词信息栏在移动端样式 */
    .lyrics-info-bar {
        padding: 8px 12px;
        margin-bottom: 16px;
        border-radius: 12px;
        gap: 12px;
    }
    .lyrics-info-bar img {
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }
    #lyrics-info-song {
        font-size: 16px;
    }
    #lyrics-info-artist-album {
        font-size: 12px;
    }
    #lyrics-info-favorite-btn {
        width: 36px;
        height: 36px;
    }
    #lyrics-info-favorite-btn .material-symbols-outlined {
        font-size: 20px;
    }

    /* 移动端强制显示歌词信息栏 */
    .lyrics-info-bar.desktop-hide {
        display: flex; /* 在移动端强制显示 */
    }


    /* [修复] 移动端歌词字体大小和行高 */
    .original-lyric {
        font-size: calc(var(--original-lyric-font-size-base) * var(--original-lyric-font-size-scale) * 0.75); 
    }

    .translated-lyric {
        font-size: calc(var(--translated-lyric-font-size-base) * var(--translated-lyric-font-size-scale) * 0.75); 
    }

    .lyrics-header {
        padding: 0;
        font-size: 12px;
        margin-top: 8px; /* [修改] 调整间距 */
        margin-bottom: 8px;
    }

    .lyricscontainer {
        /* 移动端歌词区域的遮罩，适应 info-bar 存在的情况 */
        -webkit-mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%);
        mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%);
    }

    #player-bar {
        height: 80px;
    }

    .player-bar-content {
        padding: 0 16px;
        gap: 12px;
    }
    
    .player-bar-controls {
        max-width: none;
        flex-grow: 0;
    }

    .player-bar-song-info {
        max-width: calc(100vw - 240px);
    }

    #player-bar-cover {
        width: 48px;
        height: 48px;
    }

    #player-bar-title {
        font-size: 14px;
    }

    #player-bar-artist {
        font-size: 12px;
    }

    .bar-control-btn {
        width: 36px;
        height: 36px;
    }

    .bar-control-btn.main-btn {
        width: 44px;
        height: 44px;
    }

    .bar-control-btn .material-symbols-outlined {
        font-size: 20px;
    }

    .bar-control-btn.main-btn .material-symbols-outlined {
        font-size: 24px;
    }

    #exit-player-btn {
        top: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
    }

    #search-view {
        padding: 20px 16px 100px 16px;
    }

    .search-header {
        gap: 8px;
        margin-bottom: 20px;
    }

    #search-input {
        font-size: 15px;
        padding: 12px 14px 12px 44px;
    }

    .icon-btn {
        width: 44px;
        height: 44px;
    }

    .welcome-icon {
        font-size: 64px !important;
    }

    .welcome-text {
        font-size: 20px;
    }

    .welcome-subtext {
        font-size: 14px;
    }
    
    #home-cards-view {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;
    }
    
    .ranking-song-item {
        width: 100px;
    }
    .horizontal-scroll::-webkit-scrollbar {
        height: 6px;
    }

    /* 我的歌单卡片在移动端样式调整 */
    #my-playlists-card .card-header .playlist-controls {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
    }
    #my-playlists-card .card-header .expand-icon {
        margin-left: auto; /* 保持在右边 */
    }

    /* QQ 歌单选择模态框在移动端样式 */
    .selection-panel {
        padding: 20px;
    }
    .selection-header h3 {
        font-size: 18px;
    }
    .qq-playlist-item {
        padding: 10px 12px;
        gap: 12px;
    }
    .qq-playlist-item img {
        width: 48px;
        height: 48px;
    }
    .qq-playlist-info .playlist-title {
        font-size: 14px;
    }
    .qq-playlist-info .playlist-meta {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .album-cover-container {
        width: min(88vw, 50vh); 
    }
    
    .player-controls-fullscreen {
        padding: 0 16px;
        gap: 8px;
    }
    
    /* [修改] 超小屏幕歌曲信息部分 */
    .song-info-fullscreen {
        margin-top: 10px; /* 进一步调整超小屏幕间距 */
    }

    .song-name-fullscreen {
        font-size: 18px; /* 超小屏幕字体 */
    }
    
    .artist-name-fullscreen {
        font-size: 13px; /* 超小屏幕字体 */
    }
    
    .control-btn.main-control {
        width: 56px;
        height: 56px;
    }
    .control-btn.main-control .material-symbols-outlined {
        font-size: 40px;
    }

    .prev-btn-fullscreen, .next-btn-fullscreen {
        width: 40px;
        height: 40px;
    }
    .prev-btn-fullscreen .material-symbols-outlined, 
    .next-btn-fullscreen .material-symbols-outlined {
        font-size: 28px;
    }

    .control-btn.small-btn {
        width: 32px;
        height: 32px;
    }
    .control-btn.small-btn .material-symbols-outlined {
        font-size: 18px;
    }
    
    .rightcontent {
        padding: 50px 16px 16px 16px;
    }
    
    /* [修复] 移动端歌词字体大小和行高 */
    .original-lyric {
        font-size: calc(var(--original-lyric-font-size-base) * var(--original-lyric-font-size-scale) * 0.65); 
    }
    
    .translated-lyric {
        font-size: calc(var(--translated-lyric-font-size-base) * var(--translated-lyric-font-size-scale) * 0.65); 
    }
    
    #player-bar {
        height: 70px;
    }
    
    .player-bar-content {
        padding: 0 12px;
    }
    
    #player-bar-cover {
        width: 44px;
        height: 44px;
    }
    
    #player-bar-title {
        font-size: 13px;
    }
    
    #player-bar-artist {
        font-size: 11px;
    }
}

/* [新增] 针对横屏或矮屏幕的特殊优化 */
@media (max-height: 700px) and (min-width: 801px) {
    .album-cover-container {
        width: min(70vw, 60vh, 480px);
        height: auto;
    }
    
    .player-controls-fullscreen {
        padding-bottom: 30px;
    }

    /* [修改] 横屏/矮屏幕歌曲信息部分 */
    .song-info-fullscreen {
        margin-top: 15px; /* 调整横屏/矮屏幕间距 */
    }
    
    /* [修复] 横屏/矮屏幕歌词字体大小和行高 */
    .original-lyric, .song-name-fullscreen {
        font-size: calc(var(--original-lyric-font-size-base) * var(--original-lyric-font-size-scale) * 0.8);
    }
    
    .translated-lyric, .artist-name-fullscreen {
        font-size: calc(var(--translated-lyric-font-size-base) * var(--translated-lyric-font-size-scale) * 0.8);
    }
}

@media (max-height: 600px) and (min-width: 801px) {
    .album-cover-container {
        width: min(60vw, 50vh, 400px);
        height: auto;
    }

    /* [修改] 超矮横屏歌曲信息部分 */
    .song-info-fullscreen {
        margin-top: 10px; /* 进一步调整超矮横屏间距 */
    }

    /* [修复] 横屏/矮屏幕歌词字体大小和行高 */
    .original-lyric, .song-name-fullscreen {
        font-size: calc(var(--original-lyric-font-size-base) * var(--original-lyric-font-size-scale) * 0.7);
    }
    
    .translated-lyric, .artist-name-fullscreen {
        font-size: calc(var(--translated-lyric-font-size-base) * var(--translated-lyric-font-size-scale) * 0.7);
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--outline);
}