html, body {
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    margin: 0;
    padding: 20px 0; /* 修改padding，左右为0 */
    box-sizing: border-box;
}

.container {
    background-color: #282828;
    border-radius: 10px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */
    width: 900px;
    height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e0e0e0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #3a3a3a;
    border-bottom: 1px solid #4a4a4a;
    -webkit-app-region: drag; /* 使整个头部可拖动 - Webkit only */
}

.window-controls span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    cursor: pointer;
    -webkit-app-region: no-drag; /* 禁用拖动 - Webkit only */
}

.window-controls .close {
    background-color: #ff5f56;
}

.window-controls .minimize {
    background-color: #ffbd2e;
}

.window-controls .maximize {
    background-color: #27c93f;
}

.app-title {
    font-weight: bold;
    font-size: 16px;
    color: #e0e0e0;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-info .username {
    margin-right: 10px;
    color: #e0e0e0;
}

.user-info .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #555;
}

main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.album-info {
    width: 300px;
    background-color: #333;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #4a4a4a;
}

.album-cover {
    width: 200px;
    height: 200px;
    background-color: #555;
    margin-bottom: 20px;
    border-radius: 5px;
}

.album-info h2 {
    margin: 0 0 5px 0;
    color: #e0e0e0;
}

.album-info p {
    margin: 0 0 20px 0;
    color: #b0b0b0;
    font-size: 14px;
}

.album-info .song-title-display {
    font-weight: bold;
}

.info-details {
    width: 100%;
    margin-bottom: 20px;
}

.info-details h3 {
    margin: 0 0 10px 0;
    color: #e0e0e0;
    font-size: 15px;
    border-bottom: 1px solid #4a4a4a;
    padding-bottom: 5px;
}

.info-details p {
    margin: 5px 0;
    color: #b0b0b0;
    font-size: 13px;
}

.buy-button {
    background-color: #444;
    color: white;
    border: 1px solid #666;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.buy-button:hover {
    background-color: #555;
}

.playlist {
    flex: 1;
    padding: 20px;
    overflow-y: auto; /* 允许播放列表独立滚动 */
    }
    
    /* 自定义滚动条样式 */
    .playlist::-webkit-scrollbar {
    width: 4px; /* 滚动条宽度 */
    }

    .playlist::-webkit-scrollbar-track {
    background: transparent; /* 滚动条轨道背景透明 */
    }

    .playlist::-webkit-scrollbar-thumb {
    background-color: #888; /* 滚动条颜色 */
    border-radius: 2px; /* 滚动条圆角 */
    }

    .playlist::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 滚动条悬停颜色 */
    }

    .search-bar {
    display: flex;
    align-items: center;
    background-color: #4a4a4a;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 20px;
}

.search-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #e0e0e0;
    padding: 5px;
}

.search-bar input::placeholder {
    color: #b0b0b0;
}

.search-bar .fa-search {
    color: #b0b0b0;
}

.playlist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.song-item {
    display: flex;
    flex-wrap: nowrap; /* 不允许内容换行 */
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加过渡效果 */
    border-radius: 5px;
    height: 16px; /* 固定高度 */
    overflow: hidden; /* 隐藏溢出内容 */
    border-left: 4px solid transparent; /* 添加透明边框，保持布局一致 */
}

.song-item:hover {
    background-color: #4a4a4a;
}

.song-item.active {
    background-color: #007bff;
    height: 16px; /* 与普通song-item保持一致的高度 */
    overflow: hidden; /* 隐藏溢出内容 */
    border-left: 4px solid #0056b3; /* 添加左侧边框 */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); /* 添加蓝色阴影 */
    transform: translateX(2px); /* 轻微向右偏移 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

.song-item.active .song-title,
.song-item.active .song-number,
.song-item.active .song-rating .fa-star,
.song-item.active .play-icon .fa-play-circle {
    color: white;
}

.song-item .play-icon {
    margin-right: 10px;
    color: #b0b0b0;
}

.song-number {
    display: inline-block;
    min-width: 20px;
    text-align: right;
    margin-right: 10px;
    color: #b0b0b0;
    font-size: 14px;
}

.song-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    max-width: 350px; /* 限制最大宽度 */
    flex: 1; /* 允许弹性伸缩 */
}

.song-artist {
    font-size: 0.8em;
    color: #b0b0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    max-width: 150px; /* 限制最大宽度 */
}



.song-item .song-progress {
    width: 80px;
    height: 5px;
    background-color: #555;
    border-radius: 2.5px;
    margin: 0 10px;
}

.song-rating {
    color: #ffc107;
    margin-left: auto; /* 使其右对齐 */
}

.song-item .song-rating .fa-star {
    color: #b0b0b0;
    transition: color 0.2s;
}

.song-item .song-rating .fa-star.active {
    color: #ffc107;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #3a3a3a;
    border-top: 1px solid #4a4a4a;
    color: #e0e0e0;
}

.player-controls i {
    font-size: 24px;
    margin: 0 10px;
    cursor: pointer;
    color: #e0e0e0;
    transition: color 0.2s;
}

.player-controls i:hover {
    color: #007bff;
}

.playback-bar {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 20px;
}

.playback-bar .current-time,
.playback-bar .total-time {
    font-size: 14px;
    color: #b0b0b0;
}

.playback-bar .progress-bar {
    flex: 1;
    height: 5px;
    background-color: #555;
    border-radius: 5px;
    margin: 0 10px;
    cursor: pointer;
    position: relative; /* 添加相对定位 */
}

.playback-bar .progress {
    height: 100%;
    width: 0%;
    background-color: #007bff;
    border-radius: 5px;
}

.seek-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none; /* 默认隐藏 */
    pointer-events: none; /* 不影响进度条点击事件 */
}

.volume-control {
    display: flex;
    align-items: center;
}

.volume-control i {
    font-size: 20px;
    margin: 0 5px;
    color: #e0e0e0;
    transition: all 0.2s ease;
}

.volume-control .volume-slider {
    width: 100px;
    -webkit-appearance: none;
    appearance: none;
    appearance: none;
    height: 5px;
    background: #555;
    border-radius: 2.5px;
    outline: none;
    cursor: pointer;
}

.volume-control .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

.volume-control .volume-slider::-moz-range-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    body {
        padding: 0 0 60px 0; /* 移除左右padding，底部留出footer的高度 */
    }
    
    .container {
        width: 100%;
        height: 100dvh;
        max-width: 100%;
        border-radius: 0;
        overflow: hidden; /* 禁止container滚动 */
    }
    
    /* 隐藏头部 */
    header {
        display: none;
    }
    
    main {
        flex-direction: column;
        overflow-y: auto; /* 允许main内部滚动 */
        flex: 1;
        height: calc(100dvh - 160px); /* 减去footer(60px)和album-info(100px)的高度 */
    }
    
    .album-info {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #4a4a4a;
        padding: 10px 15px;
        box-sizing: border-box;
        /* 移动端顶部按钮栏 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100px; /* 增加高度以容纳两行按钮 */
        background-color: #333;
    }
    
    /* 隐藏专辑封面和歌曲信息 */
    .album-info .album-cover,
    .album-info .album-info-text,
    .album-info .info-details {
        display: none;
    }
    
    /* 显示歌单按钮组 */
    .album-info .playlist-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 5px 0;
        justify-content: center;
        width: 100%;
    }
    
    /* 显示功能按钮组 */
    .album-info .button-group {
        display: flex;
        gap: 10px;
        margin: 5px 0;
        justify-content: center;
        width: 100%;
    }
    
    /* 移动端按钮样式优化 */
    .album-info .playlist-btn {
        padding: 8px 12px;
        font-size: 16px;
        min-width: 40px;
        border-radius: 6px;
        background-color: #444;
        color: #fff;
        border: 1px solid #666;
    }
    
    .album-info .playlist-btn.active {
        background-color: #007bff;
        border-color: #007bff;
    }
    
    .album-info .buy-button {
        padding: 8px 12px;
        font-size: 16px;
        min-width: 40px;
        border-radius: 6px;
        background-color: #444;
        color: #fff;
        border: 1px solid #666;
        border: none;
    }
    
    .playlist {
        width: 100%;
        box-sizing: border-box;
        max-height: none; /* 移除固定高度限制 */
        flex: 1; /* 允许其填充剩余空间 */
    }
    
    .song-title {
        max-width: 200px;
    }
    
    footer {
        flex-wrap: wrap;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px; /* 固定高度 */
        box-sizing: border-box;
    }
    
    .playback-bar {
        order: 1;
        width: 100%;
        margin: 10px 0;
    }
    
    .player-controls {
        order: 0;
    }
    
    .volume-control {
        display: none;
    }
    /* 删除重复的移动端适配样式 */
    /*
    @media screen and (max-width: 768px) {
        body {
            padding: 0; 
        }
        
        .container {
            width: 100%;
            height: 100dvh;
            max-width: 100%;
            border-radius: 0;
            overflow: hidden; 
        }
        
        header {
            display: none;
        }
        
        main {
            flex-direction: column;
            overflow-y: auto; 
            flex: 1;
            height: calc(100dvh - 120px); 
        }
        
        .album-info {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid #4a4a4a;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 80px; 
        }
        
        .album-info .info-details,
        .album-info .buy-button {
            display: none;
        }
        
        .album-info h2,
        .album-info p {
            margin: 0;
        }
        
        .album-cover {
            width: 60px;
            height: 60px;
            margin-bottom: 0;
            margin-right: 15px;
        }
        
        .album-info-text {
            flex: 1;
        }
        
        .playlist {
            width: 100%;
            box-sizing: border-box;
            max-height: none; 
            flex: 1; 
        }
        
        .song-title {
            max-width: 200px;
        }
        
        footer {
            flex-wrap: wrap;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px; 
            box-sizing: border-box;
        }
        
        .playback-bar {
            order: 1;
            width: 100%;
            margin: 10px 0;
        }
        
        .player-controls {
            order: 0;
        }
        
        .volume-control {
            display: none;
        }
        body {
            padding-bottom: 40px; 
        }
        
        .container {
            width: 100%;
            height: 100dvh;
            max-width: 100%;
            border-radius: 0;
        }
        
        header {
            display: none;
        }
        
        main {
            flex-direction: column;
            overflow-y: auto;
            flex: 1;
            height: calc(100dvh - 120px);
        }
        
        .album-info {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid #4a4a4a;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 80px;
        }
        
        .album-info .info-details,
        .album-info .buy-button {
            display: none;
        }
        
        .album-info h2,
        .album-info p {
            margin: 0;
        }
        
        .album-cover {
            width: 60px;
            height: 60px;
            margin-bottom: 0;
            margin-right: 15px;
        }
        
        .album-info-text {
            flex: 1;
        }
        
        .playlist {
            width: 100%;
            box-sizing: border-box;
            max-height: none;
            flex: 1;
        }
        
        .song-title {
            max-width: 200px;
        }
        
        footer {
            flex-wrap: wrap;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            box-sizing: border-box;
        }
        
        .playback-bar {
            order: 1;
            width: 100%;
            margin: 10px 0;
        }
        
        .player-controls {
            order: 0;
        }
        
        .volume-control {
            display: none;
        }
    }
    */
}