* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  background-color: #f7f7f7;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
}

.container {
  flex: 1;
  width: calc(100% - 220px);
  margin: 0 auto;
  padding: 20px 40px;
  /* max-width: 1440px;  限制最大宽度 */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 30px;
  border-bottom: 1px solid #eaeaea;
}

h1 {
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-box input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.search-box input:focus {
  outline: none;
  border-color: #409eff;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #409eff;
  color: white;
}

.btn-primary:hover {
  background-color: #66b1ff;
}

.account-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.account-card {
  position: relative;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.account-name {
  font-size: 18px;
  /* font-weight: bold; */
  margin-bottom: 8px;
}

.action-buttons {
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
}

.action-btn {
  padding: 2px 8px;
  font-size: 12px;
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

.action-btn.btn-disable {
  background: #f56c6c;
  margin-right: 4px;
}

.action-btn.btn-edit {
  background: #409eff;
}

.account-info {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.account-status {
  display: flex;
  flex-direction: column; /* 保持纵向排列 */
  gap: 8px;
  margin-top: 10px;
}

/* 状态标签容器 */
.account-status .badge-container {
  display: flex;
  align-items: center;
  gap: 2px;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}

.badge-container .online {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
  /* opacity: 0.85; */
}

.badge-container .offline {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
  /* opacity: 0.85; */
}

/* 最后活跃时间 */
.last-time {
  font-size: 12px;
  color: #909399;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 5px;
}

.pagination button {
  width: 32px;
  height: 32px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.pagination button:hover {
  border-color: #409eff;
  color: #409eff;
}

.pagination .active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .action-bar {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .search-box {
    width: 100%;
  }

  .account-list {
    grid-template-columns: 1fr;
  }
}

/* 修改模态框样式 */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  /* 使用 flex 布局实现居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay .modal {
  position: relative; /* 改为相对定位 */
  width: 800px;
  padding: 30px 20px 10px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  /* 移除 margin，因为使用 flex 布局居中 */
  margin: 0 auto;
  /* 添加最大高度限制 */
  /* max-height: 90vh; */
  overflow-y: auto;
}

.modal-overlay .modal .modal-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.modal-close {
  cursor: pointer;
  font-size: 18px;
  color: #909399;
}

.modal-body {
  padding: 20px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* 确保弹窗在显示时正确定位 */
body.modal-open {
  /* overflow: hidden; */
}

.modal-overlay[style*="display: block"] {
  display: flex !important;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
}

.form-item input[type="text"],
.form-item select,
.form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.form-item input[type="file"] {
  width: 100%;
  padding: 8px 0;
}

#avatarPreview {
  margin-top: 10px;
  max-width: 100px;
  max-height: 100px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.modal-footer .btn {
  margin-left: 10px;
}

/* 表格操作按钮样式 */
.voice-table .action-btn {
  padding: 4px 8px;
  margin: 0 4px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.voice-table .btn-edit {
  background: #409eff;
  color: white;
}

.voice-table .btn-toggle {
  background: #67c23a;
  color: white;
}

.voice-table .btn-toggle.disabled {
  background: #f56c6c;
}

/* 系统标题样式 */
.sidebar-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

.sidebar-menu {
  list-style: none;
  padding: 12px 0;
  margin: 0;
}

.sidebar-menu li {
  padding: 0 24px;
  height: 46px;
  line-height: 46px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: #666;
  position: relative;
}

.sidebar-menu li:hover {
  color: #1890ff;
  background-color: #e6f7ff;
}

.sidebar-menu li.active {
  color: #1890ff;
  background-color: #e6f7ff;
}

.sidebar-menu li.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #1890ff;
}

/* 顶部栏样式 */

.user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.user-info #username {
  color: #333;
  font-weight: 500;
  margin-left: 5px;
}

/* 主内容区域样式 */
.main-content {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow-y: auto; /* 添加垂直滚动 */
}

/* 标签页样式 */
.tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.tab {
  padding: 12px 24px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.tab:hover {
  color: #1890ff;
}

.tab.active {
  color: #1890ff;
}

.tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: #1890ff;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  min-height: 100vh;
  background-color: #fff;
  padding-top: 0;
  color: #333;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.05);
  overflow-y: auto; /* 添加垂直滚动 */
  position: sticky;
  top: 0;
  height: 100vh; /* 限制高度为视口高度 */
}

/* 美化侧边栏滚动条 */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 筛选框容器样式 */
#agentFilterBox {
  margin-left: 10px;
}

/* 筛选下拉框样式 */
#channelFilter {
  width: 200px;
  padding: 10px 15px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  height: 39.3px;
}

/* 下拉框hover效果 */
#channelFilter:hover {
  border-color: #dcdfe6;
}

/* 下拉框focus效果 */
#channelFilter:focus {
  outline: none;
  border-color: #409eff;
}

/* 添加下拉箭头 */
#agentFilterBox::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #606266;
  pointer-events: none;
}

/* 下拉选项样式 */
#channelFilter option {
  padding: 6px 12px;
  font-size: 14px;
  color: #606266;
}
#editDailyDisplay::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#editDailyDisplay::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
#editDailyDisplay::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
/* 鼠标悬浮滑块效果 */
#editDailyDisplay::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

body.modal-open {
  overflow: hidden;
}

.btn-disable {
  background: #f56c6c;
}
.btn-enable {
  background: #67c23a;
}

.systemBox {
  width: 100%;
  overflow-x: auto; /* 移除这里的滚动条 */
}
.systemHeader {
  display: flex;
  color: #000000;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  /* margin-bottom: 10px; */
}

/* 统一行高和对齐方式 */
.systemHeader > div,
.systemItem > div {
  min-height: 40px;
  padding: 8px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

/* 统一所有文本字段样式 */
.homeLogoText,
.homeTitleMain,
.homeTitleChild,
.homeDes,
.footLogoText,
.footDes,
.footCopyright,
.footContact,
.footEmail,
.footAddress,
.systemName,
.systemOtherName,
.systemBottomInfo {
  width: 180px;
  min-height: 40px;
  padding: 8px;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
}

/* 图片容器统一样式 */
.systemIcon,
.systemLogo,
.loginIcon,
.homeFavicon,
.homeLogo,
.footLogo {
  width: 120px;
  height: 40px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 颜色相关列统一样式 */
.systemMenuColor,
.systemAssistantMenuColor,
.systemDangerMenuColor,
.systemSecondMenuColor {
  width: 150px;
  min-height: 40px;
  padding: 8px;
  display: flex;
  align-items: center;
}

/* 操作按钮统一样式 */
.systemEdit,
.systemDelete {
  width: 80px;
  min-height: 40px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 保持基础信息单行显示 */
/* 基础信息字段保持单行 */
.systemId,
/* .systemName, */
/* .systemOtherName, */
/* .systemBottomInfo, */
.systemIcon,
.systemLogo,
.systemMenuColor,
.systemAssistantMenuColor,
.systemDangerMenuColor,
.systemSecondMenuColor,
.systemRadius {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 允许文本换行的字段 */
.systemName,
.systemOtherName,
.systemBottomInfo,
.homeLogoText,
.homeTitleMain,
.homeTitleChild,
.homeDes,
.footLogoText,
.footDes,
.footCopyright,
.footContact,
.footEmail,
.footAddress {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* 添加systemItem的hover效果 */
  
  .systemItem:hover {
    background-color: #ededef;
  }
/* 设置每列的固定宽度 */
.systemId {
  width: 60px;
}
.systemName {
  width: 120px;
}
.systemOtherName {
  width: 180px;
}
.systemBottomInfo {
  width: 180px;
}
.systemLogo {
  width: 180px;
}
.systemIcon,
.loginIcon,
.homeFavicon,
.homeLogo,
.footLogo {
  width: 120px;
  display: flex;
  align-items: center;
}

/* 颜色相关列宽 */
.systemMenuColor,
.systemAssistantMenuColor,
.systemDangerMenuColor,
.systemSecondMenuColor {
  width: 120px;
  display: flex;
  align-items: center;
}

/* 文本相关列宽 */
.systemRadius {
  display: flex;
  justify-content: center;
  width: 180px;
}
.homeLogoText,
.homeTitleMain,
.homeTitleChild,
.homeDes,
.footLogoText,
.footDes,
.footCopyright,
.footContact,
.footEmail,
.footAddress {
  width: 140px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* 操作按钮列宽 */
.systemEdit,
.systemDelete {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 统一行样式 */
.systemHeader,
.systemItem {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #ebeef5;
}

/* 统一单元格样式 */
.systemHeader > div,
.systemItem > div {
  padding: 0 8px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* 图片容器样式 */
[class$="Logo"] img,
.systemIcon img {
  width: 100px;
  height: 30px;
  object-fit: contain;
}

/* 图片样式 */
.systemIcon img {
  width: 100px;
  height: 30px;
  object-fit: contain; /* 保持图片比例 */
  border-radius: 4px;
}
.web_logo,
.loginIcon,
.homeFavicon,
.homeLogo,
.footLogo {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.web_logo img,
.loginIcon img,
.homeFavicon img,
.homeLogo img,
.footLogo img {
  width: 100px;
  height: 30px;
  object-fit: contain; /* 保持图片比例 */
}
.homeLogo {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.homeLogo img {
  width: 100px;
  height: 30px;
  object-fit: contain; /* 保持图片比例 */
}

.systemMenuColor,
.systemAssistantMenuColor,
.systemDangerMenuColor,
.systemSecondMenuColor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
}
.footLogoText {
  width: 100px;
}

.homeLogoText,
.systemName,
.systemOtherName,
.systemBottomInfo,
.homeTitleMain,
.homeTitleChild,
.homeDes,
.footLogoText,
.footDes,
.footCopyright {
  width: 180px;
  min-height: 40px;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  position: relative;
  display: flex;
  align-items: center;
}

/* 移除其他文本字段中的样式覆盖 */
.homeLogoText,
.homeTitleMain,
.homeTitleChild,
.homeDes,
.footLogoText,
.footDes,
.footCopyright,
.footContact,
.footEmail,
.footAddress {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
}

/* 联系方式相关字段样式 */
.footContact,
.footEmail,
.footAddress {
  width: 160px;
  min-height: 40px;
  padding: 8px 12px;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  position: relative;
  display: flex;
  align-items: center;
}

/* 添加图标 */
.footContact::before,
.footEmail::before,
.footAddress::before {
  font-size: 12px;
  color: #909399;
  margin-right: 8px;
  flex-shrink: 0;
}

.footContact::before {
  content: "📞";
}
.footEmail::before {
  content: "📧";
}
.footAddress::before {
  content: "📍";
}

/* 移除其他文本字段中对这些元素的样式覆盖 */
.footContact,
.footEmail,
.footAddress {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
}
.footDes {
  width: 200px;
}
.footCopyright {
  width: 140px;
}

.systemEdit {
  width: 80px;
}

/* 图片容器样式统一 */
.systemIcon,
/* .systemLogo, */
.loginIcon,
.homeFavicon,
.homeLogo,
.footLogo {
  padding: 0; /* 移除内边距 */
  margin-right: 10px; /* 统一间距 */
}

.loginIcon,
.homeFavicon,
.homeLogo,
.footLogo {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* 图片容器不需要处理溢出 */
}

.bigBox {
  width: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  overflow-x: auto;
  min-width: 3600px;
  white-space: nowrap;
  min-height: 200px;
  height: auto;
}

/* 设置滚动条样式 */
.bigBox::-webkit-scrollbar {
  height: 8px;
}

/* 设置滚动条样式 */
.systemBox::-webkit-scrollbar {
  height: 8px;
  background-color: #fff; /* 白色背景 */
}

.systemBox::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 4px;
}

.systemBox::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

/* 按钮样式调整 */
.editBtn,
.deleteBtn {
  padding: 5px 15px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 12px;
}

.editBtn {
  background-color: #409eff;
  color: white;
}

.deleteBtn {
  background-color: #f56c6c;
  color: white;
}

/* 调整按钮容器样式 */
.systemEdit,
.systemDelete {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* 移除内边距 */
}

/* 添加新增站点按钮容器样式 */
.systemHeader-wrapper {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* margin-bottom: 20px; */
}

/* 新增站点按钮样式 */
.addSiteBtn {
  padding: 8px 15px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.addSiteBtn:hover {
  background-color: #66b1ff;
}

/* 新增站点蒙层样式 */
.addSiteModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.addSiteModal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  width: 900px !important;
  max-height: 90vh;
  overflow-y: auto;
}

.addSiteModal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.addSiteModal-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.addSiteModal-close {
  cursor: pointer;
  font-size: 18px;
  color: #909399;
}

.addSiteModal-form {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.form-item {
  flex: 0 0 calc(50% - 20px);
  margin: 0 10px 15px;
  display: flex;
  align-items: flex-start;
}

.form-label {
  width: 120px;
  text-align: right;
  padding-right: 12px;
  font-size: 14px;
  color: #606266;
}

.form-input {
  flex: 1;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.form-footer {
  flex: 0 0 100%;
  /* margin: 20px 10px 0; */
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.cancelBtn {
  padding: 8px 24px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
}

.cancelBtn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.submitBtn {
  padding: 8px 24px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.submitBtn:hover {
  background-color: #66b1ff;
}

/* 按钮禁用状态 */
.submitBtn:disabled,
.cancelBtn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* 按钮点击效果 */
.submitBtn:active {
  background-color: #3a8ee6;
}

.cancelBtn:active {
  color: #3a8ee6;
  border-color: #3a8ee6;
}

/* 图片上传区域样式 */
.upload-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-btn {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.upload-preview {
  width: 32px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  display: none;
}

.upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.form-input.color-picker {
  width: 100%;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}

/* 颜色选择器样式 */
.color-picker {
  width: 50px;
  height: 32px;
  padding: 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

.color-block {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid #dcdfe6;
}

/* 颜色预览块样式 */
.color-block {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid #dcdfe6;
}

.color-input-group {
  flex: 1;
  display: flex;
  gap: 10px;
  align-items: center;
}

.color-text {
  width: 100px !important;
  text-align: center;
}

/* maxBox样式 */
.maxBox {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); */
  /* margin: 20px; */
  height: 800px;
  /* min-height: calc(100vh - 150px); */
}

/* 控制台左右布局样式 */
.max-container {
  display: flex;
  gap: 20px;
  min-height: 720px;
  height: calc(100vh - 200px); /* 使容器高度适应视口 */
}
.max-left {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
  display: flex;
  flex-direction: column;
  /* background-color: #fff; */
  border-radius: 10px;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); */
  /* padding: 20px; */
  overflow: auto; /* 内容过多时可滚动 */
}

.max-right {
  flex: 1;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  /* padding: 20px; */
  min-width: 0; /* 防止内容溢出 */
  display: flex;
  flex-direction: column;
  overflow: auto; /* 内容过多时可滚动 */
  height: 720px;
}
/* 地图容器样式 */
.map-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
/* 高德地图容器样式 */
/* 地图容器样式 */
.amap-container {
  width: 100%;
  height: 670px;
  min-height:67px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.map-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.map-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.map-actions {
  display: flex;
  gap: 10px;
}

.btn-sm {
  padding: 4px 12px;
  font-size: 12px;
}

.btn-refresh {
  background-color: #f2f6fc;
  color: #409eff;
  border: 1px solid #d9ecff;
}

.btn-refresh:hover {
  background-color: #ecf5ff;
}

.china-map-chart {
  flex: 1;
  min-height: 500px;
  width: 100%;
}
/* 暂无数据样式 */
.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  text-align: center;
  color: #909399;
}

.no-data-icon {
  font-size: 60px;
  margin-bottom: 20px;
  color: #dcdfe6;
}

.no-data-text {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #606266;
}



/* 添加简单的动画效果 */
.no-data-container:hover .no-data-icon {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.max-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* padding: 20px; */
}

/* 设置 max-card 宽度，使一行显示三个 */
.max-card {
  width: calc(33.33% - 14px) !important; /* 使用!important覆盖其他样式 */
  flex: none !important; /* 覆盖flex:1属性 */
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  /* padding: 20px; */
  background-color: #fff;
  height: 120px;
  display: flex;
  flex-direction: column;
   gap: 20px;
}

/* 特殊处理 taskStatsRow */
#taskStatsRow {
  width: 100%;
  display: flex;
  /* gap: 20px; */
}

#taskStatsRow .max-card {
  width: calc(33.33% - 14px);
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .max-card {
    width: calc(50% - 10px);
  }
  
  #taskStatsRow .max-card {
    width: calc(50% - 10px);
  }
}

@media screen and (max-width: 768px) {
  .max-card {
    width: 100%;
  }
  
  #taskStatsRow .max-card {
    width: 100%;
  }
}

.card-row {
  display: none; /* 完全隐藏card-row */
}

/* 卡片样式优化 */
.max-card {
  flex: 1;
  border-radius: 10px;
  padding: 20px;
  background: #fff;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 120px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border: none;
}
.lastCard {
  box-shadow: none !important; /* 使用 !important 确保覆盖其他可能的样式 */
}



.card-title {
  font-size: 14px;
  color: #909399;
  /* margin-bottom: 15px; */
  font-weight: 500;
  position: static;
  top: auto;
  left: auto;
}

.card-number {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-top: auto;
  margin-bottom: 5px;
  line-height: 1.2;
}

.live-records {
  width: 100%;
  border: 1px solid #eeecec;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  overflow-x: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  /* max-height: 500px; */
  overflow-y: auto;
  position: relative;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-top: 20px;
}

.record-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #606266;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.record-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 4px;
  overflow: hidden;
}

.record-table th,
.record-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

.record-table th {
  background-color: #f8f9fa;
  font-weight: normal;
  color: #909399;
  border-top: 1px solid #eee;
}

.record-table tr:last-child td {
  border-bottom: none;
}

.record-table tr:hover {
  background-color: #f5f7fa;
}

.enter-btn {
  padding: 4px 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
  min-width: 60px;
  text-align: center;
}

.enter-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

/* 添加响应式布局 */
@media screen and (max-width: 1200px) {
  .card-row {
    flex-wrap: wrap;
  }
  
  .max-card {
    flex: 0 0 calc(50% - 10px);
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .max-card {
    flex: 0 0 100%;
  }
  
  .record-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 编辑日志样式 */
.logBox {
  display: none; /* 默认隐藏 */
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 40px);
}

.log-content {
  width: 100%;
}

.log-header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.log-header h2 {
  font-size: 18px;
  color: #303133;
  font-weight: 500;
}

.log-table {
  width: 100%;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
}

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

.log-table th,
.log-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
}

.log-table th {
  background-color: #f5f7fa;
  color: #909399;
  font-weight: normal;
}

.log-table tr:hover {
  background-color: #f5f7fa;
}

/* 表格样式优化 */
.log-table td {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 固定表头样式 */
.log-table thead.fixed-header {
  position: fixed;
  top: 0;
  z-index: 1000;
  background-color: #f5f7fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: auto; /* 宽度将由JavaScript设置 */
}

/* 保持原始表头样式 */
.log-table thead {
  background-color: #f5f7fa;
}
/* 修改 action-bar 的样式 */
.log-content .action-bar {
  display: flex;
  justify-content: flex-start; /* 改为左对齐 */
  align-items: center;
  margin-bottom: 20px;
}

.log-content .search-box {
  width: 200px; /* 可以根据需要调整宽度 */
}

.log-content #logAgentFilter {
  width: 160px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  outline: none; /* 移除激活时的黑框 */
  appearance: none; /* 移除默认的下拉箭头 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23606266' d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.937 10.825 4z'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  background-color: #fff;
  cursor: pointer;
}

.log-content #logAgentFilter:focus {
  border-color: #409eff; /* 激活时改为主题色边框 */
  box-shadow: none; /* 移除可能的阴影效果 */
}

/* 编辑日志样式 */
.urlBox {
  display: none; /* 默认隐藏 */
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 40px);
}

.urlBox-table {
  width: 100%;
  overflow-x: auto;
}

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

.urlBox-table th,
.urlBox-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
}

.urlBox-table th {
  background-color: #f5f7fa;
  color: #909399;
  font-weight: normal;
}

.urlBox-table tr:hover {
  background-color: #f5f7fa;
}

/* 表格样式优化 */
.urlBox-table td {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 修改 action-bar 的样式 */
.urlBox-content .action-bar {
  display: flex;
  justify-content: flex-start; /* 改为左对齐 */
  align-items: center;
  margin-bottom: 20px;
}

/* 音色管理样式 */
.voiceBox {
  display: none;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 40px);
}

.voice-content {
  width: 100%;
  /* overflow-x: auto; */
}

/* 音色表格容器 */
.voice-table {
  width: 100%;
  margin-bottom: 20px;
  overflow-x: auto; /* 启用水平滚动 */
  display: block;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 确保滚动条显示 */
  white-space: nowrap;
}

/* 表格本身 */
.voice-table table {
  width: auto; /* 改为auto，让表格根据内容自动调整宽度 */
  min-width: 100%; /* 确保至少占满容器宽度 */
  border-collapse: collapse;
}

/* 表头固定 */
.voice-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f5f7fa;
}

/* 确保所有列都有足够的最小宽度 */
.voice-table th,
.voice-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  min-width: 80px; /* 确保每列都有最小宽度 */
}

/* 特定列的宽度设置 */
.voice-table th:nth-child(1),
.voice-table td:nth-child(1) {
  min-width: 150px;
} /* ID */
.voice-table th:nth-child(2),
.voice-table td:nth-child(2) {
  min-width: 150px;
} /* 音色名称 */
.voice-table th:nth-child(3),
.voice-table td:nth-child(3) {
  min-width: 200px;
} /* 描述 */
.voice-table th:nth-child(4),
.voice-table td:nth-child(4) {
  min-width: 100px;
} /* 头像 */
.voice-table th:nth-child(5),
.voice-table td:nth-child(5),
.voice-table th:nth-child(6),
.voice-table td:nth-child(6),
.voice-table th:nth-child(7),
.voice-table td:nth-child(7) {
  min-width: 150px;
} /* 音频 */
.voice-table th:nth-child(8),
.voice-table td:nth-child(8),
.voice-table th:nth-child(9),
.voice-table td:nth-child(9) {
  min-width: 250px;
} /* 模型 */
.voice-table th:nth-child(10),
.voice-table td:nth-child(10) {
  min-width: 100px;
} /* 启用禁用 */
.voice-table th:nth-child(11),
.voice-table td:nth-child(11) {
  min-width: 200px;
} /* 编辑 */

/* 调整音频控件大小 */
.voice-table audio {
  width: 70px; /* 减小音频控件宽度 */
  height: 25px;
}

/* 确保所有单元格内容不溢出 */
.voice-table td {
  overflow: visible; /* 允许内容溢出 */
  white-space: normal; /* 允许文本换行 */
  word-break: break-word; /* 在任何可能的断字点换行 */
  max-width: 200px; /* 设置最大宽度 */
}

/* 特别是对于URL列 */
.voice-table td:nth-child(8),
.voice-table td:nth-child(9) {
  white-space: normal;
  word-break: break-word;
  font-size: 12px; /* 稍微减小字体大小 */
  line-height: 1.4; /* 增加行高 */
}

/* 保持其他列不换行 */
.voice-table td:nth-child(1),
.voice-table td:nth-child(2),
.voice-table td:nth-child(4),
.voice-table td:nth-child(5),
.voice-table td:nth-child(6),
.voice-table td:nth-child(7),
.voice-table td:nth-child(10) {
  white-space: nowrap;
}

.voice-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* 表单布局 */
.form-group {
  margin-bottom: 20px;
}

/* 标签样式 */
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

/* 选择框样式 */
.form-control {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #606266;
  transition: all 0.3s;
  cursor: pointer;
  background-position: right 8px center;
  background-size: 16px;
}

/* 选择框悬停状态 */
.form-control:hover {
  border-color: #c0c4cc;
}

/* 选择框焦点状态 */
.form-control:focus {
  outline: none;
  border-color: #409eff;
}

/* 选择框选项样式 */
.form-control option {
  padding: 8px 12px;
  font-size: 14px;
}

/* 选择框禁用状态 */
.form-control:disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}

/* 表单项状态 */
.form-content input[type="text"]:disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #909399;
  cursor: not-allowed;
}

/* 底部按钮样式 */
.voice-modal-footer {
  padding: 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
  background: #fff;
}

.voice-modal-footer .btn {
  padding: 9px 20px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.voice-modal-footer .btn-primary {
  background: #409eff;
  color: #fff;
  border: none;
  margin-left: 10px;
}

.voice-modal-footer .btn-primary:hover {
  background: #66b1ff;
}

.voice-modal-footer .btn:not(.btn-primary) {
  border: 1px solid #dcdfe6;
  color: #606266;
  background: #fff;
}

.voice-modal-footer .btn:not(.btn-primary):hover {
  color: #409eff;
  border-color: #c6e2ff;
  background: #ecf5ff;
}

/* 优化滚动条样式 */
.modal::-webkit-scrollbar {
  width: 6px;
}

.modal::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.modal::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 音色管理弹窗样式 */
.voice-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.voice-modal-content {
  position: relative;
  width: 900px;
  margin: 50px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.voice-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voice-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.voice-modal-close {
  font-size: 24px;
  color: #909399;
  cursor: pointer;
}

.voice-modal-body {
  padding: 30px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* 音色表单样式 */
.voice-form-group {
  margin-bottom: 25px;
}

.voice-form-row {
  display: flex;
  margin-bottom: 20px;
}

.voice-form-label {
  width: 120px;
  text-align: right;
  padding-right: 15px;
  line-height: 36px;
  font-size: 14px;
  color: #606266;
}

.voice-form-content {
  flex: 1;
}

/* 输入框样式 */
.voice-form-content input[type="text"],
.voice-form-content textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  transition: border-color 0.3s;
}

.voice-form-content input[type="text"]:focus,
.voice-form-content textarea:focus {
  outline: none;
  border-color: #409eff;
}

.voice-form-content textarea {
  min-height: 80px;
  resize: vertical;
}

/* 文件上传样式 */
.voice-form-content input[type="file"] {
  display: block;
  margin-bottom: 10px;
}

/* 下拉框样式 */
.voice-form-content select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  transition: border-color 0.3s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23606266'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

.voice-form-content select:focus {
  outline: none;
  border-color: #409eff;
}

/* 音频播放器样式 */
.voice-form-content audio {
  width: 100%;
  margin-top: 10px;
  border-radius: 4px;
}

/* 底部按钮样式 */
.voice-modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.voice-modal-footer .btn {
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 10px;
}

.voice-modal-footer .btn-primary {
  background: #409eff;
  color: #fff;
  border: none;
}

.voice-modal-footer .btn-primary:hover {
  background: #66b1ff;
}

.voice-modal-footer .btn:not(.btn-primary) {
  border: 1px solid #dcdfe6;
  color: #606266;
  background: #fff;
}

.voice-modal-footer .btn:not(.btn-primary):hover {
  color: #409eff;
  border-color: #c6e2ff;
  background: #ecf5ff;
}

/* 音色列表样式 */
.voice-list-container {
  width: 100%;
  overflow-x: auto;
  margin-top: 20px;
}

.voice-list-container h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #303133;
}

.voice-table th,
.voice-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
}

.voice-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

.voice-table tr:hover td {
  background-color: #f5f7fa;
}

.voice-table .desc-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-table .url-cell {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.voice-table audio {
  width: 150px;
  height: 30px;
}

/* 添加切换开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* 减小宽度 */
  height: 20px; /* 减小高度 */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f56c6c; /* 默认为红色（禁用状态） */
  transition: 0.3s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px; /* 减小滑块大小 */
  width: 16px; /* 减小滑块大小 */
  left: 2px; /* 调整位置 */
  bottom: 2px; /* 调整位置 */
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #67c23a; /* 启用状态为绿色 */
}

input:focus + .slider {
  box-shadow: 0 0 1px #67c23a;
}

input:checked + .slider:before {
  transform: translateX(20px); /* 调整滑动距离 */
}

/* 移除文字标签 */
.slider-text {
  display: none;
}

/* 音色操作按钮容器 */
.voice-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* 登录用户端按钮样式 */
.voice-actions .action-btn.btn-edit {
  padding: 4px 8px;
  font-size: 12px;
  border: none;
  border-radius: 3px;
  background-color: #409eff;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.voice-actions .action-btn.btn-edit:hover {
  background-color: #66b1ff;
}

/* 登录用户端弹窗样式优化 */
.login-popup-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-popup-modal .login-popup-content {
  width: 600px;
  padding: 20px 5px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.login-popup-modal .login-popup-header {
  display: flex;
  position: relative;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.login-popup-modal .login-popup-header h3 {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin: 0;
  text-align: center;
}

.login-popup-modal .login-popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 20px;
  color: #909399;
  cursor: pointer;
  transition: color 0.3s;
}

.login-popup-modal .login-popup-close:hover {
  color: #f56c6c;
}

.login-popup-modal .login-popup-body {
  padding: 30px;
}

.login-popup-modal .login-domain-container {
  display: flex;
  flex-direction: column;
}

.login-popup-modal .login-domain-select {
  margin-bottom: 30px;
}

.login-popup-modal .login-domain-select h4 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 15px 0;
}

.login-popup-modal .select-wrapper {
  position: relative;
}

.login-popup-modal .domain-select {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  appearance: none;
  cursor: pointer;
}

.login-popup-modal .domain-select:focus {
  outline: none;
  border-color: #409eff;
}

.login-popup-modal .select-arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #606266;
  pointer-events: none;
}

.login-popup-modal .login-popup-footer {
  text-align: right;
}

.login-popup-modal .login-popup-btn {
  padding: 10px 25px;
  min-width: 100px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  background-color: #f56c6c;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.login-popup-modal .login-popup-btn:hover {
  background-color: #f78989;
}

/* 修改日期输入框容器样式 */
.date-input-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.date-input-group {
  flex: 1;
  position: relative;
}

.date-label {
  /* color: #f56c6c; */
  font-size: 16px;
  margin-bottom: 8px;
  /* padding: 8px 12px; */
  /* border: 1px solid #f56c6c; */
  border-radius: 4px;
  background-color: #fff;
}

.date-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  font-size: 14px;
  color: #333;
  background-color: #fff;
}

/* 修改日期选择器的图标颜色 */
.date-input::-webkit-calendar-picker-indicator {
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(330deg)
    brightness(118%) contrast(119%);
}

.form-group-container {
  display: flex;
  gap: 20px;
}

.form-group-container .form-group {
  flex: 1;
}

/* 编辑列样式 */
.voice-table th:nth-child(11),
.voice-table td:nth-child(11) {
  width: 60px;
  text-align: center;
}

/* 编辑按钮样式 */
.btn-edit {
  padding: 4px 8px;
  font-size: 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit:hover {
  background-color: #66b1ff;
}

/* 音色编辑蒙层样式优化 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f8f9fa;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 90%;
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
  border-radius: 4px 4px 0 0;
}

.overlay-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.close-btn {
  font-size: 20px;
  color: #909399;
  cursor: pointer;
  transition: color 0.3s;
  line-height: 1;
}

.close-btn:hover {
  color: #606266;
}

.overlay-body {
  padding: 20px;
  background-color: #fff;
}

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

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  transition: border-color 0.3s;
  background-color: #fff;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.avatar-upload {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.avatar-upload input[type="file"] {
  display: none;
}

.avatar-upload label.file-label {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
}

.avatar-upload label.file-label:hover {
  background-color: #e6e8eb;
  border-color: #c0c4cc;
}

.avatar-preview {
  width: 80px;
  height: 80px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f5f7fa;
  position: relative;
}

.avatar-preview:empty::before {
  content: "无图片";
  color: #909399;
  font-size: 12px;
}

.avatar-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.overlay-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #f5f7fa;
  border-radius: 0 0 4px 4px;
}

.btn {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel {
  background-color: #f0f2f5;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.btn-cancel:hover {
  background-color: #e6e8eb;
  color: #303133;
}

.btn-primary {
  background-color: #409eff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #66b1ff;
}

/* 导出按钮样式 */
.export-btn {
  padding: 8px 15px;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 39.3px; /* 与筛选框高度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.export-btn:hover {
  background-color: #85ce61;
}

.export-btn:active {
  background-color: #5daf34;
}

/* 克隆管理盒子样式 */
.cloneBox {
  display: none;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 40px);
}

.clone-list-container {
  width: 100%;
  /*   margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden; */
}

.clone-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.clone-table table {
  width: 100%;
  table-layout: fixed; /* 使用固定表格布局 */
  border-collapse: collapse;
}
/* table th,
table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
} */
/* 确保所有单元格内容不溢出 */
.clone-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
}
.clone-table th {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  background-color: #f5f7fa; /* 添加表头背景颜色 */
  color: #606266; /* 添加表头文字颜色 */
  font-weight: 500; /* 添加表头文字粗细 */
}

.clone-table tbody tr:hover {
  background-color: #f5f7fa;
}

/* 克隆表格容器 */
.clone-table {
  width: 100%;
  overflow-x: auto; /* 启用水平滚动 */
  display: block;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 确保滚动条显示 */
  white-space: nowrap;
  margin-bottom: 20px;
}

/* 表格本身 */
.clone-table table {
  width: auto; /* 改为auto，让表格根据内容自动调整宽度 */
  min-width: 100%; /* 确保至少占满容器宽度 */
  border-collapse: collapse;
}

/* 表头固定 */
.clone-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f5f7fa;
}

/* 确保所有列都有足够的最小宽度 */
.clone-table th,
.clone-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  min-width: 80px; /* 确保每列都有最小宽度 */
}

/* 特定列的宽度设置 - 根据您的表格内容调整 */
.clone-table th:nth-child(1), .clone-table td:nth-child(1) { min-width: 80px; } /* ID */
.clone-table th:nth-child(2), .clone-table td:nth-child(2) { min-width: 120px; } /* 音色名称 */
.clone-table th:nth-child(3), .clone-table td:nth-child(3) { min-width: 150px; } /* 音色描述 */
.clone-table th:nth-child(4), .clone-table td:nth-child(4) { min-width: 100px; } /* 音色头像 */
.clone-table th:nth-child(5), .clone-table td:nth-child(5) { min-width: 150px; } /* 音色语料文件 */
.clone-table th:nth-child(6), .clone-table td:nth-child(6) { min-width: 150px; } /* 音色参考音频文件 */
.clone-table th:nth-child(7), .clone-table td:nth-child(7) { min-width: 120px; } /* 提交账号 */
.clone-table th:nth-child(8), .clone-table td:nth-child(8) { min-width: 120px; } /* 提交时间 */
.clone-table th:nth-child(9), .clone-table td:nth-child(9) { min-width: 100px; } /* 克隆状态 */
.clone-table th:nth-child(10), .clone-table td:nth-child(10) { min-width: 120px; } /* 完成时间 */
.clone-table th:nth-child(11), .clone-table td:nth-child(11) { min-width: 100px; } /* 禁用音色 */

/* 最小化音频播放器样式 */
.minimal-audio-player {
  display: flex;
  align-items: center;
}

.minimal-audio-player audio {
  width: 150px;
  height: 30px;
  background-color: #f5f7fa;
  border-radius: 30px;
}

/* 域名输入行样式 */
.form-item .urlBtn {
  margin-top: 2px;
  margin-right: 10px;
  padding: 6px 12px;
  width: 76px;
  font-size: 12px;
}

.domain-input-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.domain-input-row .form-input {
  width: 300px; /* 固定宽度为300px */
  height: 38px;
  padding: 0 10px;
}

.domain-input-row .btn {
  margin-left: 10px;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  width: 60px; /* 固定按钮宽度 */
  text-align: center;
}

.domain-input-row .btn-primary {
  padding: 6px 12px;
  background-color: #409eff;
}

.domain-input-row .btn-danger {
  width: 50px;
  background-color: #f56c6c;
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* 浏览器插件 */
.toolBox {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.upload-section {
  margin-bottom: 20px;
}

.history-section {
  margin-top: 20px;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.history-table th,
.history-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.history-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.history-table tr:hover {
  background-color: #f5f7fa;
}

.history-table .action-btns {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #409eff;
  color: white;
}

.btn-primary:hover {
  background-color: #66b1ff;
}

.btn-danger {
  background-color: #f56c6c;
  color: white;
}

.btn-danger:hover {
  background-color: #f78989;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 5px;
  margin-bottom: 20px;
}

.page-numbers {
  display: flex;
  gap: 5px;
}

.pagination .btn {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination .btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.pagination .page-number {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination .page-number:hover {
  border-color: #409eff;
  color: #409eff;
}

.pagination .page-number.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

/* 新增插件模态框样式 */
.plugin-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.plugin-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.plugin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.plugin-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.plugin-modal-close {
  cursor: pointer;
  font-size: 20px;
  color: #909399;
  background: none;
  border: none;
}

.plugin-modal-body {
  margin-bottom: 20px;
}

.plugin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.plugin-form-item {
  margin-bottom: 20px;
}

.plugin-form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.plugin-form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.plugin-form-input:focus {
  border-color: #409eff;
}

.plugin-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.plugin-btn-primary {
  background-color: #409eff;
  color: white;
}

.plugin-btn-primary:hover {
  background-color: #66b1ff;
}

.plugin-btn-danger {
  background-color: #f56c6c;
  color: white;
}

.plugin-btn-danger:hover {
  background-color: #f78989;
}

/* 系统功能 */
.noticeBox .action-bar {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  /* padding: 15px 0; */
}
.noticeBox .max-content {
  gap: 0px;
  /* padding: 15px 0; */
}

.noticeBox .left-actions {
  display: flex;
  gap: 10px;
}

.noticeBox .right-actions {
  display: flex;
  gap: 10px;
}

.noticeBox .btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.noticeBox .btn-primary:hover {
  background-color: #66b1ff;
}

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

.noticeBox .record-table th {
  background-color: #f5f7fa;
  padding: 12px 15px;
  text-align: left;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
}

.noticeBox .record-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
}

.noticeBox .record-table tr:hover {
  background-color: #f5f7fa;
}

.btn-authorize {
  background-color: #67c23a !important;
  color: #fff !important;
  border: none;
}
.btn-authorize:hover {
  background-color: #85ce61 !important;
}

.agent-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-checkbox-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.agent-checkbox-item:hover {
  background-color: #f5f7fa;
}

.agent-checkbox-item input[type="checkbox"] {
  margin-right: 10px;
}

.loading-agents {
  text-align: center;
  padding: 20px;
  color: #909399;
}

/* 非管理员用户隐藏操作列 */
body:not(.admin-user) .systemDelete {
  display: none !important;
}

/* 非管理员用户隐藏新增站点按钮 */
body:not(.admin-user) .addSiteBtn {
  display: none !important;
}

/* 背景音乐管理样式 */
.music-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;
}

.music-content .action-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.music-content .record-table {
  width: 100%;
  border-collapse: collapse;
}

.music-content .record-table th,
.music-content .record-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.music-content .record-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.music-content .record-table audio {
  width: 100%;
  max-width: 300px;
}

.music-content .btn-primary {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.music-content .btn-danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: white;
}

.music-content .btn-success {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.music-content .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  margin-right: 5px;
}

.music-content .pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.music-content .page-numbers {
  display: flex;
  align-items: center;
}

.music-content .page-number {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  cursor: pointer;
}

.music-content .page-number.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}