.toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-weight: 500;

  height: 32px;
  width: 32px;
  padding: 0;
  font-size: 1rem;

  background-color: transparent;
  /* 默认变体：bg-transparent */
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  cursor: pointer;

  /* 用于聚焦环 */
  --tt-ring-color-rgb: var(--bs-primary-rgb);
  /* 默认为 Bootstrap primary */
}

.toggle:hover {
  background-color: var(--bs-secondary-bg);
  /*  bg-muted */
  /* color: var(--bs-emphasis-color); */
  /*  text-muted-foreground */
}

.toggle:focus {
  /* 标准聚焦 */
  outline: 0;
}

.toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.125rem var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--tt-ring-color-rgb), 0.45);
}


/* 为 popup.html调整按钮 */
body.popup-body .toggle {
  top: 5px;
  right: 5px;
  height: 28px;
  width: 28px;
  font-size: 0.9rem;
  border-radius: 0.25rem;
  /* 为较小按钮提供略小的圆角 */
}

/* 暗色主题下切换按钮本身的调整 */
html[data-bs-theme="dark"] .toggle {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  --tt-ring-color-rgb: var(--bs-primary-rgb);
  /* 确保使用 primary，Bootstrap 会处理暗色 primary */
}

html[data-bs-theme="dark"] .toggle:hover {
  background-color: var(--bs-secondary-bg);
  /* color: var(--bs-emphasis-color); */
}



html[data-bs-theme="dark"] .invert-on-dark {
  filter: invert(1) brightness(1.5);
}

/* 主题切换按钮样式结束 */

/* 暗色主题下浅灰色元素和滚动条的覆盖 */
html[data-bs-theme="dark"] .bg-light {
  background-color: #373c42 !important;
  color: #e9ecef !important;
}

html[data-bs-theme="dark"] pre {
  background-color: #373c42 !important;
  color: #e9ecef !important;
  border: 1px solid #495057;
  /*于定义的边框 */
}

html[data-bs-theme="dark"] .debug-section {
  background-color: #373c42 !important;
  color: #e9ecef !important;
}

html[data-bs-theme="dark"] .debug-result {
  background-color: #2c3034 !important;
  /* 结果区域使用略微不同的深色阴影 */
  color: #f8f9fa !important;
  /* 更亮的灰白色文本 */
  border-color: #495057 !important;
}

html[data-bs-theme="dark"] .debug-result code,
html[data-bs-theme="dark"] .debug-result pre,
html[data-bs-theme="dark"] .debug-result span {
  color: #f8f9fa !important;
}

.text-dark.fw-bold.small,
.text-dark.small {
  color: #bd97ab !important;
}

/* 暗色模式下 #languageSelect 滚动条的覆盖 */
html[data-bs-theme="dark"] #languageSelect::-webkit-scrollbar-track {
  background: #373c42;
}

html[data-bs-theme="dark"] #languageSelect::-webkit-scrollbar-thumb {
  background: #6c757d;
}

html[data-bs-theme="dark"] #languageSelect::-webkit-scrollbar-thumb:hover {
  background: #5a6268;
}

html[data-bs-theme="dark"] #languageSelect {
  scrollbar-color: #6c757d #373c42;
}

/* 暗色模式下的表单元素 */
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-control {
  background-color: #2b3035;
  color: #e9ecef;
  border-color: #495057;
}

html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .form-control:focus {
  background-color: #2b3035;
  color: #e9ecef;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 其他可能滚动的元素（如 pre 或 debug-result）的自定义滚动条 */
html[data-bs-theme="dark"] pre::-webkit-scrollbar-track,
html[data-bs-theme="dark"] .debug-result::-webkit-scrollbar-track,
html[data-bs-theme="dark"] #headerCheckContent::-webkit-scrollbar-track

/* popup.html 的特定 ID */
  {
  background: #2c3034;
}

html[data-bs-theme="dark"] pre::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .debug-result::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] #headerCheckContent::-webkit-scrollbar-thumb {
  background: #555;
}

html[data-bs-theme="dark"] pre::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] .debug-result::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] #headerCheckContent::-webkit-scrollbar-thumb:hover {
  background: #777;
}

html[data-bs-theme="dark"] pre,
html[data-bs-theme="dark"] .debug-result,
html[data-bs-theme="dark"] #headerCheckContent {
  scrollbar-width: thin;
  scrollbar-color: #555 #2c3034;
}