/* ========== 优雅紫色线条设计系统 (优化版) ========== */

/* CSS 变量定义 */
:root {
  --elegant-bg-primary: #0f0f1a;
  /* 更深邃的背景 */
  --elegant-bg-secondary: #1e293b;
  --elegant-bg-card: rgba(19, 19, 43, 0.7);
  /* 更高的透明度玻璃感 */
  --elegant-purple: #3b82f6;
  --elegant-purple-light: #93c5fd;
  --elegant-purple-dark: #1e3a8a;
  /* 更加深沉的暗紫 */
  --elegant-text-primary: #f8fafc;
  /* 更亮的白，提高对比度 */
  --elegant-text-secondary: #94a3b8;
  --elegant-border: rgba(37, 99, 235, 0.6);
  /* 增加边框不透明度，从 0.25 -> 0.6 */
  --elegant-glow: rgba(37, 99, 235, 0.6);
}

/* 柔和发光动画 */
@keyframes soft-glow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.8);
  }

  50% {
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
    border-color: rgba(37, 99, 235, 1);
  }
}

/* 玻璃拟态卡片通用样式 */
.glass-card {
  background: rgba(19, 19, 43, 0.85);
  /* 增加背景不透明度，防止混合不清 */
  border: 1px solid rgba(37, 99, 235, 0.5);
  /* 增强外边框可见度 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  /* 多重线条层次感：外边框 + 内描边 + 深邃阴影 */
  box-shadow:
    inset 0 0 0 1px rgba(37, 99, 235, 0.15),
    0 8px 20px -6px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(37, 99, 235, 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(37, 99, 235, 0.3),
    0 0 25px rgba(37, 99, 235, 0.25);
}

.glass-card-header {
  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
  padding: 10px 14px;
}

.elegant-list-item {
  background: rgba(19, 19, 43, 0.4);
  border: 1px solid rgba(37, 99, 235, 0.1);
  color: var(--elegant-text-secondary);
  transition: all 0.2s;
}

.elegant-list-item:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--elegant-text-primary);
}

.elegant-list-item.active {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.5);
  color: #fff;
}

.elegant-tip-box {
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  padding: 12px;
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  /* 更细 */
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.6);
}

/* ========== 全局组件样式覆盖 (scoped to .cyberpunk-dashboard or general use) ========== */
/* 为了方便在不同页面复用，如果页面顶层没有 .cyberpunk-dashboard 类，建议添加，或者我们这里使用 :where() 选择器增加灵活性 */
/* 这里我们保留 .cyberpunk-dashboard 作用域，但在应用到 Sound 页面时需要给 Sound 页面添加该类 */

/* 主要按钮 - 优雅紫色渐变 */
.cyberpunk-dashboard .arco-btn-primary,
.elegant-theme .arco-btn-primary {
  background: linear-gradient(135deg, #a855f7 0%, #d946ef 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
  transition: all 0.3s ease !important;
}

.cyberpunk-dashboard .arco-btn-primary:hover:not(:disabled),
.elegant-theme .arco-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #9333ea 0%, #bd24df 100%) !important;
  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.6) !important;
  transform: translateY(-1px);
}

/* 次要按钮 */
.cyberpunk-dashboard .arco-btn-secondary,
.cyberpunk-dashboard .arco-btn-outline,
.elegant-theme .arco-btn-secondary,
.elegant-theme .arco-btn-outline {
  background: rgba(37, 99, 235, 0.05) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  color: #d8b4fe !important;
}

.cyberpunk-dashboard .arco-btn-secondary:hover:not(:disabled),
.cyberpunk-dashboard .arco-btn-outline:hover:not(:disabled),
.elegant-theme .arco-btn-secondary:hover:not(:disabled),
.elegant-theme .arco-btn-outline:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: #93c5fd !important;
  color: #fff !important;
}

/* 单选按钮组 (Tabs样式) */
.cyberpunk-dashboard .arco-radio-group-button,
.elegant-theme .arco-radio-group-button {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  border-radius: 6px !important;
  padding: 2px;
}

.cyberpunk-dashboard .arco-radio-button,
.elegant-theme .arco-radio-button {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.cyberpunk-dashboard .arco-radio-button:hover,
.elegant-theme .arco-radio-button:hover {
  color: #e2e8f0 !important;
}

.cyberpunk-dashboard .arco-radio-button-checked,
.elegant-theme .arco-radio-button-checked {
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 文本按钮 */
.cyberpunk-dashboard .arco-btn-text,
.elegant-theme .arco-btn-text {
  color: #94a3b8 !important;
}

.cyberpunk-dashboard .arco-btn-text:hover:not(:disabled),
.elegant-theme .arco-btn-text:hover:not(:disabled) {
  color: #93c5fd !important;
  background: transparent !important;
}

/* 输入框 */
/* 输入框 - 深色沉浸式 */
/* 强制深色覆盖样式 - 用于解决部分组件背景顽固为白色的问题 */
.dark-input-override,
.dark-input-override .arco-select-view,
.dark-input-override .arco-textarea,
.dark-input-override .arco-input,
.dark-input-override .arco-input-number-input,
.cyberpunk-dashboard .arco-input,
.cyberpunk-dashboard .arco-textarea,
.cyberpunk-dashboard .arco-input-number,
.cyberpunk-dashboard .arco-select-view,
.elegant-theme .arco-input,
.elegant-theme .arco-textarea,
.elegant-theme .arco-input-number,
.elegant-theme .arco-select-view {
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #f1f5f9 !important;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.dark-input-override:hover,
.dark-input-override:hover .arco-select-view,
.dark-input-override:hover .arco-textarea,
.dark-input-override:hover .arco-input,
.cyberpunk-dashboard .arco-input:hover,
.cyberpunk-dashboard .arco-textarea:hover,
.cyberpunk-dashboard .arco-input-number:hover,
.cyberpunk-dashboard .arco-select-view:hover,
.elegant-theme .arco-input:hover,
.elegant-theme .arco-textarea:hover,
.elegant-theme .arco-input-number:hover,
.elegant-theme .arco-select-view:hover {
  background: rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(37, 99, 235, 0.6) !important;
}

.dark-input-override:focus-within,
.dark-input-override:focus-within .arco-select-view,
.dark-input-override:focus-within .arco-textarea,
.dark-input-override:focus-within .arco-input,
.cyberpunk-dashboard .arco-input:focus,
.cyberpunk-dashboard .arco-textarea:focus,
.cyberpunk-dashboard .arco-input-number:focus,
.cyberpunk-dashboard .arco-select-view-focus,
.elegant-theme .arco-input:focus,
.elegant-theme .arco-textarea:focus,
.elegant-theme .arco-input-number:focus,
.elegant-theme .arco-select-view-focus {
  border-color: #3b82f6 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* 下拉菜单 */
.cyberpunk-dashboard .arco-select-dropdown,
.elegant-theme .arco-select-dropdown {
  background: #1e293b !important;
  border: 1px solid var(--elegant-border) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

.cyberpunk-dashboard .arco-select-option,
.elegant-theme .arco-select-option {
  color: #cbd5e1 !important;
  background-color: transparent !important;
}

.cyberpunk-dashboard .arco-select-option:hover,
.cyberpunk-dashboard .arco-select-option-active,
.elegant-theme .arco-select-option:hover,
.elegant-theme .arco-select-option-active {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #fff !important;
}

/* Tabs */
.cyberpunk-dashboard .arco-tabs-nav-tab,
.elegant-theme .arco-tabs-nav-tab {
  border-bottom-color: rgba(37, 99, 235, 0.1) !important;
}

.cyberpunk-dashboard .arco-tabs-tab,
.elegant-theme .arco-tabs-tab {
  color: #64748b !important;
}

.cyberpunk-dashboard .arco-tabs-tab:hover,
.elegant-theme .arco-tabs-tab:hover {
  color: #3b82f6 !important;
}

.cyberpunk-dashboard .arco-tabs-tab-active,
.elegant-theme .arco-tabs-tab-active {
  color: #d8b4fe !important;
}

.cyberpunk-dashboard .arco-tabs-nav-ink,
.elegant-theme .arco-tabs-nav-ink {
  background: #3b82f6 !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
}

/* 模态框 */
.cyberpunk-dashboard .arco-modal,
.elegant-theme .arco-modal {
  background: linear-gradient(180deg, #1e293b 0%, #0f0f1a 100%) !important;
  border: 1px solid var(--elegant-border) !important;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

.cyberpunk-dashboard .arco-modal-header,
.elegant-theme .arco-modal-header {
  border-bottom: 1px solid rgba(37, 99, 235, 0.3) !important;
}

.cyberpunk-dashboard .arco-modal-title,
.elegant-theme .arco-modal-title {
  color: #f1f5f9 !important;
}

.cyberpunk-dashboard .arco-modal-close-btn,
.elegant-theme .arco-modal-close-btn {
  color: #94a3b8 !important;
}