body {
    font-family: 'Arial', 'Helvetica', 'sans-serif'; /* 设置字体，优先选择 Arial 和 Helvetica，默认 sans-serif */
    font-size: 14px; /* 控制全局字体大小 */
    background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
    display: flex; /* 使用 flexbox 居中对齐内容 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 设置视口高度为100% */
    margin: 0; /* 移除默认外边距 */
}

.player {
    background-color: #ffffff; /* 设置播放器背景色为白色 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    padding: 12px; /* 内边距 */
}

.cover, .cover img {
    width: 100%; /* 图片宽度100% */
    height: 200px; /* 图片高度200px */
    background-image: url('assets/frxxz.jpg'); /* 设置背景图片 */
    background-size: cover; /* 背景图片适应容器 */
    background-position: center; /* 背景图片居中显示 */
    border-radius: 5px; /* 圆角边框 */
    margin-bottom: 15px; /* 下边距 */
}

.song-info {
    letter-spacing: 0.5px; /* 增加字母间距 */
    word-spacing: 1px; /* 增加单词间距 */
    margin-bottom: 6px; /* 设置下边距 */
    text-align: center; /* 文本居中对齐 */
    font-size: 16px; /* 设置字体大小 */
    line-height: 1.2; /* 设置行高 */
    white-space: nowrap; /* 避免换行 */
    overflow: hidden; /* 隐藏超出内容 */
}

/* 控制面板容器 */
.controls {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 元素之间均匀分布 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 12px; /* 下边距 */
    flex-wrap: nowrap; /* 不允许换行 */
    gap: 6px; /* 按钮之间的间距 */
}

/* 控制按钮及速度选择框样式 */
.btn, #speedSelect {
    background-color: #4CAF50; /* 设置按钮背景色为绿色 */
    border: none; /* 无边框 */
    color: white; /* 按钮文本颜色为白色 */
    padding: 6px 8px; /* 内边距 */
    text-align: center; /* 文本居中 */
    font-size: 12px; /* 字体大小 */
    margin: 5px 0; /* 上下边距 */
    cursor: pointer; /* 鼠标悬停时显示手形 */
    border-radius: 5px; /* 圆角边框 */
    transition: background-color 0.3s, box-shadow 0.3s; /* 设置按钮颜色和阴影的过渡效果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 按钮阴影效果 */
    height: 32px; /* 设置按钮高度 */
    width: 78px; /* 设置按钮宽度 */
    display: flex; /* flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.btn i, #speedSelect i {
    font-size: 14px; /* 图标字体大小 */
    vertical-align: middle; /* 图标垂直居中 */
}

/* 按钮悬停及点击时的效果 */
.btn:hover, #speedSelect:hover {
    background-color: #45a049; /* 悬停时按钮背景色变浅 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

.btn:active, #speedSelect:active {
    background-color: #388E3C; /* 点击时按钮背景色变深 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 减少阴影 */
    transform: translateY(1px); /* 模拟按钮按下的效果 */
}

/* 播放进度条样式 */
.progress {
    width: 100%; /* 进度条宽度占满父容器 */
    height: 6px; /* 进度条高度 */
    background-color: #ddd; /* 进度条背景色 */
    border-radius: 5px; /* 圆角边框 */
    margin-bottom: 10px; /* 下边距 */
    cursor: pointer; /* 鼠标悬停时显示手形 */
}

.progress-bar {
    height: 100%; /* 进度条填充部分高度 */
    background-color: #4CAF50; /* 进度条填充部分颜色 */
    border-radius: 5px; /* 圆角边框 */
    width: 0; /* 初始宽度为0 */
}

/* 时间显示区域样式 */
.time {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 两端对齐 */
    font-size: 12px; /* 字体大小 */
    color: #777; /* 字体颜色 */
    margin-bottom: 15px; /* 下边距 */
}

/* 播放列表项样式 */
.playlist-item {
    padding: 10px 20px; /* 内边距 */
    cursor: pointer; /* 鼠标悬停时显示手形 */
    transition: background-color 0.3s; /* 背景色的过渡效果 */
    position: relative; /* 相对定位用于分割线 */
    border-bottom: none; /* 移除默认的下边框 */
}

/* 播放列表分割线样式 */
.playlist-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 0.5px; /* 分割线高度 */
    background: repeating-linear-gradient(
        to right,
        #ccc,
        #ccc 3px,
        transparent 3px,
        transparent 6px,
        #ccc 9px,
        #ccc 10px,
        transparent 10px
    ); /* 使用重复线性渐变实现虚线效果 */
}

/* 鼠标悬停时播放列表项的背景色变化 */
.playlist-item:hover {
    background-color: #f0f0f0;
}

/* 正在播放的歌曲的样式 */
.playlist-item.active {
    background-color: #e0e0e0; /* 设置背景色 */
    font-weight: bold; /* 加粗文字 */
}

/* 分页部分样式 */
.pagination {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-top: 10px; /* 上边距 */
}

.pagination button, .pagination span {
    margin: 0 5px; /* 间距 */
    padding: 0px 4px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    height: 30px; /* 高度 */
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.pagination span {
    background-color: #f0f0f0; /* 设置背景色 */
    border-radius: 5px; /* 圆角 */
}

/* PC端和移动端的样式差异 */

/* PC端样式 */
@media (min-width: 768px) {
    .player {
        display: flex; /* 使用 flexbox 布局 */
        justify-content: space-between; /* 水平分布 */
        align-items: stretch; /* 纵向拉伸对齐 */
        width: 700px; /* 播放器宽度 */
        max-height: 380px; /* 播放器最大高度 */
        overflow: hidden; /* 隐藏超出内容 */
    }

    .left-section {
        width: 45%; /* 左侧部分宽度 */
        display: flex; /* 使用 flexbox 布局 */
        flex-direction: column; /* 垂直布局 */
        justify-content: space-between; /* 元素之间均匀分布 */
    }

    .right-section {
        width: 50%; /* 右侧部分宽度 */
        display: flex; /* 使用 flexbox 布局 */
        flex-direction: column; /* 垂直布局 */
        justify-content: space-between; /* 元素之间均匀分布 */
    }

    .playlist {
        flex-grow: 1; /* 播放列表伸展填充 */
        min-height: 220px; /* 播放列表最小高度 */
        max-height: 340px; /* 播放列表最大高度 */
        overflow-y: auto; /* 垂直方向自动滚动 */
        border: 1px solid #ddd; /* 边框 */
        border-radius: 5px; /* 圆角边框 */
        margin-bottom: 15px; /* 下边距 */
    }
}

/* 移动端样式 */
@media (max-width: 767px) {
    .player {
        flex-direction: column; /* 垂直布局 */
        width: 90vw; /* 播放器宽度为视口宽度的90% */
        max-height: none; /* 移除最大高度限制 */
    }

    .left-section, .right-section {
        width: 100%; /* 左右部分宽度为100% */
    }

    .playlist {
        height: 200px; /* 播放列表高度 */
        overflow-y: auto; /* 垂直方向自动滚动 */
        border: 1px solid #ddd; /* 边框 */
        border-radius: 5px; /* 圆角边框 */
        min-height: 180px; /* 播放列表最小高度 */
    }

    .btn, #speedSelect {
        width: 70px; /* 按钮宽度 */
        height: 35px; /* 按钮高度 */
        font-size: 11px; /* 按钮字体大小 */
    }
}