/* 支持 AVIF 的浏览器加载小体积背景，原 JPG 用于兼容回退。 */
#web_bg[style*="/images/bg2.jpg"],
#page-header[style*="/images/bg2.jpg"],
#footer[style*="/images/bg2.jpg"] {
  background-image: image-set(
    url("../images/bg2.avif") type("image/avif"),
    url("../images/bg2.jpg") type("image/jpeg")
  ) !important;
}

/* 让背景融入日夜模式，而不是覆盖页面原本的白色或深色底色。 */
#web_bg::before {
  position: absolute;
  inset: 0;
  content: '';
  background: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] #web_bg::before {
  background: rgba(0, 0, 0, 0.54);
}

/* 玻璃效果参数：对齐 liquidglass-kde-widgets (LiquidGlass.qml + liquidglass.frag) 的光学参数 */
:root {
  --glass-tint: rgba(255, 255, 255, 0.36);
  --glass-reading-tint: rgba(255, 255, 255, 0.80);
  --glass-solid: rgba(250, 252, 255, 0.96);
  --glass-blur: 14px;
  --glass-saturate: 165%;
  --glass-radius: 26px;
  --glass-roundness: 5.5;
  --glass-refract-thickness: 35;
  --glass-refract-ior: 1.70;
  --glass-refract-scale: 65;
  --glass-chroma-strength: 0.35;
  --glass-spec-strength: 0.70;
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-shadow: rgba(20, 32, 54, 0.16);
  --glass-shadow-hover: rgba(20, 32, 54, 0.24);
}

[data-theme='dark'] {
  --glass-tint: rgba(16, 20, 28, 0.32);
  --glass-reading-tint: rgba(20, 25, 35, 0.82);
  --glass-solid: rgba(22, 26, 34, 0.97);
  --glass-blur: 14px;
  --glass-saturate: 165%;
  --glass-spec-strength: 0.75;
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.32);
  --glass-shadow-hover: rgba(0, 0, 0, 0.44);
}

#recent-posts .recent-post-item,
#recent-posts .home-announcement,
#aside-content .card-widget,
.layout > div:first-child:not(.nc),
#article-container .shuoshuo-item,
.type-404 .error-content,
.layout .pagination > *:not(.space),
#page-header.nav-fixed > #nav,
#page-header.not-top-img > #nav {
  background: var(--glass-tint);
  border: none;
  border-radius: var(--glass-radius);
  box-shadow:
    0 16px 40px -12px var(--glass-shadow),
    0 4px 12px -4px var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-backdrop, blur(var(--glass-blur)) saturate(var(--glass-saturate)));
  backdrop-filter: var(--glass-backdrop, blur(var(--glass-blur)) saturate(var(--glass-saturate)));
}

/* 彻底裁剪掉圆角矩形外的 backdrop-filter 溢出残影，保证边缘绝对锐利干净 */
#recent-posts .recent-post-item,
#recent-posts .home-announcement,
#aside-content .card-widget,
#article-container .shuoshuo-item,
.type-404 .error-content,
.layout .pagination > *:not(.space) {
  clip-path: inset(0 round var(--glass-radius));
}

#recent-posts .recent-post-item:hover,
#recent-posts .home-announcement:hover,
#aside-content .card-widget:hover,
.layout > div:first-child:not(.nc):hover,
#article-container .shuoshuo-item:hover,
.type-404 .error-content:hover {
  box-shadow:
    0 20px 46px -12px var(--glass-shadow-hover),
    0 6px 14px -4px var(--glass-shadow);
}

/* 顶部导航栏维持干净的直边毛玻璃，不套用圆角折射滤镜 */
#page-header.nav-fixed > #nav,
#page-header.not-top-img > #nav {
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  box-shadow: 0 8px 24px -12px var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* 阅读区域更厚一些，保留长篇正文、公式和代码的清晰度。 */
.layout > div:first-child:not(.nc) {
  background: var(--glass-reading-tint);
}

/* 静态对角与唇边高光通过 JS 按 shader 公式绘制到 ::after，不截获点击。 */
.liquid-glass {
  position: relative;
}

#recent-posts .home-announcement {
  overflow: hidden;
}

.liquid-glass::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: '';
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--glass-spec-image, none);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 非 Chromium 浏览器或长篇阅读卡片的静态对角高光回退 */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .liquid-glass:not([data-shader-glass="1"])::after {
    padding: 1.5px;
    background: linear-gradient(
      135deg,
      rgba(255, 250, 240, 0.65) 0%,
      rgba(255, 250, 240, 0.12) 28%,
      rgba(255, 250, 240, 0.04) 50%,
      rgba(255, 250, 240, 0.10) 72%,
      rgba(255, 250, 240, 0.42) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

/* 顶部大图上的导航维持原有样式，滚动固定后再显示玻璃。 */
#page-header:not(.nav-fixed):not(.not-top-img) #nav::after {
  content: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass {
    background: var(--glass-solid) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .liquid-glass {
    background: var(--glass-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* 公告作为首页的独立卡片，内容仍读取主题设置。 */
#recent-posts .home-announcement {
  display: flex;
  align-items: center;
  min-height: 96px;
  margin-bottom: 20px;
  padding: 1.2rem 2rem;
  border-radius: var(--glass-radius);
  color: var(--font-color);
  font-size: 1.05em;
  line-height: 1.6;
}

.home-announcement-message {
  min-width: 0;
}

.home-announcement-label {
  font-size: 1.2em;
  font-weight: 700;
}

.home-announcement-content {
  display: inline;
  font-size: 1.2em;
  font-weight: 400;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 768px) {
  :root {
    --glass-blur: 18px;
    --glass-radius: 16px;
  }

  #recent-posts .home-announcement {
    min-height: 84px;
    padding: 1rem 1.25rem;
  }
}

/* 首页文章卡片与文章页主标题加粗 */
#recent-posts .recent-post-item > .recent-post-info > .article-title,
#post-info .post-title {
  font-weight: 700;
}

/* 日间模式下加深首页文章卡片的日期/分类元信息颜色，与半透明磨砂底色拉开对比度 */
:root {
  --card-meta: rgba(31, 35, 41, 0.78);
}

[data-theme='dark'] {
  --card-meta: rgba(235, 235, 245, 0.72);
}

/* 文章目录：文字使用实色，避免与半透明玻璃中的背景混在一起。 */
#aside-content #card-toc {
  --toc-link-color: #172b40;
  --toc-title-color: #13263b;
  --toc-hover-color: #103b5b;
  --toc-hover-bg: rgba(73, 177, 245, 0.16);
  --toc-active-text: #102a43;
  --toc-guide-color: rgba(23, 43, 64, 0.30);
  color: var(--toc-title-color);
}

[data-theme='dark'] #aside-content #card-toc {
  --toc-link-color: #eef4fb;
  --toc-title-color: #f8fafc;
  --toc-hover-color: #ffffff;
  --toc-hover-bg: rgba(73, 177, 245, 0.18);
  --toc-guide-color: rgba(238, 244, 251, 0.35);
}

#aside-content #card-toc .toc-content .toc-link {
  font-weight: 500;
}

#aside-content #card-toc .toc-content .toc-link:not(.active):hover,
#aside-content #card-toc .toc-content .toc-link:not(.active):focus-visible {
  color: var(--toc-hover-color);
  background: var(--toc-hover-bg);
}

#aside-content #card-toc .toc-content .toc-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#aside-content #card-toc .toc-content .toc-link.active {
  color: var(--toc-active-text);
  font-weight: 700;
}

#aside-content #card-toc .toc-content > .toc > .toc-item > .toc-child {
  border-left-color: var(--toc-guide-color);
}

/* 保留 Font Awesome 置顶图标自身的实心字重，避免继承标题字重后变形 */
#recent-posts .article-title > .sticky {
  font-weight: 900;
}

/* 首页专栏与专栏阅读目录 */
#aside-content .card-series-all {
  float: right;
  color: var(--font-color);
}

#aside-content .series-card-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--font-color);
  transition: background 0.2s, color 0.2s;
}

#aside-content .series-card-item:hover,
#aside-content .series-card-item:focus-visible {
  background: var(--text-bg-hover);
  color: var(--white);
}

#aside-content .series-card-name {
  flex: 1;
  min-width: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#aside-content .series-card-count {
  flex-shrink: 0;
  font-size: 0.85em;
}

/* 专栏链接与正文使用同一文字颜色 */
#article-container.series-content a {
  color: var(--font-color);
}

/* 音乐页：歌单和播放器共用博客的浅蓝色。 */
#article-container .music-library-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

#article-container .music-library h2,
#article-container .music-library h3 {
  margin: 0;
  padding: 0;
}

#article-container .music-library h2::before,
#article-container .music-library h3::before {
  content: none;
}

#article-container .music-library p {
  margin: 0.4rem 0;
}

.music-player-panel {
  padding: 1.5rem;
  border: 1px solid rgba(73, 177, 245, 0.25);
  border-radius: 16px;
  background: rgba(73, 177, 245, 0.08);
}

.music-now-playing {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.music-now-playing > div:last-child {
  min-width: 0;
}

.music-cover {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  color: #3976a9;
  background: rgba(73, 177, 245, 0.18);
  font-size: 2rem;
}

.music-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.music-cover img[hidden] {
  display: none !important;
}

.music-page-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85em;
}

.music-page-buttons {
  display: flex;
  gap: 0.3rem;
}

.music-page-controls button,
.music-dock button {
  border: 0;
  cursor: pointer;
  color: inherit;
  background: transparent;
}

.music-page-controls button {
  padding: 0.35rem;
}

.music-page-controls input[type="range"] {
  min-width: 0;
  accent-color: #49b1f5;
}

.music-page-controls [data-music-seek] {
  flex: 1;
}

.music-page-volume {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.music-page-volume input {
  width: 65px;
}

/* 在 PJAX 替换区域之外保留播放器，切换页面时继续播放。 */
.music-dock {
  position: fixed;
  z-index: 90;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(310px, calc(100vw - 32px));
  color: #273847;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  background: rgba(244, 248, 252, 0.89);
  box-shadow: 0 8px 28px rgba(24, 42, 56, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

[data-theme="dark"] .music-dock {
  color: #e7eef5;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(30, 37, 46, 0.9);
}

.music-dock-body {
  padding: 12px;
}

.music-dock-header,
.music-dock-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.music-dock-cover {
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
}

.music-dock-info {
  min-width: 0;
  flex: 1;
  line-height: 1.4;
}

.music-dock-info a,
.music-dock-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-dock-info a {
  color: inherit;
  font-size: 0.9rem;
  font-weight: 700;
}

.music-dock-info small {
  opacity: 0.72;
}

.music-dock-collapse {
  align-self: flex-start;
  font-size: 1.2rem;
}

.music-dock-controls {
  margin-top: 8px;
}

.music-dock-controls button {
  padding: 3px 6px;
}

.music-dock-play {
  color: #2584c2 !important;
}

.music-dock-volume {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: 0.8rem;
}

.music-dock-volume input {
  width: 68px;
}

.music-dock-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 4px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.music-dock input[type="range"] {
  min-width: 0;
  accent-color: #49b1f5;
}

.music-dock-progress input {
  flex: 1;
}

.music-dock-status {
  margin: 0;
  font-size: 0.75rem;
}

.music-dock-status:not(:empty) {
  margin-top: 6px;
}

.music-dock-launcher {
  display: none;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  color: #2584c2 !important;
}

.music-dock.is-collapsed {
  width: 50px;
  border-radius: 50%;
}

.music-dock.is-collapsed .music-dock-launcher {
  display: block;
}

.music-dock.is-collapsed .music-dock-body {
  display: none;
}

.music-status {
  font-size: 0.9em;
}

#article-container .music-tracks {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.music-tracks li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0.6rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.music-tracks li.is-current {
  border-radius: 8px;
  background: rgba(73, 177, 245, 0.12);
}

.music-track-number {
  color: #3987bc;
  font-variant-numeric: tabular-nums;
}

.music-track-info {
  flex: 1;
  min-width: 0;
  color: var(--font-color);
  text-align: left;
}

.music-track-info span,
.music-track-info small {
  display: block;
  overflow-wrap: anywhere;
}

.music-track-info small {
  opacity: 0.75;
}

.music-tracks a {
  flex: none;
  font-size: 0.85em;
}

@media (max-width: 600px) {
  #article-container .music-library-heading {
    align-items: start;
    flex-direction: column;
  }
  .music-tracks li {
    gap: 0.6rem;
  }
  .music-player-panel {
    padding: 1rem;
  }
  .music-now-playing {
    align-items: flex-start;
    gap: 0.75rem;
  }
  .music-now-playing .music-cover {
    width: 50px;
    height: 50px;
  }
  #article-container .music-now-playing h3 {
    font-size: 1rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .music-page-controls {
    flex-wrap: wrap;
  }
  .music-page-volume {
    width: 100%;
  }
}

#article-container .series-reading-list li {
  padding: 0.5rem 0;
}

#article-container .series-reading-list time {
  display: block;
  color: var(--font-color);
  opacity: 0.65;
  font-size: 0.85em;
}

/* 专栏总览复用首页文章卡片，每个专栏独立一格 */
#recent-posts.series-directory .series-directory-item {
  display: block;
  color: var(--font-color);
}

#recent-posts.series-directory .recent-post-item > .recent-post-info > .series-directory-name,
#recent-posts.series-directory .recent-post-item > .recent-post-info > .series-directory-count {
  color: var(--font-color);
}

/* 评论区以留白衔接正文，不显示装饰分隔线 */
#post-comment {
  margin-top: 40px;
}

/* 无图的推荐卡片：在文章底色上叠一层中性灰，文字沿用正文颜色。 */
.relatedPosts .pagination-related.no-cover {
  background: rgba(128, 128, 128, 0.12);
}

.relatedPosts .pagination-related.no-cover .info .info-item-1,
.relatedPosts .pagination-related.no-cover .info .info-item-2 {
  color: var(--font-color);
}

#article-container .markdown-alert {
  margin: 1rem 0;
  padding: 0.9rem 1rem 0.8rem;
  border-left: 0.25rem solid var(--theme-color);
  border-radius: 0.45rem;
  background: var(--card-bg);
}

#article-container .markdown-alert > p {
  margin: 0.35rem 0;
}

#article-container .markdown-alert > p:last-child {
  margin-bottom: 0;
}

#article-container .markdown-alert .markdown-alert-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.1rem 0 0.5rem;
  line-height: 1.25;
  font-weight: 700;
}

#article-container .markdown-alert .markdown-alert-title svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #111;
}

#article-container .markdown-alert .markdown-alert-title svg path {
  fill: currentColor;
}

#article-container .markdown-alert .markdown-alert-title img {
  filter: invert(0);
}

#article-container .markdown-alert-note {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

#article-container .markdown-alert-note .markdown-alert-title {
  color: #2563eb;
}

#article-container .markdown-alert-tip {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}

#article-container .markdown-alert-tip .markdown-alert-title {
  color: #059669;
}

#article-container .markdown-alert-important {
  border-left-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

#article-container .markdown-alert-important .markdown-alert-title {
  color: #7c3aed;
}

#article-container .markdown-alert-warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

#article-container .markdown-alert-warning .markdown-alert-title {
  color: #d97706;
}

#article-container .markdown-alert-caution {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

#article-container .markdown-alert-caution .markdown-alert-title {
  color: #dc2626;
}

[data-theme='dark'] #article-container .markdown-alert-note {
  background: rgba(59, 130, 246, 0.16);
}

[data-theme='dark'] #article-container .markdown-alert-tip {
  background: rgba(16, 185, 129, 0.16);
}

[data-theme='dark'] #article-container .markdown-alert-important {
  background: rgba(139, 92, 246, 0.18);
}

[data-theme='dark'] #article-container .markdown-alert-warning {
  background: rgba(245, 158, 11, 0.18);
}

[data-theme='dark'] #article-container .markdown-alert-caution {
  background: rgba(239, 68, 68, 0.18);
}

[data-theme='dark'] #article-container .markdown-alert .markdown-alert-title svg {
  color: #fff;
}

[data-theme='dark'] #article-container .markdown-alert .markdown-alert-title img {
  filter: invert(1);
}

#article-container {
  /* font-family: "LXGW WenKai", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; */
  color: var(--font-color);
  line-height: 1.8;
}

#article-container p,
#article-container li,
#article-container blockquote,
#article-container td,
#article-container th {
  color: var(--font-color);
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
  /* color: var(--font-color); */
  line-height: 1.35;
  font-weight: 700;
}

#article-container h1 {
  font-size: 3rem;
}

#article-container h2 {
  font-size: 1.75rem;
}

#article-container h3 {
  font-size: 1.375rem;
}

#article-container h4 {
  font-size: 1.25rem;
}

#article-container h5 {
  font-size: 1.125rem;
}

#article-container h6 {
  font-size: 1rem;
}

/* 设置链接颜色，注释掉，为了保持默认颜色 */
/* #article-container a {
  color: var(--theme-color);
} */

/* 设置行内代码颜色 */

/* #article-container p code,
#article-container li code,
#article-container td code,
#article-container th code,
#article-container blockquote code {
  font-family: "JetBrains Mono", "Victor Mono", "Fira Code", monospace;
  color: #63f6cf;
  background: rgba(119, 120, 120, 0.155);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
} */

/* 深色模式下的行内代码颜色 */
/* [data-theme='dark'] #article-container p code,
[data-theme='dark'] #article-container li code,
[data-theme='dark'] #article-container td code,
[data-theme='dark'] #article-container th code,
[data-theme='dark'] #article-container blockquote code {
  color: #ff9dbb;
  background: rgba(255, 157, 187, 0.14);
} */