/* CSS 文件重新组织，按功能模块分类 */

/*========================================
  0. 全局变量与主题
  ========================================*/
/* 暗色主题变量 - 默认主题 */
:root {
    /* 尺寸变量 */
    --header-height: 60px;
    --controls-height: 70px;
    
    /* 颜色变量 */
    --bg-color: #1b4c3f; /* 深绿色背景 */
    --text-color: white; /* 白色文本 */
    --text-secondary: rgba(255, 255, 255, 0.7); /* 次要文本颜色 */
    --text-tertiary: rgba(255, 255, 255, 0.3); /* 第三级文本颜色 */
    --highlight-color: #CCFF00; /* 高亮颜色 */
    --pronunciation-color: #00ff00; /* 发音高亮颜色 */
    --panel-bg: rgba(27, 76, 63, 0.95); /* 面板背景色 */
    --shadow-color: rgba(0, 0, 0, 0.2); /* 阴影颜色 */
    --error-color: #ff4444; /* 错误颜色 */
    --button-bg: rgba(255, 255, 255, 0.2); /* 按钮背景色 */
    --progress-bg: rgba(255, 255, 255, 0.2); /* 进度条背景 */
    --progress-fill: white; /* 进度条填充色 */
    --icon-filter: none; /* 图标过滤器 */
}

/* 亮色主题变量 */
.light-theme {
    --bg-color: #f5f5f5; /* 浅灰色背景 */
    --text-color: #333; /* 深灰色文本 */
    --text-secondary: rgba(0, 0, 0, 0.7); /* 次要文本颜色 */
    --text-tertiary: rgba(0, 0, 0, 0.3); /* 第三级文本颜色 */
    --highlight-color: #2c841c; /* 高亮颜色-暗绿色 */
    --pronunciation-color: #009e00; /* 发音高亮颜色-深绿色 */
    --panel-bg: rgba(245, 245, 245, 0.95); /* 面板背景色 */
    --shadow-color: rgba(0, 0, 0, 0.1); /* 阴影颜色 */
    --error-color: #e60000; /* 错误颜色 */
    --button-bg: rgba(0, 0, 0, 0.1); /* 按钮背景色 */
    --progress-bg: rgba(0, 0, 0, 0.1); /* 进度条背景 */
    --progress-fill: #333; /* 进度条填充色 */
    --icon-filter: invert(0.8); /* 图标颜色反转 */
}

/*========================================
  1. 页面整体布局
  ========================================*/
/* 播放页面基础样式 - 设置整体页面布局和颜色 */
.player-page {
    background-color: var(--bg-color);  /* 使用主题变量 */
    color: var(--text-color);  /* 使用主题变量 */
    min-height: 100vh;  /* 最小高度为视口高度 */
    padding-bottom: var(--controls-height);  /* 底部留出控制栏高度的内边距 */
    display: flex;  /* 使用弹性布局 */
    flex-direction: column;  /* 垂直方向排列 */
}

/*========================================
  2. 顶部导航栏
  ========================================*/
/* 顶部导航栏 - 固定在页面顶部的导航条 */
.player-header {
    height: var(--header-height);  /* 使用预设的头部高度 */
    display: flex;  /* 弹性布局 */
    align-items: center;  /* 垂直居中对齐 */
    justify-content: space-between;  /* 两端对齐 */
    padding: 0 16px;  /* 左右内边距 */
    background-color: var(--bg-color);  /* 使用主题变量 */
    position: fixed;  /* 固定定位 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;  /* 确保显示在其他元素上方 */
    box-shadow: 0 2px 8px var(--shadow-color);  /* 使用主题变量 */
}

/* 标题样式 - 顶部导航栏中的标题文字 */
.player-header .title {
    font-size: 18px;  /* 标题字体大小 */
}

/* 返回按钮容器 - 左侧返回按钮的样式 */
.back-btn {
    background: none;  /* 移除背景 */
    border: none;  /* 移除边框 */
    color: var(--text-color);  /* 使用主题变量 */
    padding: 4px;  /* 内边距 */
    margin-left: -4px;  /* 向左偏移以对齐容器边缘 */
    cursor: pointer;  /* 鼠标指针样式 */
    display: flex;  /* 弹性布局 */
    align-items: center;  /* 垂直居中 */
    justify-content: flex-start;  /* 左对齐 */
    width: 44px;  /* 固定宽度 */
    height: 44px;  /* 固定高度 */
}

/* 返回按钮图标 - 返回箭头的样式 */
.icon-back {
    font-style: normal;  /* 移除斜体样式 */
    font-size: 38px;  /* 字体大小 */
    line-height: 1;  /* 行高 */
    display: inline-block;  /* 行内块级显示 */
}

/* 右侧占位符 - 用于平衡布局的空白区域 */
.right-placeholder {
    width: 40px;  /* 固定宽度，用于平衡布局 */
}

/*========================================
  3. 歌曲信息区域
  ========================================*/
/* 歌曲信息区域 - 显示歌曲相关信息的区域 */
.song-info {
    padding: 4px 16px;  /* 内边距 */
    text-align: center;  /* 文本居中 */
    margin-bottom: 4px;  /* 底部外边距 */
}

/* 歌曲标题 - 歌曲名称的样式 */
.song-info .title {
    font-size: 16px;  /* 字体大小 */
    color: rgba(255, 255, 255, 0.9);  /* 接近不透明的白色 */
    margin-bottom: 4px;  /* 底部外边距 */
}

/* 歌曲副标题 - 作词作曲等信息的样式 */
.song-info .subtitle {
    font-size: 12px;  /* 字体大小 */
    color: rgba(255, 255, 255, 0.6);  /* 半透明白色 */
    line-height: 1.2;  /* 行高 */
}

/* 副标题中的间隔 - 作词作曲等信息之间的间隔 */
.song-info .subtitle span {
    margin: 0 8px;  /* 左右外边距 */
    display: inline-block;  /* 行内块级显示 */
}

/*========================================
  4. 播放控制区域
  ========================================*/
/* 底部播放控制区 - 固定在底部的播放控制栏 */
.player-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-color);  /* 使用主题变量 */
    padding: 8px;
    z-index: 100;  /* 确保控制栏在最上层 */
}

/* 控制区域布局 - 控制按钮的整体布局 */
.control-area {
    display: flex;  /* 弹性布局 */
    align-items: center;  /* 垂直居中 */
    gap: 0;  /* 元素间距 */
    padding: 0 5px;  /* 左右内边距 */
}

/* 播放/暂停按钮 - 主要的播放控制按钮 */
.play-pause {
    width: 40px;  /* 固定宽度 */
    height: 40px;  /* 固定高度 */
    border: none;  /* 无边框 */
    background: none;  /* 无背景 */
    cursor: pointer;  /* 鼠标指针样式 */
    display: flex;  /* 弹性布局 */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    padding: 0;  /* 无内边距 */
    flex-shrink: 0;  /* 禁止收缩 */
    margin: 0;  /* 移除外边距 */
}

/* 播放/暂停按钮图标 - 按钮中的图标样式 */
.play-pause img {
    width: 32px;  /* 固定宽度 */
    height: 32px;  /* 固定高度 */
    object-fit: contain;  /* 保持图片比例 */
    filter: var(--icon-filter);  /* 图标过滤器 */
}

/* 进度条区域 - 显示播放进度的区域 */
.progress-bar {
    flex: 1;  /* 占用剩余空间 */
    display: flex;  /* 弹性布局 */
    align-items: center;  /* 垂直居中 */
    gap: 4px;  /* 元素间距 */
    margin: 0 8px;  /* 两侧外边距相等 */
}

/* 时间显示 - 当前时间和总时长的显示样式 */
.progress-bar .current-time,
.progress-bar .total-time {
    font-size: 12px;  /* 字体大小 */
    color: var(--text-secondary);  /* 使用主题变量 */
    width: 35px;  /* 固定宽度 */
    text-align: center;  /* 文本居中 */
    margin: -3px;  /* 左侧负外边距 */
}

/* 进度条 - 播放进度条的基本样式 */
.progress-bar .progress {
    flex: 1;  /* 占用剩余空间 */
    height: 4px;  /* 固定高度 */
    background-color: var(--progress-bg);  /* 使用主题变量 */
    border-radius: 2px;  /* 圆角 */
    cursor: pointer;  /* 鼠标指针样式 */
    position: relative;  /* 相对定位 */
}

/* 进度条内部 - 显示已播放进度的部分 */
.progress-bar .progress-inner {
    position: absolute;  /* 绝对定位 */
    left: 0;
    top: 0;
    height: 100%;  /* 填充高度 */
    background-color: var(--progress-fill);  /* 使用主题变量 */
    border-radius: 2px;  /* 圆角 */
    width: 1%;  /* 初始宽度 */
}

/* 右侧按钮组 - 收藏和设置按钮的样式 */
.favorite-btn,
.settings-btn {
    width: 44px;  /* 固定宽度 */
    height: 44px;  /* 固定高度 */
    border: none;  /* 无边框 */
    background: none;  /* 无背景 */
    padding: 0;  /* 无内边距 */
    cursor: pointer;  /* 鼠标指针样式 */
    display: flex;  /* 弹性布局 */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    margin-left: -8px;  /* 左侧负外边距 */
}

/* 右侧按钮图标 - 收藏和设置按钮中的图标样式 */
.favorite-btn img, 
.settings-btn img {
    width: 26px;  /* 固定宽度 */
    height: 26px;  /* 固定高度 */
    object-fit: contain;  /* 保持图片比例 */
    filter: var(--icon-filter);  /* 图标过滤器 */
}

/* 禁用按钮样式 - 按钮禁用状态的样式 */
.player-controls button:disabled {
    opacity: 0.5;  /* 半透明 */
    cursor: not-allowed;  /* 禁用鼠标指针样式 */
}

/*========================================
  5. 动画效果
  ========================================*/
/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 卡拉OK跳动动画 */
@keyframes karaoke-bounce {
    from { transform: scale(1.5); }
    to { transform: scale(1.7); }
}

/* 卡拉OK颜色变化动画 */
@keyframes karaoke-color-change {
    0% { color: #CCFF00; text-shadow: 0 0 8px rgba(204, 255, 0, 0.8); }
    33% { color: #00FFCC; text-shadow: 0 0 8px rgba(0, 255, 204, 0.8); }
    66% { color: #FF66FF; text-shadow: 0 0 8px rgba(255, 102, 255, 0.8); }
    100% { color: #FFCC00; text-shadow: 0 0 8px rgba(255, 204, 0, 0.8); }
}

/*========================================
  6. 歌词容器与歌词行
  ========================================*/
/* 歌词容器 - 主要的歌词显示区域 */
.lyrics-container {
    position: fixed; /* 固定定位 */
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 50px; /* 预留VIP提示和播放控制区域的空间 */
    overflow-y: auto; /* 垂直方向可滚动 */
    padding: 10px 16px; /* 内边距 */
    display: flex; /* 弹性布局 */
    flex-direction: column;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* 平滑滚动 */
}

/* 歌词行(.lyrics-line)相关的所有样式 */
.lyrics-line {
    text-align: left;  /* 文本左对齐 */
    margin: 0;  /* 上下外边距 */
    transition: opacity 0.3s ease;  /* 透明度过渡动画 */
    opacity: 0.8;  /* 默认透明度 */
    position: relative;  /* 相对定位 */
}

/* 当前播放行样式 */
.lyrics-line.active {
    opacity: 1;
    margin: 1rem 0;
    position: relative;
    padding: 4px 0;
    /* background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0)); */
    border-radius: 16px;
}

/* 填充行样式 */
.lyrics-line.padding {
    height: calc((100vh - var(--header-height) - var(--controls-height)) * 0.4);  /* 动态计算高度 */
    margin: 0;  /* 无外边距 */
    padding: 0;  /* 无内边距 */
    opacity: 0;  /* 完全透明 */
}

/* 歌词行容器样式 */
.lyrics-line .line-content {
    max-width: 100%;
    text-align: center;
    position: relative;
    overflow-x: hidden; /* 使用transform滚动 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏webkit滚动条 */
.lyrics-line .line-content::-webkit-scrollbar {
    display: none;
}

/* 歌词文字样式 */
.lyrics-line .text {
    display: inline-flex; /* 保持内联弹性布局 */
    white-space: nowrap;
    transition: transform 0.3s ease; /* 添加平滑滚动效果 */
    justify-content: flex-start; /* 左对齐 */
    flex-wrap: nowrap; /* 禁止换行 */
    gap: 4px; /* 元素间距 */
}

/* 左侧指示器 - 当内容超过容器宽度时 */
.lyrics-line .line-content:has(.text .char:nth-child(n+20))::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(to right, rgba(0,0,0,0.5), transparent);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: fadeIn 0.5s forwards;
}

/* 右侧指示器 - 当内容超过容器宽度时 */
.lyrics-line .line-content:has(.text .char:nth-child(n+20))::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(to left, rgba(0,0,0,0.5), transparent);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: fadeIn 0.5s forwards;
}

/* 歌词中的拼音显示 */
.lyrics-line .pinyin {
    font-size: 12px;  /* 字体大小 */
    color: rgba(255, 255, 255, 0.6);  /* 半透明白色 */
    margin-bottom: 4px;  /* 底部外边距 */
}

/* 发音按钮 */
.lyrics-line .pronounce {
    position: absolute;  /* 绝对定位 */
    right: 0;  /* 靠右对齐 */
    top: 50%;  /* 垂直居中 */
    transform: translateY(-50%);  /* 垂直居中调整 */
    background: none;  /* 无背景 */
    border: none;  /* 无边框 */
    color: rgba(255, 255, 255, 0.6);  /* 半透明白色 */
    padding: 8px;  /* 内边距 */
    cursor: pointer;  /* 鼠标指针样式 */
}

/* 发音按钮悬停效果 */
.lyrics-line .pronounce:hover {
    color: white;  /* 纯白色 */
}

/* 翻译行(.translate-line)相关的所有样式 */
.translate-line {
    margin-top: 3px;
    display: block;  /* 块级显示 */
    color: var(--text-tertiary);  /* 半透明白色 */
    font-size: 15px;  /* 字体大小 */
    font-weight: normal;  /* 字体粗细 */
    font-style: italic;
    cursor: pointer;  /* 鼠标指针样式 */
    user-select: none;  /* 禁止文本选择 */
    width: 100%;  /* 确保宽度充满容器 */
    transition: color 0.3s ease;  /* 添加颜色过渡动画 */
    white-space: nowrap;  /* 文本不换行 */
}

/* 给翻译行添加中括号 */
.translate-line span::before {
    content: '[';
    font-style: normal;
    margin-right: 4px;
}

.translate-line span::after {
    content: ']';
    font-style: normal;
    margin-left: 4px;
}

/* 当前播放行的翻译行样式 */
.lyrics-line.active .translate-line {
    color: var(--text-color);  
}

/*========================================
  7. 字符(.char)相关样式
  ========================================*/
/* 字符容器(.char)基本样式 */
.lyrics-line .char {
    display: inline-flex;  /* 改为内联弹性布局 */
    flex-direction: column;  /* 垂直方向排列 */
    align-items: center;  /* 居中对齐 */
    min-width: 20px;  /* 最小宽度调小一点 */
    padding: 0;  /* 无内边距 */
    flex-shrink: 0;  /* 防止压缩 */
    transform: scale(1);  /* 默认缩放比例 */
    position: relative;  /* 添加相对定位 */
    transition: all 0.2s ease;  /* 添加过渡效果 */
}

/* 自适应长歌词行的字符宽度 */
.lyrics-line .text:has(.char:nth-child(n+20)) .char {
    min-width: 18px;  /* 减小最小宽度 */
}

/* 自适应超长歌词行的字符宽度 */
.lyrics-line .text:has(.char:nth-child(n+30)) .char {
    min-width: 16px;  /* 进一步减小宽度 */
}

/* 字符第一个位置特殊处理 */
.lyrics-line .char:first-child {
    align-items: flex-start;  /* 第一个字左对齐 */
}

/* 当前高亮字符样式 */
.lyrics-line .char.current {
    transform: scale(1.2) !important;  /* 放大1.2倍 */
    z-index: 10;  /* 提高层级，确保在最上层 */
    animation: karaoke-bounce 0.3s infinite alternate !important;  /* 添加跳动动画 */
}

/* 当前高亮字符中的谐音和汉字样式 */
.lyrics-line .char.current .xy-line,
.lyrics-line .char.current .hz-line {
    color: var(--highlight-color) !important;  /* 使用主题变量 */
    font-weight: bold !important;  /* 加粗 */ 
    /*text-shadow: 0 0 1px rgba(204, 255, 0, 0.7), 0 0 15px rgba(204, 255, 0, 0.5) !important; /* 增强发光效果 */
    /*animation: karaoke-color-change 0.8s infinite alternate !important;  /* 添加颜色变化动画 */
}

/* 已播放字符样式 */
.lyrics-line .char.played:not(.current) .xy-line,
.lyrics-line .char.played:not(.current) .hz-line {
    color: var(--text-color) !important;  /* 使用主题变量 */
    opacity: 0.95;  /* 几乎完全不透明 */
    font-weight: normal;
    text-shadow: 0 0 2px var(--shadow-color);  /* 使用主题变量 */
}

/* 未播放字符样式 */
.lyrics-line .char:not(.played):not(.current) .xy-line,
.lyrics-line .char:not(.played):not(.current) .hz-line {
    color: var(--text-tertiary) !important;  /* 使用主题变量 */
    font-weight: normal;
    text-shadow: none;
}

/* 增强播放行内未播放字符对比度 */
.lyrics-line.active .char:not(.current):not(.played) .xy-line,
.lyrics-line.active .char:not(.current):not(.played) .hz-line {
    color: var(--text-tertiary) !important;  /* 使用主题变量 */
}

/* 预高亮效果 - 即将播放的字符 */
.lyrics-line .char.pre-highlight {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    z-index: 5;
}

/* 预高亮字符中的谐音和汉字样式 */
.lyrics-line .char.pre-highlight .xy-line,
.lyrics-line .char.pre-highlight .hz-line {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

/*========================================
  8. 谐音行样式
  ========================================*/
/* 谐音行(.xy-line)基本样式 */
.lyrics-line .xy-line {
    display: block;  /* 块级显示 */
    color: rgba(225, 255, 255, 0.95);   /* 半透明白色 */
    font-size: 14px;  /* 字体大小 */
    font-weight: 100;  /* 字体粗细 */
    margin-bottom: 2px;  /* 底部外边距 */
    min-height: 16px;  /* 最小高度 */
    width: 100%;  /* 确保宽度充满容器 */
    white-space: nowrap;  /* 文本不换行 */
    text-align: center;  /* 文本居中 */
}

/* 谐音行字体大小自适应 */
.lyrics-line .text:has(.char:nth-child(n+20)) .xy-line {
    font-size: 14px;  /* 缩小谐音字体 */
}

.lyrics-line .text:has(.char:nth-child(n+30)) .xy-line {
    font-size: 12px;  /* 进一步缩小谐音字体 */
}

/*========================================
  9. 汉字行样式
  ========================================*/
/* 汉字行(.hz-line)基本样式 */
.lyrics-line .hz-line {
    display: block;  /* 块级显示 */
    color: rgba(225, 255, 255, 0.515); /* 半透明白色 */
    font-size: 13px;  /* 字体大小 */
    font-weight: 100;  /* 字体粗细 */
    cursor: pointer;  /* 鼠标指针样式 */
    user-select: none;  /* 禁止文本选择 */
    width: 100%;  /* 确保宽度充满容器 */
    transition: color 0.3s ease;  /* 添加颜色过渡动画 */
    white-space: nowrap;  /* 文本不换行 */
}

/* 汉字行字体大小自适应 */
.lyrics-line .text:has(.char:nth-child(n+20)) .hz-line {
    font-size: 12px;  /* 缩小汉字字体 */
}

.lyrics-line .text:has(.char:nth-child(n+30)) .hz-line {
    font-size: 10px;  /* 进一步缩小汉字字体 */
}

/* 当前播放行的汉字样式 */
.lyrics-line.active .hz-line {
    color: rgba(225, 255, 255, 0.95);  /* 默认颜色 */
    font-weight: 100;  /* 默认字重 */
}

/*========================================
  10. 发音高亮样式 - 合并相关选择器
  ========================================*/
/* 发音高亮的基本样式 - 对所有含有pronouncing类的元素应用 */
.char.pronouncing,
.xy-line.pronouncing,
.hz-line.pronouncing {
    color: var(--pronunciation-color) !important; /* 使用主题变量 */
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7) !important; /* 绿色发光效果 */
    opacity: 1 !important;
    transform: scale(1.2) !important;
    z-index: 15 !important; /* 高于正常高亮 */
    transition: all 0.3s ease !important;
}

/* 确保任何状态下的发音高亮都能显示，不受其他样式干扰 */
.char.played .xy-line.pronouncing,
.char.played .hz-line.pronouncing,
.char.current .xy-line.pronouncing,
.char.current .hz-line.pronouncing,
.char:not(.played):not(.current) .xy-line.pronouncing,
.char:not(.played):not(.current) .hz-line.pronouncing {
    color: var(--pronunciation-color) !important; /* 使用主题变量 */
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.99) !important;
    opacity: 1 !important;
}

/* 亮色主题下的发音高亮文字阴影调整 */
.light-theme .char.pronouncing,
.light-theme .xy-line.pronouncing,
.light-theme .hz-line.pronouncing,
.light-theme .char.played .xy-line.pronouncing,
.light-theme .char.played .hz-line.pronouncing,
.light-theme .char.current .xy-line.pronouncing,
.light-theme .char.current .hz-line.pronouncing,
.light-theme .char:not(.played):not(.current) .xy-line.pronouncing,
.light-theme .char:not(.played):not(.current) .hz-line.pronouncing {
    text-shadow: 0 0 10px rgba(0, 158, 0, 0.7) !important; /* 深绿色发光效果 */
}

/*========================================
  11. 提示信息和错误样式
  ========================================*/
/* 歌词提示 - 显示在歌词区域的提示信息 */
.lyrics-hint {
    text-align: center;  /* 文本居中 */
    padding: 12px;  /* 内边距 */
    font-size: 14px;  /* 字体大小 */
    color: rgba(255, 255, 255, 0.7);  /* 半透明白色 */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: 8px 16px;
    animation: fadeIn 0.3s ease;
}

/* 歌词错误提示 - 显示歌词加载错误的样式 */
.lyrics-error {
    text-align: center;  /* 文本居中 */
    color: #ff4444;  /* 错误提示红色 */
    padding: 20px;  /* 内边距 */
    font-size: 16px;  /* 字体大小 */
    background-color: rgba(255, 68, 68, 0.1);  /* 淡红色背景 */
    border-radius: 8px;  /* 圆角 */
    margin: 20px;  /* 外边距 */
}

/* 错误消息 - 显示错误信息的样式 */
.error-message {
    text-align: center;  /* 文本居中 */
    color: #ff4444;  /* 错误提示红色 */
    padding: 16px;  /* 内边距 */
    font-size: 14px;  /* 字体大小 */
    background-color: rgba(255, 68, 68, 0.1);  /* 淡红色背景 */
    border-radius: 8px;  /* 圆角 */
    margin: 16px;  /* 外边距 */
}

/*========================================
  12. VIP相关样式
  ========================================*/
/* VIP提示区域 */
.vip-prompt {
    position: relative; /* 改为相对定位 */
    width: 100%;
    background: rgba(27, 76, 63, 0.95);
    padding: 10px 0;
    text-align: center;
    margin-top: 0px; /* 与最后一行歌词保持间距 */
    margin-bottom: 20px;
    display: none; /* 默认隐藏，通过 JavaScript 控制显示 */
    border-radius: 8px;
}

/* VIP内容区域 */
.vip-content {
    padding: 10px;
}

/* VIP标题 */
.vip-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin-bottom: 15px;
}

/* VIP按钮 */
.login-vip-btn {
    background: #00c853;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    min-width: 120px;
    transition: background-color 0.3s ease;
}

.login-vip-btn:hover {
    background: #00b34a;
}

/* VIP提示文字 */
.vip-prompt::before {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-bottom: 8px;
}

/* 移除VIP遮罩 */
.vip-mask {
    display: none;
}

/*========================================
  13. Toast消息样式
  ========================================*/
/* Toast消息样式 */
.toast-message {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s ease;
}

/* 亮色主题下Toast样式调整 */
.light-theme .toast-message {
    background-color: rgba(50, 50, 50, 0.9);
    color: white;
}

.toast-message.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* 设置面板样式 */
.settings-panel {
    background-color: var(--panel-bg) !important;
    color: var(--text-color) !important;
}

.settings-panel div {
    color: var(--text-color) !important;
}

.settings-panel button {
    background-color: var(--button-bg) !important;
    color: var(--text-color) !important;
}