/* ==========================================================================
   Phycat Blog - site shell styles
   Loaded AFTER the theme engine CSS so it can override engine details.
   ========================================================================== */

:root {
  /* 站点外壳配色：优先复用主题引擎已定义的变量，暗色系自动生效 */
  --page-bg: var(--bg-color, #fffdf7);                     /* 暗色主题取 --bg-color */
  --site-text: var(--text-color, #333);                    /* 暗色主题取 --text-color */
  --site-muted: var(--text-color-secondary, #8a8a8a);      /* 暗色主题取 --text-color-secondary */
  --site-border: var(--border-color, rgba(0, 0, 0, .08));  /* 暗色主题取 --border-color */
  --site-accent: var(--element-color, var(--primary-color, #11aa63));
  --site-radius: 18px;
  --site-shadow: 0 8px 30px rgba(0, 0, 0, .07);
  /* 卡片底色：亮色 = 白；暗色 = 页面底色略微提亮（避免纯白卡片与暗色不搭） */
  --card-bg: color-mix(in srgb, var(--bg-color, #ffffff) 90%, #ffffff);
}

* { box-sizing: border-box; }
/* 移动端去掉点击时的默认灰色高亮 */
a, button { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  /* 预留滚动条槽位：页面间滚动条出现/消失时，头部布局不再跳动 */
  scrollbar-gutter: stable;
}
/* 兼容不支持 scrollbar-gutter 的旧浏览器：始终显示纵向滚动条 */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--read-font, "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--site-accent); }

::selection {
  background: color-mix(in srgb, var(--site-accent) 28%, transparent);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--site-muted) 40%, transparent);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--site-accent) 55%, transparent); }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--page-bg, #fff) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--site-border);
}
.site-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 1.16rem;
  text-decoration: none;
  color: var(--site-accent);
  letter-spacing: 1px;
  white-space: nowrap;
}
.brand-icon {
  width: 24px; height: 24px;
  flex: none;
  transform: rotate(-45deg) scale(0.85);
  transform-origin: center;
}
.site-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.site-nav a {
  color: var(--site-text);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: .93rem;
  transition: background .2s ease, color .2s ease;
}
.site-nav a:hover { background: color-mix(in srgb, var(--site-accent) 12%, transparent); color: var(--site-accent); }
.site-nav a.active { background: var(--site-accent); color: #fff; }

/* ---------------- Theme switcher ---------------- */
.theme-area { position: relative; }
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--site-border);
  background: transparent;
  color: var(--site-text);
  padding: 6px 14px;
  border-radius: 50px;
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  transition: border-color .2s ease;
}
.theme-btn:hover { border-color: var(--site-accent); }
.theme-btn-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--site-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent) 25%, transparent);
  transition: background .3s ease;
}
.theme-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 316px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  padding: 16px;
  z-index: 60;
}
.theme-panel[hidden] { display: none; }
.theme-panel-title { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.theme-group-label {
  font-size: .72rem;
  color: var(--site-muted);
  margin: 12px 0 8px;
  letter-spacing: 3px;
}
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.theme-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  padding: 9px 2px 7px;
  cursor: pointer;
  background: transparent;
  color: var(--site-text);
  font-family: inherit;
  font-size: .7rem;
  transition: border-color .2s ease, transform .15s ease;
}
.theme-opt:hover { transform: translateY(-2px); }
.theme-opt .swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}
.theme-opt.active {
  border-color: var(--site-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent) 35%, transparent);
}

/* ---------------- Theme panel: custom color entry ---------------- */
.theme-custom-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--site-border);
}
.theme-custom-row .theme-opt {
  width: 100%;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
  font-size: .82rem;
}
.theme-custom-row .theme-opt.active {
  border-color: var(--site-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent) 35%, transparent);
}
/* ---------------- Home / category ---------------- */
.site-main { flex: 1; width: 100%; }
.home-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 22px 70px; }
.category-wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px 70px; }

.hero { text-align: center; padding: 26px 10px 26px; }
.hero h1 { margin: 0 0 10px; font-size: 2.1rem; color: var(--site-text); letter-spacing: 2px; }
.hero p { margin: 0; color: var(--site-muted); font-size: .95rem; }

.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  padding: 18px 20px 16px;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--site-shadow); }
.post-card-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
/* 整卡可点击的拉伸覆盖层：点卡片任意位置进文章；标签/徽章浮于其上可独立点击 */
.post-card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.post-card .badge, .post-card .meta a.tag { position: relative; z-index: 1; }
.post-card h2 { margin: 0; font-size: 1.14rem; color: var(--site-text); line-height: 1.5; transition: color .2s ease; }
.post-card:hover h2 { color: var(--site-accent); }
.post-card .excerpt { margin: 0; color: var(--site-muted); font-size: .88rem; line-height: 1.7; }
.post-card .meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--site-muted); flex-wrap: wrap; margin-top: 4px; }

.badge {
  align-self: flex-start;
  padding: 1px 12px;
  border-radius: 50px;
  font-size: .75rem;
  background: color-mix(in srgb, var(--site-accent) 14%, transparent);
  color: var(--site-accent);
}
a.badge { text-decoration: none; transition: background .2s ease, color .2s ease; }
a.badge:hover { background: color-mix(in srgb, var(--site-accent) 24%, transparent); color: var(--site-accent); }
.tag {
  color: var(--site-muted);
  font-size: .8rem;
  background: color-mix(in srgb, var(--site-muted) 11%, transparent);
  border-radius: 20px;
  padding: 1px 9px;
  white-space: nowrap;
}
a.tag { text-decoration: none; transition: color .2s ease, background .2s ease; }
a.tag:hover { color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 14%, transparent); }


/* ---------------- 首页 ---------------- */
.home-wrap { max-width: 1240px; margin: 0 auto; padding: 40px 22px 70px; }
.home-hero { text-align: center; padding: 16px 10px 42px; }
.home-avatar {
  width: 96px; height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--site-accent) 72%, #fff), var(--site-accent));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--site-accent) 42%, transparent);
  user-select: none;
}
.home-title { margin: 0 0 10px; font-size: 2.3rem; letter-spacing: 1px; color: var(--site-text); }
.home-title .pi { color: var(--site-accent); }
.home-sub { margin: 0 auto 20px; max-width: 560px; color: var(--site-muted); font-size: 1rem; line-height: 1.8; }
.home-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 24px; color: var(--site-muted); font-size: .9rem; }
.home-stats span { background: color-mix(in srgb, var(--site-muted) 8%, transparent); border-radius: 50px; padding: 4px 14px; }
.home-cta { display: flex; justify-content: center; gap: 14px; }
.btn {
  display: inline-block;
  padding: 9px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-size: .95rem;
  border: 1px solid var(--site-border);
  color: var(--site-text);
  background: transparent;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { border-color: var(--site-accent); color: var(--site-accent); transform: translateY(-2px); }
.btn-primary { background: var(--site-accent); color: #fff; border-color: var(--site-accent); }
.btn-primary:hover { color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--site-accent) 40%, transparent); }

.home-section { margin-top: 46px; }
.home-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.25rem; color: var(--site-text);
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--site-border);
}

.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.cat-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border) !important;
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .2s ease;
}
.cat-card:hover { transform: translateY(-3px); border-color: var(--site-accent); box-shadow: var(--site-shadow); }
.cat-name { font-weight: 700; color: var(--site-accent); }
.cat-count { font-size: .8rem; color: var(--site-muted); }
.cat-arrow { margin-left: auto; color: var(--site-muted); transition: transform .2s ease, color .2s ease; }
.cat-card:hover .cat-arrow { color: var(--site-accent); transform: translateX(3px); }

.tag-chip.s1 { font-size: .8rem; }
.tag-chip.s2 { font-size: .95rem; }
.tag-chip.s3 { font-size: 1.08rem; font-weight: 700; }

.home-more { text-align: center; margin-top: 20px; }
.home-more a { color: var(--site-accent); text-decoration: none; font-weight: 700; font-size: .95rem; }
.home-more a:hover { text-decoration: underline; }

/* 文章页“更新于” */
.updated { color: var(--site-muted); }

@media (max-width: 640px) {
  /* 移动端导航按钮图标化：隐藏文字，留下图标/色点（小屏不拥挤） */
  .search-text { display: none; }
  #themeBtnLabel { display: none; }
  /* 统一为等尺寸方块 + 均匀间距 */
  .theme-area { display: flex; align-items: center; gap: 8px; }
  .theme-area .theme-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
    flex: none;
  }
}

@media (max-width: 640px) {
  .home-title { font-size: 1.625rem; }
  .home-avatar { width: 78px; height: 78px; font-size: 2.8rem; }
  .cat-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Post page: wide layout (like Typora export) ---------------- */
.site-post {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px 70px;
  display: flex;
  gap: 36px;
  align-items: flex-start;
  justify-content: center;
}
.post-article { flex: 1 1 auto; max-width: 1200px; min-width: 0; }

/* Widen the writing column (engine caps #write at 950px) */
#write {
  max-width: var(--read-width, 1000px);
  /* 阅读设置：字号缩放 / 行高 / 边距（默认为当前值） */
  font-size: calc(16px * var(--read-font-scale, 1));
  line-height: var(--read-line-height, 1.6);
  padding: var(--read-margin, 0px);
}
#write p, #write li, #write blockquote, #write td, #write th { font-size: 1em; }

.post-head { text-align: center; margin-bottom: 8px; }
.post-head h1 { margin: 32px 0 8px; font-size: 1.9rem; color: var(--site-text); }
.post-head .meta { display: flex; justify-content: center; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--site-muted); font-size: .85rem; }

#write h1, #write h2, #write h3, #write h4, #write h5, #write h6 {
  scroll-margin-top: 24px;
}

/* 开关：只关侧栏目录编号（tocnum: false） */
.no-tocnum .outline-label:before { content: none !important; }
/* 开关：只关正文标题编号（headnum: false） */
.no-headnum #write h1:before,
.no-headnum #write h2:before,
.no-headnum #write h3 > span:first-of-type::before,
.no-headnum #write h4 > span:first-of-type::before,
.no-headnum #write h5 > span:first-of-type::before,
.no-headnum #write h6 > span:first-of-type::before {
  content: none !important;
}

/* ---------------- 阅读进度条 ---------------- */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 120;
  pointer-events: none;
  background: linear-gradient(90deg, var(--site-accent), color-mix(in srgb, var(--site-accent) 55%, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--site-accent) 60%, transparent);
}

/* ---------------- 全文搜索 ---------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 11vh 18px 24px;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.search-overlay[hidden] { display: none; }
.search-box {
  width: 100%;
  max-width: 680px;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.search-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px; }
.search-title { font-weight: 700; color: var(--site-text); }
.search-kbd {
  margin-left: auto;
  font-size: .72rem;
  color: var(--site-muted);
  border: 1px solid var(--site-border);
  border-radius: 6px;
  padding: 1px 8px;
  letter-spacing: 1px;
}
.search-close {
  border: none;
  background: transparent;
  color: var(--site-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 8px;
}
.search-close:hover { color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 10%, transparent); }
.search-input-wrap { padding: 6px 18px 10px; }
.search-input-wrap input {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 10px 14px;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--page-bg, #fff) 60%, transparent);
  color: var(--site-text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-input-wrap input:focus {
  border-color: var(--site-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent) 20%, transparent);
}
.search-hint { padding: 0 18px 8px; font-size: .8rem; color: var(--site-muted); }
.search-results { overflow-y: auto; padding: 2px 10px 14px; }
.search-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
  transition: background .15s ease;
}
.search-item:hover, .search-item.active { background: color-mix(in srgb, var(--site-accent) 9%, transparent); }
.search-item h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--site-text); }
.search-item h3 mark { background: transparent; color: var(--site-accent); }
.search-item p { margin: 0 0 6px; font-size: .85rem; color: var(--site-muted); line-height: 1.6; }
.search-item .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: var(--site-muted); }
.search-item .badge { align-self: center; }
.search-item mark {
  background: color-mix(in srgb, var(--site-accent) 32%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.search-empty { padding: 26px 16px; text-align: center; color: var(--site-muted); }


/* ---------------- 分类索引页 ---------------- */
.cat-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.cat-index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: 16px;
  padding: 18px 20px 16px;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .2s ease;
}
.cat-index-card:hover { transform: translateY(-3px); border-color: var(--site-accent); box-shadow: var(--site-shadow); }
.cat-index-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.cat-index-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cat-index-card .cat-name { font-weight: 700; color: var(--site-accent); font-size: 1.05rem; }
.cat-index-card .cat-count { font-size: .8rem; color: var(--site-muted); }
.cat-index-card .cat-arrow { margin-left: auto; color: var(--site-muted); transition: transform .2s ease, color .2s ease; }
.cat-index-card:hover .cat-arrow { color: var(--site-accent); transform: translateX(3px); }
.cat-index-desc { margin: 0; color: var(--site-muted); font-size: .88rem; line-height: 1.7; }
.cat-index-recent { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cat-index-recent li { font-size: .82rem; color: var(--site-muted); }
.cat-index-recent a { color: var(--site-text); text-decoration: none; position: relative; z-index: 1; }
.cat-index-recent a:hover { color: var(--site-accent); }

/* ---------------- 分类页介绍 + 返回 ---------------- */
.cat-intro {
  margin: 14px auto 0;
  max-width: 720px;
  color: var(--site-muted);
  font-size: .95rem;
  line-height: 1.8;
  text-align: center;
  padding-bottom: 14px;
  position: relative;
}
.hero .cat-intro { margin: 14px auto 0; }
.cat-intro::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--site-accent), transparent);
}
.cat-back { text-align: center; margin: -4px 0 18px; }
.cat-back a { color: var(--site-muted); text-decoration: none; font-size: .85rem; }
.cat-back a:hover { color: var(--site-accent); }

/* ---------------- 文章汇总（时间线） ---------------- */
.archive-wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px 70px; }
.arch-year { margin: 6px 0 30px; }
.arch-year-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.25rem;
  color: var(--site-text);
  border-bottom: 1px dashed var(--site-border);
  padding-bottom: 8px;
  margin: 0 0 8px;
}
.arch-year-title em { font-style: normal; font-size: .8rem; color: var(--site-muted); }
.arch-timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid color-mix(in srgb, var(--site-accent) 30%, transparent); }
.arch-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 12px 0;
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border) !important;
  border-radius: 14px;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .2s ease;
}
.arch-item:hover { transform: translateY(-3px); border-color: var(--site-accent); box-shadow: var(--site-shadow); }
.arch-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--site-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent) 22%, transparent);
}
.arch-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: var(--site-muted); }
.arch-meta time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.arch-badge { font-size: .72rem; color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 12%, transparent); border-radius: 50px; padding: 0 8px; text-decoration: none; }
.arch-badge:hover { background: color-mix(in srgb, var(--site-accent) 24%, transparent); }
.arch-read { margin-left: auto; white-space: nowrap; }
.arch-title { color: var(--site-text); text-decoration: none; font-size: .95rem; line-height: 1.5; }
/* 整张卡片可点击：覆盖层贴在标题链接上，覆盖整张卡片 */
.arch-title::after { content: ''; position: absolute; inset: 0; }
.arch-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.arch-item .arch-badge, .arch-item .tag { position: relative; z-index: 1; }
.arch-title:hover { color: var(--site-accent); }


/* ---------------- 图片灯箱 ---------------- */
/* 正文图片：默认无阴影，悬停才显示（覆盖引擎默认） */
#write img { box-shadow: none !important; }
#write img:hover { box-shadow: 0 12px 30px -4px var(--element-color-soo-shallow) !important; }

/* ---------------- 图片灯箱（支持缩放/平移） ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox-box {
  display: flex;
  flex-direction: column;
  width: min(96vw, 1600px);
  height: 92vh;
  max-height: 92vh;
}
.lightbox-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 10px;
  color: #eaeaea;
}
.lightbox-zoom-label {
  font-size: .82rem;
  min-width: 54px;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.lightbox-btn {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  min-width: 36px;
  height: 30px;
  border-radius: 9px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.lightbox-spacer { flex: 1; }
.lightbox-close { font-size: 1.3rem; }
.lightbox-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  cursor: zoom-in;
  touch-action: none;
}
.lightbox-viewport.dragging { cursor: grabbing; }
.lightbox-viewport figure {
  margin: 0;
  max-height: 100%;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lightbox-viewport img {
  display: block;
  max-width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  background: #fff;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-viewport figcaption {
  flex: 0 0 auto;
  text-align: center;
  color: #eaeaea;
  font-size: .9rem;
  padding-top: 10px;
  max-width: 100%;
}
@media (max-width: 640px) {
  .lightbox { padding: 6px; }
  .lightbox-box { height: 94vh; }
}


/* ---------------- 阅读设置面板 ---------------- */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.settings-overlay[hidden] { display: none; }
.settings-box {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  /* 字体下拉菜单为绝对定位，可能超出面板底部；允许溢出以便完整显示 */
  overflow: visible;
}
.settings-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px; }
.settings-title { font-weight: 700; color: var(--site-text); }
.settings-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--site-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 8px;
}
.settings-close:hover { color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 10%, transparent); }
.settings-body { padding: 8px 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.settings-row { display: flex; align-items: center; gap: 12px; }
.settings-label { flex: 0 0 72px; font-size: .9rem; color: var(--site-text); }
.settings-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--site-accent); }

.font-dropdown {
  position: relative;
  flex: 1;
  min-width: 0;
}
.font-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--site-border);
  background: var(--card-bg, #fff);
  color: var(--site-text);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.font-dropdown-btn:focus { outline: none; border-color: var(--site-accent); }
.font-dropdown-arrow { font-size: .7rem; color: var(--site-muted); transition: transform .15s ease; }
.font-dropdown.open .font-dropdown-arrow { transform: rotate(180deg); }
.font-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 160;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  /* 隐藏滚动条（保留滚轮/触摸滑动），保持面板干净 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.font-dropdown-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
.font-dropdown-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--site-text);
  padding: 7px 10px;
  border-radius: 7px;
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.font-dropdown-option:hover,
.font-dropdown-option:focus { background: color-mix(in srgb, var(--site-accent) 10%, transparent); color: var(--site-accent); outline: none; }
.font-dropdown-option.selected { color: var(--site-accent); font-weight: 600; }
.settings-width { }
@media (max-width: 1200px) {
  .settings-width { display: none; }
}
.settings-val { flex: 0 0 52px; text-align: right; font-size: .85rem; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.settings-actions { display: flex; align-items: center; gap: 12px; border-top: 1px dashed var(--site-border); padding-top: 12px; }
.settings-btn {
  border: 1px solid var(--site-border);
  background: transparent;
  color: var(--site-text);
  padding: 6px 14px;
  border-radius: 50px;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  white-space: nowrap;
}
.settings-btn:hover { border-color: var(--site-accent); color: var(--site-accent); }
.settings-note { font-size: .75rem; color: var(--site-muted); line-height: 1.5; }

/* ---------------- 标签页 ---------------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 12px 0 46px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 50px;
  border: 1px solid var(--site-border);
  background: var(--card-bg, #fff);
  color: var(--site-text);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), border-color .2s ease, box-shadow .2s ease;
}
.tag-chip:hover { transform: translateY(-3px); border-color: var(--site-accent); box-shadow: var(--site-shadow); }
.tag-chip .tag { color: var(--site-accent); background: transparent; font-weight: 700; padding: 0; }
.tag-chip em { font-style: normal; font-size: .75rem; color: var(--site-muted); background: color-mix(in srgb, var(--site-accent) 14%, transparent); border-radius: 50px; padding: 0 9px; }

@media (max-width: 640px) {
  .search-overlay { padding: 8vh 10px 16px; }
  .search-box { max-height: 84vh; }
}

/* ---------------- TOC sidebar ---------------- */
.typora-export-sidebar {
  position: sticky !important;
  top: 20px;
  width: var(--toc-width, 340px);
  flex: 0 0 var(--toc-width, 340px);
  margin: 0 !important;
  height: auto;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 40;   /* 低于导航栏 z-index:50，即使重叠导航栏也在上层 */
  /* 毛玻璃面板 */
  /* 侧栏毛玻璃底：优先用 --glass-bg-color（可在配色工坊调整），未定义时回退到页面底色 82% */
  background: var(--glass-bg-color, color-mix(in srgb, var(--bg-color, var(--page-bg, #fffdf7)) 82%, transparent)) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--site-border) !important;
  border-radius: 14px;
  box-shadow: var(--site-shadow);
}
/* 暗色系：侧栏霓虹光边（静止发光、与正文区分；悬停增强，平滑过渡） */
body[data-theme-series="neon"] .typora-export-sidebar {
  border: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent) !important;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--primary-color) 12%, transparent),
    0 14px 42px rgba(0, 0, 0, .26);
  transition: border-color .3s ease, box-shadow .3s ease;
}
body[data-theme-series="neon"] .typora-export-sidebar:hover {
  border-color: color-mix(in srgb, var(--primary-color) 85%, transparent) !important;
  box-shadow:
    0 0 26px color-mix(in srgb, var(--primary-color) 48%, transparent),
    0 16px 48px rgba(0, 0, 0, .42);
}
/* 暗色系目录文字优化：基础色随主题（暗色取 --text-color 提亮，亮色保持引擎默认 #555） */
.typora-export-sidebar {
  color: var(--text-color, #555) !important;
}
.typora-export-sidebar .outline-h1 > .outline-item {
  color: var(--primary-color, var(--element-color-deep, #11aa63)) !important;
}
.typora-export-sidebar .outline-h2 > .outline-item {
  color: var(--text-color, #555) !important;
}
.typora-export-sidebar .outline-h3 > .outline-item,
.typora-export-sidebar .outline-h4 > .outline-item,
.typora-export-sidebar .outline-h5 > .outline-item,
.typora-export-sidebar .outline-h6 > .outline-item {
  font-size: 12.5px !important;
  color: var(--text-color, #555) !important;   /* 与 H2 同色，颜色仅分两档 */
}

/* Fixed title bar: content scrolls BELOW it, never covers it */
.outline-title {
  flex: 0 0 auto;
  padding: 15px 22px 11px;
  font-size: 20px;
  font-weight: 700;
  /* 亮色用 element-color-deep（主题色）；暗色未定义该变量时回退 primary-color（暗色主题色） */
  color: var(--element-color-deep, var(--primary-color, #11aa63));
  letter-spacing: 3px;
  background: color-mix(in srgb, var(--bg-color, var(--page-bg, #fffdf7)) 85%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--site-border);
  z-index: 5;
}

.typora-export-sidebar .outline-content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  padding-top: 0 !important;
  padding-right: 12px !important;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.typora-export-sidebar .outline-content::-webkit-scrollbar { display: none; }

/* Disable engine's pseudo-element titles (we use a real element now) */
.typora-export-sidebar .outline-content::before { content: none !important; }
.typora-export-sidebar::before { content: none !important; }

/* Tree structure: nested ul indentation */
.typora-export-sidebar .outline-h2,
.typora-export-sidebar .outline-h3,
.typora-export-sidebar .outline-h4,
.typora-export-sidebar .outline-h5,
.typora-export-sidebar .outline-h6 {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: none !important;
}
.typora-export-sidebar .outline-item-wrapper { list-style: none; }
.typora-export-sidebar .outline-children {
  list-style: none;
  margin: 0;
  padding-left: 24px;   /* 加大层级缩进，增强层次感 */
  border-left: 1px solid var(--site-border);
}
.typora-export-sidebar .outline-item {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  padding: 2px 0;
}
.typora-export-sidebar .outline-h1 > .outline-item {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.typora-export-sidebar .outline-label {
  flex: 1 1 auto !important;
  min-width: 0;
  line-height: 1.5;
}
.typora-export-sidebar .outline-expander {
  color: var(--site-muted);
  font-size: 11px;
}
/* 恢复展开箭头（原引擎规则限定在 .typora-export 下，这里直接作用于侧栏） */
.typora-export-sidebar .outline-expander::before {
  content: "\25B8";
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: var(--site-muted);
  display: inline-block;
  transition: transform .2s;
}
.typora-export-sidebar .outline-item-open > .outline-item > .outline-expander::before {
  content: "\25BE";
  color: var(--element-color-deep);
}
.typora-export-sidebar .outline-item-single .outline-expander::before {
  content: "\25B8";
  color: var(--site-muted);
}

/* ---------------- Code blocks (Typora CodeMirror structure) ---------------- */
pre.md-fences {
  max-width: 100%;
}
/* 修复双倍行距：<pre> 默认 white-space:pre 会让行 div 之间的 \n 文本节点渲染成空行，
   这里把容器改为 normal（每行 .CodeMirror-line 自身仍是 pre，保留缩进/格式） */
pre.md-fences:not([lang=mermaid]) {
  white-space: normal;
  border-radius: 8px;
  overflow: hidden;
}
pre.md-fences .cm-s-inner.CodeMirror {
  font-size: 15px;
  line-height: 1.6;              /* 修复后真实行距 = 行高，1.6 为常见网页代码块行距 */
  overflow-x: auto;
  padding: 12px 12px 14px;       /* 上/左右/下：舒展且代码不贴边 */
  border-radius: 0 0 7px 7px;    /* 内圆角 = 外圆角(8px) - 边框(1px) */
}
pre.md-fences .CodeMirror-code { display: block; }
pre.md-fences .CodeMirror-line {
  display: block;
  white-space: pre;
  padding: 0 8px;
}

/* ---------------- Images ---------------- */
#write img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  margin: 6px 0;
}
#write p > img:only-child {
  display: block;
  margin: 1.2em auto;
}

/* ---------------- Tables ---------------- */
.table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border-radius: 10px;
}
.table-wrap table { margin: 0; }

/* ---------------- Math (MathJax SVG, 与 Typora 一致) ---------------- */
.math-block {
  margin: 1.2em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
}
mjx-container {
  display: inline-block;
  /* baseline：让 MathJax 为每个 svg 计算的内联 vertical-align 生效，
     使公式基线与正文文字基线对齐（修复行内公式整体偏下） */
  vertical-align: baseline;
  /* 在基线对齐基础上再轻微上移，观感更居中 */
  position: relative;
  top: -0.1em;
}
mjx-container[display="true"] {
  display: block;
  width: max-content;
  margin: 0 auto;          /* 行间公式水平居中；超出宽度时自动退化为左对齐可横向滚动 */
}
.math-error {
  color: #e74c3c;
  font-family: CascadiaCode, Consolas, monospace;
  font-size: .9em;
}

/* ---------------- Back-to-top / mobile TOC toggle ---------------- */
.back-top, .toc-toggle {
  position: fixed;
  z-index: 70;
  border: 1px solid var(--site-border);
  background: var(--card-bg, #fff);
  color: var(--site-text);
  box-shadow: var(--site-shadow);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.back-top {
  right: 22px;
  bottom: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.15rem;
  opacity: 0;
  pointer-events: none;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover, .toc-toggle:hover { background: var(--site-accent); color: #fff; }
.toc-toggle {
  right: 22px;
  bottom: 80px;
  height: 44px;
  padding: 0 16px;
  border-radius: 50px;
  font-size: .92rem;
  display: none;
}
/* 仅带目录的页面显示“目录”按钮 */
body.has-toc .toc-toggle { display: flex; }

/* Mobile: TOC becomes a bottom sheet (slide up, full width) */
@media (max-width: 1200px) {
  .typora-export-sidebar {
    position: fixed !important;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;   /* 与 left/right 配合真正铺满视口（width:100% 会忽略 right） */
    height: auto;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    display: flex !important;
    flex-direction: column;
    z-index: 80;
    margin: 0 !important;
    transform: translateY(105%);
    transition: transform .3s ease;
  }
  .typora-export-sidebar.open { transform: translateY(0); }
  /* 顶部抓手横条 */
  .typora-export-sidebar::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--site-muted) 40%, transparent);
    pointer-events: none;
  }
  .typora-export-sidebar .outline-title {
    padding-top: 18px; /* 给抓手留出空间 */
  }
  .site-post { padding: 0 22px 60px; }
  .post-article { max-width: none; }
}

/* 亮色主题：移动端抽屉用近实色浅底，避免深色遮罩透过玻璃使内容区变暗（与桌面端浅色观感一致） */
@media (max-width: 1200px) {
  body[data-theme-series="color"] .typora-export-sidebar {
    background: color-mix(in srgb, var(--page-bg, #fffdf7) 94%, transparent) !important;
  }
}

/* 底部抽屉遮罩（移动端打开时显示，点击遮罩关闭抽屉） */
.toc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;   /* 低于抽屉(z-index:80)，高于正文 */
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.toc-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}


/* ---------------- Footer ---------------- */
.site-footer {
  text-align: center;
  padding: 22px 16px;
  color: var(--site-muted);
  font-size: .8rem;
  border-top: 1px solid var(--site-border);
}
.site-footer code { font-family: CascadiaCode, Consolas, monospace; font-size: .78rem; }

/* ---------------- Responsive ---------------- */
@media (max-width: 760px) {
  .site-header-inner { padding: 10px 14px; gap: 10px; }
  .theme-panel { width: 288px; right: -8px; }
  .post-list { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.7rem; }
  .post-head h1 { font-size: 1.55rem; }
  .back-top { right: 14px; bottom: 18px; }
  .toc-toggle {
    right: 0;
    bottom: 84px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 12px 0 0 12px;
    font-size: 1.05rem;
    opacity: .6;
    background: color-mix(in srgb, var(--card-bg, #fff) 60%, transparent);
    border-color: color-mix(in srgb, var(--site-border) 60%, transparent);
    box-shadow: none;
    transition: opacity .2s ease, background .2s ease, border-color .2s ease;
  }
  .toc-toggle:hover { opacity: .85; }
  .toc-label { display: none; }
}

/* ---------------- Code copy button ---------------- */
.md-fences:not([lang=mermaid])::before {
  padding-right: 12px;
  /* 通用选择器 * 不作用于伪元素，这里显式 border-box，
     使 width:100% 包含 padding，顶栏右缘与正文对齐 */
  box-sizing: border-box;
  border-radius: 7px 7px 0 0;   /* 与代码块整体圆角(8px)嵌套对齐 */
  line-height: 32px;            /* 语言文本在 32px 顶栏内垂直居中，与复制按钮对齐 */
  transition: color .2s ease;
}
/* 悬停时：语言标签淡出，同一位置显示“复制”按钮 */
pre.md-fences:hover::before { color: transparent !important; }
.code-copy {
  position: absolute;
  top: 3px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg, #fff) 88%, transparent);
  color: var(--site-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, color .2s ease;
}
pre.md-fences:hover .code-copy { opacity: 1; }
.code-copy:hover { color: var(--site-accent); }
.code-copy.copied { color: var(--site-accent); }

/* ---------------- TOC collapse ---------------- */
.outline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.outline-collapse {
  border: 1px solid var(--site-border);
  background: transparent;
  color: var(--site-muted);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
.outline-collapse:hover { color: var(--site-accent); border-color: var(--site-accent); }

/* 目录宽度拖拽手柄（桌面端） */
.toc-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
}
.toc-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--site-accent) 16%, transparent);
  box-shadow: 0 7px 0 0 color-mix(in srgb, var(--site-accent) 16%, transparent),
              0 -7px 0 0 color-mix(in srgb, var(--site-accent) 16%, transparent);
  transform: translateY(-50%);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.toc-resizer:hover::after {
  background: color-mix(in srgb, var(--site-accent) 70%, transparent);
  box-shadow: 0 7px 0 0 color-mix(in srgb, var(--site-accent) 70%, transparent),
              0 -7px 0 0 color-mix(in srgb, var(--site-accent) 70%, transparent);
  transform: translateY(-50%) scale(1.12);
}
.toc-resizer.dragging::after {
  background: var(--site-accent);
  box-shadow: 0 7px 0 0 var(--site-accent),
              0 -7px 0 0 var(--site-accent),
              0 0 10px color-mix(in srgb, var(--site-accent) 45%, transparent);
  transform: translateY(-50%) scale(1.12);
}
body[data-theme-series="neon"] .toc-resizer:hover::after {
  background: color-mix(in srgb, var(--primary-color) 75%, transparent);
  box-shadow: 0 7px 0 0 color-mix(in srgb, var(--primary-color) 75%, transparent),
              0 -7px 0 0 color-mix(in srgb, var(--primary-color) 75%, transparent);
  transform: translateY(-50%) scale(1.12);
}
body[data-theme-series="neon"] .toc-resizer.dragging::after {
  background: var(--primary-color);
  box-shadow: 0 7px 0 0 var(--primary-color),
              0 -7px 0 0 var(--primary-color),
              0 0 12px color-mix(in srgb, var(--primary-color) 55%, transparent);
  transform: translateY(-50%) scale(1.12);
}
.typora-export-sidebar.resizing { transition: none; }
/* 拖拽中：侧栏右缘边界加深，给实时反馈 */
.typora-export-sidebar.resizing {
  border-right-color: color-mix(in srgb, var(--site-accent) 50%, transparent) !important;
}
body[data-theme-series="neon"] .typora-export-sidebar.resizing {
  border-right-color: color-mix(in srgb, var(--primary-color) 72%, transparent) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary-color) 22%, transparent), 0 14px 42px rgba(0, 0, 0, .26);
}
@media (max-width: 1200px) {
  .toc-resizer { display: none; }
}

.typora-export-sidebar {
  transition: width .3s ease, flex-basis .3s ease, opacity .3s ease, transform .3s ease;
}

@media (min-width: 1201px) {
  .site-post { transition: gap .3s ease; }
  body.toc-collapsed .site-post { gap: 0; }
  body.toc-collapsed .typora-export-sidebar {
    width: 0;
    flex-basis: 0;
    opacity: 0;
    overflow: hidden;
    border: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-30px);
  }
  body.toc-collapsed .typora-export-sidebar .outline-title { display: none; }
}

/* Print */
@media print {
  .site-header, .site-footer, .typora-export-sidebar, .back-top, .toc-toggle, .reading-progress, .search-overlay, .lightbox { display: none !important; }
  body { background: #fff !important; }
}

/* ---------------- Post prev/next nav ---------------- */
.read-meta { color: var(--site-muted); }
.post-nav {
  display: flex;
  gap: 14px;
  margin: 46px 0 8px;
  padding-top: 22px;
  border-top: 1px solid var(--site-border);
}
.post-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--site-border) !important;
  border-radius: 14px;
  background: var(--card-bg, #fff);
  text-decoration: none;
  color: inherit;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease;
}
.post-nav-item:hover { transform: translateY(-2px); box-shadow: var(--site-shadow); border-color: var(--site-accent); }
.post-nav-empty { visibility: hidden; }
.post-nav-prev { align-items: flex-start; text-align: left; }
.post-nav-next { align-items: flex-end; text-align: right; }
.post-nav-item .nav-dir { font-size: .75rem; color: var(--site-muted); letter-spacing: 1px; }
.post-nav-item .nav-title {
  font-size: .95rem;
  color: var(--site-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.post-nav-item:hover .nav-title { color: var(--site-accent); }

/* 列表文字颜色与正文段落一致：
   亮色取 #333（段落色），暗色取 --text-color-secondary（段落色），避免列表在暗色下发白 */
#write li {
  color: var(--text-color-secondary, #333);
}
/* ---------------- Task list checkbox ---------------- */
#write li.task-list-item {
  list-style: none;
  padding-left: 30px;
}

/* ---------------- List item connector (align with Typora export) ----------------
   让普通 li 成为定位元素，使引擎的 #write li::before 连接线键定到每个列表项而非 #write，
   避免线漂在文章左侧（与 Typora 导出一致） */
#write li { position: relative; }

/* =============== 手机端优化 =============== */

/* 宽公式：允许在公式框内横向滚动，避免被截断 */
#write mjx-container[display="true"] { max-width: 100%; overflow-x: auto; }
/* 公式过长横向滚动时，隐藏滚动条（保留触摸滑动；仅移动端/触摸设备） */
@media (hover: none), (max-width: 640px) {
  #write mjx-container[data-math-display="true"] {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #write mjx-container[data-math-display="true"]::-webkit-scrollbar { display: none; }
  /* 代码块横向滚动时同样隐藏滚动条（保留触摸滑动） */
  pre.md-fences .cm-s-inner.CodeMirror {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  pre.md-fences .cm-s-inner.CodeMirror::-webkit-scrollbar { display: none; }
}

/* 头部两行结构：第一行品牌+按钮，第二行导航单行横向滚动 */
@media (max-width: 900px) {
  .site-header-inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .site-brand { order: 1; }
  .theme-area { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 0 0 auto; }
}

/* 手机排版：行高/字号/边距/各模块缩放 */

@media (max-width: 640px) {
  /* 正文：8px 边距 + 15px 字号，增加每行字数 */
  #write { line-height: var(--read-line-height, 1.6); letter-spacing: 0.5px; font-size: calc(15px * var(--read-font-scale, 1)); padding: var(--read-margin, 2px); }
  #write p, #write li, #write blockquote, #write td, #write th { font-size: 1em; line-height: inherit; }
  #write h1 { font-size: 1.5rem; }
  #write h2 { font-size: 1.25rem; }
  #write h3 { font-size: 1.15rem; }
  .md-fences .CodeMirror-line { font-size: 14px; }
  #write table { font-size: 14px; display: block; overflow-x: auto; }
  #write pre { overflow-x: auto; }
  .post-head h1 { font-size: 1.45rem; margin-top: 26px; }
  .site-post { padding: 0 12px 44px; gap: 0; }

  /* 列表/卡片页容器 */
  .home-wrap { padding: 12px 12px 44px; }
  .category-wrap, .archive-wrap { padding: 0 12px 44px; }
  .hero { padding: 20px 6px; }
  .hero h1 { font-size: 1.5rem; }

  /* 首页 */
  .home-hero { padding: 8px 4px 24px; }
  .home-section { margin-top: 26px; }
  .home-section-title { font-size: 1.1rem; }
  .home-sub { font-size: .875rem; }
  .home-stats { font-size: .82rem; }
  .post-list { gap: 14px; }
  .post-card { padding: 15px 16px 14px; }
  .post-card h2 { font-size: 1.05rem; }
  .post-card .excerpt { font-size: .84rem; }
  .cat-cards { gap: 10px; }
  .cat-card { padding: 12px; }
  .tag-cloud { padding: 10px 0 36px; gap: 8px; }

  /* 分类索引 */
  .cat-index-grid { gap: 12px; }
  .cat-index-card { padding: 14px; }
  .cat-index-desc { font-size: .84rem; }

  /* 分类页介绍 */
  .cat-intro { font-size: .9rem; }

  /* 文章汇总卡片 */
  .arch-item { padding: 10px 12px; }
  .arch-title { font-size: .9rem; }
  .arch-meta { font-size: .74rem; }
}

/* ---------------- 公式复制 ---------------- */
.math-block { position: relative; }
.math-copy {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
  border: 1px solid var(--site-border);
  background: var(--card-bg, #fff);
  color: var(--site-muted);
  font-family: inherit;
  font-size: .75rem;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}
.math-block:hover .math-copy { opacity: 1; }
.math-copy:hover { color: var(--site-accent); border-color: var(--site-accent); }
@media (hover: none) {
  .math-copy { display: none; }
}
.math-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(8px);
  background: var(--site-text);
  color: var(--page-bg, #fff);
  font-size: .85rem;
  padding: 8px 18px;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 300;
}
.math-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---------------- π 悬浮按钮 + 极简微型面板 ---------------- */
.nav-float {
  position: fixed;
  top: 14px;
  left: auto;
  right: 14px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--site-border);
  background: color-mix(in srgb, var(--card-bg, #fff) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--site-accent);
  font-size: 1.35rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-float:hover {
  border: 1.5px solid var(--site-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 14px color-mix(in srgb, var(--site-accent) 30%, transparent), 0 6px 20px rgba(0, 0, 0, .14);
}
body[data-theme-series="neon"] .nav-float {
  border: 1.5px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary-color) 22%, transparent), 0 6px 20px rgba(0, 0, 0, .2);
}
body[data-theme-series="neon"] .nav-float:hover,
body[data-theme-series="neon"] .nav-float:active {
  border-color: color-mix(in srgb, var(--primary-color) 85%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary-color) 55%, transparent), 0 8px 26px rgba(0, 0, 0, .32);
  transform: translateY(-2px);
}

/* 移动端：π 按钮贴边半藏（位置由 JS left/top 管理，桌面端保持 right 定位） */
@media (max-width: 1200px) {
  .nav-float {
    right: auto;
    will-change: left, top;
    transition: left .25s ease, top .25s ease, opacity .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  /* 半藏：淡化、去阴影，不干扰正文阅读 */
  .nav-float.docked {
    opacity: .5;
    background: color-mix(in srgb, var(--card-bg, #fff) 50%, transparent);
    border-color: color-mix(in srgb, var(--site-border) 60%, transparent);
    box-shadow: none;
  }
  .nav-float.docked:hover { opacity: .75; }
  /* 全貌：恢复清晰醒目 */
  .nav-float.expanded {
    opacity: 1;
    background: color-mix(in srgb, var(--card-bg, #fff) 82%, transparent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  }
}

.mini-nav {
  position: fixed;
  top: 66px;
  left: 14px;
  z-index: 110;
  width: min(180px, 78vw);
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.mini-nav[hidden] { display: none; }
body[data-theme-series="neon"] .mini-nav {
  border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.mini-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--site-accent);
  text-decoration: none;
  letter-spacing: 1px;
}
.mini-brand .brand-icon { width: 20px; height: 20px; }
.mini-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--site-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 8px;
}
.mini-close:hover { color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 10%, transparent); }

.mini-links { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; }
.mini-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  color: var(--site-text);
  text-decoration: none;
  font-size: .98rem;
  transition: background .15s ease, color .15s ease;
}
.mini-link:hover { background: color-mix(in srgb, var(--site-accent) 10%, transparent); color: var(--site-accent); }
.mini-link.active { background: color-mix(in srgb, var(--site-accent) 14%, transparent); color: var(--site-accent); font-weight: 700; }
.mini-icon { width: 18px; text-align: center; font-size: .98rem; }

.mini-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px dashed var(--site-border);
}
.mini-actions .theme-btn { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 1rem; }

/* 面板内主题选择小视图 */
.mini-theme { padding: 10px 12px 14px; }
.mini-theme-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mini-back {
  border: none;
  background: transparent;
  color: var(--site-accent);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px 4px 2px;
  border-radius: 8px;
}
.mini-back:hover { background: color-mix(in srgb, var(--site-accent) 10%, transparent); }
.mini-theme-title { font-weight: 700; color: var(--site-text); font-size: .95rem; }
.mini-theme .theme-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-theme .theme-opt { padding: 6px 2px 5px; gap: 4px; font-size: .72rem; }
.mini-theme .theme-opt .swatch { width: 15px; height: 15px; }
.mini-theme .theme-opt.active { border-color: var(--site-accent); }
.mini-theme .mini-custom {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ---------------- 面包屑 ---------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
  font-size: .82rem;
  color: var(--site-muted);
  /* 固定在页面顶部：滚动时正文从下方经过，极淡页面底色遮挡不穿字（无分割线） */
  position: sticky;
  top: 0;
  z-index: 55;
  padding: 12px 0 8px;
  background: color-mix(in srgb, var(--page-bg, #fffdf7) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.breadcrumb a { color: var(--site-muted); text-decoration: none; transition: color .2s ease; }
.breadcrumb a:hover { color: var(--site-accent); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .cur { color: var(--site-text); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }