/* 亮色样式 - 整合深色新增内容版 */

/* 全局重置：消除默认样式差异，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", "PingFang SC", "Helvetica Neue", sans-serif;
}

/* 根元素变量：统一管理简约亮色主题样式，保持简洁配色 */
:root {
    --header-bg: #ffffff; /* 顶栏背景色（纯白简约） */
    --text-color: #2c3e50; /* 普通文字色（柔和深灰） */
    --text-active: #1a1a1a; /* 高亮文字色（Logo主标题） */
    --text-placeholder: #95a5a6; /* 搜索框占位符文字色 */
    --border-color: #e1e8ed; /* 边框色（清新淡雅） */
    --shadow-color: rgba(0, 0, 0, 0.06); /* 轻微阴影，增加层次感 */
    --search-bg: #f7f9fa; /* 搜索框背景色（淡灰） */
    /* 简洁下拉菜单变量 */
    --dropdown-bg: #ffffff; /* 下拉菜单背景色（纯白） */
    --dropdown-hover-bg: #f0f4f8; /* 菜单项悬停背景色（淡蓝灰） */
    --dropdown-border: #e1e8ed; /* 下拉菜单边框色（清新淡雅） */
    --dropdown-column-title-color: #1a1a1a; /* 列标题文字色（深黑） */
    --dropdown-item-color: #4a5568; /* 菜单项文字色（中灰） */
    --dropdown-item-hover-color: #1a1a1a; /* 菜单项悬停文字色（深黑） */
    --dropdown-title-icon-color: #7b8794; /* 大分区标题图标色（中性灰） */
    --hover-blue: #3498db; /* 普通按钮悬停蓝色（明亮） */
    --select-hover-accent: #5dade2; /* 选中态悬停强调色（浅蓝） */
    /* 动画变量：控制速度 */
    --slow-duration: 0.6s; /* 慢速展开/收回动画时长 */
    --fast-duration: 0.2s; /* 快速渐隐动画时长（快速切换时） */
    --player-animation-duration: 0.3s; /* 播放器切换动画时长 */
}

/* 引入华文行楷字体（同步深色样式新增） */
@font-face {
  /* 给字体起个名字（自定义，比如叫myFont） */
  font-family: 'EnglishFont';
  /* 字体文件路径：从CSS文件所在目录指向fonts/a.ttf */
  src: url('../../media/fonts/CascadiaCode_VTT.ttf') format('truetype');
  /* 可选：字体权重/样式，保持默认即可 */
  font-weight: normal;
  font-style: normal;
  /* 可选：提升加载性能，优先使用本地已安装的同名字体 */
  font-display: swap;
}

@font-face {
  /* 给字体起个名字（自定义，比如叫myFont） */
  font-family: 'ChineseFont';
  /* 字体文件路径：从CSS文件所在目录指向fonts/a.ttf */
  src: url('../../media/fonts/STXINGKA.TTF') format('truetype');
  /* 可选：字体权重/样式，保持默认即可 */
  font-weight: normal;
  font-style: normal;
  /* 可选：提升加载性能，优先使用本地已安装的同名字体 */
  font-display: swap;
}

/* 页面主体样式：避免内容被固定顶栏遮挡 */
body {
    background-color: #f5f7fa;
    color: var(--text-color);
    padding-top: 72px; /* 与顶栏高度一致 */
}

/* 顶栏核心样式：固定顶部+三栏布局（Logo左-导航中-搜索右） */
.hea {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px; /* 简约大气的顶栏高度 */
    background-color: var(--header-bg);
    display: flex;
    align-items: center;
    justify-content: space-between; /* 三栏分布核心 */
    padding: 0 24px; /* 左右留白，避免内容贴边 */
    border-bottom: 1px solid var(--border-color); /* 底部细边框，简约分隔 */
    box-shadow: 0 1px 3px var(--shadow-color); /* 轻微阴影，不厚重 */
    z-index: 1000; /* 防止被其他内容覆盖 */
}

/* Logo区域：图片+文字横向排列，垂直居中 */
.hea-logo {
    display: flex;
    align-items: center; /* 图片与文字容器垂直居中 */
    gap: 12px; /* 图片与文字的间距，简约不拥挤 */
}

/* 文字容器：纵向排列（碧海博客 + BIHAI BLOG） */
.logo-text-group {
    display: flex;
    flex-direction: column; /* 两行文字垂直换行 */
    gap: 2px; /* 两行文字间距，紧凑简约 */
    justify-content: center; /* 文字在容器内垂直居中 */
}

/* Logo主标题样式 */
.hea-text {
    font-size: 20px;
    font-weight: 600; /* 适度加粗，突出主标题 */
    color: var(--text-active);
    letter-spacing: 1px; /* 轻微字间距，更显整洁 */
    line-height: 1; /* 消除冗余行高，排版紧凑 */
    transform: translateY(2px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Logo副标题样式 */
.hea-subtext {
    font-size: 10px; /* 小号字体，区分主副标题 */
    color: var(--text-placeholder);
    letter-spacing: 0.5px;
    line-height: 1; /* 消除冗余行高 */
    transform: translateY(2px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 导航区域：按钮横向排列，垂直居中 */
.hea-nav {
    display: flex;
    align-items: center; /* 按钮垂直居中 */
    gap: 24px; /* 按钮之间间距，简约均匀 */
    position: relative; /* 为下拉菜单提供定位上下文 */
}

/* 导航按钮通用样式：无交互效果，简约整洁 */
.hea-btn {
    background-color: transparent; /* 透明背景，简约风格 */
    color: var(--text-color);
    border: none; /* 去掉默认边框 */
    outline: none; /* 去掉聚焦轮廓 */
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px; /* 合适内边距，保证视觉均衡 */
    cursor: default; /* 去掉手型光标，无交互提示 */
    line-height: 1;
    text-align: center;
    border-radius: 4px; /* 轻微圆角，现代感 */
    transition: color 0.3s ease, background-color 0.3s ease; /* 加入颜色过渡动画 */
}

/* 普通按钮悬停样式：文字变为蓝色，背景淡蓝，仅对非选中态生效 */
.hea-btn:not(.hea-btn-select):hover {
    color: var(--hover-blue); /* 悬停变蓝字 */
    background-color: rgba(52, 152, 219, 0.08); /* 淡蓝背景 */
    cursor: pointer; /* 恢复手型光标，提示用户可交互 */
}

.hea-btn-vip {
    background-color: transparent; /* 透明背景，简约风格 */
    color: var(--text-color);
    border: none; /* 去掉默认边框 */
    outline: none; /* 去掉聚焦轮廓 */
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px; /* 合适内边距，保证视觉均衡 */
    cursor: default; /* 去掉手型光标，无交互提示 */
    line-height: 1;
    text-align: center;
    border-radius: 4px; /* 轻微圆角，现代感 */
    transition: color 0.3s ease, background-color 0.3s ease; /* 加入颜色过渡动画 */
}

/* VIP按钮悬停样式：金色主题（同步深色样式调整） */
.hea-btn-vip:not(.hea-btn-select):hover {
    color: #ffb300; /* 悬停变金色（适配亮色主题） */
    cursor: pointer; /* 恢复手型光标 */
}

/* 导航项容器（包含按钮和下拉菜单）- 增加鼠标进出监听类 */
.hea-nav > div {
    position: relative; /* 为下拉菜单提供定位上下文 */
    --mouse-leave-time: 0;
}

/* -------------------------- 智能动画下拉菜单（慢速展开/收回+快速切换渐隐） -------------------------- */
/* 一级下拉菜单：默认双列布局，简洁规整 */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: 8px; /* 现代圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
    display: flex;
    gap: 0;
    min-width: 440px; /* 双列默认宽度，保证布局规整 */
    z-index: 1001;
    visibility: hidden;
    max-height: 0; /* 初始高度为0，隐藏内容 */
    overflow: hidden;
    opacity: 1; /* 正常状态下不渐隐，仅快速切换时改变 */
    /* 默认慢速动画：仅过渡max-height（上下展开/收回） */
    transition: max-height var(--slow-duration) ease-in-out,
                visibility 0s linear var(--slow-duration); /* 延迟隐藏，等待高度过渡完成 */
}

/* 单列下拉菜单样式（适用于内容较少的导航项，无标题更简洁） */
.dropdown-menu.single-column {
    min-width: 220px;
    max-width: 300px;
}

/* 下拉菜单列容器：双列均分，布局清晰 */
.dropdown-column {
    flex: 1;
    padding: 16px 0;
    border-right: 1px solid var(--dropdown-border); /* 列之间分隔线，清晰区分 */
}

/* 单列模式下的全宽列（取消分隔线，无标题更简洁） */
.dropdown-column.full-width {
    border-right: none;
    padding: 16px;
    width: 100%;
}

/* 最后一列取消右侧分隔线 */
.dropdown-menu > .dropdown-column:last-child {
    border-right: none;
}

/* 列标题样式：仅大分区显示，带图标（简洁大气） */
.dropdown-column-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dropdown-column-title-color);
    padding: 0 20px 12px 20px;
    margin: 0;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px; /* 图标与标题间距，紧凑简洁 */
}

/* 大分区标题图标样式 */
.dropdown-column-title i {
    font-size: 14px;
    color: var(--dropdown-title-icon-color);
    width: 16px;
    text-align: center;
}

/* 下拉菜单项样式：无图标，简洁规整 */
.dropdown-item {
    display: block; /* 取消flex，纯文字更简洁 */
    padding: 10px 20px;
    color: var(--dropdown-item-color);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
    transition: all 0.2s ease;
    white-space: nowrap;
    border-radius: 4px;
    margin: 0 8px;
}

/* 菜单项悬停效果：柔和背景变化 */
.dropdown-item:hover {
    background-color: var(--dropdown-hover-bg);
    color: var(--dropdown-item-hover-color);
}

/* 1. 正常状态：鼠标悬停 - 慢速向下展开 */
.hea-nav > div:hover > .dropdown-menu {
    visibility: visible;
    max-height: 500px; /* 足够大的高度，容纳所有内容 */
    transition: max-height var(--slow-duration) ease-in-out,
                visibility 0s linear 0s; /* 立即显示，同步展开高度 */
}

/* 2. 正常状态：鼠标移开 - 慢速向上收回（无渐隐） */
.hea-nav > div:not(:hover) > .dropdown-menu {
    max-height: 0;
    visibility: hidden;
    transition: max-height var(--slow-duration) ease-in-out,
                visibility 0s linear var(--slow-duration);
}

/* 3. 快速切换状态：快速渐隐动画 */
.hea-nav > div:hover + div > .dropdown-menu,
.hea-nav > div:hover ~ div > .dropdown-menu,
.hea-nav > div:has(+ div:hover) > .dropdown-menu,
.hea-nav > div:has(~ div:hover) > .dropdown-menu {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--fast-duration) ease-in-out,
                opacity var(--fast-duration) ease-in-out,
                visibility 0s linear 0s;
}

/* ---------------------------------------------------------------------------------------- */

/* 选中态按钮样式 */
.hea-btn-select {
    font-weight: 600;
    color: var(--text-active);
    position: relative;
    transition: background-color 0.3s ease, border-radius 0.3s ease;
    padding: 8px 12px;
}

/* 用伪元素实现底部蓝色下划线 */
.hea-btn-select::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
    height: 3px;
    background-color: var(--hover-blue);
    border-radius: 1.5px;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease, background-color 0.3s ease, height 0.3s ease;
}

/* 第一个按钮（选中态）悬停时下划线变化 */
.hea-btn-select:first-child:hover::after {
    width: 95%;
    background-color: var(--select-hover-accent);
    height: 3px;
}

/* 右侧功能区：搜索框容器，垂直居中 */
.hea-actions {
    display: flex;
    align-items: center;
    gap: 16px; /* 预留间距，后续扩展不拥挤 */
}

/* 搜索框组件：一体化简约样式 */
.hea-search {
    position: relative;
    width: 240px; /* 搜索框宽度，简约适中 */
}

/* 搜索输入框样式 */
.hea-search-input {
    width: 100%;
    height: 36px;
    background-color: var(--search-bg);
    color: var(--text-active);
    border: 1px solid var(--border-color);
    border-radius: 18px; /* 圆形搜索框，简约美观 */
    padding: 0 16px 0 40px; /* 左侧预留搜索图标位置 */
    outline: none; /* 去掉聚焦轮廓 */
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* 搜索框聚焦效果 */
.hea-search-input:focus {
    border-color: var(--hover-blue);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    background-color: #ffffff;
}

/* 搜索框占位符文字样式 */
.hea-search-input::placeholder {
    color: var(--text-placeholder);
    font-size: 13px;
}

/* 搜索按钮样式：简约图标 */
.hea-search-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: var(--text-placeholder);
    border: none;
    outline: none;
    font-size: 14px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 手型光标提示可点击 */
    transition: color 0.2s ease;
}

/* 搜索按钮悬停效果 */
.hea-search-btn:hover {
    color: var(--hover-blue);
}

/* 页脚样式 */
footer {
    background-color: var(--header-bg);
    padding: 20px 24px;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-placeholder);
    font-size: 14px;
}

/* 动画关键帧：保留备用 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 使用关键帧动画的类（可选） */
.fade-in-down {
    animation: fadeInDown 0.3s ease forwards;
}

.fade-in-right {
    animation: fadeInRight 0.3s ease forwards;
}

/* 关键修改：播放器切换容器，用于定位图标和播放器 */
.player-toggle-wrapper {
    position: absolute;
    top: 96px;
    left: 24px;
    z-index: 999;
}

/* 播放器样式：优化收起动画，视觉更顺滑（保留高度，仅收缩宽度+渐变透明） */
.player {
    position: relative;
    width: 400px;
    height: 225px; /* 固定高度，收起时不消失，视觉更稳定 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    /* 核心：优化过渡动画，仅宽度+透明度+阴影变化，更细腻 */
    transition: 
        width var(--player-animation-duration) cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity var(--player-animation-duration) cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow var(--player-animation-duration) cubic-bezier(0.25, 0.1, 0.25, 1),
        transform 0s; /* 取消平移，避免错位 */
    overflow: hidden;
    /* 与图标保持间距 */
    margin-left: 20px;
}

/* 播放器展开状态（默认） */
.player--open {
    opacity: 1;
    width: 400px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 播放器关闭状态（优化后）：仅收缩宽度+透明，保留高度，视觉更顺滑 */
.player--closed {
    opacity: 0;
    width: 0; /* 仅收缩宽度，高度不变 */
    box-shadow: none; /* 隐藏阴影，增强收起质感 */
}

/* 播放器图标样式：固定位置，无偏移，实现柔和过渡+旋转动画（同步深色新增） */
.playericon {
    /* 基础样式：图标大小、颜色，适配亮色半透明播放器 */
    font-size: 1rem; /* 图标尺寸适中，不突兀 */
    color: rgba(44, 62, 80, 0.75); /* 深灰色，与播放器背景协调 */
    /* 布局核心：固定位置，绝对定位不偏移 */
    position: absolute;
    top: 15px;
    left: 0;
    /* 可选：图标样式优化，提升质感 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* 轻微文字阴影，增强层次感 */
    /* 核心优化：添加所有需要的过渡属性，确保切换柔和不生硬 */
    transition: 
        color 0.2s ease-in-out,
        transform 0.2s ease-in-out,
        text-shadow 0.2s ease-in-out,
        opacity 0.2s ease-in-out; /* 透明度过渡，实现柔和切换 */
    cursor: pointer; /* 手型光标，提示可点击 */
    z-index: 1000; /* 确保图标在最上层 */
    opacity: 1; /* 非右箭头模式默认不透明 */
    transform: scale(1); /* 仅缩放，无平移，固定位置 */
}

/* 鼠标悬浮在图标上时：仅放大，无偏移，保持位置固定 */
.playericon:hover {
    color: var(--hover-blue); /* 悬浮时变为蓝色，更醒目 */
    transform: scale(1.1); /* 仅放大，无平移，确保在同一位置 */
    text-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); /* 悬浮时阴影加重，层次感更强 */
}

/* 右箭头模式：透明度0.5，保持固定位置，过渡柔和（兼容原有逻辑） */
.playericon.fa-chevron-right {
    opacity: 0.5; /* 右箭头模式半透明 */
    transform: scale(1); /* 固定缩放，无偏移 */
}

/* 非右箭头模式（左箭头）：透明度1，保持固定位置 */
.playericon.fa-chevron-left {
    opacity: 1; /* 非右箭头模式不透明 */
    transform: scale(1); /* 固定缩放，无偏移 */
}

/* ===== 新增旋转动画相关样式（同步深色新增） ===== */
/* 旋转180°的类（用于图标方向变化） */
.playericon.rotated {
    transform: rotate(180deg); /* 旋转180°，使左箭头变为右箭头 */
}

/* 当图标处于旋转状态时悬停，需要同时保持旋转和缩放 */
.playericon.rotated:hover {
    transform: rotate(180deg) scale(1.1); /* 旋转180°并放大 */
    color: var(--hover-blue); /* 保持悬浮蓝色 */
}

.cover {
    position:absolute; 
    top:10px; 
    left:10px; 
    width:130px; 
    height:130px;
}

.song-name {
    position: absolute; /* 相对于播放器定位 */
    top: 19%; /* 垂直 */
    left: 270px; /* 水平居中（先移到50%位置） */
    transform: translate(-50%, -50%); /* 真正居中（抵消自身宽高的50%） */
    
    /* 2. 基础：显示模式+宽高，确保文字可见 */
    display: block; /* 块级元素，支持margin/width */
    width: 90%; /* 限制宽度，避免超出播放器 */
    text-align: center; /* 文字水平居中 */
    
    /* 3. 层级：确保在播放器上方（z-index生效） */
    z-index: 2000; /* 高于播放器，低于图标（1000）？建议调整为999，避免遮挡图标 */
    
    /* 4. 样式适配：深色主题+文字不换行 */
    color: var(--text-color); /* 白色文字，适配播放器深色背景 */
    font-family: 
        "Cascadia Code", "EnglishFont", "Monaco", "Consolas",
        "华文行楷", "STXingkai", "ChineseFont", "Microsoft YaHei", "PingFang SC",
        sans-serif;
    font-size: 39px;
    font-weight: normal;
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超长文字显示省略号 */
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(22, 00, 22, 0.8); /* 轻微白色阴影，增强可读性 */
}

.song-info {
    position: absolute; /* 相对于播放器定位 */
    top: 39%; /* 垂直 */
    left: 270px; /* 水平居中（先移到50%位置） */
    transform: translate(-50%, -50%); /* 真正居中（抵消自身宽高的50%） */
    
    /* 2. 基础：显示模式+宽高，确保文字可见 */
    display: block; /* 块级元素，支持margin/width */
    width: 90%; /* 限制宽度，避免超出播放器 */
    text-align: center; /* 文字水平居中 */
    
    /* 3. 层级：确保在播放器上方（z-index生效） */
    z-index: 2000; /* 高于播放器，低于图标（1000）？建议调整为999，避免遮挡图标 */
    
    /* 4. 样式适配：深色主题+文字不换行 */
    color: var(--text-color); /* 白色文字，适配播放器深色背景 */
    font-family: "华文中宋";
    font-size: 16px;
    font-weight: normal;
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超长文字显示省略号 */
    letter-spacing: 0.5px;
}

.lyrics {
    position: absolute; /* 相对于播放器定位 */
    top: 56%; /* 垂直 */
    left: 270px; /* 水平居中（先移到50%位置） */
    transform: translate(-50%, -50%); /* 真正居中（抵消自身宽高的50%） */
    
    /* 2. 基础：显示模式+宽高，确保文字可见 */
    display: block; /* 块级元素，支持margin/width */
    width: 90%; /* 限制宽度，避免超出播放器 */
    text-align: center; /* 文字水平居中 */
     
    /* 3. 层级：确保在播放器上方（z-index生效） */
    z-index: 2000; /* 高于播放器，低于图标（1000）？建议调整为999，避免遮挡图标 */
    
    /* 4. 样式适配：深色主题+文字不换行 */
    color: var(--text-color); /* 白色文字，适配播放器深色背景 */
    font-family: "楷体";
    font-size: 24px;
    font-weight: normal;
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超长文字显示省略号 */
    letter-spacing: 0.5px;    
}

/* 外层进度条容器：负责整体居中，作为子元素的定位参考 */
.audio-progress-wrapper {
    position: absolute; 
    left: 200px;          /* 水平居中第一步：右移到页面50%位置 */
    top: 71%;           /* 垂直定位到页面74%位置 */
    width: 310px;
    height: 7px;
    transform: translateX(-50%);  /* 水平居中第二步：左移自身50%（仅水平，不垂直） */
    border-radius: 3.5px;
    background-color: #8F8F8F;
    /* 关键：让子元素基于父元素定位 */
    overflow: hidden;   /* 防止进度条超出父容器 */
}

/* 已播放进度条：在父元素内部填充，无需再做页面居中 */
.already-play {
    position: absolute; 
    left: 0;            /* 从父元素左侧开始 */
    top: 0;             /* 从父元素顶部开始，垂直完全对齐 */
    width: 40.3022670025%;         /* 已播放50% */
    height: 100%;       /* 高度和父元素一致，避免手动写7px */
    border-radius: 3.5px 0 0 3.5px;
    background-color: #030303;
}

.already-play-time {
    position: absolute;
    left: 10px;
    top: 71%;
    font-size:10px;
    transform: translateY(-25%);
}

.all-play-time {
    position: absolute;
    left: calc(100% - 10px);
    top: 71%;
    font-size:10px;
  transform: translate(-100%, -25%); 
}

.play {
    /* 1. 位置大小 */
    position: absolute;
    top: 80%;
    left: 200px;
    transform: translate(-50%);
    width: 60px;
    height: 30px;

    /* 2. 颜色样式 */
    border-radius: 15px; 
    background: #0F0F0F;
    cursor: pointer;
    z-index: 1001;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 18px
}

.backward {
    /* 1. 位置大小 */
    position: absolute;
    top: 80%;
    left: 140px;
    transform: translate(-50%);
    width: 50px;
    height: 30px;

    /* 2. 颜色样式 */
    border-radius: 15px; 
    background: transparent;
    cursor: pointer;
    z-index: 1001;

    /* 3. 移除默认边框 */
    border: none;
    border-style: none;
    box-shadow: none;
    outline: none;
    padding: 0;
}

.backward-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0f0f0f;
    font-size: 20px;
}

.forward {
    /* 1. 位置大小 */
    position: absolute;
    top: 80%;
    left: 260px;
    transform: translate(-50%);
    width: 50px;
    height: 30px;

    /* 2. 颜色样式 */
    border-radius: 15px; 
    background: transparent;
    cursor: pointer;
    z-index: 1001;

    /* 3. 移除默认边框 */
    border: none;
    border-style: none;
    box-shadow: none;
    outline: none;
    padding: 0;
}

.forward-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0f0f0f;
    font-size: 20px;
}

.player-setting {
    /* 1. 位置大小 */
    position: absolute;
    top: 80%;
    left: 100px;
    transform: translate(-50%);
    width: 50px;
    height: 30px;

    /* 2. 颜色样式 */
    border-radius: 15px; 
    background: transparent;
    cursor: pointer;
    z-index: 1001;

    /* 3. 移除默认边框 */
    border: none;
    border-style: none;
    box-shadow: none;
    outline: none;
    padding: 0;
}

.player-setting-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0f0f0f;
    font-size: 20px;
}

.music-list {
    /* 1. 位置大小 */
    position: absolute;
    top: 80%;
    left: 300px;
    transform: translate(-50%);
    width: 50px;
    height: 30px;

    /* 2. 颜色样式 */
    border-radius: 15px; 
    background: transparent;
    cursor: pointer;
    z-index: 1001;

    /* 3. 移除默认边框 */
    border: none;
    border-style: none;
    box-shadow: none;
    outline: none;
    padding: 0;
}

.music-list-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0f0f0f;
    font-size: 20px;
}