/* ==================== 基础样式设置 ==================== */
/* 全局基础样式 - 黑色护眼主题设计 */
/* 功能：重置所有元素的默认边距和内边距，统一盒模型 */
* {
    margin: 0;                  /* 外边距：0像素，消除浏览器默认边距 */
    padding: 0;                 /* 内边距：0像素，消除浏览器默认内边距 */
    box-sizing: border-box;     /* 盒模型：border-box，宽度包含边框和内边距 */
}

/* ==================== 选项卡容器样式 ==================== */
/* 功能：包含选项卡和删除/编辑按钮的容器 */
/* 设计：相对定位，内联块显示，右侧间距 */
.tab-container {
    position: relative;          /* 定位方式：相对定位，为子元素的绝对定位提供参考系 */
    display: inline-block;       /* 显示方式：内联块级元素，既保持行内特性又可设置宽高 */
    margin-right: 5px;          /* 右侧外边距：5像素，选项卡之间的间距 */
}

/* ==================== 选项卡删除按钮样式 ==================== */
/* 功能：选项卡右上角的删除按钮（X按钮） */
/* 设计：圆形红色按钮，悬停时显示，绝对定位 */
.tab-delete-btn {
    position: absolute;           /* 定位方式：绝对定位，相对于.tab-container */
    top: 2px;                    /* 顶部距离：2像素，贴近选项卡顶部 */
    right: -8px;                 /* 右侧距离：-8像素，稍微超出选项卡边界 */
    width: 16px;                 /* 宽度：16像素，小圆形按钮 */
    height: 16px;                /* 高度：16像素，保持圆形 */
    border: none;                /* 边框：无边框 */
    border-radius: 50%;         /* 圆角：50%，形成圆形 */
    background: #ff4444;         /* 背景色：红色 (#ff4444)，表示删除操作 */
    color: white;                /* 文字颜色：白色，提高对比度 */
    font-size: 12px;             /* 字体大小：12像素，适合小按钮 */
    font-weight: bold;           /* 字体粗细：粗体，更醒目 */
    cursor: pointer;             /* 鼠标指针：手型，表示可点击 */
    display: none;               /* 显示方式：默认隐藏 */
    align-items: center;         /* 垂直对齐：居中对齐（flex布局） */
    justify-content: center;      /* 水平对齐：居中对齐（flex布局） */
    padding: 0;                  /* 内边距：0，避免影响圆形形状 */
    line-height: 1;              /* 行高：1，精确控制文字垂直居中 */
}

/* 选项卡删除按钮悬停显示效果 */
.tab-container:hover .tab-delete-btn {
    display: flex;              /* 显示方式：flex布局，当鼠标悬停在选项卡容器时显示删除按钮 */
}

/* 选项卡删除按钮悬停颜色变化 */
.tab-delete-btn:hover {
    background: #cc0000;        /* 背景颜色：更深的红色 (#cc0000)，悬停时颜色加深 */
}

/* ==================== 选项卡编辑按钮样式 ==================== */
/* 功能：选项卡右上角的编辑按钮（铅笔图标按钮） */
/* 设计：圆形青绿色按钮，悬停时显示，位于删除按钮下方 */
.tab-edit-btn {
    position: absolute;           /* 定位方式：绝对定位，相对于.tab-container */
    top: 20px;                   /* 顶部距离：20像素，位于删除按钮下方 */
    right: -8px;                 /* 右侧距离：-8像素，稍微超出选项卡边界 */
    width: 16px;                 /* 宽度：16像素，小圆形按钮 */
    height: 16px;                /* 高度：16像素，保持圆形 */
    border: none;                /* 边框：无边框 */
    border-radius: 50%;         /* 圆角：50%，形成圆形 */
    background: #4ecdc4;         /* 背景色：青绿色 (#4ecdc4)，表示编辑操作 */
    color: white;                /* 文字颜色：白色，提高对比度 */
    font-size: 12px;             /* 字体大小：12像素，适合小按钮 */
    font-weight: bold;           /* 字体粗细：粗体，更醒目 */
    cursor: pointer;             /* 鼠标指针：手型，表示可点击 */
    display: none;               /* 显示方式：默认隐藏 */
    align-items: center;         /* 垂直对齐：居中对齐（flex布局） */
    justify-content: center;      /* 水平对齐：居中对齐（flex布局） */
    padding: 0;                  /* 内边距：0，避免影响圆形形状 */
    line-height: 1;              /* 行高：1，精确控制文字垂直居中 */
}

/* 选项卡编辑按钮悬停显示效果 */
.tab-container:hover .tab-edit-btn {
    display: flex;              /* 显示方式：flex布局，当鼠标悬停在选项卡容器时显示编辑按钮 */
}

/* 选项卡编辑按钮悬停颜色变化 */
.tab-edit-btn:hover {
    background: #44a08d;        /* 背景颜色：更深的青绿色 (#44a08d)，悬停时颜色加深 */
}

/* ==================== 通用按钮样式 ==================== */
.info-btn {
    /* 渐变背景色：从 #17a2b8 到 #138496，135度角度 */
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white; /* 文字颜色为白色 */
     border: 1px solid #222222; /* 边框颜色 */
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    border-radius: 8px; /* 圆角半径8px */
    cursor: pointer; /* 鼠标指针为手型 */
    font-size: 14px; /* 字体大小14px */
    transition: all 0.3s ease; /* 所有属性过渡效果，时长0.3秒，缓动效果 */
}

/* 按钮悬停状态样式 */
.info-btn:hover {
    /* 悬停时渐变背景色变化：从 #138496 到 #0f6674 */
    background: linear-gradient(135deg, #138496 0%, #0f6674 100%);
    transform: translateY(-2px); /* 向上移动2px */
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4); /* 添加阴影效果 */
}

/* ==================== 全局页面样式 ==================== */
body {
    font-family: 'Arial', sans-serif; /* 使用Arial字体，无衬线字体作为后备 */
    /* 深色渐变背景：从 #1a1a1a 到 #2d2d2d */
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    min-height: 100vh; /* 最小高度为100%视口高度 */
    color: #e0e0e0; /* 文字颜色为浅灰色 */
}

/* ==================== 认证页面容器样式 ==================== */
.auth-container {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 最小高度为100%视口高度 */
    padding: 20px; /* 内边距20px */
    background: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
}

/* ==================== 认证表单样式 ==================== */
.auth-form {
    background: #2a2a2a; /* 深灰色背景 */
    padding: 40px; /* 内边距40px */
    border-radius: 15px; /* 圆角半径15px */
    box-shadow: 0 15px 35px rgba(0,0,0,0.5); /* 阴影效果 */
    width: 100%; /* 宽度100% */
    max-width: 400px; /* 最大宽度400px */
    border: 1px solid #444; /* 1px深灰色边框 */
}

/* ==================== 选项卡容器样式 ==================== */
.tab-container {
    position: relative; /* 相对定位 */
    display: inline-block; /* 行内块显示 */
    margin-right: 5px; /* 右边距5px */
}

/* ==================== 选项卡删除按钮样式 ==================== */
.tab-delete-btn {
    position: absolute; /* 绝对定位 */
    top: 2px; /* 距顶部2px */
    right: -8px; /* 距右侧-8px */
    width: 16px; /* 宽度16px */
    height: 16px; /* 高度16px */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形 */
    background: #ff4444; /* 红色背景 */
    color: white; /* 文字颜色白色 */
    font-size: 12px; /* 字体大小12px */
    font-weight: bold; /* 字体粗体 */
    cursor: pointer; /* 鼠标指针为手型 */
    display: none; /* 默认不显示 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 0; /* 无内边距 */
    line-height: 1; /* 行高1 */
}

/* 选项卡容器悬停时显示删除按钮 */
.tab-container:hover .tab-delete-btn {
    display: flex; /* 显示为弹性盒子 */
}

/* 删除按钮悬停状态 */
.tab-delete-btn:hover {
    background: #cc0000; /* 深红色背景 */
}

/* ==================== 认证表单标题样式 ==================== */
.auth-form h1 {
    text-align: center; /* 文字居中 */
    margin-bottom: 30px; /* 底部外边距30px */
    color: #00ff88; /* 亮绿色文字 */
    font-weight: 300; /* 字体重量300 */
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3); /* 文字阴影效果 */
}

/* ==================== 表单组样式 ==================== */
.form-group {
    margin-bottom: 20px; /* 底部外边距20px */
}

.form-group label {
    display: block; /* 块级显示 */
    margin-bottom: 8px; /* 底部外边距8px */
    font-weight: bold; /* 字体粗体 */
    color: #00ff88; /* 亮绿色文字 */
    font-size: 14px; /* 字体大小14px */
}

.form-group input {
    width: 100%; /* 宽度100% */
    padding: 14px; /* 内边距14px */
    background: #1a1a1a; /* 深黑色背景 */
    border: 2px solid #444; /* 2px深灰色边框 */
    border-radius: 8px; /* 圆角半径8px */
    font-size: 16px; /* 字体大小16px */
    color: #e0e0e0; /* 文字颜色浅灰色 */
    transition: all 0.3s ease; /* 所有属性过渡效果 */
}

/* 输入框获取焦点时的状态 */
.form-group input:focus {
    outline: none; /* 无轮廓 */
    border-color: #00ff88; /* 边框颜色变为亮绿色 */
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3); /* 发光效果 */
    background: #222; /* 背景色稍亮 */
}

/* ==================== 主要按钮样式 ==================== */
.btn-primary {
    width: 100%; /* 宽度100% */
    padding: 15px; /* 内边距15px */
    /* 亮绿色渐变背景 */
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
    color: #1a1a1a; /* 深黑色文字 */
    border: none; /* 无边框 */
    border-radius: 8px; /* 圆角半径8px */
    font-size: 16px; /* 字体大小16px */
    font-weight: bold; /* 字体粗体 */
    cursor: pointer; /* 鼠标指针为手型 */
    transition: all 0.3s ease; /* 所有属性过渡效果 */
    text-transform: uppercase; /* 文字大写 */
    letter-spacing: 1px; /* 字母间距1px */
}

/* 主要按钮悬停状态 */
.btn-primary:hover {
    /* 悬停时渐变背景变深 */
    background: linear-gradient(135deg, #00cc66 0%, #00aa44 100%);
    transform: translateY(-2px); /* 向上移动2px */
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4); /* 阴影效果 */
}

/* ==================== 认证页面链接样式 ==================== */
.auth-link {
    text-align: center; /* 文字居中 */
    margin-top: 20px; /* 顶部外边距20px */
}

.auth-link a {
    color: #007bff; /* 蓝色链接 */
    text-decoration: none; /* 无下划线 */
}

.auth-link a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* ==================== 错误消息样式 ==================== */
.error-message {
    background: rgba(255, 0, 64, 0.1); /* 浅红色半透明背景 */
    color: #ff0040; /* 红色文字 */
    padding: 15px; /* 内边距15px */
    border-radius: 8px; /* 圆角半径8px */
    margin-bottom: 20px; /* 底部外边距20px */
    border-left: 4px solid #ff0040; /* 左侧红色边框 */
    border: 1px solid rgba(255, 0, 64, 0.3); /* 半透明红色边框 */
}

/* ==================== 成功消息样式 ==================== */
.success-message {
    background: rgba(0, 255, 136, 0.1); /* 浅绿色半透明背景 */
    color: #00ff88; /* 亮绿色文字 */
    padding: 15px; /* 内边距15px */
    border-radius: 8px; /* 圆角半径8px */
    margin-bottom: 20px; /* 底部外边距20px */
    border-left: 4px solid #00ff88; /* 左侧亮绿色边框 */
    border: 1px solid rgba(0, 255, 136, 0.3); /* 半透明绿色边框 */
}

/* 主界面样式 */
.header {
    background: rgba(26, 26, 26, 0.95); /* 设置背景为深灰色且具有95%不透明度 */
    backdrop-filter: blur(20px); /* 应用20像素的背景模糊效果，创建毛玻璃质感 */
    padding: 10px 20px; /* 设置内边距：上下10像素，左右20像素 */
    display: flex; /* 使用弹性布局（Flexbox） */
    justify-content: space-between; /* 弹性项目在主轴上两端对齐 */
    align-items: center; /* 弹性项目在交叉轴上居中对齐 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.6); /* 添加向下偏移4像素、模糊20像素、黑色且60%不透明的阴影 */
    border-bottom: 1px solid #444; /* 设置底部边框为1像素实线，颜色为深灰色(#444) */
    height: 60px; /* 设置固定高度为60像素 */
}

.header-title {
    font-size: 28px; /* 设置字体大小为28像素 */
    font-weight: bold; /* 设置字体粗细为粗体 */
    color: #d800a2; /* 设置字体颜色为亮绿色(#00ff88) */
    text-shadow: 0 0 10px rgba(253, 119, 231, 0.3); /* 添加无偏移、15像素模糊、同色系且50%不透明的文字发光阴影 */
}

/* ==================== 用户信息区域 ==================== */
/* 用户信息容器 - 水平布局 */
.user-info {
    display: flex;              /* 弹性布局：水平排列子元素 */
    align-items: center;         /* 垂直对齐：居中对齐 */
    gap: 25px;                   /* 子元素间距：25像素 */
}

/* 欢迎文本样式 */
.welcome-text {
    font-size: 16px;            /* 字体大小：16像素 */
    color: #ccc;                /* 文字颜色：浅灰色 (#ccc) */
}

/* ==================== 存储空间信息 ==================== */
/* 存储信息容器 */
.storage-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #999;
}

/* 存储进度条容器 */
.storage-progress {
    width: 200px;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
}

/* 存储进度条 */
.storage-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00ff88 0%, #4ecdc4 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* 存储进度条容器（新布局） */
.storage-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* 存储文本容器 */
.storage-text-container {
    text-align: center;
    width: 100%;
}

/* 存储空间文本 */
.storage-text {
    font-size: 12px;
    white-space: nowrap;
}

/* 退出按钮样式 */
.btn-logout {
    font-size: 14px;
    color: #ff6b6b;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ff6b6b;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: #ff6b6b;
    color: white;
}

/* 音轨进度总时长显示样式 */
.total-time {
    font-size: 15px;            /* 字体大小：15像素 */
    font-weight: bold;          /* 字体粗细：粗体 */
    color: #c4c4c4;             /* 文字颜色*/
}


/* 音轨进度时间显示样式 */
.current-time {
    font-size: 15px;            /* 字体大小：15像素 */
    font-weight: bold;          /* 字体粗细：粗体 */
    color: #c4c4c4;             /* 文字颜色 */
}

/* 当前时间显示样式 */
.time {
    font-size: 35px;            /* 字体大小：20像素 */
    font-weight: bold;          /* 字体粗细：粗体 */
    color: #df0101;             /* 文字颜色：珊瑚红色 (#ff6b6b) */
}

/* 倒计时显示样式 */
.countdown {
    font-size: 24px;            /* 字体大小：24像素 */
    font-weight: bold;          /* 字体粗细：粗体 */
    color: #c800cf;             /* 文字颜色：青绿色 (#4ecdc4) */
    text-shadow: 0 0 15px rgba(165, 78, 205, 0.5); /* 文字阴影：X偏移0，Y偏移0，模糊15px，透明度50%的青绿色 */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* ==================== 播放器控制区域 ==================== */
/* 播放器主控制面板 */
.player-controls {
    background: rgba(42, 42, 42, 0.9); /* 背景颜色：深灰色半透明 (RGBA: 42,42,42,0.9) */
    margin: 5px;               /* 外边距：5像素 */
    padding: 5px 15px;         /* 内边距：上下5像素，左右15像素 */
    border-radius: 15px;        /* 圆角半径：15像素 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6); /* 盒子阴影：X偏移0，Y偏移8px，模糊25px，透明度60%的黑色 */
    border: 1px solid #555;     /* 边框：1像素实线，深灰色 (#555) */
    display: flex;
    justify-content: space-between;
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 控制行布局 */
.control-row {
    display: flex;              /* 弹性布局：水平排列 */
    align-items: center;        /* 垂直对齐：居中对齐 */
    gap: 12px;                   /* 子元素间距：12像素 */
    flex-wrap: wrap;            /* 弹性换行：允许换行 */
}

/* ==================== 基础按钮样式系统 ==================== */
/* 所有按钮的基础样式 - 黑色主题设计规范 */
/* 设计规范说明：
   - 未激活状态：灰色背景 (#666)
   - 激活状态：橙色背景 (#ff9800) 
   - 切换按钮：保持渐变背景不变
   - 悬停效果：上浮2像素 + 阴影效果 */
.btn {
    width: 130px;                /* 宽度：130像素 */
    height: 40px;               /* 高度：40像素 */
    padding: 12px 18px;          /* 按钮内边距：上下12px，左右18px */
    border: 1px solid #222222; /* 边框颜色 */
    border-radius: 8px;          /* 圆角半径：8像素 */
    cursor: pointer;             /* 鼠标指针：手型指针 */
    font-size: 14px;             /* 字体大小：14像素 */
    font-weight: bold;           /* 字体粗细：粗体 */
    transition: all 0.3s ease;   /* 过渡动画：所有属性0.3秒缓动效果 */
    display: block;              /* 块级显示 */
    margin: 0 auto;              /* 水平居中 */
    text-transform: uppercase;   /* 文本转换：大写字母 */
    letter-spacing: 0.5px;       /* 字母间距：0.5像素 */
    background: #666;            /* 背景颜色：灰色 (#666) - 未激活状态 */
    color: #fff;                 /* 文字颜色：白色 (#fff) */
    margin: 0px 0px; /* 设置外边距：上下0px，左右0px */
}
.btn-logout {
    width: 80px;                /* 宽度：130像素 */
    height: 40px;               /* 高度：40像素 */
    padding: 12px 18px;          /* 按钮内边距：上下12px，左右18px */
    border: none;                /* 边框样式：无边框 */
    border-radius: 8px;          /* 圆角半径：8像素 */
    cursor: pointer;             /* 鼠标指针：手型指针 */
    font-size: 14px;             /* 字体大小：14像素 */
    font-weight: bold;           /* 字体粗细：粗体 */
    transition: all 0.3s ease;   /* 过渡动画：所有属性0.3秒缓动效果 */
    text-transform: uppercase;   /* 文本转换：大写字母 */
    letter-spacing: 0.5px;       /* 字母间距：0.5像素 */
    background: #666;            /* 背景颜色：灰色 (#666) - 未激活状态 */
    color: #fff;                 /* 文字颜色：白色 (#fff) */
    margin: 10px 5px; /* 设置外边距：上下10px，左右5px */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 云端APP按钮样式 */
.cloud-app-btn {
    width: 100px;                /* 宽度：80像素，与退出按钮一致 */
    height: 35px;               /* 高度：40像素，与退出按钮一致 */
    padding: 8px 12px;          /* 按钮内边距：上下8px，左右12px */
    border: none;                /* 边框样式：无边框 */
    border-radius: 8px;          /* 圆角半径：8像素 */
    cursor: pointer;             /* 鼠标指针：手型指针 */
    font-size: 14px;             /* 字体大小：14像素 */
    font-weight: bold;           /* 字体粗细：粗体 */
    transition: all 0.3s ease;   /* 过渡动画：所有属性0.3秒缓动效果 */
    text-transform: uppercase;   /* 文本转换：大写字母 */
    letter-spacing: 0.5px;       /* 字母间距：0.5像素 */
    background: linear-gradient(135deg, #ff6b35 0%, #ff8e53 100%); /* 橙色渐变背景，醒目颜色 */
    color: #fff;                 /* 文字颜色：白色 (#fff) */
    margin: 10px 5px;            /* 设置外边距：上下10px，左右5px */
    display: flex;               /* 使用Flex布局 */
    justify-content: center;     /* 水平居中 */
    align-items: center;         /* 垂直居中 */
    gap: 5px;                   /* 图标与文字间距 */
}

/* 云端APP按钮悬停状态 */
.cloud-app-btn:hover {
    background: linear-gradient(135deg, #ff8e53 0%, #ff6b35 100%); /* 悬停时渐变反转 */
    transform: translateY(-2px); /* 向上移动2像素 */
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4); /* 添加橙色阴影效果 */
}

/* 添加到桌面按钮样式 */
.btn-desktop {
    width: 120px;                /* 宽度：120像素 */
    height: 40px;               /* 高度：40像素 */
    padding: 12px 18px;          /* 按钮内边距：上下12px，左右18px */
    border: 2px solid #4CAF50;   /* 绿色边框，确保在微信中可见 */
    border-radius: 8px;          /* 圆角半径：8像素 */
    cursor: pointer;             /* 鼠标指针：手型指针 */
    font-size: 14px;             /* 字体大小：14像素 */
    font-weight: bold;           /* 字体粗细：粗体 */
    transition: all 0.3s ease;   /* 过渡动画：所有属性0.3秒缓动效果 */
    text-transform: uppercase;   /* 文本转换：大写字母 */
    letter-spacing: 0.5px;       /* 字母间距：0.5像素 */
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); /* 绿色渐变背景 */
    color: #fff;                 /* 文字颜色：白色 (#fff) */
    margin: 10px 5px;            /* 设置外边距：上下10px，左右5px */
    display: flex;               /* 使用Flex布局 */
    justify-content: center;     /* 水平居中 */
    align-items: center;         /* 垂直居中 */
    -webkit-appearance: none;    /* 移除iOS默认样式 */
    appearance: none;            /* 移除默认样式 */
    text-decoration: none;       /* 移除文本装饰 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影增强可见性 */
}

/* 添加到桌面按钮悬停状态 */
.btn-desktop:hover {
    background: linear-gradient(135deg, #45a049 0%, #388E3C 100%); /* 悬停时渐变背景变深 */
    transform: translateY(-2px); /* 向上移动2像素 */
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4); /* 添加绿色阴影效果 */
}

/* 按钮悬停效果 - 交互反馈 */
/* 悬停时：按钮上浮2像素 + 改变背景色 + 添加阴影 */
.btn:hover {
    transform: translateY(-2px);            /* 变换效果：Y轴向上移动2像素 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 盒子阴影：X偏移0，Y偏移5px，模糊15px，透明度30%的黑色 */
    background: #888;                        /* 背景颜色：稍亮的灰色 (#888) - 悬停状态 */
}
/* 播放列表框内播放模式按钮样式 */
/* ==================== 播放模式区域 ==================== */
/* 播放模式控制面板 - 与播放器控制区域样式一致 */
.player-mode {
    background: rgba(42, 42, 42, 0.9); /* 背景颜色：深灰色半透明 (RGBA: 2,42,42,0.9) */
    margin: 20px;               /* 外边距：20像素 */
    padding: 25px;              /* 内边距：25像素 */
    border-radius: 15px;        /* 圆角半径：15像素 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6); /* 盒子阴影：X偏移0，Y偏移8px，模糊25px，透明度60%的黑色 */
    border: 1px solid #555;     /* 边框：1像素实线，深灰色 (#555) */
}

/* ==================== 音轨控制按钮系统 ==================== */
/* 音轨行内按钮样式 - 固定尺寸30x30像素 */
.track-controls .btn:not(.mute-btn) {
    width: 30px;                /* 宽度：30像素 */
    height: 30px;               /* 高度：30像素 */
    padding: 0;                 /* 内边距：0 */
    font-size: 12px;            /* 字体大小：12像素 */
    display: flex;              /* 弹性布局：启用 */
    align-items: center;        /* 垂直对齐：居中对齐 */
    justify-content: center;    /* 水平对齐：居中对 */
    margin: 0px 0px;              /* 外边距：左右0像素，上下0 */
}

/* 音轨行内播放/停止按钮特定样式 */
.track-controls .btn-play,
.track-controls .btn-stop {
    width: 30px;                /* 宽度：30像素 */
    height: 30px;               /* 高度：30像素 */
    padding: 0;                 /* 内边距：0 */
    font-size: 12px;            /* 字体大小：12像素 */
}

/* 全屏按钮样式 - 桃红色（正常状态） */
.btn-fullscreen {
    background: linear-gradient(135deg, #f701c1 0%, #f592bd 100%); /* 桃红色渐变 */
    color: white;
    border: 1px solid #ff6b9d;
    width: 40px;                /* 宽度：40像素 */
    height: 40px;               /* 高度：40像素 */
    padding: 0;                 /* 内边距：0 */
    display: flex;              /* 弹性布局：启用 */
    align-items: center;        /* 垂直对齐：居中对齐 */
    justify-content: center;    /* 水平对齐：居中对齐 */
    font-size: 20px;            /* 字体大小：20像素 */
    line-height: 1;              /* 行高：1，确保图标垂直居中 */
    padding-bottom: 2px;        /* 底部内边距：2像素，微调垂直位置 */
}

/* 全屏按钮悬停效果 */
.btn-fullscreen:hover {
    background: linear-gradient(135deg, #ff91c1 0%, #ff6b9d 100%); /* 悬停时渐变反转 */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 157, 0.3);
}

/* 全屏状态下的按钮样式 - 天蓝色 */
.btn-fullscreen.fullscreen-active {
    background: linear-gradient(135deg, #03b3f8 0%, #b0e2ff 100%); /* 天蓝色渐变 */
    border: 1px solid #87ceeb;
}

/* 全屏状态下的按钮悬停效果 */
.btn-fullscreen.fullscreen-active:hover {
    background: linear-gradient(135deg, #b0e2ff 0%, #87ceeb 100%); /* 悬停时渐变反转 */
    box-shadow: 0 5px 15px rgba(135, 206, 235, 0.3);
}

/* 静音按钮样式 - 绿色渐变 */
.track-controls .mute-btn {
    width: 50px;                /* 宽度：50像素 */
    height: 30px;               /* 高度：30像素 */
    padding: 0;                 /* 内边距：0 */
    font-size: 12px;            /* 字体大小：12像素 */
    background: linear-gradient(135deg, #26b909 0%, #0d8b02 100%); /* 背景渐变：135度，从亮绿色到深绿色 */
    color: #ffffff;             /* 文字颜色：白色 */
}

/* 静音按钮激活状态 - 红色渐变 */
.track-controls .mute-btn.muted, /* 选择处于静音状态的静音按钮 */
.track-controls .mute-btn.muted:hover { /* 选择处于静音状态且被悬停的静音按钮 */
    background: linear-gradient(135deg, #9e0202 0%, #ff4757 100%) !important; /* 应用从深红到亮红色的135度渐变背景，使用 !important 确保优先级 */
    color: white !important; /* 设置文字颜色为白色，使用 !important 确保优先级 */
}

/* ==================== 控制区域静音按钮样式 ==================== */
/* 控制区域静音按钮 - 绿色渐变 */
#mute-btn {
    background: linear-gradient(135deg, #26b909 0%, #0d8b02 100%); /* 背景渐变：135度，从亮绿色到深绿色 */
    color: #ffffff;             /* 文字颜色：白色 */
}

/* 控制区域静音按钮激活状态 - 红色渐变 */
#mute-btn.muted,
#mute-btn.muted:hover {
    background: linear-gradient(135deg, #9e0202 0%, #ff4757 100%) !important; /* 应用从深红到亮红色的135度渐变背景，使用 !important 确保优先级 */
    color: white !important;    /* 设置文字颜色为白色，使用 !important 确保优先级 */
}

/* 播放按钮基础样式 */
.btn-play {
    background: #666; /* 未激活状态为灰色背景 */
    color: #fff; /* 文字颜色为白色 */
}

/* 播放按钮悬停状态 */
.btn-play:hover {
    background: #ff9800; /* 悬停时背景变为橙色 */
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4); /* 添加橙色阴影效果，增强立体感 */
}

/* 暂停按钮基础样式 (激活状态) */
.btn-pause {
    background: #ff9800; /* 激活状态为橙色背景 */
    color: white; /* 文字颜色为白色 */
}

/* 暂停按钮悬停状态 */
.btn-pause:hover {
    background: #ff7700; /* 悬停时变为更深的橙色背景 */
    box-shadow: 0 5px 15px rgba(255, 119, 0, 0.4); /* 添加深橙色阴影效果 */
}

/* 播放/暂停切换按钮基础样式 */
.btn-play-toggle {
    background: #666; /* 未激活状态为灰色背景 */
    color: #fff; /* 文字颜色为白色 */
}

/* 播放/暂停切换按钮悬停状态 */
.btn-play-toggle:hover {
    background: #ff9800; /* 悬停时背景变为橙色 */
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4); /* 添加橙色阴影效果 */
}

/* 播放/暂停切换按钮激活状态（暂停状态） */
.btn-pause-toggle {
    background: #ff9800; /* 激活状态为橙色背景 */
    color: white; /* 文字颜色为白色 */
}

/* 播放/暂停切换按钮激活状态悬停 */
.btn-pause-toggle:hover {
    background: #ff7700; /* 悬停时变为更深的橙色背景 */
    box-shadow: 0 5px 15px rgba(255, 119, 0, 0.4); /* 添加深橙色阴影效果 */
}

/* 停止按钮基础样式 */
.btn-stop {
    background: #666; /* 未激活状态为灰色背景 */
    color: #fff; /* 文字颜色为白色 */
}

/* 删除按钮样式（红色） */
.track-controls .btn-stop[onclick*="deleteTrack"] {
    background: #f50000; /* 删除按钮为红色背景 */
    font-size: 22px !important;      /* 字体大小：22像素，使用!important确保优先级 */
}

/* 删除按钮悬停状态 */
.btn-stop[onclick*="deleteTrack"]:hover {
    background: #fc2626; /* 悬停时背景变为深红色 */
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4); /* 添加红色阴影效果 */
}

/* 停止按钮悬停状态 */
.btn-stop:hover {
    background: #ff9800; /* 悬停时背景变为橙色 */
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4); /* 添加橙色阴影效果 */
}

/* 模式切换按钮基础样式 */
.btn-mode {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); /* 应用从紫蓝色到淡紫色的135度渐变背景 */
}

/* 演出模式按钮特定样式 */
#mode-btn {
    width: 100px; /* 设置宽度为100像素 */
    height: 35px; /* 设置高度为45像素 */
    margin: 10px 5px; /* 设置外边距：上下10px，左右5px */
    color: white; /* 文字颜色为白色 */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 娱乐模式下的模式切换按钮样式 */
.btn-mode.entertainment {
    background: linear-gradient(135deg, #017c43 0%, #029b4e 100%); /* 应用亮绿色渐变背景 */
    color: #1a1a1a; /* 文字颜色为深灰色，确保在亮背景上可读 */
}

/* 性能模式按钮样式 */
.btn-mode.performance {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%); /* 应用从亮红色到红色的135度渐变背景 */
    color: white; /* 文字颜色为白色 */
}

/* 单播模式按钮基础样式 */
.btn-playback {
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%); /* 应用蓝绿色渐变背景 */
    width: 100px; /* 设置宽度为100像素 */
    height: 35px; /* 设置高度为45像素 */
    margin: 10px 5px; /* 设置外边距：上下10px，左右5px */
    color: white; /* 文字颜色为白色 */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 单播放模式下的播放模式按钮样式 */
.btn-playback.single {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%); /* 应用蓝色渐变背景 */
}

/* 多播放模式下的播放模式按钮样式 */
.btn-playback.multiple {
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%); /* 应用粉红色渐变背景 */
     width: 100px; /* 设置宽度为100像素 */
    height: 35px; /* 设置高度为45像素 */
    margin: 10px 5px; /* 设置外边距：上下10px，左右5px */
    color: white; /* 文字颜色为白色 */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 进度条容器样式 */
.progress-container {
    flex: 1; /* 容器在弹性布局中占据剩余所有可用空间 */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子项在交叉轴上居中对齐 */
    gap: 12px; /* 子项之间的间距为12像素 */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 进度条背景轨道样式 */
.progress-bar {
    flex: 1; /* 在容器中占据剩余所有可用空间 */
    height: 10px; /* 高度为10像素 */
    background: #444; /* 背景颜色为深灰色 */
    border-radius: 5px; /* 圆角半径为5像素 */
    overflow: hidden; /* 隐藏溢出内容，确保子元素不破坏圆角 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); /* 内阴影效果，增加凹陷感 */
}

/* 进度条填充部分样式 */
.progress-fill {
    height: 100%; /* 高度充满父容器 */
    background: linear-gradient(90deg, #ea00ff 0%, #00b7ff 100%); /* 应用水平90度的亮绿色到蓝绿色渐变 */
    border-radius: 5px; /* 圆角半径为5像素 */
    transition: width 0.3s ease; /* 宽度变化时有0.3秒的缓动过渡效果 */
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); /* 添加发光阴影效果 */
}

/* 音量控制容器样式 */
.volume-control {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子项在交叉轴上居中对齐 */
    gap: 12px; /* 子项之间的间距为12像素 */
    justify-content: center; /* 子项在主轴上居中对齐 */
}

/* 音量滑块轨道样式 */
.volume-slider {
    width: 100px; /* 宽度为100像素 */
    height: 12px; /* 高度为12像素 */
    background: #5a5a5a; /* 背景颜色为深灰色 */
    border-radius: 4px; /* 圆角半径为3像素 */
    outline: none; /* 移除默认轮廓线 */
    -webkit-appearance: none; /* 移除Webkit浏览器默认样式 */
    appearance: none; /* 移除默认样式 */

}


/* Webkit浏览器音量滑块拇指样式 */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* 移除Webkit浏览器默认样式 */
    appearance: none; /* 移除默认样式 */
    -moz-appearance: none; /* 移除Firefox浏览器默认样式 */
    width: 18px; /* 宽度为18像素 */
    height: 18px; /* 高度为18像素 */
    border-radius: 50%; /* 圆形拇指 */
    background: #e67e00; /* 背景颜色为亮绿色 */
    cursor: pointer; /* 鼠标指针为手型 */
    box-shadow: 0 0 10px rgba(255, 196, 0, 0.5); /* 添加发光阴影效果 */
}

/* Firefox浏览器音量滑块拇指样式 */
.volume-slider::-moz-range-thumb {
    width: 18px; /* 宽度为18像素 */
    height: 18px; /* 高度为18像素 */
    border-radius: 50%; /* 圆形拇指 */
    background: #e67e00; /* 背景颜色为亮绿色 */
    cursor: pointer; /* 鼠标指针为手型 */
    border: none; /* 无边框 */
    box-shadow: 0 0 10px rgba(243, 227, 4, 0.5); /* 添加发光阴影效果 */
}

/* 频谱图容器样式 */
.spectrum-container {
    background: rgba(0, 0, 0, 0.9); /* 背景为90%不透明的黑色 */
    margin: 5px; /* 外边距为20像素 */
    padding: 10px; /* 内边距为10像素 */
    border-radius: 15px; /* 圆角半径为15像素 */
    height: 100px; /* 固定高度为100像素 */
    border: 1px solid #444; /* 1像素深灰色边框 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6); /* 添加显著的阴影效果，增强深度感 */
}

/* 频谱图画布样式 */
.spectrum-canvas {
    width: 100%; /* 宽度充满父容器 */
    height: 100%; /* 高度充满父容器 */
    background: #111; /* 背景为接近黑色的深灰色 */
    border-radius: 8px; /* 圆角半径为8像素 */
}

/* 播放列表选项卡容器样式 */
.playlist-tabs {
    background: rgba(42, 42, 42, 0.9); /* 深灰色半透明背景 (90%不透明度) */
    margin: 0px 5px; /* 容器外间距20像素 */
    height: 100%; /* 固定高度为100% */
    border-radius:  0 0 15px 15px; /* 仅左下和右下角有15像素圆角 */
    overflow: hidden; /* 隐藏溢出内容，确保子元素不破坏圆角 */
    border: 1px solid #555; /* 1像素深灰色边框 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6); /* 显著的阴影效果，增强深度感 */
}

/* 选项卡标题栏样式 */
.tab-header {
    display: flex; /* 使用弹性布局，使选项卡按钮水平排列 */
    background: #2a2a2a; /* 深灰色背景 */
    border-bottom: 2px solid #444; /* 底部2像素深灰色边框，用于视觉分隔 */
    height: 50px; /* 固定高度为50像素 */
}

/* 选项卡按钮基础样式 */
.tab-btn {
    padding: 18px 25px; /* 内边距：上下18px，左右25px */
    background: none; /* 无背景色 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标指针为手型，表示可点击 */
    font-size: 14px; /* 字体大小14像素 */
    font-weight: bold; /* 字体粗体 */
    color: #ccc; /* 文字颜色为浅灰色 */
    transition: all 0.3s ease; /* 所有属性变化有0.3秒缓动过渡效果 */
    text-transform: uppercase; /* 文字转换为大写 */
    letter-spacing: 0.5px; /* 字母间距0.5像素，增强可读性 */
}

/* 激活状态的选项卡按钮样式 */
.tab-btn.active {
    background: #1a1a1a; /* 背景色变为更深的黑色 */
    color: #00ff88; /* 文字颜色变为亮绿色 */
    border-bottom: 3px solid #00ff88; /* 底部3像素亮绿色边框，作为激活指示器 */
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3); /* 文字发光效果，增强视觉反馈 */
     height: 50px;
}

/* 选项卡按钮悬停状态 */
.tab-btn:hover {
    background: #333; /* 悬停时背景变为稍亮的灰色 */
    color: #fff; /* 文字颜色变为白色 */
}

/* 添加选项卡按钮的特殊样式 (通常位于最右侧) */
.add-tab-btn {
    margin-left: auto; /* 左侧自动外边距，将其推至最右侧 */
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); /* 紫蓝色渐变背景 */
    color: white; /* 文字颜色白色 */
    border-radius: 0; /* 无圆角，与标题栏风格一致 */
}

/* 添加选项卡按钮悬停状态 */
.add-tab-btn:hover {
    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); /* 悬停时渐变方向反转 */
}

/* 播放列表内容区域样式 */
.playlist-content {
    background: #1a1a1a; /* 深黑色背景 */
    padding: 10px; /* 内边距25像素 */
    border-radius: 0 0 15px 15px; /* 仅左下和右下角有15像素圆角，与顶部容器匹配 */
    height: 650px; /* 固定高度610px */
    overflow-y: auto; /* 添加垂直滚动条 */
}

/* 曲目列表样式 */
.track-list {
    list-style: none; /* 移除列表默认的标记符号 */
}

/* 单个曲目项样式 */
.track-item {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子项在交叉轴上居中对齐 */
    gap: 15px; /* 子项之间的间距为15像素 */
    padding: 18px; /* 内边距18像素 */
    border-bottom: 1px solid #444; /* 底部1像素深灰色边框，用于分隔曲目 */
    background: #222; /* 背景颜色为深灰色 */
    border-radius: 8px; /* 圆角半径8像素 */
    margin-bottom: 8px; /* 底部外边距8像素，增加曲目间的间距 */
    height: 65px; /* 音轨高度设置为65像素，适应备注信息显示 */
}

/* 音轨信息容器 */
.track-info-container {
    flex: 1;
    min-width: 0;
}

/* 音轨备注样式 */
.track-remark {
font-size: 14px;          /* 字体大小为14像素 */
color: #ff9100;           /* 字体颜色为橙色（十六进制色值#ff9100） */
margin-top: 4px;          /* 顶部外边距为4像素 */
word-break: break-all;    /* 允许在任意字符间断行（防止长文本溢出） */
line-height: 1.4;         /* 行高为字体大小的1.4倍 */
}

/* 曲目项悬停状态 */
.track-item:hover {
    background: #2a2a2a; /* 悬停时背景变为稍亮的灰色 */
}

/* 当前播放音轨高亮样式 - 桃红色透明效果 */
.track-item.current-playing {
    background: linear-gradient(135deg, rgba(255, 0, 242, 0.3) 0%, rgba(1, 172, 252, 0.3) 100%) !important; /* 桃红色透明渐变背景 */
    border-left: 4px solid rgba(255, 105, 180, 0.8); /* 左侧桃红色边框 */
    z-index: 10; /* 确保在最上层 */
}

.track-item.current-playing .track-name {
    color: #fcc3df !important; /* 桃红色文字 */
    font-weight: bold; /* 加粗文字 */
    font-weight: bold; /* 加粗字体 */
}

/* 用户点击高亮音轨样式 */
.track-item.highlighted {
    background: linear-gradient(135deg, #0066ff27 0%, #0099ff28 100%) !important; /* 蓝色渐变背景 */
    border-left: 4px solid #00a8ffa8; /* 左侧亮蓝色边框 */
    z-index: 5; /* 确保在播放高亮之上 */
}

.track-item.highlighted .track-name {
    color: #e6f7ff !important; /* 淡蓝色文字 */
}

/* ==================== 公告显示样式 ==================== */
.announcement-container {
    background: transparent; /* 透明背景 */
    color: #ff9800; /* 橘色文字 */
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    margin: 10px 0; /* 外边距：上下10px，左右0 */
    font-size: 16px; /* 字体大小16px */
    font-weight: bold; /* 字体粗体 */
    border: none; /* 无边框 */
    box-shadow: none; /* 无阴影 */
    display: block; /* 块级显示 */
    width: 35%; /* 宽度 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative; /* 相对定位 */
    white-space: nowrap; /* 不换行 */
}

.announcement-scroll {
    display: inline-block; /* 行内块显示 */
    padding-left: 100%; /* 初始位置在右侧 */
    animation: scroll-text 30s linear infinite; /* 滚动动画 */
    color: #ff9800; /* 橘色文字 */
}

.announcement-none {
    color: #ff9800; /* 橘色文字 */
    font-style: italic; /* 斜体 */
    animation: none; /* 无动画 */
}

/* 滚动动画 */
@keyframes scroll-text {
    0% {
        transform: translateX(0%); /* 从右侧开始 */
    }
    100% {
        transform: translateX(-100%); /* 向左移动100% */
    }
}

/* 鼠标悬停时暂停动画 */
.announcement-container:hover .announcement-scroll {
    animation-play-state: paused;
}

/* 音轨移动按钮样式 */
.track-move-buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 10px;
}

.move-up-btn, .move-down-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 3px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
}

.move-up-btn:hover, .move-down-btn:hover {
    background: #3a3a3a;
    color: #fff;
    border-color: #666;
}

.move-up-btn:active, .move-down-btn:active {
    transform: scale(0.95);
    background: #444;
}

/* 同时具有播放高亮和用户高亮的样式 */
.track-item.current-playing.highlighted {
    background: linear-gradient(135deg, #ff6a0047 0%, #0066ff47 100%) !important; /* 橙蓝混合渐变背景 */
    border-left: 4px solid #ffaa00a8; /* 左侧橙黄色边框 */
}

/* 同时具有播放高亮和用户高亮的样式 */
.track-item.current-playing.highlighted {
    background: linear-gradient(135deg, #ff6a0047 0%, #0066ff47 100%) !important; /* 橙蓝混合渐变背景 */
    border-left: 4px solid #ffaa00a8; /* 左侧橙黄色边框 */
}

.track-item.current-playing.highlighted .track-name {
    color: #fffac8 !important; /* 淡黄色文字 */
}

/* 激活音轨高亮样式 - 橘色透明效果 */
.track-item.track-activated {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.4) 0%, rgba(255, 140, 0, 0.4) 100%) !important; /* 橘色透明渐变背景 */
    border: 2px solid rgba(255, 165, 0, 0.8) !important; /* 橘色边框 */
}

.track-item.track-activated .track-name {
    color: #ffa500 !important; /* 橘色文字 */
    font-weight: bold !important; /* 粗体文字 */
}

/* 同时具有播放高亮和激活高亮的样式 */
.track-item.current-playing.track-activated {
    background: linear-gradient(135deg, rgba(255, 0, 242, 0.3) 0%, rgba(255, 165, 0, 0.4) 100%) !important; /* 桃红和橘色混合渐变背景 */
    border: 2px solid rgba(255, 0, 242, 0.6) !important; /* 桃红色边框 */
}

.track-item.current-playing.track-activated .track-name {
    color: #ff69b4 !important; /* 粉红色文字 */
    font-weight: bold !important; /* 粗体文字 */
}

/* 音轨激活状态样式 - 橘色高亮 */
.track-item.track-selected {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.6) 0%, rgba(255, 140, 0, 0.6) 100%) !important; /* 橘色透明渐变背景 */
    border: 2px solid rgba(255, 165, 0, 1) !important; /* 橘色边框 */
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5) !important; /* 橘色发光效果 */
}

.track-item.track-selected .track-name {
    color: #ffa500 !important; /* 橘色文字 */
    font-weight: bold !important; /* 粗体文字 */
    text-shadow: 0 0 5px rgba(255, 165, 0, 0.8) !important; /* 文字发光效果 */
}

/* 确保进度条在激活状态下仍然可交互 */
.track-item.track-selected .progress-bar,
.track-item.track-selected .progress-fill {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 确保音轨控制按钮在激活状态下仍然可交互 */
.track-item.track-selected .track-controls .btn,
.track-item.track-selected .track-controls .btn-play,
.track-item.track-selected .track-controls .btn-pause-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 确保所有进度条都可交互 */
.progress-bar,
.progress-fill {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 确保所有音轨控制按钮都可交互 */
.track-controls .btn,
.track-controls .btn-play,
.track-controls .btn-pause-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 同时具有播放高亮和选中高亮的样式 */
.track-item.current-playing.track-selected {
    background: linear-gradient(135deg, rgba(255, 0, 242, 0.4) 0%, rgba(255, 165, 0, 0.6) 100%) !important; /* 桃红和橘色混合渐变背景 */
    border: 2px solid rgba(255, 0, 242, 0.8) !important; /* 桃红色边框 */
    box-shadow: 0 0 20px rgba(255, 0, 242, 0.6) !important; /* 混合发光效果 */
}

.track-item.current-playing.track-selected .track-name {
    color: #ff69b4 !important; /* 粉红色文字 */
    font-weight: bold !important; /* 粗体文字 */
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.8) !important; /* 文字发光效果 */
}

/* 多播模式下的马卡龙色系高亮样式 */
.track-item.multi-color-1 {
    background: linear-gradient(135deg, rgba(245, 0, 253, 0.50) 0%, rgba(244, 118, 255, 0.50) 100%) !important; /* 粉红色 */
    border-left: 4px solid rgba(255, 182, 193, 0.8) !important;
}

.track-item.multi-color-2 {
    background: linear-gradient(135deg, rgba(0, 162, 255, 0.5) 0%, rgba(80, 134, 250, 0.35) 100%) !important; /* 天蓝色 */
    border-left: 4px solid rgba(157, 231, 255, 0.8) !important;
}

.track-item.multi-color-3 {
    background: linear-gradient(135deg, rgba(0, 187, 0, 0.5) 0%, rgba(0, 252, 0, 0.5) 100%) !important; /* 青绿色 */
    border-left: 4px solid rgba(163, 245, 163, 0.8) !important;
}

.track-item.multi-color-4 {
    background: linear-gradient(135deg, rgba(255, 145, 0, 0.438) 0%, rgba(252, 188, 69, 0.35) 100%) !important; /* 金黄色 */
    border-left: 4px solid rgba(255, 215, 0, 0.8) !important;
}

.track-item.multi-color-5 {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.25) 0%, rgba(75, 0, 130, 0.35) 100%) !important; /* 紫罗兰色 */
    border-left: 4px solid rgba(138, 43, 226, 0.8) !important;
}

.track-item.multi-color-6 {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.25) 0%, rgba(255, 0, 0, 0.35) 100%) !important; /* 橙红色 */
    border-left: 4px solid rgba(255, 69, 0, 0.8) !important;
}

.track-item.multi-color-7 {
    background: linear-gradient(135deg, rgba(0, 190, 181, 0.5) 0%, rgba(87, 255, 255, 0.5) 100%) !important; /* 蓝绿色 */
    border-left: 4px solid rgba(138, 250, 244, 0.8) !important;
}

.track-item.multi-color-8 {
    background: linear-gradient(135deg, rgba(255, 0, 38, 0.5) 0%, rgba(252, 127, 168, 0.5) 100%) !important; /* 粉红色 */
    border-left: 4px solid rgba(255, 182, 193, 0.8) !important;
}

/* 多播模式下音轨名称的颜色 */
.track-item.multi-color-1 .track-name { color: #ff69b4 !important; }
.track-item.multi-color-2 .track-name { color: #00bfff !important; }
.track-item.multi-color-3 .track-name { color: #32cd32 !important; }
.track-item.multi-color-4 .track-name { color: #ffd700 !important; }
.track-item.multi-color-5 .track-name { color: #8a2be2 !important; }
.track-item.multi-color-6 .track-name { color: #ff4500 !important; }
.track-item.multi-color-7 .track-name { color: #20b2aa !important; }
.track-item.multi-color-8 .track-name { color: #ffb6c1 !important; }





/* 曲目名称样式 */
.track-name {
    flex: 1; /* 在弹性布局中占据剩余所有可用空间 */
    font-weight: 500; /* 字体重量500 (中等粗细) */
    color: #e0e0e0; /* 文字颜色为浅灰色 */
    font-size: 16px; /* 字体大小15像素 */
    -webkit-user-select: none; /* Chrome/Safari 禁止文字选择 */
    -moz-user-select: none; /* Firefox 禁止文字选择 */
    -ms-user-select: none; /* IE/Edge 禁止文字选择 */
    user-select: none; /* 标准语法禁止文字选择 */
}

/* 曲目控制按钮容器样式 */
.track-controls {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子项在交叉轴上居中对齐 */
    gap: 12px; /* 子项之间的间距为12像素 */
}

/* 进度条容器样式 */
.track-progress {
    flex: 2; /* 在弹性布局中占据2份空间 (比例) */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子项在交叉轴上居中对齐 */
    gap: 12px; /* 子项之间的间距为12像素 */
}

/* 曲目信息容器样式 (如时长、大小等) */
.track-info {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子项在交叉轴上居中对齐 */
    gap: 15px; /* 子项之间的间距为15像素 */
    color: #888; /* 文字颜色为灰色，表示次要信息 */
    font-size: 12px; /* 字体大小12像素，较小 */
    -webkit-user-select: none; /* Chrome/Safari 禁止文字选择 */
    -moz-user-select: none; /* Firefox 禁止文字选择 */
    -ms-user-select: none; /* IE/Edge 禁止文字选择 */
    user-select: none; /* 标准语法禁止文字选择 */
}

/* 音轨内所有文字符号禁止拖动选择，拖动把手除外 */
.track-item > * {
    -webkit-user-select: none; /* Chrome/Safari 禁止文字选择 */
    -moz-user-select: none; /* Firefox 禁止文字选择 */
    -ms-user-select: none; /* IE/Edge 禁止文字选择 */
    user-select: none; /* 标准语法禁止文字选择 */
}

/* 进度条和音量滑块不受文字选择禁止影响 */
.track-item .progress-bar,
.track-item .progress-fill,
.track-item .volume-slider {
    -webkit-user-select: auto !important; /* Chrome/Safari 允许文字选择 */
    -moz-user-select: auto !important; /* Firefox 允许文字选择 */
    -ms-user-select: auto !important; /* IE/Edge 允许文字选择 */
    user-select: auto !important; /* 标准语法允许文字选择 */
    pointer-events: auto !important;
    cursor: pointer !important;
}



/* 临时按钮基础样式 - 蓝色 */
.temp-btn {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); /* 蓝色渐变背景 */
    color: white; /* 文字颜色为白色 */
}

/* 临时按钮悬停状态 */
.temp-btn:hover {
    background: linear-gradient(135deg, #2489ee 0%, #0d52bb 100%); /* 悬停时渐变背景变深 */
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4); /* 添加蓝色阴影效果，增强立体感 */
}


/* 上传按钮基础样式 - 绿色 */
.upload-btn {
    background: linear-gradient(135deg, #e072ee 0%, #be19df 100%); /* 绿色渐变背景 */
    color: white; /* 文字颜色为白色 */
}

/* 上传按钮悬停状态 */
.upload-btn:hover {
    background: linear-gradient(135deg, #8b388e 0%, #4e1b5e 100%); /* 悬停时渐变背景变深 */
    box-shadow: 0 5px 15px rgba(152, 76, 175, 0.4); /* 添加绿色阴影效果，增强立体感 */
}




/* 上传和播放列表模态框容器样式 - 黑色专业风格 */
#upload-modal,
#playlist-modal {
    background: #1a1a1a !important; /* 深黑色背景，使用 !important 确保优先级 */
    border: 2px solid #00ff88 !important; /* 2像素亮绿色边框 */
    border-radius: 15px !important; /* 圆角半径15像素 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important; /* 显著的阴影效果，增强深度感 */
    padding: 30px !important; /* 内边距30像素 */
    color: #e0e0e0 !important; /* 文字颜色为浅灰色 */
    position: fixed !important; /* 固定定位，不随页面滚动 */
    top: 50% !important; /* 顶部定位在视口50%位置 */
    left: 50% !important; /* 左侧定位在视口50%位置 */
    transform: translate(-50%, -50%) !important; /* 使用变换实现精确居中 */
    z-index: 1000 !important; /* 设置很高的堆叠顺序，确保模态框在最上层 */
    width: 600px !important; /* 增加宽度以适应多文件显示 */
    max-width: 90vw !important; /* 最大宽度为视口宽度的90%，确保在小屏幕上也能良好显示 */
    max-height: 80vh !important; /* 最大高度为视口高度的80% */
    overflow-y: auto !important; /* 允许垂直滚动 */
}

/* 右侧按钮组样式 */
.right-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    width: 100%;
}

/* 播放列表模态框内部元素样式 */
#playlist-modal h3 {
    margin-bottom: 20px !important; /* 标题下方增加20px间距 */
}

#playlist-modal input[type="text"] {
    width: 100% !important;
    padding: 12px 15px !important;
    margin-bottom: 20px !important;
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
}

#playlist-modal input[type="text"]::placeholder {
    color: #888 !important;
}

#playlist-modal .button-group {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

#playlist-modal button {
    padding: 12px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#playlist-modal button:first-child {
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%) !important;
    color: #1a1a1a !important;
}

#playlist-modal button:first-child:hover {
    background: linear-gradient(135deg, #00cc66 0%, #00aa44 100%) !important;
}

#playlist-modal button:last-child {
    background: linear-gradient(135deg, #666 0%, #444 100%) !important;
    color: #eee !important;
}

#playlist-modal button:last-child:hover {
    background: linear-gradient(135deg, #555 0%, #333 100%) !important;
}

/* 模态框标题样式 */
#upload-modal h3 {
    color: #00ff88 !important; /* 标题颜色为亮绿色 */
    text-align: center !important; /* 文字居中对齐 */
    margin-bottom: 25px !important; /* 底部外边距25像素 */
    font-size: 24px !important; /* 字体大小24像素 */
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3) !important; /* 文字发光效果 */
}

/* 模态框内表单布局 */
#upload-modal form {
    display: block !important; /* 使用块级布局避免嵌套滚动条问题 */
}

/* 文件选择输入框样式 */
#upload-modal input[type="file"] {
    background: #2a2a2a !important; /* 深灰色背景 */
    border: 2px solid #444 !important; /* 2像素深灰色边框 */
    border-radius: 8px !important; /* 圆角半径8像素 */
    padding: 12px !important; /* 内边距12像素 */
    color: #e0e0e0 !important; /* 文字颜色为浅灰色 */
    cursor: pointer !important; /* 鼠标指针为手型，表示可点击 */
    transition: all 0.3s ease !important; /* 所有属性变化有0.3秒缓动过渡效果 */
}

/* 文件选择输入框悬停状态 */
#upload-modal input[type="file"]:hover {
    border-color: #00ff88 !important; /* 悬停时边框颜色变为亮绿色 */
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important; /* 添加发光阴影效果 */
}

/* 文本输入框样式 */
#upload-modal input[type="text"] {
    background: #2a2a2a !important; /* 深灰色背景 */
    border: 2px solid #444 !important; /* 2像素深灰色边框 */
    border-radius: 8px !important; /* 圆角半径8像素 */
    padding: 12px 15px !important; /* 内边距：上下12px，左右15px */
    color: #e0e0e0 !important; /* 文字颜色为浅灰色 */
    font-size: 14px !important; /* 字体大小14像素 */
    transition: all 0.3s ease !important; /* 所有属性变化有0.3秒缓动过渡效果 */
}

/* 文本输入框获取焦点状态 */
#upload-modal input[type="text"]:focus {
    outline: none !important; /* 移除默认轮廓线 */
    border-color: #00ff88 !important; /* 边框颜色变为亮绿色 */
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important; /* 添加发光阴影效果 */
    background: #222 !important; /* 背景颜色变为稍亮的黑色 */
}

/* 下拉选择框样式 */
#upload-modal select {
    background: #2a2a2a !important; /* 深灰色背景 */
    border: 2px solid #444 !important; /* 2像素深灰色边框 */
    border-radius: 8px !important; /* 圆角半径8像素 */
    padding: 12px 15px !important; /* 内边距：上下12px，左右15px */
    color: #e0e0e0 !important; /* 文字颜色为浅灰色 */
    font-size: 14px !important; /* 字体大小14像素 */
    cursor: pointer !important; /* 鼠标指针为手型，表示可点击 */
    transition: all 0.3s ease !important; /* 所有属性变化有0.3秒缓动过渡效果 */
}

/* 下拉选择框获取焦点状态 */
#upload-modal select:focus {
    outline: none !important; /* 移除默认轮廓线 */
    border-color: #00ff88 !important; /* 边框颜色变为亮绿色 */
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important; /* 添加发光阴影效果 */
    background: #222 !important; /* 背景颜色变为稍亮的黑色 */
}

/* 表单标签样式 */
#upload-modal label {
    color: #00ff88 !important; /* 文字颜色为亮绿色 */
    font-weight: bold !important; /* 字体粗体 */
    margin-bottom: 8px !important; /* 底部外边距8像素 */
    font-size: 14px !important; /* 字体大小14像素 */
}

/* 按钮容器样式 */
#upload-modal form > .button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px !important; /* 按钮间距20px */
    margin-top: 20px;
}

/* 主要按钮（提交按钮）样式 */
#upload-modal .button-container .btn-primary {
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%) !important; /* 亮绿色渐变背景 */
    color: #1a1a1a !important; /* 文字颜色为深黑色，确保在亮背景上可读 */
    border: none !important; /* 无边框 */
    border-radius: 8px !important; /* 圆角半径8像素 */
    padding: 15px !important; /* 内边距15像素 */
    font-size: 16px !important; /* 字体大小16像素 */
    font-weight: bold !important; /* 字体粗体 */
    cursor: pointer !important; /* 鼠标指针为手型，表示可点击 */
    transition: all 0.3s ease !important; /* 所有属性变化有0.3秒缓动过渡效果 */
    text-transform: uppercase !important; /* 文字转换为大写 */
    letter-spacing: 1px !important; /* 字母间距1像素，增强可读性 */
    width: 150px !important; /* 按钮宽度150px */
    text-align: center;
    box-sizing: border-box;
}

/* 主要按钮悬停状态 */
#upload-modal .btn-primary:hover {
    background: linear-gradient(135deg, #00cc66 0%, #00aa44 100%) !important; /* 悬停时渐变背景变深 */
    transform: translateY(-2px) !important; /* 向上移动2像素，产生浮动效果 */
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.5) !important; /* 添加更显著的发光阴影效果 */
}

/* 取消按钮样式 */
#upload-modal .button-container button[type="button"] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%) !important; /* 红色渐变背景 */
    color: white !important; /* 文字颜色为白色 */
    border: none !important; /* 无边框 */
    border-radius: 8px !important; /* 圆角半径8像素 */
    padding: 15px !important; /* 内边距15像素 */
    font-size: 16px !important; /* 字体大小16像素 */
    font-weight: bold !important; /* 字体粗体 */
    cursor: pointer !important; /* 鼠标指针为手型，表示可点击 */
    transition: all 0.3s ease !important; /* 所有属性变化有0.3秒缓动过渡效果 */
    text-transform: uppercase !important; /* 文字转换为大写 */
    letter-spacing: 1px !important; /* 字母间距1像素，增强可读性 */
    width: 150px !important; /* 按钮宽度150px */
    text-align: center;
    box-sizing: border-box;
}

/* 取消按钮悬停状态 */
#upload-modal button[type="button"]:hover {
    background: linear-gradient(135deg, #ff4757 0%, #ff2e43 100%) !important; /* 悬停时渐变背景变深 */
    transform: translateY(-2px) !important; /* 向上移动2像素，产生浮动效果 */
    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.5) !important; /* 添加红色发光阴影效果 */
}

/* 播放列表选择器下拉选项样式 */
#playlist-select option {
    background: #2a2a2a !important; /* 选项背景色为深灰色，使用 !important 确保优先级 */
    color: #e0e0e0 !important; /* 选项文字颜色为浅灰色 */
    padding: 10px !important; /* 选项内边距10像素，增加点击区域 */
}

/* 播放列表选择器选项悬停状态 (注意: 大多数浏览器不支持option:hover) */
#playlist-select option:hover {
    background: #00ff88 !important; /* 悬停时背景变为亮绿色 */
    color: #1a1a1a !important; /* 悬停时文字颜色变为深黑色 */
}

/* 清除按钮基础样式 */
.clear-btn {
    background: #dc3545; /* 危险操作使用红色背景 */
    color: white; /* 文字颜色为白色 */
}

/* 清除按钮悬停状态 */
.clear-btn:hover {
    background: #c82333; /* 悬停时背景变为深红色 */
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4); /* 添加红色阴影效果 */
}

/* 响应式设计 - 针对最大宽度768px的屏幕（通常是平板和手机） */
@media (max-width: 768px) {
    /* 头部布局调整为垂直方向 */
    .header {
        flex-direction: column; /* 弹性项目垂直排列 */
        gap: 15px; /* 项目之间间距15像素 */
        text-align: center; /* 文字居中对齐 */
        padding: 15px; /* 内边距减少为15像素 */
    }
    
    /* 控制行调整为垂直布局 */
    .control-row {
        flex-direction: column; /* 弹性项目垂直排列 */
        align-items: stretch; /* 子项拉伸填满容器宽度 */
        gap: 10px; /* 项目之间间距10像素 */
    }
    
    /* 曲目项调整为垂直布局 */
    .track-item {
        flex-direction: column; /* 弹性项目垂直排列 */
        align-items: flex-start; /* 子项左对齐 */
        gap: 12px; /* 项目之间间距12像素 */
        padding: 15px; /* 内边距减少为15像素 */
    }
    
    /* 曲目控制、进度和信息区域宽度调整 */
    .track-controls, .track-progress, .track-info {
        width: 100%; /* 宽度充满父容器 */
        justify-content: space-between; /* 子项在主轴两端对齐，中间平均分布 */
    }
    
    /* 播放器控制区域调整 */
    .player-controls {
        margin: 10px; /* 外边距减少为10像素 */
        padding: 15px; /* 内边距减少为15像素 */
    }
    
    /* 频谱图容器调整 */
    .spectrum-container {
        margin: 10px; /* 外边距减少为10像素 */
        height: 150px; /* 高度减少为150像素 */
    }
    
    /* 播放列表选项卡调整 */
    .playlist-tabs {
        margin: 10px; /* 外边距减少为10像素 */
    }
}

/* Webkit浏览器滚动条整体样式 */
::-webkit-scrollbar {
    width: 8px; /* 竖向滚动条宽度为8像素 */
}

/* Webkit浏览器滚动条轨道样式 */
::-webkit-scrollbar-track {
    background: #2a2a2a; /* 轨道背景色为深灰色 */
    border-radius: 4px; /* 轨道圆角半径4像素 */
}

/* Webkit浏览器滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #fa7dca 0%, #c20091 100%); /* 滑块使用亮色的渐变背景 */
    border-radius: 4px; /* 滑块圆角半径4像素 */
}

/* Webkit浏览器滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #fa7dca 0%, #c20091 100%); /* 滑块使用亮色渐变背景 */
}

/* 文本选择样式 */
::selection {
    background: rgba(0, 255, 136, 0.3); /* 文本被选中时背景为半透明亮绿色 */
    color: #fff; /* 文本被选中时文字颜色为白色 */
}

/* 输入框占位符文本样式 */
::placeholder {
    color: #666; /* 占位符文字颜色为灰色 */
    opacity: 1; /* 确保不透明度为100% */
}

/* Internet Explorer浏览器输入框占位符文本样式 */
:-ms-input-placeholder {
    color: #666; /* 占位符文字颜色为灰色 */
}

/* 选项卡容器样式 */
.tab-container {
    position: relative; /* 相对定位，为绝对定位的子元素提供参考 */
    display: inline-block; /* 行内块显示 */
    margin-right: 5px; /* 右侧外边距5像素 */
}

/* 选项卡删除按钮样式 */
.tab-delete-btn {
    position: absolute; /* 绝对定位 */
    top: 2px; /* 距顶部2像素 */
    right: -8px; /* 距右侧-8像素（位于容器外） */
    width: 16px; /* 宽度16像素 */
    height: 16px; /* 高度16像素 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    background: #ff4444; /* 背景色为红色 */
    color: white; /* 文字颜色为白色 */
    font-size: 12px; /* 字体大小12像素 */
    font-weight: bold; /* 字体粗体 */
    cursor: pointer; /* 鼠标指针为手型 */
    display: none; /* 默认不显示 */
    align-items: center; /* 子项在交叉轴上居中对齐 */
    justify-content: center; /* 子项在主轴上居中对齐 */
    padding: 0; /* 无内边距 */
    line-height: 1; /* 行高为1 */
}

/* 选项卡容器悬停时显示删除按钮 */
.tab-container:hover .tab-delete-btn {
    display: flex; /* 显示为弹性盒子 */
}

/* 选项卡删除按钮悬停状态 */
.tab-delete-btn:hover {
    background: #cc0000; /* 悬停时背景变为深红色 */
}

/* Microsoft浏览器输入框占位符文本样式 */
::-ms-input-placeholder {
    color: #666; /* 占位符文字颜色为灰色 */
}

/* 文件大小显示样式 */
.file-size {
    width: 80px; /* 固定宽度80像素 */
    text-align: center; /* 文字居中对齐 */
    font-size: 12px; /* 字体大小12像素 */
    color: #888; /* 文字颜色为灰色 */
    font-weight: bold; /* 字体粗体 */
    background: #2a2a2a; /* 背景色为深灰色 */
    padding: 4px 8px; /* 内边距：上下4px，左右8px */
    border-radius: 4px; /* 圆角半径4像素 */
    border: 1px solid #444; /* 1像素深灰色边框 */
}

/* 控制区域按钮专门样式 - 每个按钮可独立设置 */

/* 播放/暂停按钮样式 */
#play-pause-btn {
    font-size: 20px; /* 字体大小14像素 */
    color: #000; /* 文字颜色为黑色，对比清晰 */
    background: linear-gradient(145deg, #ff8c00, #e67e00); /* 橙色渐变背景 */
    width: 50px; /* 按钮宽度50像素 */
    height: 50px; /* 按钮高度50像素 */
    margin: 0px; /* 外间距0像素 */
    border: 1px solid #555; /* 边框颜色 */
    border-radius: 5px; /* 圆角5像素 */
    cursor: pointer; /* 鼠标指针为手型 */
    font-weight: bold; /* 字体粗体 */
    transition: all 0.3s ease; /* 所有属性过渡效果0.3秒 */
     display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 播放状态样式（播放中） */
#play-pause-btn.playing {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); /* 橙色渐变背景 */
}

/* 停止按钮样式 */
#stop-btn {
    font-size: 25px; /* 字体大小14像素 */
    color: #ffffff; /* 字体颜色白色 */
    background: linear-gradient(135deg, #F44336 0%, #9c0000 100%); /* 红色渐变背景 */
    width: 45px; /* 按钮宽度45像素 */
    height: 45px; /* 按钮高度45像素 */
    margin:0px; /* 外间距0像素 */
    border: 1px solid #555; /* 边框颜色 */
    border-radius: 5px; /* 圆角5像素 */
    cursor: pointer; /* 鼠标指针为手型 */
    font-weight: bold; /* 字体粗体 */
    transition: all 0.3s ease; /* 所有属性过渡效果0.3秒 */
     display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 上一个按钮样式 */
#prev-btn {
    font-size: 14px; /* 字体大小14像素 */
    color: #ffffff; /* 字体颜色白色 */
    background: linear-gradient(145deg, #333, #222); /* 按钮背景为深色渐变 */
    border: 1px solid #555; /* 边框颜色 */
    width: 45px; /* 按钮宽度45像素 */
    height: 45px; /* 按钮高度45像素 */
    margin:0px; /* 外间距0像素 */
    border-radius: 5px; /* 圆角5像素 */
    cursor: pointer; /* 鼠标指针为手型 */
    font-weight: bold; /* 字体粗体 */
    transition: all 0.3s ease; /* 所有属性过渡效果0.3秒 */
     display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 下一个按钮样式 */
#next-btn {
    font-size: 14px; /* 字体大小14像素 */
    color: #ffffff; /* 字体颜色白色 */
    background: linear-gradient(145deg, #333, #222); /* 按钮背景为深色渐变 */
    border: 1px solid #555; /* 边框颜色 */
    width: 45px; /* 按钮宽度45像素 */
    height: 45px; /* 按钮高度45像素 */
    margin: 0px; /* 外间距0像素 */
    border-radius: 5px; /* 圆角5像素 */
    cursor: pointer; /* 鼠标指针为手型 */
    font-weight: bold; /* 字体粗体 */
    transition: all 0.3s ease; /* 所有属性过渡效果0.3秒 */
     display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 静音按钮样式 */
#mute-btn {
    font-size: 11px; /* 字体大小14像素 */
    color: #ffffff; /* 字体颜色白色 */
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); /* 绿色渐变背景 */
    width: 60px; /* 按钮宽度60像素 */
    height: 30px; /* 按钮高度30像素 */
    margin: 5px; /* 外间距5像素 */
    border: 1px solid #555; /* 边框颜色 */
    border-radius: 5px; /* 圆角5像素 */
    cursor: pointer; /* 鼠标指针为手型 */
    font-weight: bold; /* 字体粗体 */
    transition: all 0.3s ease; /* 所有属性过渡效果0.3秒 */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 静音状态样式 */
#mute-btn.muted {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); /* 红色渐变背景 */
}

/* 进度条容器行样式 */
.progress-row {
    display: flex; /* 使用Flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 两端对齐 */
    width: 100%; /* 宽度100% */
    margin: 5px 0; /* 上下外边距5像素 */
}

/* 上面一行：音频信息 */
.progress-row.top-row {
    justify-content: center; /* 居中对齐 */
}

/* 中间一行：进度条 */
.progress-row.middle-row {
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中对齐 */
}

/* 下面一行：倒计时 */
.progress-row.bottom-row {
    justify-content: center; /* 居中对齐 */
}

/* 当前播放音频信息样式 */
.current-track-info {
    width: 100%; /* 宽度100% */
    text-align: center; /* 文字居中对齐 */
    font-size: 14px; /* 字体大小14像素 */
    color: #00ff88; /* 亮绿色文字 */
    font-weight: bold; /* 字体粗体 */
    padding: 5px; /* 内边距5像素 */
    background: rgba(42, 42, 42, 0.8); /* 半透明深灰色背景 */
    border-radius: 5px; /* 圆角5像素 */
    border: 1px solid #00ff88; /* 亮绿色边框 */
}

/* 播放列表控制面板 */
.playlist-controls {
    background: rgba(42, 42, 42, 0.9); /* 背景颜色：深灰色半透明 (RGBA: 42,42,42,0.9) */
    margin: 0px 5px;               /* 外边距：上下 左右 */
    padding: 10px;              /* 内边距：5像素 */
    border-radius:  15px 15px 0 0; /* 仅左下和右下角有15像素圆角 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6); /* 盒子阴影：X偏移0，Y偏移8px，模糊25px，透明度60%的黑色 */
    border: 1px solid #555;     /* 边框：1像素实线，深灰色 (#555) */
    display: flex;
    justify-content: space-between;
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}


/* 列表播放模式按钮基础样式 */
.btn-playlist {
    background: linear-gradient(135deg, #4f5050 0%, #646464 100%); /* 应用蓝绿色渐变背景 */
    width: 120px; /* 设置宽度为120像素 */
    height: 35px; /* 设置高度为35像素 */
    margin: 10px 5px; /* 设置外边距：上下10px，左右5px */
    color: white; /* 文字颜色为白色 */
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    
    /* 新增美化样式 */
    border: none; /* 移除默认边框 */
    border-radius: 8px; /* 圆角半径，接近高度的一半形成胶囊形状 */
    cursor: pointer; /* 鼠标悬停时显示手型指针 */
    font-family: 'Arial', sans-serif; /* 设置字体 */
    font-weight: bold; /* 加粗文字 */
    font-size: 14px; /* 设置字体大小 */
    text-transform: uppercase; /* 字母大写 */
    letter-spacing: 0.5px; /* 字间距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影增强立体感 */
    transition: all 0.3s ease; /* 为所有变化添加平滑过渡效果 */
}

/* 鼠标悬停时的效果 */
.btn-playlist:hover {
    background: linear-gradient(135deg, #ffa602 0%, #d8900a 100%); /* 加深渐变背景 */
    transform: translateY(-2px); /* 轻微上移 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 增强阴影 */
}

/* 按钮被点击时的效果 */

/* 当前播放音频信息显示区域 */
.track-info-display {
    text-align: center;
    margin: 5px 0;
    padding: 8px;
    background: rgba(30, 30, 30, 0.8);
    border-radius: 5px;
    border: 1px solid #4CAF50;
}

.current-track-name {
    font-size: 20px;
    font-weight: bold;
    color: #00a8f7;
    display: block;
    margin-bottom: 3px;
    text-align: center;

}

.btn-playlist:active {
    transform: translateY(0); /* 取消上移 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
}

/* 播放模式按钮高亮样式 */
.btn-playlist.active {
    background: linear-gradient(135deg, #ff9800 0%, #ff7700 100%); /* 橙色渐变背景 */
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.5); /* 添加橙色阴影 */
}

/* 错误状态样式 */
.track-item.error {
    background-color: #ffebee !important;
    border-left: 4px solid #f44336;
}

.track-item.error .track-info {
    color: #d32f2f;
}

.btn-play-toggle[title="文件未找到"],
.btn-pause-toggle[title="文件未找到"] {
    background-color: #ffcdd2 !important;
    color: #d32f2f !important;
    border-color: #f44336 !important;
}

/* 错误消息动画 */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* 多文件上传样式 */
#file-list-container {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #444;
}



.file-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background: #333;
    border-radius: 6px;
    border-left: 3px solid #00ff88;
}

.file-list-item:hover {
    background: #3a3a3a;
}

.file-name {
    color: #e0e0e0;
    font-size: 14px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size {
    color: #888;
    font-size: 12px;
    margin: 0 10px;
}

.file-remove-btn {
    background: #ff4444;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.file-remove-btn:hover {
    background: #cc0000;
    transform: scale(1.1);
}

/* 多文件上传进度界面 */
#multi-upload-progress-container {
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00ff88;
    border-radius: 15px;
    padding: 30px;
    min-width: 400px;
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: auto;
}

.file-progress-item {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #444;
}

.file-progress-item:hover {
    background: #333;
}

/* 文件选择输入框样式优化 */
#audio-files {
    background: #2a2a2a;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 12px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

#audio-files:hover {
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

#audio-files::file-selector-button {
    background: #00ff88;
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
}

#audio-files::file-selector-button:hover {
    background: #00cc66;
}

/* ====================== 备注编辑模态窗口样式 ====================== */
/* 备注模态窗口容器 */
#remark-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    border: 2px solid #8701a1;
    border-radius: 8px;
    padding: 20px;
    z-index: 1000;
    display: none; /* 默认隐藏模态窗口 */
    box-shadow: 0 0 30px rgba(220, 104, 255, 0.3);
    min-width: 400px;
    max-width: 500px;
}

/* 模态窗口标题 */
#remark-modal h3 {
    color: #e66aff;
    margin: 0 0 15px 0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* 文本区域样式 */
#remark-modal textarea {
    width: 100%;
    min-height: 100px;
    background: #2a2a2a;
    border: 1px solid #ac02ac;
    border-radius: 4px;
    color: #e0e0e0;
    padding: 10px;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 15px;
}

/* 文本区域聚焦状态 */
#remark-modal textarea:focus {
    outline: none;
    border-color: #f57aef;
    box-shadow: 0 0 5px rgba(134, 2, 151, 0.3);
}

/* 按钮容器 */
#remark-modal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 按钮样式 */
#remark-modal button {
    background: #a101a1;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

/* 按钮悬停效果 */
#remark-modal button:hover {
    background: #cc00bb;
}

/* 取消按钮样式 */
#remark-modal button.cancel {
    background: #666;
    color: #fff;
}

/* 取消按钮悬停效果 */
#remark-modal button.cancel:hover {
    background: #888;
}

/* 模态窗口背景遮罩 */
#remark-modal::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* 音轨移动高亮样式 */
.track-highlight {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 153, 255, 0.3) 100%) !important;
    border-left: 4px solid #00a8ff !important;
    transition: all 0.3s ease;
}

.track-highlight .track-name {
    color: #e6f7ff !important;
    font-weight: bold;
}

/* ==================== 个人管理页面样式 ==================== */
/* 个人管理页面容器 */
.user-management-container {
    background: rgba(42, 42, 42, 0.9);
    margin: 20px;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    border: 1px solid #555;
    min-height: 600px;
}

/* 个人管理页面标题 */
.user-management-title {
    text-align: center;
    font-size: 28px;
    color: #d800a2;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(253, 119, 231, 0.3);
    font-weight: bold;
}

/* 侧边工具栏样式 */
.sidebar-toolbar {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 20px;
    margin-right: 20px;
    border: 1px solid #444;
    width: 200px;
    float: left;
}

/* 工具栏按钮样式 */
.toolbar-btn {
    display: block;
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #666 0%, #444 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.toolbar-btn:hover {
    background: linear-gradient(135deg, #888 0%, #666 100%);
    transform: translateY(-2px);
}

.toolbar-btn.active {
    background: linear-gradient(135deg, #d800a2 0%, #a5007a 100%);
    box-shadow: 0 5px 15px rgba(216, 0, 162, 0.4);
}

/* 内容框架样式 */
.content-frame {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #444;
    margin-left: 240px;
    min-height: 500px;
}

/* 演出列表样式 */
.playlist-management {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.playlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #222;
    border-radius: 6px;
    margin-bottom: 8px;
    border-left: 4px solid #d800a2;
}

.playlist-item:hover {
    background: #2a2a2a;
}

.playlist-name {
    color: #e0e0e0;
    font-size: 16px;
    font-weight: bold;
}

.playlist-controls {
    display: flex;
    gap: 10px;
}

/* 音频列表样式 */
.audio-management {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 15px;
}

.audio-table {
    width: 100%;
    border-collapse: collapse;
}

.audio-table th {
    background: #d800a2;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: bold;
}

.audio-table td {
    padding: 10px;
    border-bottom: 1px solid #444;
    color: #e0e0e0;
}

.audio-table tr:hover {
    background: #2a2a2a;
}

/* 个人安全样式 */
.security-management {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 20px;
}

.security-form {
    max-width: 400px;
    margin: 0 auto;
}

.security-form .form-group {
    margin-bottom: 20px;
}

.security-form label {
    display: block;
    margin-bottom: 8px;
    color: #d800a2;
    font-weight: bold;
}

.security-form input {
    width: 100%;
    padding: 12px;
    background: #2a2a2a;
    border: 2px solid #444;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 14px;
}

.security-form input:focus {
    outline: none;
    border-color: #d800a2;
    box-shadow: 0 0 10px rgba(216, 0, 162, 0.3);
}

.security-btn {
    background: linear-gradient(135deg, #d800a2 0%, #a5007a 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.security-btn:hover {
    background: linear-gradient(135deg, #a5007a 0%, #d800a2 100%);
    transform: translateY(-2px);
}

/* 编辑模态框样式 */
.edit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    border: 2px solid #d800a2;
    border-radius: 10px;
    padding: 25px;
    z-index: 1000;
    box-shadow: 0 0 30px rgba(216, 0, 162, 0.3);
    min-width: 400px;
}

.edit-modal h3 {
    color: #d800a2;
    margin-bottom: 20px;
    text-align: center;
}

.edit-modal input,
.edit-modal select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 5px;
    color: #e0e0e0;
}

.edit-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.edit-modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.edit-modal-btn.save {
    background: #d800a2;
    color: white;
}

.edit-modal-btn.cancel {
    background: #666;
    color: white;
}

.edit-modal-btn:hover {
    transform: translateY(-1px);
}