/* ============================================================
   科幻 / 科技皮肤（v2 · 克制版）
   ------------------------------------------------------------
   参考 https://www.deepseek.com/harness/ 的视觉思路：
   · 深海军蓝底 + 大面积柔和蓝色辉光，留白充足，不做满屏霓虹
   · 强调色只用于链接 / 悬停 / 少量状态，其余保持低对比
   · 背景由三层叠加：星链网络（canvas）+ 粒子无限符号（canvas）+ 幽灵代码
   注入位置：head 最末（覆盖 theme-glass / nav-apple 等既有样式）
   仅在深色下生效；站点的浅色模式已关闭。
   ============================================================ */

/* ---------------------------------------------------------------
   0. 大标题字体（iFonts 航天遨游体，已子集化为 woff2）
   --------------------------------------------------------------- */
@font-face {
  font-family: 'HangtianAoyou';
  src: url('/custom/assets/fonts/HangtianAoyou-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   1. 设计令牌
   --------------------------------------------------------------- */
:root {
  /* 冷峻配色：近黑冷底 + 钢青强调 + 石墨蓝辅助，去掉一切高饱和霓虹 */
  --sf-bg-0: #03060a;
  --sf-bg-1: #070d14;
  /* ---- 真·磨砂玻璃材质 ----
     三层构成，全部无色相（想整体调透/调厚，只改这几个值即可）：
     · --sf-glass-sheen 顶部白色高光（玻璃反光面，属于元素自身的高光）
     · --sf-glass / --sf-glass-2 中性白膜，负责"透"
     · --sf-glass-blur 实时背景模糊半径，负责"磨砂"
     blur 在硬件加速不可用时会被浏览器静默丢掉，所以高光和白膜必须
     自己就能撑起质感（详见第 5 节注释）。 */
  /* v22：往"通透"再走一档。v21 还原了原先那套（白膜 .055 + 高光 .07→.012 + blur 20），
     但作者反馈"不够通透"—— 原因有三：白膜本身偏厚、高光铺满上部 38% 变成一层灰纱、
     blur 20px 把背后纹理糊成了奶白。改法：
       · 白膜 .055 → .03（面板中段的有效不透明度从 ~6.7% 降到 ~3.6%）
       · 高光只留"顶部一条细边"（12% 高度就衰减到底），不再是一大片灰纱
       · blur 20px → 12px：糊得少，背后的星链与网格能看清，才叫"通透"
       · 描边与内高光保留 —— 玻璃之所以像玻璃靠的是这条亮边，不是靠不透明度 */
  --sf-glass: rgba(255, 255, 255, .03);
  --sf-glass-2: rgba(255, 255, 255, .045);
  --sf-glass-sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, .055) 0%,
    rgba(255, 255, 255, .006) 12%,
    rgba(255, 255, 255, .006) 100%
  );
  --sf-glass-line: rgba(255, 255, 255, .13);
  --sf-glass-line-strong: rgba(255, 255, 255, .22);
  --sf-glass-blur: 12px;
  --sf-panel: var(--sf-glass);
  --sf-panel-2: var(--sf-glass-2);
  --sf-line: var(--sf-glass-line);
  --sf-line-strong: var(--sf-glass-line-strong);
  --sf-ice: #9dc0d4;
  --sf-ice-2: #cbe2ef;
  --sf-slate: #5b7285;
  --sf-text: #d9e4ec;
  --sf-muted: #7c8a95;
  --sf-mono: ui-monospace, 'Fira Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* 覆盖 Butterfly 主题变量 */
html {
  --global-bg: var(--sf-bg-0);
  --font-color: var(--sf-text);
  --text-highlight-color: #e9f1f7;
  --card-bg: transparent;
  --card-meta: var(--sf-muted);
  --sidebar-bg: rgba(8, 13, 19, .6);
  --sidebar-menu-bg: rgba(8, 13, 19, .6);
  --btn-bg: rgba(12, 18, 26, .9);
  --btn-color: var(--sf-ice-2);
  --btn-hover-color: #05090e;
  --text-bg-hover: rgba(157, 192, 212, .45);
  --scrollbar-color: rgba(150, 182, 202, .4);
  --default-bg-color: var(--sf-ice);
  --hr-border: rgba(150, 182, 202, .16);
  --hr-before-color: var(--sf-ice);
  --blockquote-color: #9fadb8;
  --blockquote-bg: rgba(255, 255, 255, .04);
  --search-bg: rgba(255, 255, 255, .05);
  --search-input-color: var(--sf-text);
  --search-a-color: var(--sf-text);
  --toc-link-color: var(--sf-muted);
  --preloader-bg: var(--sf-bg-0);
  --preloader-color: var(--sf-ice);
  --card-box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .95);
  --card-hover-box-shadow: 0 28px 70px -32px rgba(0, 0, 0, 1);
  --pseudo-hover: var(--sf-ice);
  --headline-presudo: var(--sf-muted);
  --zoom-bg: #04070b;
  --mark-bg: rgba(157, 192, 212, .2);
}

/* ---------------------------------------------------------------
   2. 背景：冷黑底 + 克制的钢青辉光
   --------------------------------------------------------------- */
html body {
  background-color: var(--sf-bg-0) !important;
  color: var(--sf-text);
}

.glass-bg {
  background: var(--sf-bg-0) !important;
}

.bg-liquid {
  background:
    radial-gradient(1200px 820px at 74% 2%, rgba(96, 138, 168, .24), transparent 62%),
    radial-gradient(860px 640px at 14% 24%, rgba(157, 192, 212, .07), transparent 66%),
    radial-gradient(1100px 860px at 90% 90%, rgba(60, 90, 115, .16), transparent 68%),
    linear-gradient(178deg, #0a141d 0%, #060d15 46%, #03070b 100%) !important;
}

/* 轻微网格（比 v1 更淡） */
.glass-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(150, 182, 202, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 182, 202, .04) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 86% 78% at 50% 40%, #000 0%, rgba(0, 0, 0, .4) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 86% 78% at 50% 40%, #000 0%, rgba(0, 0, 0, .4) 72%, transparent 100%);
}

/* 顶部大气辉光 */
.glass-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(90% 52% at 50% -8%, rgba(120, 158, 184, .14), transparent 70%),
    radial-gradient(60% 34% at 50% 104%, rgba(157, 192, 212, .06), transparent 72%);
}

/* 星链画布（由 starlink.js 注入到 .glass-bg 内） */
.sf-starlink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: .9;
}

/* ---------------------------------------------------------------
   3. 顶部导航
   --------------------------------------------------------------- */
/* 滚动哨兵：贴在页面顶部，仅用于 IntersectionObserver 判定"已滚动"，
   不参与布局（absolute + 1px 宽） */
.sf-scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 80px;
  pointer-events: none;
  visibility: hidden;
}

/* 顶部导航：参照 DSH —— 玻璃底挂在伪元素上，滚动时只过渡它的 opacity
   注意特异性：nav-apple.css 用 `html[data-theme='dark'] #nav`（特异性 1,1,1）
   带 !important 铺了渐变底 / 描边 / 投影；而 #nav 是 <body> 的直接子元素
   （不在 #body-wrap 内）。这里用 html[data-theme] body #nav（1,1,2）才能压住它。 */
html[data-theme] body #nav {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* 滚动时左右边距变化（= 宽度收窄），用带轻微回弹的缓动模拟 DSH 的 spring */
  transition: opacity .3s ease,
              left .55s cubic-bezier(.34, 1.36, .44, 1),
              right .55s cubic-bezier(.34, 1.36, .44, 1) !important;
}

/* 滚动后：导航收窄并居中（对应 DSH 的 maxWidth 1280 → 980） */
html.is-scrolled body #nav {
  left: max(16px, calc(50vw - 490px)) !important;
  right: max(16px, calc(50vw - 490px)) !important;
}

@media (max-width: 768px) {
  /* 窄屏不做收窄，保持 nav-apple 原本的 10px 边距 */
  html.is-scrolled body #nav {
    left: 10px !important;
    right: 10px !important;
  }
}

html body #nav::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(8, 16, 28, .8), rgba(4, 9, 17, .74));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(150, 182, 202, .12);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(190, 214, 228, .05);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease-in-out, visibility 0s .4s;
  pointer-events: none;
  z-index: -1;
}

html.is-scrolled body #nav::before {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease-in-out, visibility 0s;
}

/* 未滚动时导航完全隐形，指针光斑与边缘环也一并隐藏（没有玻璃底就没有可"反光"的表面） */
html:not(.is-scrolled) body #nav .nav-edge,
html:not(.is-scrolled) body #nav .nav-edge-light,
html:not(.is-scrolled) body #nav .nav-glow-spot {
  display: none !important;
}

/* 左上角品牌位：用莫比乌斯式无限图标替换站名文字
   （文字保留在 DOM 里但视觉隐藏，读屏与 SEO 仍能读到「纪元」）
   注意：必须用 flex + block，inline-block 会按基线对齐导致图标偏离导航中线 */
html body #nav #blog-info {
  display: flex;
  align-items: center;
  height: 100%;
}

html body #nav #blog-info .nav-site-title {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
  letter-spacing: 0 !important;
}

html body #nav #blog-info .nav-site-title .site-name {
  display: block;
  width: 38px;
  height: 21px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -9999px;
  background: url('/custom/assets/mobius.svg') no-repeat center center / contain;
  filter: drop-shadow(0 0 7px rgba(157, 192, 212, .35));
  transition: filter .22s ease;
}

html body #nav #blog-info .nav-site-title:hover .site-name {
  filter: drop-shadow(0 0 12px rgba(203, 226, 239, .65));
}

html body #nav .site-page {
  color: #a0b0bc !important;
  letter-spacing: .1em !important;
  transition: color .18s ease;
}

html body #nav .site-page:hover,
html body #nav .menus_item:hover > span.site-page,
html body #nav .site-page.active {
  color: var(--sf-ice-2) !important;
}

html body #nav #toggle-menu i,
html body #nav .search i {
  color: #c3d3de !important;
}

html body #nav .menus_item_child,
html body #nav .nav-drop {
  background: rgba(6, 13, 24, .97) !important;
  border: 1px solid var(--sf-line) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6) !important;
}

html body #nav .nav-glow-spot,
html body #nav .nav-glow-clip {
  --nav-glow: rgba(120, 158, 184, .16);
}

/* 检索胶囊 */
/* 检索胶囊：原来靠 darkmode 按钮的 auto margin 推到右侧，
   现在浅色模式按钮已移除，这里自己顶到最右 */
html body #nav .nav-search {
  margin-left: auto !important;
  margin-right: 0 !important;
}

html body #nav .nav-search-bar {
  background: rgba(7, 15, 28, .9) !important;
  border: 1px solid rgba(150, 182, 202, .18) !important;
  box-shadow: none !important;
}

html body #nav .nav-search-bar:hover,
html body #nav .nav-search.nav-search-open .nav-search-bar {
  border-color: rgba(120, 158, 184, .5) !important;
}

/* 注意：.nav-search-ico 是 Font Awesome 图标元素，
   绝不能再给它设 font-family（否则图标私有码位落到等宽字体上变成方块乱码） */
html body #nav .nav-search-ico {
  color: #c3d3de !important;
}

html body #nav .nav-search-input,
html body #nav .nav-search-marquee span {
  color: #c3d3de !important;
  font-family: var(--sf-mono) !important;
}

html body #nav .nav-search-input::placeholder {
  color: rgba(143, 163, 187, .75) !important;
}

html body #nav .nav-search-caret {
  background: var(--sf-ice) !important;
}

/* ---------------------------------------------------------------
   4. Hero：大标题 + 粒子无限符号 + 幽灵代码
   --------------------------------------------------------------- */
html body #page-header.full_page {
  background: transparent !important;
}

/* 幽灵代码层（在大标题之后） */
.sf-code {
  position: absolute;
  left: 50%;
  top: 13%;
  transform: translateX(-50%);
  width: min(660px, 90vw);
  margin: 0;
  font-family: var(--sf-mono);
  font-size: 12.5px;
  line-height: 1.8;
  white-space: pre-wrap;
  text-align: left;
  color: rgba(170, 200, 220, .5);
  opacity: .26;
  filter: blur(.45px);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 74%, transparent);
}

/* 第二处幽灵代码：大标题右下角 */
.sf-code--br {
  left: auto;
  right: 12.5%;
  top: 47%;
  transform: none;
  width: min(340px, 28vw);
  font-size: 12px;
  line-height: 1.75;
  opacity: .34;
  text-align: left;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}

/* 粒子无限符号 */
.sf-infinity {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(600px, 88vw);
  height: min(300px, 42vh);
  pointer-events: none;
  z-index: 1;
  opacity: .82;
}

html body #page-header #site-info {
  position: relative;
  z-index: 2;
}

html body #page-header #site-title {
  font-family: 'HangtianAoyou', var(--sf-mono), sans-serif !important;
  font-size: 3.4rem !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  color: #f0f6fa !important;
  /* 先压一层深色光晕把标题从粒子层里"托"出来，再叠冷色辉光 */
  text-shadow:
    0 0 26px rgba(2, 8, 18, .95),
    0 0 60px rgba(2, 8, 18, .8),
    0 0 40px rgba(120, 158, 184, .32),
    0 0 96px rgba(157, 192, 212, .14);
}

html body #page-header #site-subtitle {
  color: #a7bccb !important;
  letter-spacing: .28em !important;
  font-family: var(--sf-mono) !important;
  font-size: .78em !important;
  text-transform: uppercase;
  margin-top: 16px !important;
}

html body #page-header.post-bg #post-info .post-title {
  color: #edf4f9 !important;
  text-shadow: 0 0 26px rgba(120, 158, 184, .3);
}

html body #page-header #post-meta,
html body #page-header #post-meta a {
  color: #93a4b0 !important;
  font-family: var(--sf-mono) !important;
}

html body #page-header #scroll-down .scroll-down-effects {
  color: rgba(190, 214, 228, .75) !important;
}

/* ---------------------------------------------------------------
   5. 面板：真·磨砂玻璃（中性白膜 + 实时背景模糊，不自带颜色）
   ---------------------------------------------------------------
   卡片与文章面板（#page / #archive / #post）**铺的是同一层膜**：
   `--sf-glass` 白膜 + 一条 1px 内高光，没有顶部渐变高光 ——
   这样两者的"通透度"完全一致，卡片不会比文章背景更厚更白。
   卡片比文章面板多的只有 backdrop-filter（实时模糊背后内容），
   模糊只改变"背后长什么样"，不会让面板变得更不透明。
   为什么不能只靠 blur：Chromium 在硬件加速不可用 / GPU 进程回退时会静默
   丢掉 backdrop-filter，只靠模糊的"玻璃"会直接消失（表现为卡片看起来根本没
   做玻璃效果）。所以内高光 + 白膜负责质感，blur 只负责锦上添花。
   --------------------------------------------------------------- */
html body .card-widget,
html body #recent-posts .recent-post-item,
html body .relatedPosts-list a.pagination-related,
html body .post-copyright {
  background-color: var(--sf-glass) !important;
  background-image: var(--sf-glass-sheen) !important;
  border: 1px solid var(--sf-glass-line) !important;
  box-shadow:
    0 24px 60px -38px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .04) !important;
  -webkit-backdrop-filter: blur(var(--sf-glass-blur));
  backdrop-filter: blur(var(--sf-glass-blur));
  transition: border-color .22s ease, box-shadow .22s ease;
}

/* 长文容器（#page / #archive / #post）：背后就是页面底色，做实时模糊既看不出来
   又极贵（theme-glass.css 踩过这个坑），所以只铺中性薄膜，不开 backdrop-filter */
html body #page,
html body #archive,
html body #post {
  background-color: var(--sf-glass) !important;
  border: 1px solid var(--sf-glass-line) !important;
  box-shadow:
    0 24px 60px -38px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* 检索弹窗是浮层，给稍厚一点的白膜 + 模糊，保证文字仍然清楚 */
html body .search-dialog {
  background-color: var(--sf-glass-2) !important;
  border: 1px solid var(--sf-glass-line) !important;
  box-shadow: 0 24px 60px -38px rgba(0, 0, 0, .95) !important;
  -webkit-backdrop-filter: blur(var(--sf-glass-blur));
  backdrop-filter: blur(var(--sf-glass-blur));
}

/* 浏览器拿不到 backdrop-filter（硬件加速关闭 / GPU 回退）时，
   把白膜与描边加厚一档，卡片依旧是玻璃板，只是少了实时模糊 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html body .card-widget,
  html body #recent-posts .recent-post-item,
  html body .relatedPosts-list a.pagination-related,
  html body .post-copyright,
  html body .search-dialog {
    background-color: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .16) !important;
  }
}

html body .card-widget:hover,
html body #recent-posts .recent-post-item:hover {
  border-color: var(--sf-glass-line-strong) !important;
  box-shadow:
    0 28px 70px -34px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

html body #recent-posts .recent-post-item .recent-post-info > .article-title {
  color: #e6eef4 !important;
  transition: color .18s ease;
}

html body #recent-posts .recent-post-item .recent-post-info > .article-title:hover {
  color: var(--sf-ice-2) !important;
}

html body #recent-posts .recent-post-item .article-meta-wrap,
html body #recent-posts .recent-post-item .article-meta-wrap a {
  color: var(--sf-muted) !important;
  font-family: var(--sf-mono) !important;
  font-size: .92em !important;
}

html body #recent-posts .recent-post-item .content {
  color: #a4b4c0 !important;
}

html body #recent-posts .recent-post-item .post_cover img {
  filter: saturate(.72) brightness(.88);
  transition: filter .3s ease;
}

html body #recent-posts .recent-post-item:hover .post_cover img {
  filter: saturate(.95) brightness(.98);
}

/* ---------------------------------------------------------------
   6. 文章正文
   --------------------------------------------------------------- */
html body #post #article-container,
html body #post #article-container p,
html body #post #article-container li {
  color: #cfdff0 !important;
}

html body #post #article-container h1,
html body #post #article-container h2,
html body #post #article-container h3,
html body #post #article-container h4 {
  color: #eaf2f8 !important;
}

html body #post #article-container h2 {
  position: relative;
  padding-left: 14px !important;
  padding-top: 14px !important;
  margin-top: 32px !important;
  border-top: 1px solid rgba(150, 182, 202, .12);
}

html body #post #article-container h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sf-ice), rgba(91, 114, 133, .6));
}

html body #post #article-container h3 {
  padding-left: 12px !important;
  border-left: 2px solid rgba(120, 158, 184, .5);
}

html body #post #article-container a {
  color: var(--sf-ice-2) !important;
  border-bottom: 1px solid rgba(157, 192, 212, .3);
  text-decoration: none !important;
  transition: border-color .18s ease;
}

html body #post #article-container a:hover {
  border-bottom-color: var(--sf-ice) !important;
}

html body #post #article-container blockquote {
  background: rgba(255, 255, 255, .04) !important;
  border-left: 3px solid rgba(157, 192, 212, .6) !important;
  border-radius: 0 6px 6px 0;
  color: #a9c0d6 !important;
}

html body #post #article-container hr {
  background: linear-gradient(90deg, transparent, rgba(150, 182, 202, .3), transparent) !important;
  border: none !important;
  height: 1px !important;
}

html body #post #article-container table th {
  background: rgba(255, 255, 255, .06) !important;
  color: #e6eef4 !important;
  font-family: var(--sf-mono) !important;
}

html body #post #article-container table td,
html body #post #article-container table th {
  border-color: rgba(255, 255, 255, .12) !important;
}

/* 行内代码胶囊底：只作用于「父级不是 pre」的行内 code。
   原来用 code:not([class*='language-']) 会把代码块里那个没有 class 的块级
   <code> 一起命中 —— 而它是 display:inline，于是每一行代码都被画上一个
   贴着文字的小方框（用户反馈的"代码带框"就是它）。
   底色同样改成中性白膜：只是"稍微亮一点的玻璃"，不染色。 */
html body #post #article-container :not(pre) > code {
  background: rgba(255, 255, 255, .07) !important;
  color: #dbe6ee !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  font-family: var(--sf-mono) !important;
  padding: 1px 5px;
}

/* ---------------------------------------------------------------
   7. 代码块
   ---------------------------------------------------------------
   只给最外层 figure 留一层卡片皮。
   原来这条选择器同时命中 figure.shiki / .codeblock / figure.highlight / pre，
   一个代码块被叠了 4~5 层描边（figure + .codeblock + gutter pre + shiki pre），
   内层一律透明、无边框、无投影。
   --------------------------------------------------------------- */
html body #post #article-container figure.shiki,
html body #post #article-container figure.highlight {
  background-image: var(--sf-glass-sheen) !important;
  background-color: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--sf-glass-line) !important;
  box-shadow:
    0 18px 44px -30px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  /* 这里故意【不用】backdrop-filter：一篇文章可以有十几个代码块，
     每个都是一层实时模糊合成层，既贵（长文滚动掉帧）又容易触发
     Chromium 的合成层上限导致"有时模糊失效/闪一下"。代码块背后
     就是文章面板本身（纯色），模糊也看不出差别，所以只留白膜 + 高光。 */
}

html body #post #article-container figure.shiki .codeblock,
html body #post #article-container figure.highlight .codeblock,
html body #post #article-container figure.shiki pre,
html body #post #article-container figure.highlight pre,
html body #post #article-container figure.shiki code,
html body #post #article-container figure.highlight code {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #post #article-container .codeblock .gutter {
  background: rgba(255, 255, 255, .03) !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  color: rgba(140, 200, 240, .4) !important;
  font-family: var(--sf-mono) !important;
}

html body #post #article-container .codeblock .code,
html body #post #article-container .codeblock .code pre {
  background: transparent !important;
  font-family: var(--sf-mono) !important;
}

/* ---------------------------------------------------------------
   8. 侧边栏
   --------------------------------------------------------------- */
html body #aside-content .card-info .author-info-name {
  color: #eaf2f8 !important;
  letter-spacing: .08em !important;
}

html body #aside-content .card-info .author-info-description {
  color: var(--sf-muted) !important;
  font-size: .92em !important;
}

/* 头像：保持圆形、去掉任何旋转 */
html body #aside-content .card-info .avatar-img img,
html body .avatar-img img {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  border: 1px solid rgba(150, 182, 202, .25);
  box-shadow: 0 0 0 4px rgba(120, 158, 184, .06);
}

html body #aside-content .card-info .site-data a {
  color: var(--sf-muted) !important;
}

html body #aside-content .card-info .site-data .headline {
  font-family: var(--sf-mono) !important;
  font-size: .86em !important;
}

html body #aside-content .card-info .site-data .length-num {
  color: var(--sf-ice-2) !important;
  font-family: var(--sf-mono) !important;
}

html body #aside-content .card-widget .item-headline,
html body #aside-content .card-widget .card-archive-list-link,
html body #aside-content .card-widget .card-category-list-link {
  color: #c2d0da !important;
}

html body #aside-content .card-widget .item-headline i {
  color: var(--sf-ice) !important;
}

html body #aside-content .card-widget .item-headline span {
  letter-spacing: .08em !important;
}

html body #aside-content .card-category-list-item:hover,
html body #aside-content .card-archive-list-link:hover {
  background: rgba(255, 255, 255, .05) !important;
  color: var(--sf-ice-2) !important;
}

html body #aside-content .card-tag-cloud a {
  color: var(--sf-muted) !important;
  font-family: var(--sf-mono) !important;
  transition: color .18s ease;
}

html body #aside-content .card-tag-cloud a:hover {
  color: var(--sf-ice-2) !important;
}

/* 目录 */
html body #card-toc .toc-link,
html body #card-toc .toc-link * {
  color: var(--sf-muted) !important;
}

html body #card-toc .toc-link.is-active-link,
html body #card-toc .toc-link.is-active-link * {
  color: var(--sf-ice-2) !important;
}

html body #card-toc .toc-link.is-active-link::before {
  background: var(--sf-ice) !important;
}

html body #card-toc .toc-percentage {
  color: var(--sf-ice-2) !important;
  font-family: var(--sf-mono) !important;
}

/* ---------------------------------------------------------------
   9. 按钮 / 分页 / 标签（保留主题原本的圆角形状）
   --------------------------------------------------------------- */
html body .btn,
html body #card-info-btn,
html body #pagination .page-number,
html body #pagination .extend {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--sf-ice-2) !important;
  border: 1px solid var(--sf-line) !important;
  transition: all .18s ease;
}

html body .btn:hover,
html body #card-info-btn:hover,
html body #pagination .page-number:hover,
html body #pagination .extend:hover {
  color: #051018 !important;
  background: var(--sf-ice) !important;
  border-color: var(--sf-ice) !important;
}

html body #pagination .page-number.current {
  background: linear-gradient(135deg, var(--sf-ice), var(--sf-slate)) !important;
  color: #04070f !important;
  border-color: transparent !important;
}

html body #post .tag_share .post-meta__tags {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--sf-line) !important;
  color: var(--sf-ice-2) !important;
  font-family: var(--sf-mono) !important;
}

/* 分享条：X（推特）的品牌色是纯黑，深色底上几乎看不见 → 改紫色 */
html body .social-share .social-share-icon.icon-x {
  color: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}

html body .social-share .social-share-icon.icon-x:hover {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}

html body .post-copyright {
  border-left: 3px solid rgba(157, 192, 212, .6) !important;
  color: #b3c3ce !important;
}

html body .prev-post .label,
html body .next-post .label {
  font-family: var(--sf-mono) !important;
  letter-spacing: .1em;
  color: var(--sf-muted) !important;
}

/* ---------------------------------------------------------------
   10. 页脚 / 右侧按钮 / 滚动条 / 搜索
   --------------------------------------------------------------- */
html body #footer {
  background: linear-gradient(180deg, transparent, rgba(2, 7, 14, .92)) !important;
}

html body #footer-wrap,
html body #footer-wrap a,
html body #footer-wrap .footer-separator {
  color: var(--sf-muted) !important;
  font-family: var(--sf-mono) !important;
  font-size: .92em !important;
}

html body #footer-wrap a:hover {
  color: var(--sf-ice-2) !important;
}

html body #rightside > div > button,
html body #rightside > div > a {
  background: rgba(8, 16, 28, .92) !important;
  border: 1px solid rgba(150, 182, 202, .16) !important;
  color: #c3d3de !important;
}

html body #rightside > div > button:hover,
html body #rightside > div > a:hover {
  background: var(--sf-ice) !important;
  color: #04101a !important;
}

html ::selection {
  background: rgba(157, 192, 212, .26);
  color: #f2fdff;
}

html body ::-webkit-scrollbar-track,
html body html::-webkit-scrollbar-track {
  background: #03080f !important;
}

html body ::-webkit-scrollbar-thumb,
html body html::-webkit-scrollbar-thumb {
  background: rgba(120, 190, 255, .4) !important;
  border-radius: 6px;
}

html body .search-dialog .search-nav {
  background: rgba(6, 13, 24, .97) !important;
  border-bottom: 1px solid var(--sf-line) !important;
  color: #dff3ff !important;
  font-family: var(--sf-mono) !important;
}

html body .search-dialog .local-search-box input {
  background: rgba(3, 9, 17, .9) !important;
  border: 1px solid var(--sf-line) !important;
  color: var(--sf-text) !important;
  font-family: var(--sf-mono) !important;
}

html body .search-dialog .local-search__hit-item a {
  color: #dcebfa !important;
}

html body .search-dialog .local-search__hit-item a:hover {
  color: var(--sf-ice-2) !important;
}

/* ---------------------------------------------------------------
   11. 动效降级 / 小屏
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .sf-code--br { display: none; }
}

@media (max-width: 768px) {
  .sf-code {
    font-size: 11px;
    opacity: .26;
    top: 13%;
  }
  .sf-infinity {
    width: 96vw;
    height: 40vh;
  }
  html body #page-header #site-title {
    font-size: 2.6rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-code { opacity: .2; }
  html body * { transition-duration: .01ms !important; }
}

/* ===============================================================
   v20 玻璃材质收口（必须放在文件最后）
   ---------------------------------------------------------------
   theme-glass.css 里多处用 `background: var(--sf-glass) !important`
   这种**简写**给卡片/文章面板铺膜 —— 简写会把 background-image 重置掉，
   于是上面那层"顶部高光"在这些元素上会被洗掉（玻璃就只剩一块平膜）。
   这里用同等级选择器 + 更高优先级统一补回：白膜 + 顶部高光 + 亮边 + 玻璃厚度。
   注意：长文容器（#post / #page / #archive）只补材质、不开 backdrop-filter ——
   它们背后就是页面底色，实时模糊既看不出来又极贵。
   =============================================================== */
/* 特异性必须到 html[data-theme] body X 这一档：theme-glass.css 里的
   html[data-theme='dark'] .card-widget（0,2,1）用的是 background **简写**，
   简写会重置 background-image —— 之前收口块用 html body X（0,1,2）压不住它，
   于是侧栏卡片与 #page 的顶部高光被洗掉（实测 background-image: none）。 */
html[data-theme] body #recent-posts .recent-post-item,
html[data-theme] body #aside-content .card-widget,
html[data-theme] body .card-widget,
html[data-theme] body .post-copyright,
html[data-theme] body .relatedPosts-list a.pagination-related,
html[data-theme] body #post,
html[data-theme] body #page:not(.nc),
html[data-theme] body #archive:not(.nc) {
  background-color: var(--sf-glass) !important;
  background-image: var(--sf-glass-sheen) !important;
  border-color: var(--sf-glass-line) !important;
  box-shadow:
    0 24px 60px -38px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .04) !important;
}

html[data-theme] body #recent-posts .recent-post-item,
html[data-theme] body #aside-content .card-widget,
html[data-theme] body .card-widget,
html[data-theme] body .post-copyright,
html[data-theme] body .relatedPosts-list a.pagination-related {
  -webkit-backdrop-filter: blur(var(--sf-glass-blur));
  backdrop-filter: blur(var(--sf-glass-blur));
}

/* 硬件加速不可用 / GPU 进程回退时 Chromium 会静默丢掉 backdrop-filter，
   这时把白膜加厚一点，至少保证"这是一块玻璃"看得出来 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  html[data-theme] body #recent-posts .recent-post-item,
  html[data-theme] body #aside-content .card-widget,
  html[data-theme] body .card-widget,
  html[data-theme] body .post-copyright,
  html[data-theme] body .relatedPosts-list a.pagination-related,
  html[data-theme] body #post,
  html[data-theme] body #page:not(.nc),
  html[data-theme] body #archive:not(.nc) {
    background-color: rgba(255, 255, 255, .08) !important;
  }
}