                                                   	/* ================================================
   统一应用程序样式表 - app.css
   ================================================
   本文件定义了整个应用程序的所有样式
   包含主窗口、歌词窗口和控制窗口的样式

   注意：以下以 /*[OPTIONAL]*/ /*开头的样式块为可选样式
   用户可以根据需要取消注释来启用这些样式

   注释说明：
   - 每个样式块开头说明适用的控件
   - 每个属性注释说明修改该属性的效果
   - 颜色值注释说明该颜色的用途
   ================================================ */

/* ================================================
   主窗口样式
   ================================================
   适用控件：主窗口 (objectName="maincs")
   主题：浅蓝色主题
   ================================================ */

/* 主窗口样式 */
#maincs {
    /* 主窗口背景色：浅蓝色 #E6F3FF - 影响主窗口整体背景 */
    background-color: #E6F3FF;
}

/*[OPTIONAL]
 ================================================
   主窗口阴影效果（可选）
   ================================================
   适用控件：主窗口
   作用：为主窗口添加阴影效果，增加立体感
   注意：可能影响性能，在低配置设备上慎用
   ================================================ */
/*
#maincs {
    background-color: #E6F3FF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影偏移4px, 模糊12px, 黑色透明度15%
}
*/

/* 框架基础样式 */
#maincs QFrame {
    /* 框架背景色：浅蓝色 #E6F2FF - 影响所有QFrame控件的背景 */
    background-color: #E6F2FF;
    /* 框架边框：1px实线浅蓝色 #B0E0E6 - 影响所有QFrame控件的边框 */
    border: 1px solid #B0E0E6;
    /* 框架圆角：5px - 影响所有QFrame控件的圆角程度 */
    border-radius: 5px;
    /* 框架外边距：2px - 影响所有QFrame控件与其他元素的距离 */
    margin: 2px;
}

/* 顶部信息栏样式 */
#maincs #top-info-bar {
    /* 顶部信息栏最小高度：20px - 确保信息栏有最小高度 */
    min-height: 30px;
    /* 顶部信息栏最大高度：40px - 限制信息栏最大高度 */
    max-height: 60px;
    /* 只调整上下的外边距为0，左右保持不变 */
    margin-top: 0px;
    margin-bottom: 0px;
}

/* 顶部信息栏标签样式 */
#maincs #top-info-label {
    /* 顶部信息栏文字颜色：午夜蓝 #191970 - 影响顶部信息栏中标签的文字颜色 */
    color: #191970;
    /* 顶部信息栏文字粗细：粗体 - 影响顶部信息栏中标签的文字粗细 */
    font-weight: bold;
    /* 顶部信息栏文字大小：12px - 影响顶部信息栏中标签的文字大小 */
    font-size: 18px;
    /* 顶部信息栏文字字体：Arial - 影响顶部信息栏中标签的文字字体 */
    font-family: Arial;
    /* 顶部信息栏内边距：1px - 影响顶部信息栏中标签的内边距 */
    padding: 5px 10px;
}

/* 列表部件样式(包括歌单和歌曲) */
#maincs QListWidget {
    /* 列表背景色：更浅的蓝色 #F0F8FF - 影响歌单列表和歌曲列表的背景 */
    background-color: #F0F8FF;
    /* 列表边框：1px实线天蓝色 #87CEEB - 影响歌单列表和歌曲列表的边框 */
    border: 1px solid #87CEEB;
    /* 列表圆角：5px - 影响歌单列表和歌曲列表的圆角程度 */
    border-radius: 5px;
    /* 列表内边距：5px - 影响歌单列表和歌曲列表的内边距 */
    padding: 5px;
    font-family: Arial;
    font-size: 16px;
}


/* 列表项样式 */
#maincs QListWidget::item {
    /* 列表项内边距：上下8px，左右5px - 影响列表中每个项目的内边距 */
    padding: 8px 5px;
    /* 列表项底部边框：1px实线浅蓝色 #B0E0E6 - 影响列表中每个项目的分隔线 */
    border-bottom: 1px solid #B0E0E6;
}

/* 列表项选中样式 */
#maincs QListWidget::item:selected {
    /* 列表项选中背景色：天蓝色 #87CEFA - 影响列表中选中项目的背景 */
    background-color: #87CEFA;
    /* 列表项选中文字颜色：白色 - 影响列表中选中项目的文字颜色 */
    color: white;
}

/* 按钮基础样式 */
#maincs QPushButton {
    /* 按钮背景色：浅蓝色 #B0E0E6 - 影响所有普通按钮的背景 */
    background-color: #B0E0E6;
    /* 按钮边框：1px实线天蓝色 #87CEEB - 影响所有普通按钮的边框 */
    border: 1px solid #87CEEB;
    /* 按钮圆角：4px - 影响所有普通按钮的圆角程度 */
    border-radius: 4px;
    /* 按钮内边距：上下4px，左右8px - 影响所有普通按钮的内边距 */
    padding: 4px 8px;
    /* 按钮最小宽度：20px - 影响所有普通按钮的最小宽度 */
    min-width: 20px;
    /* 按钮文字粗细：粗体 - 影响所有普通按钮的文字粗细 */
    font-weight: bold;
}

/* 按钮悬停样式 */
#maincs QPushButton:hover {
    /* 按钮悬停背景色：天蓝色 #87CEEB - 影响鼠标悬停时按钮的背景 */
    background-color: #87CEEB;
}

/* 按钮按下样式 */
#maincs QPushButton:pressed {
    /* 按钮按下背景色：更浅的蓝色 #ADD8E6 - 影响鼠标按下时按钮的背景 */
    background-color: #ADD8E6;
}

/* 输入框样式 */
#maincs QLineEdit {
    /* 输入框背景色：更浅的蓝色 #F0F8FF - 影响搜索框等输入框的背景 */
    background-color: #F0F8FF;
    /* 输入框边框：1px实线天蓝色 #87CEEB - 影响搜索框等输入框的边框 */
    border: 1px solid #87CEEB;
    /* 输入框圆角：15px - 影响搜索框等输入框的圆角程度 */
    border-radius: 15px;
    /* 输入框内边距：上下5px，左右10px - 影响搜索框等输入框的内边距 */
    padding: 5px 10px;
    /* 输入框文字大小：11px - 影响搜索框等输入框的文字大小 */
    font-size: 16px;
}

/* 输入框聚焦样式 */
#maincs QLineEdit:focus {
    /* 输入框聚焦边框：1px实线钢蓝色 #4682B4 - 影响搜索框等输入框聚焦时的边框 */
    border: 1px solid #4682B4;
}


	/* 整体 QTabBar 样式 */
#maincs QTabBar {
	    background: #F0F8FF;          /* 背景色 */
	    border-bottom: 1px solid #ddd;/* 底部边框 */
	    padding: 2px;                 /* 内边距 */
	}
	/* 每个 Tab 项的基础样式 */
#maincs QTabBar::tab {
	    background: #F0F8FF;           /* 默认背景色 */
	    padding: 4px 1px;            /* 内边距（上下/左右） */
	    margin-right: 1px;            /* 右侧间距 */
	    border-top-left-radius: 4px;  /* 左上角圆角 */
	    border-top-right-radius: 4px; /* 右上角圆角 */
	    border: 1px solid #ccc;       /* 边框 */
	    min-width: 80px; /* 可选：确保最小宽度，避免过窄 */
	}
	/* 选中状态的 Tab 样式 */
#maincs QTabBar::tab:selected {
	    background: #3498db;          /* 选中时背景色 */
	    color: white;                 /* 文字颜色 */
	    border-color: #2980b9;        /* 边框颜色 */
	}
	/* 悬停状态的 Tab 样式 */
#maincs QTabBar::tab:hover {
	    background: #87CEFA;          /* 悬停时背景色 */
	}

/* 下拉框样式 */
#maincs QComboBox {
    /* 下拉框背景色：浅蓝色 #B0E0E6 - 影响播放模式下拉框的背景 */
    background-color: #B0E0E6;
    /* 下拉框边框：1px实线天蓝色 #87CEEB - 影响播放模式下拉框的边框 */
    border: 1px solid #87CEEB;
    /* 下拉框圆角：4px - 影响播放模式下拉框的圆角程度 */
    border-radius: 4px;
    /* 下拉框内边距：上下2px，左右5px - 影响播放模式下拉框的内边距 */
    padding: 2px 5px;
    /* 下拉框最小宽度：80px - 影响播放模式下拉框的最小宽度 */
    min-width: 80px;
    /* 下拉框文字粗细：粗体 - 影响播放模式下拉框的文字粗细 */
    font-weight: bold;
}

/* 下拉框下拉按钮样式 */
#maincs QComboBox::drop-down {
    /* 下拉按钮边框：无 - 影响播放模式下拉框右侧下拉按钮的边框 */
    border: none;
    /* 下拉按钮宽度：15px - 影响播放模式下拉框右侧下拉按钮的宽度 */
    width: 15px;
}

/* 下拉框下拉箭头样式 */
#maincs QComboBox::down-arrow {
    /* 下拉箭头图片：无 - 影响播放模式下拉框下拉箭头的图片 */
    image: none;
    /* 下拉箭头左边框：4px透明 - 用于绘制三角形箭头的左边 */
    border-left: 4px solid transparent;
    /* 下拉箭头右边框：4px透明 - 用于绘制三角形箭头的右边 */
    border-right: 4px solid transparent;
    /* 下拉箭头上边框：4px午夜蓝 #191970 - 用于绘制三角形箭头的上边 */
    border-top: 4px solid #191970;
}

/* 滑块轨道样式 */
#maincs QSlider::groove:horizontal {
    /* 滑块轨道边框：1px实线天蓝色 #87CEEB - 影响播放进度条轨道的边框 */
    border: 1px solid #87CEEB;
    /* 滑块轨道高度：6px - 影响播放进度条轨道的高度 */
    height: 6px;
    /* 滑块轨道背景：浅蓝色 #E6F2FF - 影响播放进度条轨道的背景 */
    background: #E6F2FF;
    /* 滑块轨道外边距：上下2px，左右0 - 影响播放进度条轨道的外边距 */
    margin: 2px 0;
    /* 滑块轨道圆角：3px - 影响播放进度条轨道两端的圆角 */
    border-radius: 3px;
}

/* 滑块滑手样式 */
#maincs QSlider::handle:horizontal {
    /* 滑块滑手背景：天蓝色 #87CEEB - 影响播放进度条滑手的背景 */
    background: #87CEEB;
    /* 滑块滑手边框：1px实线钢蓝色 #4682B4 - 影响播放进度条滑手的边框 */
    border: 1px solid #4682B4;
    /* 滑块滑手宽度：16px - 影响播放进度条滑手的宽度 */
    width: 16px;
    /* 滑块滑手外边距：上下-5px，左右0 - 影响播放进度条滑手的垂直位置 */
    margin: -5px 0;
    /* 滑块滑手圆角：8px - 影响播放进度条滑手的圆角程度 */
    border-radius: 8px;
}

/* 滑块滑手悬停样式 */
#maincs QSlider::handle:horizontal:hover {
    /* 滑块滑手悬停背景：钢蓝色 #4682B4 - 影响鼠标悬停时播放进度条滑手的背景 */
    background: #4682B4;
}

/* 复选框样式 */
#maincs QCheckBox {
    /* 复选框背景色：透明 - 影响所有复选框的背景 */
    background-color: transparent;
    /* 复选框文字颜色：午夜蓝 #191970 - 影响所有复选框的文字颜色 */
    color: #191970;
    /* 复选框间距：5px - 影响复选框与文字之间的距离 */
    spacing: 5px;
    /* 复选框文字粗细：粗体 - 影响所有复选框的文字粗细 */
    font-weight: bold;
}

/* 复选框指示器样式 */
#maincs QCheckBox::indicator {
    /* 复选框指示器宽度：16px - 影响复选框方框的宽度 */
    width: 16px;
    /* 复选框指示器高度：16px - 影响复选框方框的高度 */
    height: 16px;
    /* 复选框指示器边框：1px实线天蓝色 #87CEEB - 影响复选框方框的边框 */
    border: 1px solid #87CEEB;
    /* 复选框指示器圆角：3px - 影响复选框方框的圆角程度 */
    border-radius: 3px;
    /* 复选框指示器背景色：更浅的蓝色 #F0F8FF - 影响复选框方框的背景 */
    background-color: #F0F8FF;
}

/* 复选框指示器选中样式 */
#maincs QCheckBox::indicator:checked {
    /* 复选框指示器选中背景：天蓝色 #87CEEB - 影响复选框选中时方框的背景 */
    background-color: #87CEEB;
    /* 复选框指示器选中图标：勾号SVG - 影响复选框选中时显示的勾号 */
    image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzE5MTk3MCIgZD0iTTEwIDE3bDUtNSA1LTUgTDEwIDE3eiIvPjwvc3ZnPg==);
}

/* 文本编辑框样式 */
#maincs QTextEdit {
    /* 文本编辑框背景色：更浅的蓝色 #F0F8FF - 影响歌词显示区域的背景 */
    background-color: #F0F8FF;
    /* 文本编辑框边框：1px实线浅蓝色 #B0E0E6 - 影响歌词显示区域的边框 */
    border: 1px solid #B0E0E6;
    /* 文本编辑框圆角：5px - 影响歌词显示区域的圆角程度 */
    border-radius: 5px;
    /* 文本编辑框内边距：8px - 影响歌词显示区域的内边距 */
    padding: 8px;
    /* 文本编辑框文字大小：12px - 影响歌词显示区域的文字大小 */
    font-size: 16px;
    /* 文本编辑框选中背景：天蓝色 #87CEFA - 影响歌词显示区域选中文字的背景 */
    selection-background-color: #87CEFA;
}

/* 标签样式 */
#maincs QLabel {
    /* 标签文字颜色：午夜蓝 #191970 - 影响所有标签的文字颜色 */
    color: #191970;
    /* 标签文字粗细：粗体 - 影响所有标签的文字粗细 */
    font-weight: bold;
}

/* 分割器样式 */
#maincs QSplitter::handle {
    /* 分割器背景色：浅蓝色 #B0E0E6 - 影响主窗口三栏之间的分割条颜色 */
    background-color: #B0E0E6;
    /* 分割器宽度：2px - 影响主窗口三栏之间的分割条宽度 */
    width: 2px;
}

/* 分割器悬停样式 */
#maincs QSplitter::handle:hover {
    /* 分割器悬停背景色：天蓝色 #87CEEB - 影响鼠标悬停时分割条的颜色 */
    background-color: #87CEEB;
}

/* 菜单栏样式 */
#maincs QMenuBar {
    /* 菜单栏背景色：浅蓝色 #E6F2FF - 影响顶部菜单栏的背景 */
    background-color: #E6F2FF;
    /* 菜单栏底部边框：1px实线浅蓝色 #B0E0E6 - 影响菜单栏底部的边框 */
    border-bottom: 1px solid #B0E0E6;
}

/* 菜单栏项样式 */
#maincs QMenuBar::item {
    /* 菜单栏项背景色：透明 - 影响菜单栏中每个菜单项的背景 */
    background-color: transparent;
    /* 菜单栏项内边距：上下4px，左右8px - 影响菜单栏中每个菜单项的内边距 */
    padding: 4px 8px;
    /* 菜单栏项圆角：4px - 影响菜单栏中每个菜单项的圆角程度 */
    border-radius: 4px;
}

/* 菜单栏项选中样式 */
#maincs QMenuBar::item:selected {
    /* 菜单栏项选中背景：天蓝色 #87CEEB - 影响菜单栏中选中菜单项的背景 */
    background-color: #87CEEB;
}

/* 菜单样式 */
#maincs QMenu {
    /* 菜单背景色：更浅的蓝色 #F0F8FF - 影响下拉菜单的背景 */
    background-color: #F0F8FF;
    /* 菜单边框：1px实线天蓝色 #87CEEB - 影响下拉菜单的边框 */
    border: 1px solid #87CEEB;
    /* 菜单圆角：5px - 影响下拉菜单的圆角程度 */
    border-radius: 5px;
}

/* 菜单项样式 */
#maincs QMenu::item {
    /* 菜单项内边距：上下6px，左右20px - 影响下拉菜单中每个菜单项的内边距 */
    padding: 6px 20px;
}

/* 菜单项选中样式 */
#maincs QMenu::item:selected {
    /* 菜单项选中背景：天蓝色 #87CEEB - 影响下拉菜单中选中菜单项的背景 */
    background-color: #87CEEB;
}

/* 当前播放歌词标签样式 */
#maincs #current-lyric-label {
    /* 当前歌词文字颜色：钢蓝色 #4682B4 - 影响主窗口中当前播放歌词的文字颜色 */
    color: #4682B4;
    /* 当前歌词背景色：半透明天蓝色 - 影响主窗口中当前播放歌词的背景 */
    background-color: rgba(135, 206, 250, 30);
    /* 当前歌词圆角：5px - 影响主窗口中当前播放歌词的圆角程度 */
    border-radius: 5px;
    /* 当前歌词内边距：5px - 影响主窗口中当前播放歌词的内边距 */
    padding: 5px;
    /* 当前歌词外边距：2px - 影响主窗口中当前播放歌词的外边距 */
    margin: 2px;
    /* 当前歌词字间距：4px - 影响主窗口中当前播放歌词的字间距 */
    letter-spacing: 4px;
    /* 当前歌词换行：自动换行 - 影响主窗口中当前播放歌词的换行方式 */
    word-wrap: break-word;
}

/* ================================================
   歌词窗口样式
   ================================================
   适用控件：歌词窗口 (objectName="lyricWindow")
   主题：深色半透明主题
   ================================================ */

/* 歌词窗口基础样式 */
#lyricWindow {
    /* 歌词窗口背景色：透明 - 影响精简模式窗口的整体背景 */
    background-color: transparent;
    /* 歌词窗口圆角：10px - 影响精简模式窗口的圆角程度 */
    border-radius: 10px;
    /* 歌词窗口边框：无 - 影响精简模式窗口的边框 */
    border: none;
}

/* 标题栏样式 */
#lyricWindow #title-bar {
    /* 标题栏背景色：半透明钢蓝色 - 影响精简模式顶部标题栏的背景 */
    background-color: rgba(70, 130, 180, 120);
    /* 标题栏圆角：上左和上右10px - 影响精简模式顶部标题栏的圆角 */
    border-radius: 10px 10px 0 0;
    /* 标题栏边框：无 - 影响精简模式顶部标题栏的边框 */
    border: none;
    /* 标题栏最小高度：40px - 影响精简模式顶部标题栏的最小高度 */
    min-height: 40px;
    /* 标题栏最大高度：40px - 影响精简模式顶部标题栏的最大高度 */
    max-height: 40px;
}

/* 标题栏中的所有标签背景透明 */
#lyricWindow #title-bar QLabel {
    /* 标题栏标签背景色：透明 - 影响精简模式标题栏中标签的背景 */
    background-color: transparent;
    /* 标题栏标签文字颜色：白色 - 影响精简模式标题栏中标签的文字颜色 */
    color: white;
    /* 标题栏标签边框：无 - 影响精简模式标题栏中标签的边框 */
    border: none;
}

/* 当前播放歌曲标签样式 */
#lyricWindow #current-track-label {
    /* 当前歌曲文字颜色：白色 - 影响精简模式中当前播放歌曲的文字颜色 */
    color: white;
    /* 当前歌曲内边距：5px - 影响精简模式中当前播放歌曲的内边距 */
    padding: 5px;
    /* 当前歌曲文字粗细：粗体 - 影响精简模式中当前播放歌曲的文字粗细 */
    font-weight: bold;
}

/* 歌词显示区域样式 */
#lyricWindow #lyric-display {
    /* 歌词区域背景色：透明 - 影响精简模式中歌词显示区域的背景 */
    background-color: transparent;
    /* 歌词文字颜色：白色 - 影响精简模式中歌词显示区域的文字颜色 */
    color: white;
    /* 歌词区域边框：无 - 影响精简模式中歌词显示区域的边框 */
    border: none;
    /* 歌词区域圆角：下左和下右10px - 影响精简模式中歌词显示区域的圆角 */
    border-radius: 0 0 10px 10px;
    /* 歌词区域内边距：20px - 影响精简模式中歌词显示区域的内边距 */
    padding: 20px;
}

/* 控制面板框架样式 */
#lyricWindow #control-frame {
    /* 控制面板背景色：半透明钢蓝色 - 影响精简模式底部控制面板的背景 */
    background-color: rgba(70, 130, 180, 120);
    /* 控制面板圆角：10px - 影响精简模式底部控制面板的圆角程度 */
    border-radius: 10px;
    /* 控制面板外边距：10px - 影响精简模式底部控制面板的外边距 */
    margin: 10px;
}

/* 进度条样式 */
#lyricWindow #progress-slider {
    /* 进度条边框：1px实线半透明白色 - 影响精简模式中播放进度条的边框 */
    border: 1px solid rgba(255, 255, 255, 100);
    /* 进度条高度：6px - 影响精简模式中播放进度条的高度 */
    height: 6px;
    /* 进度条背景：半透明白色 - 影响精简模式中播放进度条的背景 */
    background: rgba(255, 255, 255, 30);
    /* 进度条外边距：上下2px，左右0 - 影响精简模式中播放进度条的外边距 */
    margin: 2px 0;
    /* 进度条圆角：3px - 影响精简模式中播放进度条两端的圆角 */
    border-radius: 3px;
}

/* 进度条滑块样式 */
#lyricWindow #progress-slider::handle:horizontal {
    /* 进度条滑块背景：白色 - 影响精简模式中播放进度条滑手的背景 */
    background: white;
    /* 进度条滑块边框：1px实线半透明白色 - 影响精简模式中播放进度条滑手的边框 */
    border: 1px solid rgba(255, 255, 255, 100);
    /* 进度条滑块宽度：16px - 影响精简模式中播放进度条滑手的宽度 */
    width: 16px;
    /* 进度条滑块外边距：上下-5px，左右0 - 影响精简模式中播放进度条滑手的垂直位置 */
    margin: -5px 0;
    /* 进度条滑块圆角：8px - 影响精简模式中播放进度条滑手的圆角程度 */
    border-radius: 8px;
}

/* 进度条滑块悬停样式 */
#lyricWindow #progress-slider::handle:horizontal:hover {
    /* 进度条滑块悬停背景：天蓝色 - 影响鼠标悬停时精简模式中播放进度条滑手的背景 */
    background: #87CEEB;
}

/* 时间标签样式 */
#lyricWindow #time-label {
    /* 时间文字颜色：白色 - 影响精简模式中时间标签的文字颜色 */
    color: #333333;
    /* 时间背景色：设置为半透明白色，确保在任何背景下都可见 */
    background-color: rgba(255, 255, 255, 150);
    /* 时间文字大小：9px - 影响精简模式中时间标签的文字大小 */
    font-size: 9px;
    /* 添加内边距，改善显示效果 */
    padding: 2px 4px;
    /* 添加圆角，使外观更美观 */
    border-radius: 3px;
    /* 确保文字粗细，提高可读性 */
    font-weight: bold;
}

/* 控制按钮通用样式 */
#lyricWindow #control-button {
    /* 控制按钮背景色：半透明白色 - 影响精简模式中上一首/下一首/停止按钮的背景 */
    background-color: rgba(255, 255, 255, 30);
    /* 控制按钮边框：1px实线半透明白色 - 影响精简模式中上一首/下一首/停止按钮的边框 */
    border: 1px solid rgba(255, 255, 255, 100);
    /* 控制按钮圆角：20px - 影响精简模式中上一首/下一首/停止按钮的圆角程度 */
    border-radius: 20px;
}

/* 控制按钮悬停样式 */
#lyricWindow #control-button:hover {
    /* 控制按钮悬停背景色：半透明白色 - 影响鼠标悬停时精简模式中控制按钮的背景 */
    background-color: rgba(255, 255, 255, 50);
}

/* 播放按钮特殊样式 */
#lyricWindow #play-button {
    /* 播放按钮背景色：半透明白色 - 影响精简模式中播放/暂停按钮的背景 */
    background-color: rgba(255, 255, 255, 40);
    /* 播放按钮边框：2px实线半透明白色 - 影响精简模式中播放/暂停按钮的边框 */
    border: 2px solid rgba(255, 255, 255, 150);
    /* 播放按钮圆角：25px - 影响精简模式中播放/暂停按钮的圆角程度 */
    border-radius: 25px;
}

/* 播放按钮悬停样式 */
#lyricWindow #play-button:hover {
    /* 播放按钮悬停背景色：半透明白色 - 影响鼠标悬停时精简模式中播放按钮的背景 */
    background-color: rgba(255, 255, 255, 60);
}

/* 播放模式下拉框样式 */
#lyricWindow #mode-combo {
    /* 播放模式下拉框背景色：半透明白色 - 影响精简模式中播放模式下拉框的背景 */
    background-color: rgba(255, 255, 255, 40);
    /* 播放模式下拉框边框：1px实线半透明白色 - 影响精简模式中播放模式下拉框的边框 */
    border: 1px solid rgba(255, 255, 255, 100);
    /* 播放模式下拉框圆角：4px - 影响精简模式中播放模式下拉框的圆角程度 */
    border-radius: 4px;
    /* 播放模式下拉框内边距：上下2px，左右5px - 影响精简模式中播放模式下拉框的内边距 */
    padding: 2px 5px;
    /* 播放模式下拉框最小宽度：80px - 影响精简模式中播放模式下拉框的最小宽度 */
    min-width: 80px;
    /* 播放模式下拉框文字粗细：粗体 - 影响精简模式中播放模式下拉框的文字粗细 */
    font-weight: bold;
    /* 播放模式下拉框文字颜色：白色 - 影响精简模式中播放模式下拉框的文字颜色 */
    color: white;
}

/* 播放模式下拉框下拉按钮样式 */
#lyricWindow #mode-combo::drop-down {
    /* 下拉按钮边框：无 - 影响精简模式中播放模式下拉框右侧下拉按钮的边框 */
    border: none;
    /* 下拉按钮宽度：15px - 影响精简模式中播放模式下拉框右侧下拉按钮的宽度 */
    width: 15px;
}

/* 播放模式下拉框下拉箭头样式 */
#lyricWindow #mode-combo::down-arrow {
    /* 下拉箭头图片：无 - 影响精简模式中播放模式下拉框下拉箭头的图片 */
    image: none;
    /* 下拉箭头左边框：4px透明 - 用于绘制三角形箭头的左边 */
    border-left: 4px solid transparent;
    /* 下拉箭头右边框：4px透明 - 用于绘制三角形箭头的右边 */
    border-right: 4px solid transparent;
    /* 下拉箭头上边框：4px白色 - 用于绘制三角形箭头的上边 */
    border-top: 4px solid white;
    /* 下拉箭头宽度：0 - 因为使用边框绘制 */
    width: 0;
    /* 下拉箭头高度：0 - 因为使用边框绘制 */
    height: 0;
}

/* 关闭按钮样式 */
#lyricWindow #close-button {
    /* 关闭按钮边框：无 - 影响精简模式中关闭按钮的边框 */
    border: none;
    /* 关闭按钮文字颜色：白色 - 影响精简模式中关闭按钮的文字颜色 */
    color: white;
    /* 关闭按钮文字大小：16px - 影响精简模式中关闭按钮的文字大小 */
    font-size: 16px;
    /* 关闭按钮背景色：透明 - 影响精简模式中关闭按钮的背景 */
    background-color: transparent;
}

/* 关闭按钮悬停样式 */
#lyricWindow #close-button:hover {
    /* 关闭按钮悬停背景色：半透明红色 - 影响鼠标悬停时精简模式中关闭按钮的背景 */
    background-color: rgba(255, 0, 0, 100);
    /* 关闭按钮悬停圆角：10px - 影响鼠标悬停时精简模式中关闭按钮的圆角 */
    border-radius: 10px;
}

/* ================================================
   控制窗口样式
   ================================================
   适用控件：控制窗口 (objectName="controlWindow")
   主题：深色半透明主题
   ================================================ */

/* 控制窗口基础样式 */
#controlWindow {
    /* 控制窗口背景色：透明 - 影响独立控制窗口的整体背景 */
    background-color: transparent;
    /* 控制窗口边框：无 - 影响独立控制窗口的边框 */
    border: none;
}

/* 控制面板框架样式 */
#controlWindow #control-frame {
    /* 控制面板背景色：半透明钢蓝色 - 影响独立控制窗口中控制面板的背景 */
    background-color: rgba(70, 130, 180, 120);
    /* 控制面板圆角：15px - 影响独立控制窗口中控制面板的圆角程度 */
    border-radius: 15px;
    /* 控制面板内边距：10px - 影响独立控制窗口中控制面板的内边距 */
    padding: 10px;
}

/* 控制按钮通用样式 */
#controlWindow #control-button {
    /* 控制按钮背景色：半透明白色 - 影响独立控制窗口中上一首/下一首/停止按钮的背景 */
    background-color: rgba(255, 255, 255, 30);
    /* 控制按钮边框：1px实线半透明白色 - 影响独立控制窗口中上一首/下一首/停止按钮的边框 */
    border: 1px solid rgba(255, 255, 255, 100);
    /* 控制按钮圆角：20px - 影响独立控制窗口中上一首/下一首/停止按钮的圆角程度 */
    border-radius: 20px;
}

/* 控制按钮悬停样式 */
#controlWindow #control-button:hover {
    /* 控制按钮悬停背景色：半透明白色 - 影响鼠标悬停时独立控制窗口中控制按钮的背景 */
    background-color: rgba(255, 255, 255, 50);
}

/* 控制按钮按下样式 */
#controlWindow #control-button:pressed {
    /* 控制按钮按下背景色：半透明白色 - 影响鼠标按下时独立控制窗口中控制按钮的背景 */
    background-color: rgba(255, 255, 255, 70);
}

/* 播放按钮特殊样式 */
#controlWindow #play-button {
    /* 播放按钮背景色：半透明白色 - 影响独立控制窗口中播放/暂停按钮的背景 */
    background-color: rgba(255, 255, 255, 40);
    /* 播放按钮边框：2px实线半透明白色 - 影响独立控制窗口中播放/暂停按钮的边框 */
    border: 2px solid rgba(255, 255, 255, 150);
    /* 播放按钮圆角：25px - 影响独立控制窗口中播放/暂停按钮的圆角程度 */
    border-radius: 25px;
}

/* 播放按钮悬停样式 */
#controlWindow #play-button:hover {
    /* 播放按钮悬停背景色：半透明白色 - 影响鼠标悬停时独立控制窗口中播放按钮的背景 */
    background-color: rgba(255, 255, 255, 60);
}

/* 播放按钮按下样式 */
#controlWindow #play-button:pressed {
    /* 播放按钮按下背景色：半透明白色 - 影响鼠标按下时独立控制窗口中播放按钮的背景 */
    background-color: rgba(255, 255, 255, 80);
}

/* 音量控制标签样式 */
#controlWindow #volume-label {
    /* 音量标签文字颜色：白色 - 影响独立控制窗口中音量标签的文字颜色 */
    color: white;
}

/* 音量滑块样式 */
#controlWindow #volume-slider {
    /* 音量滑块边框：1px实线半透明白色 - 影响独立控制窗口中音量滑块的边框 */
    border: 1px solid rgba(255, 255, 255, 100);
    /* 音量滑块高度：4px - 影响独立控制窗口中音量滑块的高度 */
    height: 4px;
    /* 音量滑块背景：半透明白色 - 影响独立控制窗口中音量滑块的背景 */
    background: rgba(255, 255, 255, 30);
    /* 音量滑块外边距：上下2px，左右0 - 影响独立控制窗口中音量滑块的外边距 */
    margin: 2px 0;
    /* 音量滑块圆角：2px - 影响独立控制窗口中音量滑块两端的圆角 */
    border-radius: 2px;
}

/* 音量滑块滑手样式 */
#controlWindow #volume-slider::handle:horizontal {
    /* 音量滑块滑手背景：白色 - 影响独立控制窗口中音量滑块滑手的背景 */
    background: white;
    /* 音量滑块滑手边框：1px实线半透明白色 - 影响独立控制窗口中音量滑块滑手的边框 */
    border: 1px solid rgba(255, 255, 255, 100);
    /* 音量滑块滑手宽度：12px - 影响独立控制窗口中音量滑块滑手的宽度 */
    width: 12px;
    /* 音量滑块滑手高度：12px - 影响独立控制窗口中音量滑块滑手的高度 */
    height: 12px;
    /* 音量滑块滑手外边距：上下-4px，左右0 - 影响独立控制窗口中音量滑块滑手的垂直位置 */
    margin: -4px 0;
    /* 音量滑块滑手圆角：6px - 影响独立控制窗口中音量滑块滑手的圆角程度 */
    border-radius: 6px;
}

/* 音量滑块滑手悬停样式 */
#controlWindow #volume-slider::handle:horizontal:hover {
    /* 音量滑块滑手悬停背景：天蓝色 - 影响鼠标悬停时独立控制窗口中音量滑块滑手的背景 */
    background: #87CEEB;
}

/* 控制窗口标题样式 */
#controlWindow #control-title {
    /* 控制窗口标题文字颜色：白色 - 影响独立控制窗口中标题的文字颜色 */
    color: white;
}

/* ================================================
   自定义样式提示
   ================================================
   本文件提供了详细的样式注释，方便用户快速定位和修改：

   1. 控件定位：
      - 每个样式块开头注明适用的控件
      - 使用 objectName 精确定位控件
      - 注释说明每个属性影响的视觉元素

   2. 颜色修改：
      - 所有颜色值都有详细注释说明用途
      - RGB值和透明度分别注释
      - 修改颜色时请保持整体风格协调

   3. 尺寸调整：
      - 所有尺寸单位(px)都有注释说明
      - 修改尺寸时注意控件比例
      - 圆角值建议保持一致

   4. 间距调整：
      - 内边距(padding)影响内容与边框的距离
      - 外边距(margin)影响元素之间的距离
      - 修改时注意整体布局

   5. 可选样式：
      - 以 /*[OPTIONAL]*/ /*开头的样式块为可选
      - 取消注释即可启用
      - 建议逐一测试效果

   6. 性能考虑：
      - 复杂动画和阴影效果可能影响性能
      - 在低配置设备上建议禁用复杂效果
      - 透明效果会增加GPU负担

   7. 主题切换：
      - 可以通过修改颜色值快速切换主题
      - 建议保持三个窗口的风格一致
      - 深色主题适合夜间使用

   修改建议：
   - 先备份原文件
   - 每次只修改一个属性
   - 修改后立即测试效果
   - 注意不同分辨率下的显示效果*/