/* 表单组样式 */
.form-group{padding-bottom:0;margin:0 0 15px 0}

/* 占位文本样式 */
.elsetext{top:0;color:#adadad;font-size:20px}

/* 预览区域高度 */
.elseview{height:150px}

/* 图标样式 */
.tubiao{background-color:transparent;font-size:100px;color:#adadad;width:100px;height:100px}

/* 视图区域内边距 */
.view{padding-top:70px;padding-bottom:80px}

/* 视频预览区域 */
.video_view{width:100%;max-height:450px;min-height:300px}

/* 图片预览区域 */
.image_view{max-width:100%;max-height:450px;min-height:300px}

/* 图片样式 */
.image{max-width:100%;max-height:450px}

/* 导航标签样式 */
.nav-tabs{background:#fff}
.nav-tabs>li>a{color:#000;border:0;margin:0}
.nav-tabs>li>a:hover{background-color:transparent;border:0}
.nav-tabs>li>a,.nav-tabs>li>a:focus,.nav-tabs>li>a:hover{background-color:transparent!important;border:0!important;color:#222!important;font-weight:500}
.nav-tabs>li.disabled>a,.nav-tabs>li.disabled>a:hover{color:rgba(255,255,255,.5)}
.nav-tabs>li.active{background-color:#ddd;border-bottom-color:#000}
.nav-tabs>li.active>a{border-bottom-color:#000}

/* 表单标签样式 */
.form-group label.control-label{font-size:16px;color:#333}

/* 文件信息表格 */
.fileinfo-table{max-width:80%}

/* 移动端文件信息表格 */
@media (max-width:767px){.fileinfo-table{max-width:100%}}

/* 进度条样式 */
.progress{height:20px;margin-bottom:10px}

/* 文件名样式 */
.filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 音乐播放器图片大小 */
.aplayer .aplayer-pic{height:100px;width:100px}

/* 音乐播放器标题大小 */
.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:18px}

/* 音乐播放器信息区域 */
.aplayer .aplayer-info{margin-left:100px;padding:25px 7px 0 10px;height:66px;box-sizing:border-box}

/* 文件列表样式 */
.filelist {
  border-radius: 8px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
  background: #fff; /* 背景颜色 */
}

/* 文件列表表头 */
.filelist>thead>tr {
  background: #f8f9fa; /* 表头背景 */
}

/* 文件列表表头单元格 */
.filelist>thead>tr>th {
  font-weight: 600; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  padding: 12px 8px; /* 内边距 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
}

/* 文件列表行 */
.filelist>tbody>tr {
  transition: all 0.3s ease; /* 过渡效果 */
  border-bottom: 1px solid #f0f0f0; /* 底部边框 */
}

/* 文件列表行悬停效果 */
.filelist>tbody>tr:hover {
  background: #f8f9fa; /* 悬停背景 */
}

/* 文件列表单元格 */
.filelist>tbody>tr>td {
  padding: 12px 8px; /* 内边距 */
  vertical-align: middle; /* 垂直居中 */
}

/* 文件列表第一列 */
.filelist>tbody>tr>td:first-child {
  font-weight: 600; /* 字体粗细 */
  color: #666; /* 文字颜色 */
}

/* 文件列表第二列 */
.filelist>tbody>tr>td:nth-child(2) {
  font-size: 14px; /* 字体大小 */
}

/* 文件列表第二列链接 */
.filelist>tbody>tr>td:nth-child(2) a {
  color: #2a5298; /* 链接颜色 */
  text-decoration: none; /* 无下划线 */
  margin-right: 8px; /* 右边距 */
}

/* 文件列表第二列链接悬停 */
.filelist>tbody>tr>td:nth-child(2) a:hover {
  text-decoration: underline; /* 下划线 */
}

/* 文件列表第三列 */
.filelist>tbody>tr>td:nth-child(3) {
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 文字颜色 */
}

/* 文件列表第四列 */
.filelist>tbody>tr>td:nth-child(4) {
  color: #666; /* 文字颜色 */
  font-size: 13px; /* 字体大小 */
}

/* 文件列表第五列 */
.filelist>tbody>tr>td:nth-child(5) {
  color: #2a5298; /* 文字颜色 */
  font-size: 13px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
}

/* 文件列表第六列 */
.filelist>tbody>tr>td:nth-child(6) {
  color: #999; /* 文字颜色 */
  font-size: 13px; /* 字体大小 */
}

/* 移动端响应式样式 */
@media (max-width:767px) {
  .filelist {
    font-size: 14px; /* 字体大小 */
    box-shadow: none; /* 无阴影 */
    border: 1px solid #f0f0f0; /* 边框 */
  }
  .filelist th,
  .filelist td {
    padding: 10px 6px; /* 内边距 */
  }
  .filelist th:nth-child(5),
  .filelist td:nth-child(5),
  .filelist th:nth-child(6),
  .filelist td:nth-child(6) {
    display: none; /* 隐藏第5和第6列 */
  }
  .filelist th:nth-child(3) {
    width: 60%; /* 第3列宽度 */
  }
  .filelist th:nth-child(4) {
    width: 20%; /* 第4列宽度 */
  }
  .searchbox {
    float: none !important; /* 取消浮动 */
    margin-top: 10px; /* 上边距 */
  }
  .form-inline .form-control {
    width: 100%; /* 宽度100% */
    margin-bottom: 10px; /* 下边距 */
  }
  .searchbox button {
    width: 100%; /* 宽度100% */
    margin-top: 0; /* 上边距 */
  }
  .well {
    border: none; /* 无边框 */
    box-shadow: none; /* 无阴影 */
    padding: 15px 0; /* 内边距 */
  }
  h2 {
    font-size: 20px; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
    margin-bottom: 15px; /* 下边距 */
  }
  .action-area {
    padding: 15px; /* 内边距 */
    margin-bottom: 15px; /* 下边距 */
  }
  .upload-btn {
    font-size: 16px; /* 字体大小 */
    padding: 12px 20px; /* 内边距 */
  }
  .pagination {
    margin: 15px 0; /* 外边距 */
  }
  .pagination-sm>li>a,
  .pagination-sm>li>span {
    padding: 6px 10px; /* 内边距 */
    font-size: 13px; /* 字体大小 */
  }
}

/* 桌面端导航栏 */
.desktop-nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; /* 渐变背景 */
  border: none !important; /* 无边框 */
  border-radius: 0 !important; /* 无边框圆角 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 阴影效果 */
  padding: 10px 0; /* 内边距 */
}

/* 桌面端导航栏品牌 */
.desktop-nav .navbar-brand {
  color: #fff !important; /* 文字颜色 */
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
}

/* 桌面端导航链接 */
.desktop-nav .nav>li>a {
  color: #fff !important; /* 文字颜色 */
  font-size: 14px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  padding: 10px 15px; /* 内边距 */
  border-radius: 20px; /* 边框圆角 */
  margin: 0 5px; /* 外边距 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 桌面端导航链接悬停 */
.desktop-nav .nav>li>a:hover {
  background-color: rgba(255,255,255,0.2) !important; /* 悬停背景 */
  transform: translateY(-2px); /* 向上移动 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 阴影效果 */
}

/* 桌面端导航激活链接 */
.desktop-nav .nav>li.active>a {
  background-color: rgba(255,255,255,0.25) !important; /* 激活背景 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 阴影效果 */
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 底部 */
  left: 0; /* 左侧 */
  right: 0; /* 右侧 */
  background: #fff; /* 背景颜色 */
  border-top: 1px solid #e0e0e0; /* 顶部边框 */
  display: flex; /* 弹性布局 */
  justify-content: space-around; /* 均匀分布 */
  align-items: center; /* 垂直居中 */
  padding: 10px 0; /* 内边距 */
  z-index: 1000; /* 层级 */
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05); /* 阴影效果 */
}

/* 底部导航链接 */
.bottom-nav a {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 列方向 */
  align-items: center; /* 水平居中 */
  color: #666; /* 文字颜色 */
  text-decoration: none; /* 无下划线 */
  font-size: 12px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  transition: all 0.3s ease; /* 过渡效果 */
  padding: 5px 10px; /* 内边距 */
  margin: 0 5px; /* 外边距 */
}

/* 底部导航链接悬停和激活 */
.bottom-nav a:hover,
.bottom-nav a.active {
  color: #667eea; /* 文字颜色 */
  transform: translateY(-2px); /* 向上移动 */
}

/* 底部导航图标 */
.bottom-nav i {
  font-size: 20px; /* 字体大小 */
  margin-bottom: 2px; /* 下边距 */
}

/* 桌面端隐藏底部导航 */
@media (min-width:768px) {
  .bottom-nav {
    display: none; /* 隐藏 */
  }
  .desktop-nav {
    display: block !important; /* 显示 */
  }
}

/* 移动端隐藏桌面导航 */
@media (max-width:767px) {
  .desktop-nav {
    display: none !important; /* 隐藏 */
  }
}

/* 操作区域 */
.action-area {
  margin-bottom: 20px; /* 下边距 */
  padding: 20px; /* 内边距 */
  background: #f8f9fa; /* 背景颜色 */
  border-radius: 8px; /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 上传按钮 */
.upload-btn {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  padding: 12px 24px; /* 内边距 */
  border-radius: 8px; /* 边框圆角 */
  transition: all 0.3s ease; /* 过渡效果 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 上传按钮悬停 */
.upload-btn:hover {
  transform: translateY(-2px); /* 向上移动 */
  box-shadow: 0 6px 8px rgba(0,0,0,0.15); /* 阴影效果 */
}

/* 应用容器 */
.app-container {
  padding-bottom: 80px; /* 底部内边距 */
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
}

/* 搜索区域 */
.search-section {
  margin: 20px 0; /* 外边距 */
  padding: 0 15px; /* 内边距 */
  background: rgba(245, 245, 245, 0.9); /* 背景颜色 */
  border-radius: 15px; /* 边框圆角 */
  padding: 20px; /* 内边距 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影效果 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(200, 200, 200, 0.2); /* 边框 */
}

/* 搜索表单 */
.search-form {
  max-width: 600px; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
}

/* 搜索输入框 */
.search-input {
  border-radius: 25px 0 0 25px !important; /* 边框圆角 */
  border: 2px solid #667eea !important; /* 边框 */
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important; /* 阴影效果 */
  padding: 15px 20px !important; /* 内边距 */
  font-size: 16px !important; /* 字体大小 */
  transition: all 0.3s ease !important; /* 过渡效果 */
  background: rgba(250, 250, 250, 0.9) !important; /* 背景颜色 */
}

/* 搜索输入框聚焦 */
.search-input:focus {
  border-color: #764ba2 !important; /* 边框颜色 */
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important; /* 阴影效果 */
}

/* 搜索按钮 */
.search-form .btn {
  border-radius: 0 25px 25px 0 !important; /* 边框圆角 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  border: 2px solid #667eea !important; /* 边框 */
  color: #fff !important; /* 文字颜色 */
  font-weight: 600 !important; /* 字体粗细 */
  transition: all 0.3s ease !important; /* 过渡效果 */
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3) !important; /* 阴影效果 */
  padding: 15px 30px !important; /* 内边距 */
  font-size: 16px !important; /* 字体大小 */
}

/* 搜索按钮悬停 */
.search-form .btn:hover {
  transform: translateY(-2px) !important; /* 向上移动 */
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4) !important; /* 阴影效果 */
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important; /* 渐变背景 */
  border-color: #764ba2 !important; /* 边框颜色 */
}

/* 操作区域 */
.action-section {
  margin: 0 15px 20px; /* 外边距 */
  padding: 20px; /* 内边距 */
  background: #f8f9fa; /* 背景颜色 */
  border-radius: 10px; /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 上传按钮 */
.upload-btn {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  padding: 15px 30px; /* 内边距 */
  border-radius: 25px; /* 边框圆角 */
  transition: all 0.3s ease; /* 过渡效果 */
  box-shadow: 0 4px 8px rgba(255, 99, 132, 0.3); /* 阴影效果 */
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  color: #fff; /* 文字颜色 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 文字阴影 */
}

/* 上传按钮悬停 */
.upload-btn:hover {
  transform: translateY(-3px); /* 向上移动 */
  box-shadow: 0 6px 12px rgba(255, 99, 132, 0.4); /* 阴影效果 */
  background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%); /* 渐变背景 */
}

/* 文件列表区域 */
.file-section {
  padding: 0 15px; /* 内边距 */
}

/* 区域标题 */
.section-title {
  font-size: 22px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  margin-bottom: 20px; /* 下边距 */
  color: #333; /* 文字颜色 */
}

/* 文件列表 */
.file-list {
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充列 */
  gap: 15px; /* 间距 */
  margin-bottom: 30px; /* 下边距 */
}

/* 文件卡片 */
.file-card {
  background: rgba(255, 255, 255, 0.8); /* 背景颜色 */
  border-radius: 10px; /* 边框圆角 */
  padding: 15px; /* 内边距 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 阴影效果 */
  transition: all 0.3s ease; /* 过渡效果 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* 文件卡片悬停 */
.file-card:hover {
  transform: translateY(-3px); /* 向上移动 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* 阴影效果 */
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
}

/* 文件图标 */
.file-icon {
  font-size: 48px; /* 字体大小 */
  color: #2a5298; /* 颜色 */
  margin-right: 15px; /* 右边距 */
  width: 60px; /* 宽度 */
  height: 60px; /* 高度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background: #f0f4f8; /* 背景颜色 */
  border-radius: 8px; /* 边框圆角 */
}

/* 文件信息 */
.file-info {
  flex: 1; /* 弹性增长 */
  min-width: 0; /* 最小宽度 */
}

/* 文件名 */
.file-name {
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  margin: 0 0 8px 0; /* 外边距 */
  color: #333; /* 文字颜色 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 文本省略 */
  white-space: nowrap; /* 不换行 */
}

/* 文件元信息 */
.file-meta {
  display: flex; /* 弹性布局 */
  flex-wrap: wrap; /* 换行 */
  gap: 10px; /* 间距 */
  font-size: 12px; /* 字体大小 */
  color: #666; /* 文字颜色 */
}

/* 文件大小 */
.file-size,
.file-type,
.file-time {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
}

/* 文件操作 */
.file-actions {
  display: flex; /* 弹性布局 */
  gap: 8px; /* 间距 */
}

/* 文件操作按钮 */
.file-actions .btn {
  border-radius: 50%; /* 圆形 */
  width: 40px; /* 宽度 */
  height: 40px; /* 高度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  padding: 0; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  transition: all 0.3s ease; /* 过渡效果 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 下载按钮 */
.file-actions .btn-primary {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  color: #fff; /* 文字颜色 */
  box-shadow: 0 2px 4px rgba(250, 112, 154, 0.3); /* 阴影效果 */
}

/* 下载按钮悬停 */
.file-actions .btn-primary:hover {
  transform: translateY(-2px); /* 向上移动 */
  box-shadow: 0 4px 8px rgba(250, 112, 154, 0.4); /* 阴影效果 */
  background: linear-gradient(135deg, #fee140 0%, #fa709a 100%); /* 渐变背景 */
}

/* 查看按钮 */
.file-actions .btn-default {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  color: #fff; /* 文字颜色 */
  box-shadow: 0 2px 4px rgba(67, 233, 123, 0.3); /* 阴影效果 */
}

/* 查看按钮悬停 */
.file-actions .btn-default:hover {
  transform: translateY(-2px); /* 向上移动 */
  box-shadow: 0 4px 8px rgba(67, 233, 123, 0.4); /* 阴影效果 */
  background: linear-gradient(135deg, #38f9d7 0%, #43e97b 100%); /* 渐变背景 */
}

/* 空状态 */
.empty-state {
  text-align: center; /* 文本居中 */
  padding: 60px 20px; /* 内边距 */
  color: #999; /* 文字颜色 */
}

/* 空状态图标 */
.empty-state i {
  font-size: 72px; /* 字体大小 */
  margin-bottom: 20px; /* 下边距 */
  opacity: 0.5; /* 透明度 */
}

/* 空状态文本 */
.empty-state p {
  font-size: 16px; /* 字体大小 */
  margin: 0; /* 外边距 */
}

/* 分页区域 */
.pagination-section {
  margin-top: 30px; /* 上边距 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 列方向 */
  align-items: center; /* 水平居中 */
  gap: 15px; /* 间距 */
}

/* 分页信息 */
.pagination-info {
  font-size: 14px; /* 字体大小 */
  color: #666; /* 文字颜色 */
  text-align: center; /* 文本居中 */
}

/* 分页 */
.pagination {
  margin: 0; /* 外边距 */
}

/* 分页链接 */
.pagination>li>a,
.pagination>li>span {
  color: #667eea; /* 文字颜色 */
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 20px; /* 边框圆角 */
  margin: 0 4px; /* 外边距 */
  transition: all 0.3s ease; /* 过渡效果 */
  padding: 6px 12px; /* 内边距 */
  font-weight: 600; /* 字体粗细 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 阴影效果 */
}

/* 分页链接悬停 */
.pagination>li>a:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  border-color: #667eea; /* 边框颜色 */
  color: #fff; /* 文字颜色 */
  transform: translateY(-2px); /* 向上移动 */
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3); /* 阴影效果 */
}

/* 分页激活链接 */
.pagination>li.active>a {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  border-color: #667eea; /* 边框颜色 */
  color: #fff; /* 文字颜色 */
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3); /* 阴影效果 */
}

/* 响应式样式 */
@media (max-width:767px) {
  .app-container {
    padding-left: 15px; /* 左侧内边距 */
    padding-right: 15px; /* 右侧内边距 */
  }
  
  .search-section {
    margin: 15px 0; /* 外边距 */
    padding: 0; /* 内边距 */
  }
  
  .action-section {
    margin: 0 0 15px; /* 外边距 */
    padding: 15px; /* 内边距 */
  }
  
  .upload-btn {
    font-size: 16px; /* 字体大小 */
    padding: 12px 20px; /* 内边距 */
  }
  
  .file-list {
    grid-template-columns: 1fr; /* 单列布局 */
    gap: 10px; /* 间距 */
  }
  
  .file-card {
    padding: 12px; /* 内边距 */
  }
  
  .file-icon {
    font-size: 36px; /* 字体大小 */
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    margin-right: 10px; /* 右边距 */
  }
  
  .file-name {
    font-size: 14px; /* 字体大小 */
  }
  
  .file-meta {
    font-size: 11px; /* 字体大小 */
    gap: 8px; /* 间距 */
  }
  
  .section-title {
    font-size: 18px; /* 字体大小 */
    margin-bottom: 15px; /* 下边距 */
  }
  
  .empty-state {
    padding: 40px 20px; /* 内边距 */
  }
  
  .empty-state i {
    font-size: 48px; /* 字体大小 */
  }
  
  .pagination-info {
    font-size: 12px; /* 字体大小 */
  }
  
  .pagination>li>a,
  .pagination>li>span {
    padding: 4px 8px; /* 内边距 */
    font-size: 12px; /* 字体大小 */
  }
}

/* 视频播放器 */
.videoplayer{width: 100%; height: 530px;}

/* 不同屏幕尺寸的视频播放器高度 */
@media (max-width:1999px){.videoplayer{height: 500px;}}
@media (max-width:991px){.videoplayer{height: 450px;}}
@media (max-width:767px){.videoplayer{height: 400px;}}

/* file.php 页面样式 */
.file-view-card {
  border-radius: 15px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影效果 */
  border: none; /* 无边框 */
  margin-bottom: 20px; /* 下边距 */
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* 文件查看卡片头部 */
.file-view-card .card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  padding: 20px; /* 内边距 */
  color: white; /* 文字颜色 */
  font-weight: 600; /* 字体粗细 */
  font-size: 18px; /* 字体大小 */
}

/* 文件查看卡片内容 */
.file-view-card .card-body {
  padding: 30px; /* 内边距 */
}

/* 音乐播放器样式 */
.music-player-container {
  border-radius: 20px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 8px 32px rgba(0,0,0,0.1); /* 阴影效果 */
  background: rgba(255, 255, 255, 0.95); /* 背景颜色 */
  backdrop-filter: blur(15px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
  margin-bottom: 20px; /* 下边距 */
  animation: fadeIn 0.5s ease-in-out; /* 动画效果 */
}

/* 淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); } /* 开始状态 */
  to { opacity: 1; transform: translateY(0); } /* 结束状态 */
}

/* 播放器头部 */
.player-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  padding: 30px; /* 内边距 */
  text-align: center; /* 文本居中 */
  color: white; /* 文字颜色 */
}

/* 播放器标题 */
.player-title h2 {
  margin: 0 0 10px 0; /* 外边距 */
  font-size: 24px; /* 字体大小 */
  font-weight: 700; /* 字体粗细 */
}

/* 播放器副标题 */
.player-title p {
  margin: 0; /* 外边距 */
  font-size: 16px; /* 字体大小 */
  opacity: 0.9; /* 透明度 */
}

/* 播放器主体 */
.player-body {
  padding: 30px; /* 内边距 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 列方向 */
  align-items: center; /* 水平居中 */
}

/* 专辑封面 */
.album-cover {
  width: 200px; /* 宽度 */
  height: 200px; /* 高度 */
  border-radius: 15px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* 阴影效果 */
  margin-bottom: 30px; /* 下边距 */
  animation: pulse 2s infinite; /* 脉冲动画 */
}

/* 脉冲动画 */
@keyframes pulse {
  0% { box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); } /* 开始状态 */
  50% { box-shadow: 0 10px 40px rgba(102, 126, 234, 0.6); } /* 中间状态 */
  100% { box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); } /* 结束状态 */
}

/* 专辑封面图片 */
.album-cover img {
  width: 100%; /* 宽度 */
  height: 100%; /* 高度 */
  object-fit: cover; /* 填充方式 */
}

/* 歌词显示区域 */
.lyrics-container {
  width: 100%; /* 宽度 */
  max-width: 600px; /* 最大宽度 */
  height: 80px; /* 高度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-bottom: 30px; /* 下边距 */
  background: rgba(102, 126, 234, 0.1); /* 背景颜色 */
  border-radius: 15px; /* 边框圆角 */
  padding: 0 20px; /* 内边距 */
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.1); /* 内阴影 */
}

/* 歌词 */
.lyrics {
  text-align: center; /* 文本居中 */
  font-size: 18px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 可视化效果容器 */
.visualizer-container {
  width: 100%; /* 宽度 */
  max-width: 600px; /* 最大宽度 */
  margin-bottom: 30px; /* 下边距 */
  border-radius: 15px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 可视化效果画布 */
#visualizer {
  width: 100%; /* 宽度 */
  height: 200px; /* 高度 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 可视化效果画布悬停 */
#visualizer:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* 阴影效果 */
  transform: translateY(-2px); /* 向上移动 */
}

/* APlayer 样式调整 */
#aplayer {
  width: 100%; /* 宽度 */
  max-width: 600px; /* 最大宽度 */
  border-radius: 15px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 阴影效果 */
  background: rgba(255, 255, 255, 0.95); /* 背景颜色 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* 自定义 APlayer 样式 */
#aplayer .aplayer-lrc {
  display: none !important; /* 隐藏歌词 */
}

/* APlayer 信息区域 */
#aplayer .aplayer-info {
  padding: 15px; /* 内边距 */
  background: rgba(255, 255, 255, 0.95); /* 背景颜色 */
  color: #333; /* 文字颜色 */
  border-radius: 15px 15px 0 0; /* 边框圆角 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* APlayer 音乐信息 */
#aplayer .aplayer-music {
  margin: 0; /* 外边距 */
}

/* APlayer 音乐标题 */
#aplayer .aplayer-music-title {
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  margin-bottom: 5px; /* 下边距 */
  color: #333; /* 文字颜色 */
}

/* APlayer 音乐作者 */
#aplayer .aplayer-music-author {
  font-size: 14px; /* 字体大小 */
  opacity: 0.7; /* 透明度 */
  color: #666; /* 文字颜色 */
}

/* APlayer 控制器 */
#aplayer .aplayer-controller {
  padding: 20px; /* 内边距 */
  background: rgba(255, 255, 255, 0.95); /* 背景颜色 */
  border-radius: 0 0 15px 15px; /* 边框圆角 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* APlayer 进度条容器 */
#aplayer .aplayer-bar-wrap {
  margin: 15px 0; /* 外边距 */
  position: relative; /* 相对定位 */
  z-index: 1; /* 层级 */
}

/* APlayer 时间显示 */
#aplayer .aplayer-time {
  position: relative; /* 相对定位 */
  z-index: 2; /* 层级 */
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
  padding: 5px 10px; /* 内边距 */
  border-radius: 5px; /* 边框圆角 */
  display: inline-block; /* 行内块 */
  font-size: 14px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
}

/* APlayer 进度条 */
#aplayer .aplayer-bar {
  height: 8px; /* 高度 */
  border-radius: 4px; /* 边框圆角 */
  background: rgba(102, 126, 234, 0.2); /* 背景颜色 */
}

/* APlayer 已加载进度 */
#aplayer .aplayer-loaded {
  background: rgba(102, 126, 234, 0.4); /* 背景颜色 */
}

/* APlayer 已播放进度 */
#aplayer .aplayer-played {
  background: #667eea; /* 背景颜色 */
  border-radius: 4px; /* 边框圆角 */
}

/* APlayer 按钮 */
#aplayer .aplayer-button {
  color: #667eea; /* 文字颜色 */
  transition: all 0.3s ease; /* 过渡效果 */
  font-size: 18px; /* 字体大小 */
}

/* APlayer 按钮悬停 */
#aplayer .aplayer-button:hover {
  color: #5a6fd8; /* 文字颜色 */
  transform: scale(1.1); /* 放大 */
}

/* APlayer 音量控制 */
#aplayer .aplayer-volume-wrap {
  width: 80px; /* 宽度 */
}

/* APlayer 音量条 */
#aplayer .aplayer-volume-bar-wrap {
  background: rgba(102, 126, 234, 0.2); /* 背景颜色 */
  height: 8px; /* 高度 */
  border-radius: 4px; /* 边框圆角 */
}

/* APlayer 音量进度 */
#aplayer .aplayer-volume-bar {
  background: #667eea; /* 背景颜色 */
  border-radius: 4px; /* 边框圆角 */
}

/* APlayer 音乐标题 */
#aplayer .aplayer-music-title {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  margin-bottom: 5px; /* 下边距 */
  color: #333; /* 文字颜色 */
}

/* APlayer 音乐作者 */
#aplayer .aplayer-music-author {
  font-size: 16px; /* 字体大小 */
  opacity: 0.7; /* 透明度 */
  color: #666; /* 文字颜色 */
}

/* 响应式调整 */
@media (max-width: 767px) {
  #aplayer {
    max-width: 100%; /* 最大宽度 */
  }
  
  #aplayer .aplayer-info {
    padding: 10px; /* 内边距 */
  }
  
  #aplayer .aplayer-controller {
    padding: 10px; /* 内边距 */
  }
  
  #aplayer .aplayer-music-title {
    font-size: 14px; /* 字体大小 */
  }
  
  #aplayer .aplayer-music-author {
    font-size: 12px; /* 字体大小 */
  }
}

/* 选项卡样式 */
.tab-card {
  border-radius: 20px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 8px 32px rgba(0,0,0,0.1); /* 阴影效果 */
  border: none; /* 无边框 */
  margin-bottom: 20px; /* 下边距 */
  background: rgba(255, 255, 255, 0.95); /* 背景颜色 */
  backdrop-filter: blur(15px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
  animation: fadeIn 0.5s ease-in-out; /* 动画效果 */
}

/* 选项卡内容 */
.tab-card .card-body {
  padding: 0; /* 内边距 */
}

/* 选项卡导航 */
.tab-card .nav-tabs {
  background: #f8f9fa; /* 背景颜色 */
  border-bottom: 1px solid #dee2e6; /* 底部边框 */
  margin-bottom: 0; /* 下边距 */
  border-radius: 20px 20px 0 0; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  display: flex; /* 弹性布局 */
}

/* 选项卡导航项 */
.tab-card .nav-tabs > li {
  flex: 1; /* 弹性增长 */
  text-align: center; /* 文本居中 */
}

/* 选项卡导航链接 */
.tab-card .nav-tabs > li > a {
  color: #495057; /* 文字颜色 */
  border: none; /* 无边框 */
  padding: 15px 20px; /* 内边距 */
  font-weight: 500; /* 字体粗细 */
  transition: all 0.3s ease; /* 过渡效果 */
  border-radius: 0; /* 无边框圆角 */
  display: block; /* 块级元素 */
}

/* 选项卡导航链接悬停 */
.tab-card .nav-tabs > li > a:hover {
  background: rgba(102, 126, 234, 0.1); /* 背景颜色 */
  border: none; /* 无边框 */
  color: #667eea; /* 文字颜色 */
}

/* 选项卡导航激活链接 */
.tab-card .nav-tabs > li.active > a {
  background: #667eea; /* 背景颜色 */
  color: white; /* 文字颜色 */
  border: none; /* 无边框 */
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); /* 阴影效果 */
}

/* 选项卡内容 */
.tab-card .tab-content {
  padding: 25px; /* 内边距 */
  background: rgba(255, 255, 255, 0.95); /* 背景颜色 */
  border-radius: 0 0 20px 20px; /* 边框圆角 */
}

/* 表单样式 */
.tab-card .form-group {
  margin-bottom: 20px; /* 下边距 */
  animation: slideIn 0.5s ease-in-out; /* 动画效果 */
}

/* 滑入动画 */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); } /* 开始状态 */
  to { opacity: 1; transform: translateY(0); } /* 结束状态 */
}

/* 表单标签 */
.tab-card .form-group label {
  font-weight: 500; /* 字体粗细 */
  color: #495057; /* 文字颜色 */
  margin-bottom: 8px; /* 下边距 */
  display: block; /* 块级元素 */
}

/* 表单控件 */
.tab-card .form-control {
  border: 2px solid rgba(102, 126, 234, 0.2); /* 边框 */
  border-radius: 10px; /* 边框圆角 */
  padding: 12px 15px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  transition: all 0.3s ease; /* 过渡效果 */
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
}

/* 表单控件聚焦 */
.tab-card .form-control:focus {
  border-color: #667eea; /* 边框颜色 */
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); /* 阴影效果 */
  outline: none; /* 无轮廓 */
}

/* 输入组 */
.tab-card .input-group {
  border-radius: 10px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 输入组按钮 */
.tab-card .input-group-btn .btn {
  border: none; /* 无边框 */
  border-radius: 0 10px 10px 0; /* 边框圆角 */
  background: rgba(102, 126, 234, 0.9); /* 背景颜色 */
  color: white; /* 文字颜色 */
  font-weight: 500; /* 字体粗细 */
  transition: all 0.3s ease; /* 过渡效果 */
  padding: 12px 20px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  white-space: nowrap; /* 不换行 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* 输入组按钮悬停 */
.tab-card .input-group-btn .btn:hover {
  background: rgba(90, 111, 216, 0.9); /* 背景颜色 */
  transform: translateY(-1px); /* 向上移动 */
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); /* 阴影效果 */
}

/* 表格样式 */
.fileinfo-table {
  border-radius: 10px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影效果 */
  border: none; /* 无边框 */
}

/* 表格表头 */
.fileinfo-table th {
  background: #667eea; /* 背景颜色 */
  color: white; /* 文字颜色 */
  border: none; /* 无边框 */
  padding: 12px; /* 内边距 */
  text-align: center; /* 文本居中 */
}

/* 表格单元格 */
.fileinfo-table td {
  border: none; /* 无边框 */
  padding: 12px; /* 内边距 */
  text-align: center; /* 文本居中 */
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
}

/* 表格偶数行 */
.fileinfo-table tr:nth-child(even) td {
  background: rgba(248, 249, 250, 0.9); /* 背景颜色 */
}

/* 按钮样式 */
.tab-card .btn {
  border-radius: 10px; /* 边框圆角 */
  padding: 10px 20px; /* 内边距 */
  font-weight: 500; /* 字体粗细 */
  transition: all 0.3s ease; /* 过渡效果 */
  border: none; /* 无边框 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 危险按钮 */
.tab-card .btn-danger {
  background: #ff6b6b; /* 背景颜色 */
  color: white; /* 文字颜色 */
}

/* 危险按钮悬停 */
.tab-card .btn-danger:hover {
  background: #ee5a6f; /* 背景颜色 */
  transform: translateY(-1px); /* 向上移动 */
  box-shadow: 0 4px 12px rgba(238, 90, 111, 0.3); /* 阴影效果 */
}

/* 侧边栏卡片样式 */
.info-card {
  border-radius: 15px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影效果 */
  border: none; /* 无边框 */
  margin-bottom: 20px; /* 下边距 */
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* 信息卡片头部 */
.info-card .card-header {
  background: #4facfe; /* 背景颜色 */
  border: none; /* 无边框 */
  padding: 12px; /* 内边距 */
  color: white; /* 文字颜色 */
  font-weight: 600; /* 字体粗细 */
  font-size: 14px; /* 字体大小 */
}

/* 信息卡片内容 */
.info-card .card-body {
  padding: 12px; /* 内边距 */
  font-size: 13px; /* 字体大小 */
  line-height: 1.4; /* 行高 */
}

/* 二维码卡片 */
.qr-card {
  border-radius: 15px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影效果 */
  border: none; /* 无边框 */
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* 二维码卡片头部 */
.qr-card .card-header {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  padding: 15px; /* 内边距 */
  color: white; /* 文字颜色 */
  font-weight: 600; /* 字体粗细 */
  font-size: 16px; /* 字体大小 */
}

/* 二维码卡片内容 */
.qr-card .card-body {
  padding: 15px; /* 内边距 */
}

/* 响应式设计 */
@media (max-width: 767px) {
  .player-header {
    padding: 20px; /* 内边距 */
  }
  
  .player-title h2 {
    font-size: 20px; /* 字体大小 */
  }
  
  .player-title p {
    font-size: 14px; /* 字体大小 */
  }
  
  .player-body {
    padding: 20px; /* 内边距 */
  }
  
  .album-cover {
    width: 150px; /* 宽度 */
    height: 150px; /* 高度 */
    margin-bottom: 20px; /* 下边距 */
  }
  
  .lyrics-container {
    height: 60px; /* 高度 */
    margin-bottom: 20px; /* 下边距 */
  }
  
  .lyrics {
    font-size: 16px; /* 字体大小 */
  }
  
  .visualizer-container {
    margin-bottom: 20px; /* 下边距 */
  }
  
  #visualizer {
    height: 150px !important; /* 高度 */
  }
  
  .file-view-card .card-body {
    padding: 20px; /* 内边距 */
  }
  
  .file-view-card .card-header {
    padding: 15px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
  }
  
  .tab-card .nav-tabs > li > a {
    padding: 10px 15px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
  }
  
  .tab-card .tab-content {
    padding: 15px; /* 内边距 */
  }
  
  .info-card .card-header,
  .qr-card .card-header {
    padding: 12px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
  }
  
  .info-card .card-body,
  .qr-card .card-body {
    padding: 12px; /* 内边距 */
  }
}

/* 上传页面样式 */
#app {
  min-height: 80vh; /* 最小高度 */
}

/* 信息框 */
.infobox {
  border-radius: 15px; /* 边框圆角 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影效果 */
  border: none; /* 无边框 */
  background: #fff; /* 背景颜色 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 上传标题 */
#uploadTitle {
  font-size: 24px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #5d4e75; /* 文字颜色 */
  margin-bottom: 30px; /* 下边距 */
}

/* 上传文件按钮 */
#uploadFile {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  color: #fff; /* 文字颜色 */
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  padding: 15px 30px; /* 内边距 */
  border-radius: 25px; /* 边框圆角 */
  transition: all 0.3s ease; /* 过渡效果 */
  box-shadow: 0 4px 8px rgba(255, 99, 132, 0.3); /* 阴影效果 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 文字阴影 */
}

/* 上传文件按钮悬停 */
#uploadFile:hover {
  transform: translateY(-3px); /* 向上移动 */
  box-shadow: 0 6px 12px rgba(255, 99, 132, 0.4); /* 阴影效果 */
  background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%); /* 渐变背景 */
}

/* 表单组 */
.form-group {
  margin-top: 20px; /* 上边距 */
}

/* 复选框标签 */
.checkbox label {
  font-size: 14px; /* 字体大小 */
  color: #666; /* 文字颜色 */
  font-weight: 500; /* 字体粗细 */
}

/* 主面板 */
.panel-primary {
  border-radius: 10px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 阴影效果 */
  border: none; /* 无边框 */
}

/* 主面板头部 */
.panel-primary .panel-heading {
  background: linear-gradient(135deg, #a8caba 0%, #5d4e75 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  padding: 15px; /* 内边距 */
}

/* 面板标题 */
.panel-title {
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #fff; /* 文字颜色 */
}

/* 列表组项 */
.list-group-item {
  border: none; /* 无边框 */
  border-bottom: 1px solid #f0f0f0; /* 底部边框 */
  padding: 12px 15px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  color: #666; /* 文字颜色 */
}

/* 列表组最后一项 */
.list-group-item:last-child {
  border-bottom: none; /* 无边框 */
}

/* 进度条样式 */
.progress {
  border-radius: 20px; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  height: 12px; /* 高度 */
  margin-bottom: 15px; /* 下边距 */
  background: rgba(255, 255, 255, 0.2); /* 背景颜色 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 边框 */
  backdrop-filter: blur(5px); /* 背景模糊 */
}

/* 进度条进度 */
.progress-bar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  transition: width 0.3s ease; /* 过渡效果 */
  position: relative; /* 相对定位 */
  overflow: hidden; /* 溢出隐藏 */
}

/* 进度条动画 */
.progress-bar::after {
  content: ''; /* 内容 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部 */
  left: 0; /* 左侧 */
  right: 0; /* 右侧 */
  bottom: 0; /* 底部 */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); /* 渐变背景 */
  animation: shimmer 1.5s infinite; /* 动画效果 */
}

/* 闪烁动画 */
@keyframes shimmer {
  0% {
    transform: translateX(-100%); /* 开始状态 */
  }
  100% {
    transform: translateX(100%); /* 结束状态 */
  }
}

/* 上传页面样式 */
.upload-container {
  min-height: 80vh; /* 最小高度 */
  padding: 20px; /* 内边距 */
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
}

/* 上传页面头部 */
.upload-header {
  text-align: center; /* 文本居中 */
  margin-bottom: 30px; /* 下边距 */
}

/* 上传页面标题 */
.upload-header h1 {
  font-size: 28px; /* 字体大小 */
  font-weight: 700; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  margin: 0; /* 外边距 */
}

/* 上传页面主体 */
.upload-main {
  display: grid; /* 网格布局 */
  grid-template-columns: 1fr 300px; /* 列布局 */
  gap: 30px; /* 间距 */
  align-items: start; /* 顶部对齐 */
}

/* 上传区域 */
.upload-area {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); /* 渐变背景 */
  border-radius: 20px; /* 边框圆角 */
  padding: 50px; /* 内边距 */
  box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* 阴影效果 */
  backdrop-filter: blur(15px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 边框 */
  transition: all 0.3s ease; /* 过渡效果 */
  position: relative; /* 相对定位 */
  overflow: hidden; /* 溢出隐藏 */
}

/* 上传区域背景动画 */
.upload-area::before {
  content: ''; /* 内容 */
  position: absolute; /* 绝对定位 */
  top: -50%; /* 顶部 */
  left: -50%; /* 左侧 */
  width: 200%; /* 宽度 */
  height: 200%; /* 高度 */
  background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent); /* 渐变背景 */
  animation: rotate 15s linear infinite; /* 动画效果 */
  z-index: 0; /* 层级 */
}

/* 上传区域悬停 */
.upload-area:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,0.15); /* 阴影效果 */
  transform: translateY(-5px); /* 向上移动 */
}

/* 上传区域内容 */
.upload-area > * {
  position: relative; /* 相对定位 */
  z-index: 1; /* 层级 */
}

/* 旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg); /* 开始状态 */
  }
  100% {
    transform: rotate(360deg); /* 结束状态 */
  }
}

/* 上传状态 */
.upload-status {
  margin-bottom: 30px; /* 下边距 */
}

/* 上传信息 */
.upload-info {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 均匀分布 */
  align-items: center; /* 垂直居中 */
  margin-top: 10px; /* 上边距 */
  font-size: 14px; /* 字体大小 */
  color: #666; /* 文字颜色 */
}

/* 上传百分比 */
.upload-percentage {
  font-weight: 600; /* 字体粗细 */
  color: #667eea; /* 文字颜色 */
}

/* 上传文件名 */
.upload-filename {
  flex: 1; /* 弹性增长 */
  text-align: center; /* 文本居中 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 文本省略 */
  white-space: nowrap; /* 不换行 */
  margin: 0 20px; /* 外边距 */
}

/* 上传速度 */
.upload-speed {
  font-weight: 600; /* 字体粗细 */
  color: #43e97b; /* 文字颜色 */
}

/* 上传提示 */
.upload-alert {
  margin: 20px 0; /* 外边距 */
  padding: 15px; /* 内边距 */
  border-radius: 8px; /* 边框圆角 */
  text-align: center; /* 文本居中 */
}

/* 上传内容 */
.upload-content {
  text-align: center; /* 文本居中 */
}

/* 上传标题 */
.upload-title {
  font-size: 24px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  margin-bottom: 30px; /* 下边距 */
}

/* 上传操作 */
.upload-actions {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 列方向 */
  align-items: center; /* 水平居中 */
  gap: 20px; /* 间距 */
}

/* 上传按钮 */
.upload-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  border: none; /* 无边框 */
  color: #fff; /* 文字颜色 */
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  padding: 15px 40px; /* 内边距 */
  border-radius: 25px; /* 边框圆角 */
  transition: all 0.3s ease; /* 过渡效果 */
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3); /* 阴影效果 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 文字阴影 */
  cursor: pointer; /* 鼠标指针 */
}

/* 上传按钮悬停 */
.upload-btn:hover {
  transform: translateY(-3px); /* 向上移动 */
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4); /* 阴影效果 */
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); /* 渐变背景 */
}

/* 上传选项 */
.upload-options {
  width: 100%; /* 宽度 */
  max-width: 400px; /* 最大宽度 */
  margin-top: 20px; /* 上边距 */
}

/* 上传选项表单组 */
.upload-options .form-group {
  margin-bottom: 15px; /* 下边距 */
}

/* 上传选项复选框标签 */
.upload-options .checkbox label {
  font-size: 14px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  cursor: pointer; /* 鼠标指针 */
}

/* 上传选项表单控件 */
.upload-options .form-control {
  border-radius: 8px; /* 边框圆角 */
  border: 1px solid #e0e0e0; /* 边框 */
  padding: 10px 15px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 上传选项表单控件聚焦 */
.upload-options .form-control:focus {
  border-color: #667eea; /* 边框颜色 */
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* 阴影效果 */
}

/* 上传选项帮助文本 */
.upload-options .help-block {
  font-size: 12px; /* 字体大小 */
  color: #999; /* 文字颜色 */
  margin-top: 5px; /* 上边距 */
}

/* 上传侧边栏 */
.upload-sidebar {
  background: rgba(255, 255, 255, 0.9); /* 背景颜色 */
  border-radius: 15px; /* 边框圆角 */
  padding: 20px; /* 内边距 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影效果 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
}

/* 上传提示 */
.upload-tips {
  width: 100%; /* 宽度 */
}

/* 提示标题 */
.tips-title {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  margin-bottom: 15px; /* 下边距 */
  padding-bottom: 10px; /* 底部内边距 */
  border-bottom: 1px solid #f0f0f0; /* 底部边框 */
}

/* 提示内容 */
.tips-content {
  font-size: 14px; /* 字体大小 */
  color: #666; /* 文字颜色 */
  line-height: 1.6; /* 行高 */
}

/* 提示项 */
.tip-item {
  margin-bottom: 12px; /* 下边距 */
}

/* 提示最后一项 */
.tip-item:last-child {
  margin-bottom: 0; /* 下边距 */
}

/* 响应式上传页面 */
@media (max-width:767px) {
  .upload-container {
    padding: 15px; /* 内边距 */
  }
  
  .upload-header h1 {
    font-size: 24px; /* 字体大小 */
  }
  
  .upload-main {
    grid-template-columns: 1fr; /* 单列布局 */
    gap: 20px; /* 间距 */
  }
  
  .upload-area {
    padding: 30px 20px; /* 内边距 */
  }
  
  .upload-title {
    font-size: 20px; /* 字体大小 */
  }
  
  .upload-btn {
    font-size: 16px; /* 字体大小 */
    padding: 12px 30px; /* 内边距 */
  }
  
  .upload-options {
    max-width: 100%; /* 最大宽度 */
  }
  
  .upload-info {
    flex-direction: column; /* 列方向 */
    gap: 5px; /* 间距 */
  }
  
  .upload-filename {
    margin: 5px 0; /* 外边距 */
  }
  
  .upload-sidebar {
    order: -1; /* 顺序 */
  }
}

/* 桌面端悬浮上传按钮 */
.floating-upload {
  position: fixed; /* 固定定位 */
  right: 30px; /* 右侧 */
  bottom: 100px; /* 底部 */
  z-index: 9999; /* 层级 */
  cursor: grab; /* 鼠标指针 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 桌面端悬浮上传按钮悬停 */
.floating-upload:hover {
  transform: scale(1.1); /* 放大 */
}

/* 桌面端悬浮上传按钮样式 */
.floating-upload .btn {
  width: 80px; /* 宽度 */
  height: 80px; /* 高度 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  background: rgba(255, 255, 255, 0.2); /* 背景颜色 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 边框 */
  color: #333; /* 文字颜色 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  -webkit-backdrop-filter: blur(10px); /* 背景模糊 */
  transition: all 0.3s ease; /* 过渡效果 */
  text-decoration: none; /* 无下划线 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 文本居中 */
}

/* 桌面端悬浮上传按钮悬停 */
.floating-upload .btn:hover {
  transform: translateY(-3px); /* 向上移动 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* 阴影效果 */
  background: rgba(255, 255, 255, 0.3); /* 背景颜色 */
  border: 1px solid rgba(255, 255, 255, 0.4); /* 边框 */
}

/* 在移动端隐藏悬浮按钮 */
@media (max-width:767px) {
  .floating-upload {
    display: none !important; /* 隐藏 */
  }
}

/* 登录按钮 */
#loginform .loginbtn{margin: 15px;}

/* 登录按钮图标 */
.loginbtn i{padding-top: 15px;}

/* 彩色加载动画 */
@-webkit-keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}.colorful_loading_frame{position:fixed;top:0;left:0;z-index:99999;width:100%;height:100%;background:rgba(0,0,0,.5);color:red;text-align:center;font-size:2em}.colorful_loading{margin:25% auto;width:50px;height:60px;text-align:center;font-size:10px}.colorful_loading>i{display:inline-block;margin-right:3px;width:6px;height:100%;background-color:#fff;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}.colorful_loading .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.colorful_loading .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.colorful_loading .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.colorful_loading .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}

/* 版权信息 */
footer.footer {
  text-align: center; /* 文本居中 */
  padding: 20px; /* 内边距 */
  margin-top: 30px; /* 上边距 */
  color: #666; /* 文字颜色 */
  font-size: 14px; /* 字体大小 */
  display: block; /* 块级元素 */
}

/* 移动端隐藏版权信息 */
@media (max-width: 768px) {
  footer.footer {
    display: none; /* 隐藏 */
  }
}

/* 上传提示框美化 */
.panel-primary {
  border-radius: 15px !important; /* 边框圆角 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; /* 阴影效果 */
  border: none !important; /* 无边框 */
  background: linear-gradient(135deg, #667eea, #764ba2, #4facfe, #00f2fe) !important; /* 渐变背景 */
  background-size: 400% 400% !important; /* 背景大小 */
  animation: gradientBG 15s ease infinite !important; /* 动画效果 */
  color: white !important; /* 文字颜色 */
}

/* 渐变背景动画 */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%; /* 开始状态 */
  }
  50% {
    background-position: 100% 50%; /* 中间状态 */
  }
  100% {
    background-position: 0% 50%; /* 结束状态 */
  }
}

/* 上传提示框头部 */
.panel-primary .panel-heading {
  background: transparent !important; /* 透明背景 */
  border: none !important; /* 无边框 */
  padding: 20px !important; /* 内边距 */
}

/* 上传提示框标题 */
.panel-title {
  font-size: 18px !important; /* 字体大小 */
  font-weight: 600 !important; /* 字体粗细 */
  color: white !important; /* 文字颜色 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; /* 文字阴影 */
}

/* 上传提示框列表项 */
.list-group-item {
  background: rgba(255, 255, 255, 0.1) !important; /* 背景颜色 */
  border: none !important; /* 无边框 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* 底部边框 */
  padding: 15px !important; /* 内边距 */
  font-size: 14px !important; /* 字体大小 */
  color: rgba(255, 255, 255, 0.9) !important; /* 文字颜色 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; /* 文字阴影 */
}

/* 上传提示框列表最后一项 */
.list-group-item:last-child {
  border-bottom: none !important; /* 无边框 */
}

/* 上传提示框列表项加粗文字 */
.list-group-item b {
  color: white !important; /* 文字颜色 */
  font-weight: 600 !important; /* 字体粗细 */
}