/* =========================================================
 * CSS 变量（结构 / 布局）
 * ========================================================= */
:root {
  --base-font-family:
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Helvetica Neue",
    Arial,
    sans-serif;

  --base-font-size: 16px;

  --box-border-radius: 10px;
  --page-content-max-width: 900px;

  --header-height: 68px;
  --header-title-font-family: STHeiti, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue",
    Arial, sans-serif;

  --first-screen-font-size: 30px;
  --first-screen-icon-size: 36px;
  --first-screen-font-color-light: #003366;
  --first-screen-font-color-dark: #0099cc;
  --first-screen-icon-color-light: #cc33ff;
  --first-screen-icon-color-dark: #cc99ff;
  --first-screen-header-font-color-light: #526e25;
  --first-screen-header-font-color-dark: #84cae7;

  --home-post-hover-scale: 1.02;
  --post-author-avatar: unset;
  --post-update-datetime: none;
  --post-img-align: 0 auto;
}

/* =========================================================
 * ✅ 主题颜色变量（亮色一套，暗色覆盖一套）
 * ========================================================= */
html {
  /* 背景 */
  --c-bg: #ffffff;
  --c-bg-card: #ffffff;

  /* 文本 */
  --c-text-strong: #132a3a;
  --c-text: #4b5563;
  --c-text-muted: #6b7280;
  --c-text-faint: #9ca3af;

  /* 强调色/hover */
  --c-accent: #1f4e6a;
  --c-accent-soft: #6c8497;

  /* 组件背景 */
  --c-surface: #f3f4f6;
  --c-surface-hover: #1f4e6a;
  --c-on-hover: #ffffff;

  /* Header / Drawer */
  --c-header-bg: #ffffff;
  --c-drawer-bg: #ffffff;

  /* 菜单 */
  --c-menu-active: #132a3a;
  --c-menu-hover: #1f4e6a;

  /* 首页标题 hover / sticky / toc */
  --c-home-title-hover: #1f4e6a;
  --c-sticky: #1f4e6a;
  --c-toc-active: #132a3a;
  --c-toc-bar: #132a3a;

  /* Tools 分类指示器 */
  --c-tool-active-bg: #1f4e6a;
  --c-tool-active-text: #ffffff;

  /* link hover / paginator / input */
  --link-hover-color: #1f4e6a;
  --nav-hover-color: #1f4e6a;
  --pager-hover-color: #6c8497;

  --page-input-fg: #132a3a;
  --page-input-bg: #ffffff;
  --page-input-border: #d1d5db;
  --page-input-border-active: #6c8497;
  --page-input-ring: rgba(108, 132, 151, 0.25);

  /* Encrypt：直接复用 page-input */
  --encrypt-input-fg: var(--page-input-fg);
  --encrypt-input-bg: var(--page-input-bg);
  --encrypt-input-border: var(--page-input-border);
  --encrypt-input-border-active: var(--page-input-border-active);
  --encrypt-input-ring: rgba(108, 132, 151, 0.22);

  --encrypt-hint: var(--c-text-muted);
  --encrypt-error: #ef4444;
}

html.dark-mode {
  --c-bg: #1e242a;
  --c-bg-card: #242b31;

  --c-text-strong: #e6ebf0;
  --c-text: #c9d1d9;
  --c-text-muted: #9aa4ae;
  --c-text-faint: #8b949e;

  --c-accent: #7fa6c5;
  --c-accent-soft: #e6ebf0;

  --c-surface: #2a3138;
  --c-surface-hover: #313a43;
  --c-on-hover: #e6ebf0;

  --c-header-bg: #1e242a;
  --c-drawer-bg: #1e242a;

  --c-menu-active: #7fa6c5;
  --c-menu-hover: #e6ebf0;

  --c-home-title-hover: #ffffff;
  --c-sticky: #7fa6c5;

  --c-toc-active: #e6ebf0;
  --c-toc-bar: #e6ebf0;

  --c-tool-active-bg: #313a43;
  --c-tool-active-text: #e6ebf0;

  --link-hover-color: #e6ebf0;
  --nav-hover-color: #e6ebf0;
  --pager-hover-color: #e6ebf0;

  --page-input-fg: #e6ebf0;
  --page-input-bg: #1e242a;
  --page-input-border: #313a43;
  --page-input-border-active: #e6ebf0;
  --page-input-ring: rgba(230, 235, 240, 0.18);

  --encrypt-error: #f87171;
}

/* =========================================================
 * ✅ 全局背景（最外层底色）
 * ========================================================= */
html,
body {
  background-color: var(--c-bg) !important;
}

/* =========================================================
 * Header / 顶部菜单栏配色
 * ========================================================= */
.header-wrapper {
  background-color: var(--c-header-bg) !important;
}

.header-wrapper .site-name {
  color: var(--c-text-strong) !important;
}

.header-wrapper .menu-text-color,
.header-wrapper .menu-text-color i,
.header-wrapper .search i {
  color: var(--c-text-muted) !important;
}

.header-wrapper .menu-item.active .menu-text-color,
.header-wrapper .menu-item.active .menu-text-color i {
  color: var(--c-menu-active) !important;
}

.header-wrapper .menu-item:hover .menu-text-color,
.header-wrapper .menu-item:hover .menu-text-color i {
  color: var(--c-menu-hover) !important;
}

/* =========================================================
 * 首页卡片部分
 * ========================================================= */
.home-post-item {
  background-color: var(--c-bg-card) !important;
  border-radius: var(--box-border-radius);
}

.home-post-title a {
  color: var(--c-text-strong) !important;
}
.home-post-title a:hover {
  color: var(--c-home-title-hover) !important;
}

.sticky-name,
.post-sticky-box i {
  color: var(--c-sticky) !important;
}

.home-post-content {
  color: var(--c-text) !important;
}

.post-meta-info-container .home-post-history,
.post-meta-info-container .meta-info-item i {
  color: var(--c-text-faint) !important;
}

.home-read-more {
  color: var(--c-text-muted) !important;
}
.home-read-more i {
  color: inherit !important;
}
.home-read-more:hover {
  color: var(--c-accent) !important;
}
.home-read-more:hover i {
  color: inherit !important;
}

/* =========================================================
 * 左右侧工具按钮
 * ========================================================= */

/* post-tools：tools-item & status-item（锁）统一样式 */
.post-tools-list :is(.tools-item, .status-item) {
  background-color: var(--c-surface) !important;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.post-tools-list :is(.tools-item, .status-item) i {
  color: var(--c-text-muted) !important;
  font-size: 18px;
}

.post-tools-list :is(.tools-item, .status-item):hover {
  background-color: var(--c-surface-hover) !important;
}
.post-tools-list :is(.tools-item, .status-item):hover i {
  color: var(--c-on-hover) !important;
}

/* exposed/side */
.exposed-tools-list .tools-item,
.side-tools-list .tools-item {
  background-color: var(--c-surface) !important;
  cursor: pointer;
}

.exposed-tools-list .tools-item i,
.exposed-tools-list .tools-item .arrow,
.side-tools-list .tools-item i {
  color: var(--c-text-muted) !important;
  font-size: 18px;
}

.exposed-tools-list .tools-item:hover,
.side-tools-list .tools-item:hover {
  background-color: var(--c-surface-hover) !important;
}

.exposed-tools-list .tools-item:hover i,
.exposed-tools-list .tools-item:hover .arrow,
.side-tools-list .tools-item:hover i {
  color: var(--c-on-hover) !important;
}

/* Language switch button */
.exposed-tools-list .tool-switch-lang a {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.exposed-tools-list .tool-switch-lang a:is(:visited, :hover, :active) {
  color: inherit;
}

/* =========================================================
 * Tag Cloud
 * ========================================================= */
.tagcloud-content a {
  color: var(--c-text-muted) !important;
}
.tagcloud-content a:hover {
  color: var(--c-menu-hover) !important;
}

/* =========================================================
 * 文章标题链接（post-title）
 * ========================================================= */
a.post-title {
  color: var(--c-text-muted) !important;
  text-decoration: none;
}
a.post-title:hover {
  color: var(--c-text-strong) !important;
}

/* =========================================================
 * Tools 分类 · 平滑滑动指示器
 * ========================================================= */
.tool-nav-category {
  position: relative;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--c-text-muted) !important;
  z-index: 1;
}

.tool-nav-category:hover {
  color: var(--c-text-strong) !important;
}

.tool-nav-category::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-color: transparent;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-nav-category.active::before {
  background-color: var(--c-tool-active-bg);
  transform: scaleX(1);
}

.tool-nav-category.active {
  color: var(--c-tool-active-text) !important;
}

/* =========================================================
 * Header Drawer（手机端菜单）
 * ========================================================= */
.header-drawer {
  background-color: var(--c-drawer-bg) !important;
}

.drawer-menu-text-color,
.drawer-menu-text-color i {
  color: var(--c-text-muted) !important;
}

.drawer-menu-item:hover .drawer-menu-text-color,
.drawer-menu-item:hover .drawer-menu-text-color i {
  color: var(--c-menu-hover) !important;
}

.drawer-menu-item.active .drawer-menu-text-color,
.drawer-menu-item.active .drawer-menu-text-color i {
  color: var(--c-menu-active) !important;
}

/* =========================================================
 * TOC
 * ========================================================= */
.post-toc .nav-item.active > .nav-link :is(.nav-number, .nav-text) {
  color: var(--c-toc-active) !important;
}
.post-toc .nav-link.active::before {
  background: var(--c-toc-bar) !important;
}
html.dark-mode .post-toc .nav-item > .nav-link:hover :is(.nav-number, .nav-text) {
  color: var(--c-text) !important;
}

/* =========================================================
 * link hover / paginator / input
 * ========================================================= */

/* a.link + 文章内容链接 hover/active */
:where(a.link, .post-content a):is(:hover, :active) {
  color: var(--link-hover-color) !important;
}

/* Prev/Next hover */
a:is(.prev, .next):is(:hover, :active) {
  color: var(--nav-hover-color) !important;
  text-decoration: none !important;
}
a:is(.prev, .next):is(:hover, :active) * {
  color: inherit !important;
}

/* Paginator：仅 allowed 按钮 hover */
.paginator .paginator-btn.allowed a:is(:hover, :active) {
  color: var(--pager-hover-color) !important;
  text-decoration: none !important;
}
.paginator .paginator-btn.allowed a:is(:hover, :active) * {
  color: inherit !important;
}

/* Page number input */
.paginator .page-number-input {
  color: var(--page-input-fg) !important;
  background-color: var(--page-input-bg) !important;
  border: 1px solid var(--page-input-border) !important;
}
.paginator .page-number-input:is(:hover, :focus, :focus-visible) {
  border-color: var(--page-input-border-active) !important;
  box-shadow: 0 0 0 3px var(--page-input-ring) !important;
  outline: none !important;
}

/* 文章页：分类 / 标签（暗色模式 hover 变白） */
html.dark-mode :is(
  .post-category-ul a,
  a[href^="/categories/"],
  a[href^="/tags/"]
):is(:hover, :active) {
  color: var(--c-text-strong) !important;
  text-decoration: none !important;
}

/* Footer：链接（暗色模式 hover 变白） */
html.dark-mode :is(footer a, .footer a):is(:hover, :active) {
  color: var(--c-text-strong) !important;
  text-decoration: none !important;
}

/* =========================================================
 * Encrypt 密码输入框美化
 * ========================================================= */
.post-encrypt-box {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.post-encrypt-box .password-input {
  width: min(420px, 100%);
  height: 44px;
  padding: 0 14px;

  color: var(--encrypt-input-fg) !important;
  background: var(--encrypt-input-bg) !important;

  border: 1px solid var(--encrypt-input-border) !important;
  border-radius: 12px !important;

  outline: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.post-encrypt-box .password-input:is(:hover, :focus, :focus-visible) {
  border-color: var(--encrypt-input-border-active) !important;
  box-shadow: 0 0 0 3px var(--encrypt-input-ring) !important;
}

.post-encrypt-box .encrypt-hint {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--encrypt-hint);
  display: none;
}

.post-encrypt-box.is-focus .encrypt-hint {
  display: block;
}

.post-encrypt-box .encrypt-hint.is-error {
  color: var(--encrypt-error);
}

/* =========================================================
 * 切换主题：关闭所有过渡
 * ========================================================= */
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition: none !important;
}

/* =========================================================
 * Audio: Keep-style wrapper
 * ========================================================= */
.keep-audio {
  background: var(--c-bg-card);
  border: 1px solid var(--page-input-border);
  border-radius: 14px;
  padding: 12px 12px 10px;
  margin: 18px 0;
}

.keep-audio__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--c-text-muted);
}

.keep-audio__meta i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: 16px;
}

.keep-audio__title {
  color: var(--c-text-strong);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.keep-audio audio {
  width: 100%;
  height: 44px;
  border-radius: 12px;
}

.keep-audio audio::-webkit-media-controls-panel {
  background: var(--c-surface);
}

html:not(.dark-mode) .keep-audio audio { color-scheme: light; }
html.dark-mode .keep-audio audio { color-scheme: dark; }

.keep-audio audio::-webkit-media-controls-current-time-display,
.keep-audio audio::-webkit-media-controls-time-remaining-display {
  color: var(--c-text-muted);
}

.keep-audio:hover {
  border-color: var(--page-input-border-active);
  box-shadow: 0 0 0 3px var(--page-input-ring);
}

/* ✅ Local Search 关键字高亮：暗色模式提高对比度 */
html.dark-mode .search-pop-overlay .search-keyword {
  color: var(--c-accent) !important;              /* 你暗色里的强调色 #7fa6c5 */
  border-bottom-color: var(--c-accent) !important;
}