/* Element Plus 暗黑模式基础样式 */
html.dark {
  /* 自定义深色背景颜色 */
  --el-bg-color: #1a1a1a;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #6c6e72;
  --el-text-color-disabled: #6c6e72;
  --el-border-color: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;
  --el-fill-color: #424243;
  --el-fill-color-light: #39393a;
  --el-fill-color-lighter: #262727;
  --el-fill-color-extra-light: #1d1d1d;
  --el-fill-color-blank: transparent;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px rgba(0, 0, 0, 0.72), 0px 8px 16px -8px rgba(0, 0, 0, 0.72);
}

/* 自定义暗黑模式样式 */
html.dark {
  color-scheme: dark;
}

html.dark .app-container {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

html.dark .navbar {
  background: #1d1e1f;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

html.dark .tool-card {
  background: #1d1e1f;
}

html.dark .recommend-section {
  background: rgba(29, 30, 31, 0.6);
}

html.dark .recommend-link {
  background: #2d2d2d;
  color: #e5eaf3;
}

html.dark .recommend-link:hover {
  background: #409EFF;
  color: #fff;
}

html.dark .site-footer {
  background: rgba(29, 30, 31, 0.8);
  border-top-color: #4c4d4f;
}

html.dark .site-footer p,
html.dark .site-footer a {
  color: #a3a6ad;
}

html.dark .site-footer a:hover {
  color: #409EFF;
}

html.dark .tool-tag {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

html.dark #app-loading {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

html.dark .loading-text {
  color: #e5eaf3;
}

/* 暗黑模式下的文字顏色覆蓋 */
html.dark body {
  color: #e5eaf3;
}

html.dark .logo h1 {
  background: linear-gradient(135deg, #66b1ff 0%, #409EFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.dark .tool-name {
  color: #e5eaf3 !important;
}

html.dark .tool-description {
  color: #cfd3dc !important;
}

html.dark .section-title {
  color: #e5eaf3 !important;
}

html.dark .recommend-title {
  color: #cfd3dc !important;
}

html.dark .recommend-link {
  color: #cfd3dc !important;
}

html.dark .recommend-link:hover {
  color: #fff !important;
}

html.dark .tool-cover {
  background: #2d2d2d;
}

html.dark .pay-tips {
  border-top-color: #4c4d4f;
}

html.dark .pay-tips p {
  color: #cfd3dc !important;
}

html.dark .qrcode-box p {
  color: #a3a6ad !important;
}

html.dark .notice-content {
  color: #cfd3dc !important;
}

/* 確保導航欄菜單文字在暗黑模式下清晰 */
html.dark .nav-menu .el-menu-item {
  color: #cfd3dc !important;
}

html.dark .nav-menu .el-menu-item:hover {
  color: #409EFF !important;
}

html.dark .nav-menu .el-menu-item.is-active {
  color: #409EFF !important;
}

/* 暗黑模式下的文字顏色調整 */
html.dark body {
  color: #e5eaf3;
}

html.dark .logo h1 {
  background: linear-gradient(135deg, #66b1ff 0%, #409EFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.dark .tool-name {
  color: #e5eaf3 !important;
}

html.dark .tool-description {
  color: #cfd3dc !important;
}

html.dark .section-title {
  color: #e5eaf3 !important;
}

html.dark .recommend-title {
  color: #cfd3dc !important;
}

html.dark .recommend-link {
  color: #cfd3dc !important;
}

html.dark .recommend-link:hover {
  color: #fff !important;
}

html.dark .tool-cover {
  background: #2d2d2d;
}

html.dark .pay-tips {
  border-top-color: #4c4d4f;
}

html.dark .pay-tips p {
  color: #cfd3dc !important;
}

html.dark .qrcode-box p {
  color: #a3a6ad !important;
}

html.dark .notice-content {
  color: #cfd3dc !important;
}