/* 主题颜色（皮肤）切换：覆盖站点里所有写死的品牌红 #DE0404 对应的 CSS 变量。
   通过 body[data-theme-color="xxx"] 属性选择器整体换色，深色/浅色模式下都生效。
   本文件需排在 style.css / dark-version.css 之后加载。 */
body[data-theme-color="green"],
body[data-theme-color="green"] .dark-mode,
body[data-theme-color="green"] .light-mode {
  --color__main: #1FAA59;
  --color__site-logo: #1FAA59;
  --color__link: #1FAA59;
  --color__link-visited: #1FAA59;
  --color__link-hover: #1FAA59;
  --color__title-link-hover: #1FAA59;
  --color__button-background: #1FAA59;
  --color__button-border: #1FAA59;
  --color__input-border-focus: #1FAA59;
  --color__searchbox-hover: #1FAA59;
  --color__searchbox-placeholder-hover: #1FAA59;
  --color__searchbox-border-hover: #1FAA59;
  --color__suggestion-item-highlighted: #1FAA59;
  --color__icon-primary-background: #1FAA59;
  --color__nav-level1-text-hover: #1FAA59;
  --color__nav-level1-text-active: #1FAA59;
  --color__nav-level-x-text-hover: #1FAA59;
  --color__nav-level-x-text-active: #1FAA59;
  --color__nav-line-hover: #1FAA59;
  --color__nav-line-active: #1FAA59;
  --color__nav-arrow-hover: #1FAA59;
  --color__nav-arrow-active: #1FAA59;
  --color__megamenu-nav-background-hover: #1FAA59;
  --color__loading-3: #1FAA59;
  --color__blockquote-cite: #1FAA59;
  --color__widget-line: #1FAA59;
  --color__widget-title-icon-background: #1FAA59;
  --color__post-meta-hover: #1FAA59;
  --color__post-meta-icon-hover-background: #1FAA59;
  --color__post-category: #1FAA59;
  --color__post-author: #1FAA59;
  --color__block-icon-background: #1FAA59;
  --color__block-line: #1FAA59;
  --color__pagination-background-hover: #1FAA59;
  --color__infinite-button-icon: #1FAA59;
  --color__single-author-avatar-border: #1FAA59;
  --color__ins-background: #1FAA59;
  --color__video-icon-background: #1FAA59;
  --color__main-circle-score-percent-red: #1FAA59;
  --color__channel-tab-active-text: #1FAA59;
  --color__channel-tab-active-icon-background: #1FAA59;
  --color__playlist-active-1: #1FAA59;
  --color__series-active-1: #1FAA59;
  --color__sunflower-border-item-1: #1FAA59;
  --color__cyclamen-border-item-1: #1FAA59;
  --color__slider-pagination-active: #1FAA59;
  --color__duration-background: #1FAA59;
  --color__duration: #FFFFFF;
}

body[data-theme-color="blue"],
body[data-theme-color="blue"] .dark-mode,
body[data-theme-color="blue"] .light-mode {
  --color__main: #2E77F6;
  --color__site-logo: #2E77F6;
  --color__link: #2E77F6;
  --color__link-visited: #2E77F6;
  --color__link-hover: #2E77F6;
  --color__title-link-hover: #2E77F6;
  --color__button-background: #2E77F6;
  --color__button-border: #2E77F6;
  --color__input-border-focus: #2E77F6;
  --color__searchbox-hover: #2E77F6;
  --color__searchbox-placeholder-hover: #2E77F6;
  --color__searchbox-border-hover: #2E77F6;
  --color__suggestion-item-highlighted: #2E77F6;
  --color__icon-primary-background: #2E77F6;
  --color__nav-level1-text-hover: #2E77F6;
  --color__nav-level1-text-active: #2E77F6;
  --color__nav-level-x-text-hover: #2E77F6;
  --color__nav-level-x-text-active: #2E77F6;
  --color__nav-line-hover: #2E77F6;
  --color__nav-line-active: #2E77F6;
  --color__nav-arrow-hover: #2E77F6;
  --color__nav-arrow-active: #2E77F6;
  --color__megamenu-nav-background-hover: #2E77F6;
  --color__loading-3: #2E77F6;
  --color__blockquote-cite: #2E77F6;
  --color__widget-line: #2E77F6;
  --color__widget-title-icon-background: #2E77F6;
  --color__post-meta-hover: #2E77F6;
  --color__post-meta-icon-hover-background: #2E77F6;
  --color__post-category: #2E77F6;
  --color__post-author: #2E77F6;
  --color__block-icon-background: #2E77F6;
  --color__block-line: #2E77F6;
  --color__pagination-background-hover: #2E77F6;
  --color__infinite-button-icon: #2E77F6;
  --color__single-author-avatar-border: #2E77F6;
  --color__ins-background: #2E77F6;
  --color__video-icon-background: #2E77F6;
  --color__main-circle-score-percent-red: #2E77F6;
  --color__channel-tab-active-text: #2E77F6;
  --color__channel-tab-active-icon-background: #2E77F6;
  --color__playlist-active-1: #2E77F6;
  --color__series-active-1: #2E77F6;
  --color__sunflower-border-item-1: #2E77F6;
  --color__cyclamen-border-item-1: #2E77F6;
  --color__slider-pagination-active: #2E77F6;
  --color__duration-background: #2E77F6;
  --color__duration: #FFFFFF;
}

body[data-theme-color="pink"],
body[data-theme-color="pink"] .dark-mode,
body[data-theme-color="pink"] .light-mode {
  --color__main: #FF4F8B;
  --color__site-logo: #FF4F8B;
  --color__link: #FF4F8B;
  --color__link-visited: #FF4F8B;
  --color__link-hover: #FF4F8B;
  --color__title-link-hover: #FF4F8B;
  --color__button-background: #FF4F8B;
  --color__button-border: #FF4F8B;
  --color__input-border-focus: #FF4F8B;
  --color__searchbox-hover: #FF4F8B;
  --color__searchbox-placeholder-hover: #FF4F8B;
  --color__searchbox-border-hover: #FF4F8B;
  --color__suggestion-item-highlighted: #FF4F8B;
  --color__icon-primary-background: #FF4F8B;
  --color__nav-level1-text-hover: #FF4F8B;
  --color__nav-level1-text-active: #FF4F8B;
  --color__nav-level-x-text-hover: #FF4F8B;
  --color__nav-level-x-text-active: #FF4F8B;
  --color__nav-line-hover: #FF4F8B;
  --color__nav-line-active: #FF4F8B;
  --color__nav-arrow-hover: #FF4F8B;
  --color__nav-arrow-active: #FF4F8B;
  --color__megamenu-nav-background-hover: #FF4F8B;
  --color__loading-3: #FF4F8B;
  --color__blockquote-cite: #FF4F8B;
  --color__widget-line: #FF4F8B;
  --color__widget-title-icon-background: #FF4F8B;
  --color__post-meta-hover: #FF4F8B;
  --color__post-meta-icon-hover-background: #FF4F8B;
  --color__post-category: #FF4F8B;
  --color__post-author: #FF4F8B;
  --color__block-icon-background: #FF4F8B;
  --color__block-line: #FF4F8B;
  --color__pagination-background-hover: #FF4F8B;
  --color__infinite-button-icon: #FF4F8B;
  --color__single-author-avatar-border: #FF4F8B;
  --color__ins-background: #FF4F8B;
  --color__video-icon-background: #FF4F8B;
  --color__main-circle-score-percent-red: #FF4F8B;
  --color__channel-tab-active-text: #FF4F8B;
  --color__channel-tab-active-icon-background: #FF4F8B;
  --color__playlist-active-1: #FF4F8B;
  --color__series-active-1: #FF4F8B;
  --color__sunflower-border-item-1: #FF4F8B;
  --color__cyclamen-border-item-1: #FF4F8B;
  --color__slider-pagination-active: #FF4F8B;
  --color__duration-background: #FF4F8B;
  --color__duration: #FFFFFF;
}

body[data-theme-color="gold"],
body[data-theme-color="gold"] .dark-mode,
body[data-theme-color="gold"] .light-mode {
  --color__main: #C9992C;
  --color__site-logo: #C9992C;
  --color__link: #C9992C;
  --color__link-visited: #C9992C;
  --color__link-hover: #C9992C;
  --color__title-link-hover: #C9992C;
  --color__button-background: #C9992C;
  --color__button-border: #C9992C;
  --color__input-border-focus: #C9992C;
  --color__searchbox-hover: #C9992C;
  --color__searchbox-placeholder-hover: #C9992C;
  --color__searchbox-border-hover: #C9992C;
  --color__suggestion-item-highlighted: #C9992C;
  --color__icon-primary-background: #C9992C;
  --color__nav-level1-text-hover: #C9992C;
  --color__nav-level1-text-active: #C9992C;
  --color__nav-level-x-text-hover: #C9992C;
  --color__nav-level-x-text-active: #C9992C;
  --color__nav-line-hover: #C9992C;
  --color__nav-line-active: #C9992C;
  --color__nav-arrow-hover: #C9992C;
  --color__nav-arrow-active: #C9992C;
  --color__megamenu-nav-background-hover: #C9992C;
  --color__loading-3: #C9992C;
  --color__blockquote-cite: #C9992C;
  --color__widget-line: #C9992C;
  --color__widget-title-icon-background: #C9992C;
  --color__post-meta-hover: #C9992C;
  --color__post-meta-icon-hover-background: #C9992C;
  --color__post-category: #C9992C;
  --color__post-author: #C9992C;
  --color__block-icon-background: #C9992C;
  --color__block-line: #C9992C;
  --color__pagination-background-hover: #C9992C;
  --color__infinite-button-icon: #C9992C;
  --color__single-author-avatar-border: #C9992C;
  --color__ins-background: #C9992C;
  --color__video-icon-background: #C9992C;
  --color__main-circle-score-percent-red: #C9992C;
  --color__channel-tab-active-text: #C9992C;
  --color__channel-tab-active-icon-background: #C9992C;
  --color__playlist-active-1: #C9992C;
  --color__series-active-1: #C9992C;
  --color__sunflower-border-item-1: #C9992C;
  --color__cyclamen-border-item-1: #C9992C;
  --color__slider-pagination-active: #C9992C;
  --color__duration-background: #C9992C;
  --color__duration: #FFFFFF;
}

/* 悬浮切换按钮 */
.vidmov-theme-color-fab {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 950;
}
@media (max-width: 991px) {
  .vidmov-theme-color-fab {
    bottom: 76px;
  }
}
.vidmov-theme-color-fab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color__icon-background, var(--vd-f5, #3C3F46));
  color: var(--color__icon, var(--vd-c2, #ddd));
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
  cursor: pointer;
  font-size: 17px;
  transition: color .3s, background-color .3s;
}
.vidmov-theme-color-fab-btn:hover {
  color: var(--color__icon-hover);
  background-color: var(--color__icon-background-hover);
}
.vidmov-theme-color-panel {
  position: absolute;
  right: 0;
  bottom: 54px;
  width: 190px;
  padding: 14px;
  border-radius: 12px;
  background: var(--color__main-box, var(--vd-box, #1d1d20));
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.vidmov-theme-color-fab.active .vidmov-theme-color-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vidmov-theme-color-panel-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-c1, #fff);
}
.vidmov-theme-color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vidmov-theme-color-swatch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--vd-f5, rgba(255, 255, 255, .06));
  color: var(--vd-c2, #ddd);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.vidmov-theme-color-swatch:hover {
  background: var(--vd-f4, rgba(255, 255, 255, .1));
}
.vidmov-theme-color-swatch.active {
  border-color: var(--color__main);
  color: var(--vd-c1, #fff);
}
.vidmov-theme-color-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}