/*!
 * USB（仿U.SB烧饼博客） Typecho 主题 - theme.css
 * 配色与签名元素参考 https://u.sb/design/
 */

/* ========== 字体 ========== */
/* Space Grotesk（拉丁）本地化：assets/fonts/SpaceGrotesk-*.woff2，中文回退系统字体栈 */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 字体族：拉丁用 Space Grotesk，中文走系统栈，代码用等宽栈 */
  --font-sans: "Space Grotesk", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-head: "Space Grotesk", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", ui-sans-serif, system-ui, sans-serif;
  --font-ioskeley-mono: "Ioskeley Mono","PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-mono: var(--font-ioskeley-mono);

  /* ---------- Light（默认）---------- */
  --background: #f5f5f5;
  --foreground: #0c0a09;
  --card: #ffffff;
  --secondary: #f0efed;
  --panel: #f0efed;
  --content: #3f3d3a;
  --muted-foreground: #777169;
  --border: #e7e5e4;
  --hairline-strong: #d6d3d1;
  --primary: #292524;
  --primary-hover: #0c0a09;
  --link-wave: #777169;
  --sparkle: #a8a29e;
  --code-bg: #fbf1c7;
  --code-text: #504945;
  --inline-code-bg: #f0efed;
  --inline-code-border: #e7e5e4;
  --inline-code-text: #504945;
  --tooltip-bg: #151917;
  --shadow-sm: 0 2px 8px rgb(12 10 9 / 0.04);
  --shadow-md: 0 4px 16px rgb(12 10 9 / 0.06);
  --shadow-lg: 0 8px 32px rgb(12 10 9 / 0.08);
  --shadow-xl: 0 16px 48px rgb(12 10 9 / 0.10);
}

[data-theme="dark"] {
  --background: #0c0a09;
  --foreground: #f5f5f4;
  --card: #231d18;
  --secondary: #292524;
  --panel: #171412;
  --content: #d6d3d1;
  --muted-foreground: #a8a29e;
  --border: #2a2624;
  --hairline-strong: #44403c;
  --primary: #f5f5f4;
  --primary-hover: #ffffff;
  --primary-label: #0c0a09;
  --link-wave: #ffcc00;
  --sparkle: #ffcc00;
  --code-bg: #171412;
  --code-text: #d5c4a1;
  --inline-code-bg: #3b2e19;
  --inline-code-border: #55411f;
  --inline-code-text: #f0d9a5;
  --tooltip-bg: #151917;
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.30);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.50);
  --shadow-xl: 0 16px 48px rgb(0 0 0 / 0.60);
}

/* ========== 站点 Logo：深浅色双图切换 ========== */
.site-logo-dark { display: none; }
[data-theme="dark"] .site-logo-light { display: none; }
[data-theme="dark"] .site-logo-dark { display: inline; }

/* ========== 基础重置补丁 ========== */
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  transition: background-color .25s ease, color .25s ease;
}
::selection { background: var(--link-wave); color: var(--background); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 9999px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* ========== 主题切换过渡 ========== */
#theme-toggle svg { transition: opacity .2s ease, transform .3s ease; }

/* ========== 正文链接下划线（默认淡色点线，hover 换波浪线）========== */
.prose a, .wave-link {
  position: relative;
  text-decoration: underline dotted;
  text-decoration-color: var(--hairline-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  color: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='%23a8a29e' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 4px;
  background-size: 0 6px;
  transition: background-size .35s cubic-bezier(0.23, 1, 0.32, 1), color .2s ease;
}
.prose a:hover, .wave-link:hover {
  text-decoration: none;
  background-size: 18px 6px;
  color: var(--link-wave);
}

/* ========== 导航波浪线（hover + 当前页） ========== */
.nav-item {
  position: relative;
  display: inline-block;
}
.nav-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='%23a8a29e' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 0 6px;
  transition: background-size .35s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-item:hover::after {
  background-size: 18px 6px;
}
.nav-active::after {
  background-size: 18px 6px;
}
@keyframes wave-pan { from { background-position: 0 0; } to { background-position: 36px 0; } }
@media (prefers-reduced-motion: reduce) { .nav-active::after { animation: none; } }

/* ========== Tooltip 气泡 ========== */
[data-tooltip] { position: relative; }
[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9999;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tooltip-bg);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-md);
}
[data-tooltip]::before {
  content: "";
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--tooltip-bg);
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before { opacity: 1; }
[data-tooltip-position="bottom"]::after { top: calc(100% + 8px); }
[data-tooltip-position="bottom"]::before { top: calc(100% + 3px); border-bottom-color: var(--tooltip-bg); border-top-color: transparent; }
[data-tooltip-position="top"]::after { top: auto; bottom: calc(100% + 8px); }
[data-tooltip-position="top"]::before { top: auto; bottom: calc(100% + 3px); border-top-color: var(--tooltip-bg); border-bottom-color: transparent; }

/* ========== 代码窗口（macOS 风格）========== */
.prose pre, .code-window {
  position: relative;
  background: var(--code-bg) !important;
  color: var(--code-text);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin: 1.5em 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.prose pre { padding: 2.75rem 1.25rem 1.25rem; overflow-x: auto; font-size: 1rem; line-height: 1.7; }
.prose pre code { background: none !important; padding: 0 !important; border: 0 !important; color: inherit; font-size: inherit; }
.prose code, :not(pre) > code {
  font-family: var(--font-mono);
  background: var(--inline-code-bg);
  color: var(--inline-code-text);
  border: 1px solid var(--inline-code-border);
  border-radius: 6px;
  padding: .12em .4em;
  font-size: .875em;
  word-break: break-word;
}
/* 窗口标题栏 */
.code-window-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  background: color-mix(in srgb, var(--code-bg) 80%, var(--border));
  border-bottom: 1px solid var(--border);
}
.code-window-dots { display: inline-flex; gap: .4rem; }
.code-window-dots span { width: 11px; height: 11px; border-radius: 50%; display: block; }
.code-window-dots .r { background: #ff5f57; }
.code-window-dots .y { background: #febc2e; }
.code-window-dots .g { background: #28c840; }
.code-window-lang {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted-foreground);
  margin-left: .5rem;
  letter-spacing: .02em;
}
.code-copy-btn {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 9px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.code-copy-btn:hover { color: var(--foreground); border-color: var(--hairline-strong); background: var(--secondary); }
.code-copy-btn.copied { color: #28c840; border-color: #28c840; }

/* ========== 正文排版 .prose ========== */
.prose { color: var(--content); font-size: 1rem; line-height: 1.8; word-wrap: break-word;word-break: break-all;}
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--foreground); font-family: var(--font-head); font-weight: 600; line-height: 1.3; }
.prose h2 { font-size: 1.5rem; margin: 2em 0 .8em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.prose h3 { font-size: 1.25rem; margin: 1.6em 0 .6em; }
.prose h4 { font-size: 1.05rem; margin: 1.4em 0 .5em; }
.prose p { margin: 1em 0; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.6em; }
.prose li { margin: .4em 0; }
.prose ul li::marker { color: var(--muted-foreground); }
.prose ol li::marker { color: var(--muted-foreground); font-family: var(--font-mono); }
.prose blockquote {
  margin: 1.5em 0;
  padding: .6em 1.2em;
  border-left: 3px solid var(--hairline-strong);
  background: var(--secondary);
  border-radius: 0 8px 8px 0;
  color: var(--muted-foreground);
}
.prose blockquote p { margin: .3em 0; }
.prose img { border-radius: 12px; margin: 1.5em auto; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5em 0; font-size: .9375rem; border-radius: 12px 12px 0 0; border-radius-: 0; overflow: hidden; border: 0;}
.prose th, .prose td { padding: .6em .9em; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { background: var(--secondary); font-weight: 600; color: var(--foreground); }
/*.prose tr:last-child td { border-bottom: 0; }*/
.prose strong { color: var(--foreground); font-weight: 600; }

/* ========== 星空 hero ========== */
.starfield { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.starfield .star {
  position: absolute;
  color: var(--sparkle);
  opacity: 0;
  animation: twinkle 4s ease-in-out infinite;
}
.starfield .star svg { display: block; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50% { opacity: .9; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .starfield .star { animation: none; opacity: .5; } }

/* 鼠标轨迹星星 */
.trail-star, .trail-heart {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  color: var(--sparkle);
  animation: trail-fade .7s ease-out forwards;
}
@keyframes trail-fade {
  0% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(.3) rotate(60deg); }
}
@media (prefers-reduced-motion: reduce) { .trail-star, .trail-heart { display: none; } }

/* ========== 汉堡菜单 ========== */
.phone-bars { width: 22px; height: 16px; position: relative; }
.phone-bars span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.phone-bars span:nth-child(1) { top: 0; }
.phone-bars span:nth-child(2) { top: 7px; }
.phone-bars span:nth-child(3) { top: 14px; }
.phone-bars.open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.phone-bars.open span:nth-child(2) { opacity: 0; }
.phone-bars.open span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* 移动端导航展开 */
#site-nav.nav-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* ========== 搜索浮层 ========== */
.search-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgb(12 10 9 / 0.5);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.search-overlay.open { display: flex; }
.search-panel {
  width: 100%; max-width: 640px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.search-input-wrap { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.search-input-wrap input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font-size: 1.05rem; color: var(--foreground);
}
.search-results { max-height: 60vh; overflow-y: auto; }
.search-results a {
  display: block; padding: .8rem 1.25rem; border-bottom: 1px solid var(--border);
  color: var(--foreground); transition: background .15s ease;
}
.search-results a:hover { background: var(--secondary); }
.search-results a small { color: var(--muted-foreground); display: block; margin-top: 2px; }
.search-empty { padding: 2rem; text-align: center; color: var(--muted-foreground); }

/* 文章卡片标签药丸（由 Typecho tags() 输出的 a 标签）*/
.post-tags a {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: 500;
  border: 1px solid var(--border); color: var(--muted-foreground);
  background: var(--card); border-radius: 9999px;
  padding: .1rem .6rem; font-size: .75rem; position: relative;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.post-tags a::before { content: '#'; margin-right: 2px; opacity: .7; }
.post-tags a:hover { background: var(--secondary); color: var(--foreground); border-color: var(--hairline-strong); }

/* 文章页 license-card 标签药丸 */
.tile-link { text-decoration: none !important; color: inherit !important; display: block; }
.license-tags a {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: 500;
  border: 1px solid var(--border); color: var(--muted-foreground);
  border-radius: 9999px;
  padding: .25rem .75rem; font-size: .875rem; position: relative;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.license-tags a::before { content: '#'; margin-right: 2px; opacity: .7; }
.license-tags a:hover { background: var(--secondary); color: var(--foreground); border-color: var(--border); }

/* ========== 标签云页面（page-tags）========== */
.tags-grid section { padding: 1.75rem 0; }
.tags-grid section > div:first-child {
  margin-bottom: .75rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
  user-select: none;
}
.tags-grid .tag-list { display: flex; flex-wrap: wrap; gap: .625rem; }
.tags-grid .tag-item {
  display: inline-flex; align-items: center; gap: .375rem;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted-foreground); border-radius: 9999px;
  padding: .25rem .75rem; font-size: .875rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}
.tags-grid .tag-item:hover { background: var(--secondary); color: var(--foreground); }
.tags-grid .tag-count { font-family: var(--font-mono); font-size: .75rem; color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
.tags-divide > section + section { border-top: 1px solid var(--border); }
@media (min-width: 768px) {
  .tags-grid section { display: grid; grid-template-columns: 5rem 1fr; gap: 2rem; }
  .tags-grid section > div:first-child { margin-bottom: 0; padding-top: .125rem; }
}

/* ========== 分页 ========== */
.pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 3rem; }
.pagination a, .pagination span {
  min-width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 9999px;
  padding: 0 .6rem; font-family: var(--font-mono); font-size: .875rem;
  color: var(--muted-foreground); transition: all .15s ease;
}
.pagination a:hover { color: var(--foreground); background: var(--secondary); border-color: var(--hairline-strong); }
.pagination .current { background: var(--foreground); color: var(--background); border-color: var(--foreground); }

/* ========== 评论 ========== */
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment-inner { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.comment-list .comment-avatar img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); }
.comment-list .comment-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; flex-wrap: wrap; }
.comment-list .comment-author { font-weight: 500; color: var(--foreground); }
.comment-list .comment-time { font-family: var(--font-mono); font-size: .75rem; color: var(--muted-foreground); }
#cancel-comment-reply-link { color: var(--muted-foreground); font-size: .75rem; margin-left: .5rem; }
#cancel-comment-reply-link:hover { color: var(--foreground); }
.comment-children { padding-left: 2rem; border-left: 2px solid var(--border); margin-left: 1rem; margin-top: .25rem; }
.comment-children .comment-list { margin: 0; padding: 0; }
@media (max-width: 640px) { .comment-children { padding-left: 1rem; margin-left: .5rem; } }
.comment-respond input, .comment-respond textarea {
  width: 100%; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: .625rem .9rem; color: var(--foreground);
  font-size: .9375rem; transition: border-color .15s ease;
}
.comment-respond input:focus, .comment-respond textarea:focus { outline: 0; border-color: var(--hairline-strong); }
.comment-respond textarea { min-height: 110px; resize: vertical; margin-top: .75rem; }
.comment-form-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .comment-form-grid { grid-template-columns: 1fr 1fr; } }
.comment-form-grid .url-full { grid-column: span 1; }
@media (min-width: 768px) { .comment-form-grid .url-full { grid-column: span 2; } }
.comment-form-submit { display: flex; justify-content: flex-end; }
.comment-form-submit .btn-primary { width: 100%; }
@media (min-width: 768px) { .comment-form-submit .btn-primary { width: auto; } }
.comment-respond.comment-replying { margin-top: .75rem; padding: 1rem; border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm); }

[data-theme="dark"] .geetest_holder.geetest_wind .geetest_radar_btn,
[data-theme="dark"] .geetest_holder.geetest_wind .geetest_success_btn{border:1px solid var(--border);border-radius:12px}
[data-theme="dark"] .geetest_holder.geetest_wind .geetest_radar_btn,[data-theme="dark"] .geetest_holder.geetest_wind .geetest_radar_btn:hover{background:var(--card)}
[data-theme="dark"] .geetest_holder.geetest_wind .geetest_radar_tip,[data-theme="dark"] .geetest_holder.geetest_wind .geetest_success_radar_tip{color:var(--foreground);}
[data-theme="dark"] .geetest_holder.geetest_wind.geetest_radar_click .geetest_radar_btn{background:var(--card)}
[data-theme="dark"] .geetest_holder.geetest_wind.geetest_radar_click_ready .geetest_radar_btn{background:var(--card)}
[data-theme="light"] .geetest_holder.geetest_wind .geetest_radar_btn,[data-theme="light"] .geetest_holder.geetest_wind .geetest_success_btn{border:1px solid var(--border);border-radius:12px}
.geetest_holder.geetest_wind .geetest_radar_btn,.geetest_holder.geetest_wind .geetest_success_btn{border:1px solid var(--border);border-radius:12px}
.geetest_holder.geetest_wind .geetest_offline{border-radius:10px}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--primary-label, #fff);
  border-radius: 9999px; padding: .55rem 1.4rem; font-weight: 500;
  cursor: pointer; border: 0; transition: background .15s ease, transform .1s ease;
  font-family: var(--font-head);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { transform: translateY(1px); }

/* ========== 杂项 ========== */
.back-to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50;
  width: 42px; height: 42px; border-radius: 50%;
  background: #292524; border: 1px solid #292524;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, background .15s ease, color .15s ease;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: #44403c; color: #ffffff; }
/* 深色模式：按钮反转为浅灰色（与文章页浮动按钮配色逻辑一致） */
[data-theme="dark"] .back-to-top { background: #e7e5e4; border-color: #e7e5e4; color: #1c1917; }
[data-theme="dark"] .back-to-top:hover { background: #d6d3d1; color: #1c1917; }

/* 文章目录 ToC */
.sb-toc-content h1, .sb-toc-content h2, .sb-toc-content h3,
.sb-toc-content h4, .sb-toc-content h5, .sb-toc-content h6 { scroll-margin-top: 6rem; }

@media print {
  header, footer, .back-to-top, .sb-float-wrap, .sb-toc-mask, .starfield, #search-overlay { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
 * 工具类兜底（tailwind.css 编译产物缺失颜色/圆角/阴影/响应式类）
 * ============================================================ */

/* ---------- 背景色 ---------- */
.bg-background { background-color: var(--background) !important; }
.bg-card { background-color: var(--card) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-foreground { background-color: var(--foreground) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-background\/85 { background-color: color-mix(in srgb, var(--background) 85%, transparent) !important; }
.bg-current { background-color: currentColor !important; }

/* ---------- 文字颜色 ---------- */
.text-foreground { color: var(--foreground) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.text-content { color: var(--content) !important; }
.text-background { color: var(--background) !important; }
.text-muted-foreground\/50 { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent) !important; }
.text-muted-foreground\/40 { color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) !important; }
.text-muted-foreground\/70 { color: color-mix(in srgb, var(--muted-foreground) 70%, transparent) !important; }

/* ---------- 边框颜色 ---------- */
.border-border { border-color: var(--border) !important; }
.border-hairline-strong { border-color: var(--hairline-strong) !important; }

/* ---------- 边框宽度 ---------- */
.border { border-width: 1px !important; }
.border-0 { border-width: 0 !important; }
.border-b { border-bottom-width: 1px !important; }
.border-t { border-top-width: 1px !important; }

/* ---------- 圆角 ---------- */
.rounded { border-radius: 0.25rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* ---------- 阴影 ---------- */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* ---------- 模糊 ---------- */
.backdrop-blur-md { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }

/* ---------- 字体族 ---------- */
.font-sans { font-family: var(--font-sans) !important; }
.font-mono { font-family: var(--font-mono) !important; }
.font-head { font-family: var(--font-head) !important; }

/* ---------- 字重 ---------- */
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }

/* ---------- 字号 ---------- */
.text-xs { font-size: 0.75rem !important; line-height: 1rem; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem; }
.text-\[15px\] { font-size: 15px !important; line-height: 1.5rem; }
.text-base { font-size: 1rem !important; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem; }
.text-3xl { font-size: 1.875rem !important; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem; }
.text-5xl { font-size: 3rem !important; line-height: 1; }
.text-\[11px\] { font-size: 11px !important; }
.text-inherit { color: inherit !important; }

/* ---------- 字间距 ---------- */
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* ---------- 行高 ---------- */
.leading-none { line-height: 1 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-relaxed { line-height: 1.625 !important; }

/* ---------- 文本对齐 ---------- */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* ---------- 文本修饰 ---------- */
.no-underline { text-decoration: none !important; }
.underline { text-decoration: underline !important; }
.underline-offset-4 { text-underline-offset: 4px !important; }
.decoration-border { text-decoration-color: var(--border) !important; }
.uppercase { text-transform: uppercase !important; }
.select-none { user-select: none !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.break-all { word-break: break-all !important; }

/* ---------- 字体平滑 ---------- */
.antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }

/* ---------- 轮廓 ---------- */
.outline-hidden { outline: 2px solid transparent !important; outline-offset: 2px !important; }

/* ---------- 过渡 ---------- */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; transition-duration: 0.15s !important; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; transition-duration: 0.15s !important; }
.transition-\[transform\,box-shadow\,border-color\] { transition-property: transform, box-shadow, border-color !important; transition-duration: 0.2s !important; }
.transition-\[opacity\,transform\,visibility\] { transition-property: opacity, transform, visibility !important; transition-duration: 0.3s !important; }
.transition-\[color\,background-color\,border-color\,transform\] { transition-property: color, background-color, border-color, transform !important; transition-duration: 0.15s !important; }
.duration-150 { transition-duration: 0.15s !important; }
.duration-200 { transition-duration: 0.2s !important; }
.duration-300 { transition-duration: 0.3s !important; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }

/* ---------- 光标 ---------- */
.cursor-pointer { cursor: pointer !important; }

/* ---------- 溢出 ---------- */
.overflow-hidden { overflow: hidden !important; }

/* ---------- 透明度 ---------- */
.opacity-0 { opacity: 0 !important; }
.opacity-100 { opacity: 1 !important; }

/* ---------- z-index ---------- */
.z-10 { z-index: 10 !important; }
.z-\[99\] { z-index: 99 !important; }
.z-\[9999\] { z-index: 9999 !important; }

/* ---------- line-clamp ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 位置 ---------- */
.fixed { position: fixed !important; }
.absolute { position: absolute !important; }
.relative { position: relative !important; }

/* ---------- 显示 ---------- */
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.hidden { display: none !important; }

/* ---------- flex 布局 ---------- */
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 1 0% !important; }
.shrink-0 { flex-shrink: 0 !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }

/* ---------- grid 布局 ---------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* ---------- 文章列表：第一页首尾通栏 ---------- */
@media (min-width: 768px) {
  .post-grid.is-first-page > article:first-child,
  .post-grid.is-first-page > article:last-child {
    grid-column: 1 / -1 !important;
    padding: 2.5rem !important;
  }
}
/* 第一条标题加大（移动端 + 桌面端） */
.post-grid.is-first-page > article:first-child .post-title {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}
@media (min-width: 768px) {
  .post-grid.is-first-page > article:first-child .post-title {
    font-size: 2.25rem !important;
  }
}
/* 首尾通栏时简介显示 3 行 */
.post-grid.is-first-page > article:first-child .post-excerpt,
.post-grid.is-first-page > article:last-child .post-excerpt {
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
}

/* ---------- 间距（gap / padding / margin / space / divide）兜底 ---------- */
.space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem !important; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px !important; }
.divide-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

.gap-0 { gap: 0 !important; }
.gap-0\.5 { gap: 0.125rem !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-10 { gap: 2.5rem !important; }
.gap-x-3 { column-gap: 0.75rem !important; }
.gap-x-4 { column-gap: calc(var(--spacing) * 3) }
.gap-x-5 { column-gap: 1.25rem !important; }
.gap-x-10 { column-gap: 2.5rem !important; }
.gap-y-1 { row-gap: 0.25rem !important; }
.gap-y-2 { row-gap: 0.5rem !important; }
.gap-y-3 { row-gap: 0.75rem !important; }
.gap-y-4 { row-gap: 1rem !important; }

/* ---------- 尺寸 ---------- */
.w-full { width: 100% !important; }
.min-w-0 { min-width: 0 !important; }
.max-w-none { max-width: none !important; }
.max-w-\[1080px\] { max-width: 1080px !important; }
.max-w-\[1200px\] { max-width: 1200px !important; }
.h-16 { height: 4rem !important; }
.h-full { height: 100% !important; }
.h-7 { height: 1.75rem !important; }
.h-11 { height: 2.75rem !important; }
.w-7 { width: 1.75rem !important; }
.w-11 { width: 2.75rem !important; }
.w-\[6\.5rem\] { width: 6.5rem !important; }
.w-\[300px\] { width: 300px !important; }
.min-h-\[100dvh\] { min-height: 100dvh !important; }

/* ---------- padding 兜底 ---------- */
.p-0 { padding: 0 !important; }
.p-2 { padding: 0.5rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-7 { padding: 1.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-3\.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.pt-5 { padding-top: 1.25rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pt-14 { padding-top: 3.5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.pb-14 { padding-bottom: 3.5rem !important; }
.pb-16 { padding-bottom: 4rem !important; }

/* ---------- margin 兜底 ---------- */
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-3\.5 { margin-top: 0.875rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-auto { margin-left: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ---------- transform ---------- */
.-translate-y-full { transform: translateY(-100%) !important; }
.translate-y-0 { transform: translateY(0) !important; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem) !important; }
.active\:translate-y-px:active { transform: translateY(1px) !important; }
.active\:scale-95:active { transform: scale(0.95) !important; }
.transition-\[border-color\,transform\]:hover { transition-property: border-color, transform !important; }
.transition-\[color\,transform\]:hover { transition-property: color, transform !important; }
.transition-\[border-color\,transform\] { transition-property: border-color, transform !important; transition-duration: 0.2s !important; }
.transition-\[color\,transform\] { transition-property: color, transform !important; transition-duration: 0.15s !important; }

/* ---------- hover 状态 ---------- */
.hover\:bg-secondary:hover { background-color: var(--secondary) !important; }
.hover\:bg-transparent:hover { background-color: transparent !important; }
.hover\:text-foreground:hover { color: var(--foreground) !important; }
.hover\:text-\(--link-wave\):hover { color: var(--link-wave) !important; }
.hover\:border-hairline-strong:hover { border-color: var(--hairline-strong) !important; }
.hover\:shadow-md:hover { box-shadow: var(--shadow-md) !important; }

/* ---------- group-hover 状态 ---------- */
.group:hover .group-hover\:text-\(--link-wave\) { color: var(--link-wave) !important; }

/* ---------- text color: var() ---------- */
.text-\(--link-wave\) { color: var(--link-wave) !important; }

/* ---------- [.copied_&] 变体（复制按钮状态）---------- */
.copied .\[\.copied_\&\]\:hidden { display: none !important; }
.copied .\[\.copied_\&\]\:block { display: block !important; }
.\[\.copied_\&\]\:hidden { display: block; }
.\[\.copied_\&\]\:block { display: none; }
.copied .\[\.copied_\&\]\:text-\(--link-wave\) { color: var(--link-wave) !important; }

/* ---------- dark 模式（data-theme="dark"）---------- */
[data-theme="dark"] .dark\:hidden { display: none !important; }
[data-theme="dark"] .dark\:block { display: block !important; }
[data-theme="dark"] .dark\:hover\:text-\(--link-wave\):hover { color: var(--link-wave) !important; }

/* ---------- 响应式：sm (>=640px) ---------- */
@media (min-width: 640px) {
  .sm\:inline { display: inline !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:gap-2 { gap: 0.5rem !important; }
  .sm\:justify-start { justify-content: flex-start !important; }
  .sm\:grid-cols-\[auto_auto_auto_auto\] { grid-template-columns: auto auto auto auto !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- 响应式：md (>=768px) ---------- */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row !important; }
  .md\:my-10 { margin-block: 2.5rem !important; }
  .md\:relative { position: relative !important; }
  .md\:top-auto { top: auto !important; }
  .md\:bg-transparent { background-color: transparent !important; }
  .md\:border-0 { border-width: 0 !important; }
  .md\:shadow-none { box-shadow: none !important; }
  .md\:p-0 { padding: 0 !important; }
  .md\:opacity-100 { opacity: 1 !important; }
  .md\:visible { visibility: visible !important; }
  .md\:translate-y-0 { transform: translateY(0) !important; }
  .md\:pointer-events-auto { pointer-events: auto !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem; }
  .md\:text-2xl { font-size: 1.5rem !important; line-height: 2rem; }
  .md\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem; }
  .md\:text-right { text-align: right !important; }
  .md\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .md\:px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
  .md\:py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .md\:py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .md\:py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .md\:pt-24 { padding-top: 6rem !important; }
  .md\:pb-14 { padding-bottom: 3.5rem !important; }
  .md\:p-7 { padding: 1.75rem !important; }
  .md\:gap-6 { gap: 1.5rem !important; }
  .md\:gap-0 { gap: 0 !important; }
  .md\:hidden { display: none !important; }
  .md\:hover\:bg-transparent:hover { background-color: transparent !important; }
}

/* ---------- 响应式：lg (>=1024px) ---------- */
@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:gap-10 { gap: 2.5rem !important; }
  .lg\:w-\[300px\] { width: 300px !important; }
}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transition-none { transition: none !important; }
  .motion-reduce\:hover\:translate-y-0:hover { transform: translateY(0) !important; }
}

/* ========== 文章页浮动按钮组（目录 + 返回顶部）========== */
/* 文章页有自己的浮动按钮组时，隐藏页脚旧版返回顶部按钮（JS 中另有兑底） */
body:has(#sb-float-wrap) #back-to-top { display: none !important; }

.sb-float-wrap {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1rem !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: center !important;
}
.sb-float-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    border: 0 !important;
    background: #292524 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .15s ease, opacity .2s ease !important;
    padding: 0 !important;
    box-shadow: 0 4px 16px rgba(12, 10, 9, 0.15) !important;
    position: static !important;
    font: inherit !important;
}
.sb-float-btn:hover {
    background: #44403c !important;
}
/* 深色模式：按钮反转为浅灰色（浅色模式保持上方原样） */
[data-theme="dark"] .sb-float-btn {
    background: #e7e5e4 !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .sb-float-btn:hover {
    background: #d6d3d1 !important;
}
.sb-float-top {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
}
.sb-float-top.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* ========== ToC 弹出面板 ========== */
.sb-toc-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    background: rgba(245, 245, 245, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s !important;
}
.sb-toc-mask.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
html[data-theme="dark"] .sb-toc-mask {
    background: rgba(12, 10, 9, 0.6) !important;
}
.sb-toc-popup {
    position: static !important;
    width: 400px !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(91dvh - 5rem) !important;
    background: #ffffff !important;
    border: 1px solid #e7e4e2 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(12, 10, 9, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(20px) scale(.97) !important;
    transition: transform .2s ease !important;
    font-family: inherit !important;
    color: #0c0a09 !important;
    padding: 16px !important;
}
html[data-theme="dark"] .sb-toc-popup {
    background: #1c1917 !important;
    border-color: #292524 !important;
    color: #fafaf9 !important;
}
.sb-toc-mask.show .sb-toc-popup {
    transform: translateY(0) scale(1) !important;
}
.sb-toc-popup-hd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 8px !important;
    margin: 0 0 12px !important;
    border-bottom: 1px solid #e7e4e2 !important;
}
html[data-theme="dark"] .sb-toc-popup-hd {
    border-color: #292524 !important;
}
.sb-toc-popup-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0c0a09 !important;
}
html[data-theme="dark"] .sb-toc-popup-title {
    color: #fafaf9 !important;
}
.sb-toc-popup-close {
    cursor: pointer !important;
    border: 0 !important;
    background: transparent !important;
    color: #78716c !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s, color .15s !important;
}
.sb-toc-popup-close:hover {
    background: #f5f5f4 !important;
    color: #0c0a09 !important;
}
html[data-theme="dark"] .sb-toc-popup-close:hover {
    background: #292524 !important;
    color: #fafaf9 !important;
}
.sb-toc-popup-bd {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e7e4e2 transparent !important;
}
.sb-toc-popup-bd::-webkit-scrollbar {
    width: 4px !important;
}
.sb-toc-popup-bd::-webkit-scrollbar-thumb {
    background: #e7e4e2 !important;
    border-radius: 2px !important;
}
html[data-theme="dark"] .sb-toc-popup-bd::-webkit-scrollbar-thumb {
    background: #292524 !important;
}
.sb-toc-popup-article-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #78716c !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-all !important;
}
html[data-theme="dark"] .sb-toc-popup-article-title {
    color: #a8a29e !important;
}
.sb-toc-popup-list,
.sb-toc-popup-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sb-toc-popup-list ul {
    padding-left: 12px !important;
    margin-top: 2px !important;
}
.sb-toc-popup-list > li {
    margin: 3px 0 !important;
}
.sb-toc-popup-list ul > li {
    margin: 2px 0 !important;
}
.sb-toc-popup-list a {
    display: block !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #78716c !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: color .15s ease, background .15s ease !important;
    text-decoration: none !important;
    word-break: break-all !important;
}
html[data-theme="dark"] .sb-toc-popup-list a {
    color: #a8a29e !important;
}
.sb-toc-popup-list a:hover {
    color: #0c0a09 !important;
}
html[data-theme="dark"] .sb-toc-popup-list a:hover {
    color: #fafaf9 !important;
}
.sb-toc-popup-list > li > a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0c0a09 !important;
    line-height: 20px !important;
}
html[data-theme="dark"] .sb-toc-popup-list > li > a {
    color: #fafaf9 !important;
}
.sb-toc-popup-list > li > ul > li > a {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #78716c !important;
}
html[data-theme="dark"] .sb-toc-popup-list > li > ul > li > a {
    color: #a8a29e !important;
}
.sb-toc-popup-list a.active {
    color: #0c0a09 !important;
    background: #f5f5f4 !important;
    font-weight: 500 !important;
}
html[data-theme="dark"] .sb-toc-popup-list a.active {
    color: #fafaf9 !important;
    background: #292524 !important;
}
@media (max-width: 1023px) {
    .sb-float-wrap,
    .sb-toc-mask { display: none !important; }
}

/* ========== 404 页面 ========== */
.e404-type {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 3px;
  border-right: 2px solid var(--link-wave);
  animation:
    e404-type 1s steps(20) 0.15s both,
    e404-blink 1.1s steps(1) 1.25s infinite;
}
@keyframes e404-type {
  from { width: 0; }
  to   { width: 20ch; }
}
@keyframes e404-blink {
  0%, 100% { border-color: var(--link-wave); }
  50%      { border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .e404-type { width: 20ch; animation: none; border-right-color: var(--link-wave); }
}
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong); background: transparent;
  color: var(--foreground); border-radius: 9999px;
  padding: .55rem 1.4rem; font-weight: 500; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  font-family: var(--font-head);
}
.btn-outline:hover { background: var(--secondary); }
.btn-outline:active { transform: translateY(1px); }
a.btn-primary, a.btn-outline { text-decoration: none; }