/* 主题切换按钮容器（和你的导航风格一致） */
.kopf-tools {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

/* 按钮本体：改小一点 + 不做位移动画（避免“歪头/晃动”） */
.kopf-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;          /* 原来 42px，想更小就 32 */
  height: 34px;         /* 原来 42px */
  border-radius: 12px;  /* 原来 14px，跟随缩小 */

  text-decoration: none;
  color: #fff;
  box-sizing: border-box;

  transition: background .25s ease; /* 去掉 transform 过渡 */
}

.kopf-theme-toggle:hover {
  background: rgba(255, 255, 255, .25);
  transform: none; /* 关键：不再上下移动 */
}

/* SVG 容器：跟着按钮缩小，保证框不大 */
#color-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;   /* 跟按钮一致 */
  height: 34px;  /* 跟按钮一致 */
  line-height: 1;
}

/* 图标大小：保持你要的大图标 */
#color-toggle-icon .hs-theme-svg {
  width: 24px;
  height: 24px;
  display: none;
  vertical-align: middle;

  transform: none; /* 关键：去掉 translateY(-5px)，避免“歪头/偏移” */
}

/* 默认：SVG 用 currentColor（白色） */
#color-toggle-icon .hs-theme-svg,
#color-toggle-icon .hs-theme-svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* hover 粉色渐变 */
.kopf-theme-toggle:hover #color-toggle-icon .hs-theme-svg,
.kopf-theme-toggle:hover #color-toggle-icon .hs-theme-svg * {
  fill: url(#kopfHoverGradient) !important;
  stroke: url(#kopfHoverGradient) !important;
  filter: drop-shadow(0 0 6px rgba(255, 160, 220, .55));
}

/* 显示逻辑保持不变 */
#color-toggle-icon[data="dark"] .hs-theme-day { display: block; }
#color-toggle-icon[data="light"] .hs-theme-night { display: block; }