/* 导航栏昼夜切换按钮 - 缩小版炫酷样式 */
#change-skin {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 60px;
  height: 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 6px, #fff, #fff 1.6px, transparent 2px, transparent),
    radial-gradient(circle at 35% 12px, #fff, #fff 0.4px, transparent 0.8px, transparent),
    radial-gradient(circle at 10% 20px, #fff, #fff 0.8px, transparent 1.2px, transparent),
    radial-gradient(circle at 25% 4px, #fff, #fff 0.8px, transparent 1.2px, transparent),
    radial-gradient(circle at 15% 16px, #fff, #fff 0.4px, transparent 0.8px, transparent),
    radial-gradient(circle at 30% 22px, #fff, #fff 1.2px, transparent 1.6px, transparent),
    radial-gradient(circle at 5% 8px, #fff, #fff 0.2px, transparent 0.4px, transparent),
    radial-gradient(circle at 25% 18px, #fff, #fff 0.2px, transparent 0.4px, transparent),
    radial-gradient(circle at 7% 10px, #fff, #fff 0.2px, transparent 0.4px, transparent),
    linear-gradient(90deg, #2b303e, #2b303e 50%, #5a81b4 50%, #5a81b4);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  box-shadow:
    0 -1px 1px #999,
    inset 0 1px 1.5px #333,
    0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1.5px #ddd;
  cursor: pointer;
  overflow: hidden;
  z-index: 1000;
}

/* 日间 ::before（太阳） */
#change-skin::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e9cb50;
  top: 2px;
  left: 2px;
  box-shadow:
    0 0 1.5px #333,
    inset 1px 1px 1px #f8f4e4,
    inset -1px -1px 1px #665613;
  z-index: 1;
}

/* 日间 ::after（云朵/星星） */
#change-skin::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  box-shadow:
    2.8px 16px 0 2.8px #fff,
    18px 16px 0 1.2px #fff,
    26px 20px 0 2.8px #fff,
    36px 12px 0 1.2px #fff,
    46px 10px 0 2.8px #fff,
    54px -1.2px 0 2.8px #fff,
    -2.8px 0 0 14px rgba(255, 255, 255, 0.2),
    4px 0 0 14px rgba(255, 255, 255, 0.15),
    11.2px 0 0 14px rgba(255, 255, 255, 0.21),
    2.8px 11.2px 0 2.8px #abc1d9,
    20px 10px 0 2.8px #abc1d9,
    26px 11.2px 0 2.8px #abc1d9,
    36px 6px 0 2.8px #abc1d9,
    42px 4px 0 2.8px #abc1d9,
    52px -5.6px 0 2.8px #abc1d9;
}

/* hover 效果 */
#change-skin:hover::before {
  filter: contrast(90%) brightness(110%);
  transform: scale(1.05);
}

/* ===== 暗色模式按钮样式 —— 直接响应 page-dark-mode ===== */

/* 夜间：背景位移 */
.page-dark-mode #change-skin {
  background-position: 0 0;
}

/* 夜间 ::before（月亮） */
.page-dark-mode #change-skin::before {
  transform: translateX(36px);
  background:
    radial-gradient(circle at 50% 6px, #939aa5, #939aa5 1.6px, transparent 2px, transparent),
    radial-gradient(circle at 35% 12px, #939aa5, #939aa5 2.8px, transparent 3.2px, transparent),
    radial-gradient(circle at 72% 14px, #939aa5, #939aa5 2px, transparent 2.4px, transparent),
    radial-gradient(#cbcdda, #cbcdda);
}

/* 夜间 ::after（隐藏云朵/显示星星） */
.page-dark-mode #change-skin::after {
  transform: translateX(36px);
  box-shadow:
    2.8px 16px 0 2.8px transparent,
    18px 16px 0 1.2px transparent,
    26px 20px 0 2.8px transparent,
    36px 12px 0 1.2px transparent,
    46px 10px 0 2.8px transparent,
    54px -1.2px 0 2.8px transparent,
    -2.8px 0 0 14px rgba(255, 255, 255, 0.2),
    4px 0 0 14px rgba(255, 255, 255, 0.15),
    11.2px 0 0 14px rgba(255, 255, 255, 0.21),
    2.8px 11.2px 0 2.8px transparent,
    20px 10px 0 2.8px transparent,
    26px 11.2px 0 2.8px transparent,
    36px 6px 0 2.8px transparent,
    42px 4px 0 2.8px transparent,
    52px -5.6px 0 2.8px transparent;
}

/* 过渡仅在 dark-mode-ready 后生效，避免刷新时重播动画 */
#change-skin.dark-mode-ready,
#change-skin.dark-mode-ready::before,
#change-skin.dark-mode-ready::after {
  transition: .5s all;
}

@media (max-width: 1199px) {
  #change-skin {
    top: 0.85rem;
    transform: none;
    right: 4.5rem;
  }
}

/* 深色模式 CSS 变量定义 */
.page-dark-mode {
  --text-col: #e4e6eb;
  --page-col: #18191a;
  --link-col: #139ee0;
  --hover-col: #28a9e6;
  --navbar-col: #242526;
  --navbar-text-col: #e4e6eb;
  --navbar-border-col: #393a3b;
  --footer-col: #242526;
  --footer-text-col: #AAAAAA;
  --footer-link-col: #DFDFDF;
  --footer-hover-col: #28a9e6;
  --mid-col: #999999;
}

.page-dark-mode table tr {
  border-top-color: #666;
}

.page-dark-mode table tr:nth-child(2n) {
  background-color: #28292a;
}

.page-dark-mode table tr th,
.page-dark-mode table tr td {
  border-color: #666;
}

.page-dark-mode .jumbotron {
  background: #242526;
}

.page-dark-mode .blog-post blockquote {
  border-left-color: #444;
}

.page-dark-mode .post-preview {
  border-bottom-color: #444;
}

.page-dark-mode a.btn {
  color: #fff;
}

.page-dark-mode .header-section.has-img .no-img {
  background-color: #111;
  box-shadow: 0 0 0.3125rem #888;
}

.page-dark-mode .box-note,
.page-dark-mode .box-warning,
.page-dark-mode .box-error,
.page-dark-mode .box-success {
  color: #404040;
}

.page-dark-mode .blog-post .caption {
  color: #aaa;
}

.page-dark-mode code {
  color: #c7254e;
  background-color: #2b2829;
}

.page-dark-mode .highlight > pre {
  background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1.5em, rgba(255, 255, 255, 0.02) 1.5em, rgba(255, 255, 255, 0.02) 3em);
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: #a0a0a0;
}

.page-dark-mode pre {
  color: #e4e6eb;
}

.page-dark-mode pre code {
  color: inherit;
}

.page-dark-mode .highlight pre.lineno {
  color: rgba(255, 255, 255, 0.3);
  border-right-color: #a0a0a0;
}

/* 为导航栏右侧按钮预留空间，防止遮挡链接 */
@media (min-width: 1200px) {
  .navbar .navbar-collapse {
    margin-right: 7rem !important;
  }
}

@media (max-width: 1199px) {
  .navbar .navbar-collapse {
    margin-right: 5.5rem !important;
  }
}