/* ==========================================================================
   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; }

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: "LXGW WenKai", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-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: 1440px;
  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: 26px; height: 26px;
  flex: none;
}
.site-name { color: var(--site-text); }
.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, .category-wrap { max-width: 1240px; margin: 0 auto; padding: 34px 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: 1080px; margin: 0 auto; padding: 40px 22px 70px; }
.home-hero { text-align: center; padding: 16px 10px 42px; }
.home-avatar {
  width: 104px; height: 104px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.12));
  color: 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-motto { margin: -6px auto 20px; max-width: 560px; color: var(--site-accent); font-size: .95rem; letter-spacing: 1px; }
.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);
  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) {
  .home-title { font-size: 1.625rem; }
  .home-avatar { width: 84px; height: 84px; }
  .cat-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Post page: wide layout (like Typora export) ---------------- */
.site-post {
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px 26px 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: 1080px; }

.post-head { text-align: center; margin-bottom: 8px; }
.post-head h1 { margin: 10px 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: 92px;
}

/* 开关：只关侧栏目录编号（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: 900px; margin: 0 auto; padding: 34px 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);
  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(92vw, 1400px);
  height: 86vh;
  max-height: 86vh;
}
.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%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-viewport img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  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 {
  text-align: center;
  color: #eaeaea;
  font-size: .9rem;
  padding-top: 10px;
  max-width: 100%;
}
@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox-box { height: 84vh; }
}


/* ---------------- 标签页 ---------------- */
.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: 78px;
  width: 340px;
  flex: 0 0 340px;
  margin: 0 !important;
  height: calc(100vh - 100px);
  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);
  box-shadow: var(--site-shadow);
}
/* 暗色系：侧栏霓虹光边（静止发光、与正文区分；悬停增强，平滑过渡） */
body[data-theme-series="neon"] .typora-export-sidebar {
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--primary-color) 20%, transparent),
    0 10px 30px rgba(0, 0, 0, .35);
  transition: border-color .3s ease, box-shadow .3s ease;
}
body[data-theme-series="neon"] .typora-export-sidebar:hover {
  border-color: var(--primary-color);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--primary-color) 45%, transparent),
    0 10px 40px rgba(0, 0, 0, .5);
}
/* 暗色系目录文字优化：基础色随主题（暗色取 --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;
}

/* 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: 6px !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: 14px;
  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.5 !important;
}
.typora-export-sidebar .outline-h1 > .outline-item {
  font-size: 14px !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.md-fences .cm-s-inner.CodeMirror {
  font-size: 14px;
  line-height: 1.3;
  overflow-x: auto;
}
pre.md-fences .CodeMirror-code { display: block; }
pre.md-fences .CodeMirror-line {
  display: block;
  white-space: pre;
  padding: 0 1.2rem;
}

/* ---------------- 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 drawer */
@media (max-width: 1200px) {
  .typora-export-sidebar {
    position: fixed !important;
    top: 100px; /* 移动端导航两行高度约 91px，抽屉从导航下方开始（JS 会按实际高度精确调整） */
    bottom: 12px;
    left: 12px;
    width: 300px;
    height: auto;
    display: flex !important;
    z-index: 80;
    margin: 0 !important;
    transform: translateX(-115%);
    transition: transform .3s ease;
  }
  .typora-export-sidebar.open { transform: translateX(0); }
  .site-post { padding: 22px 18px 60px; }
  .post-article { max-width: none; }
}


/* ---------------- 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; }
.site-footer .site-links { margin-top: 4px; }
.site-footer .site-links a { color: var(--site-muted); text-decoration: none; transition: color .2s ease; }
.site-footer .site-links a:hover { color: var(--site-accent); }

/* ---------------- 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: 14px; bottom: 72px; }
}

/* ---------------- Code copy button ---------------- */
.md-fences:not([lang=mermaid])::before {
  padding-right: 12px;
  /* 通用选择器 * 不作用于伪元素，这里显式 border-box，
     使 width:100% 包含 padding，顶栏右缘与正文对齐 */
  box-sizing: border-box;
  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); }

.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);
  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 (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: 1.9; letter-spacing: 0.5px; font-size: 15px; padding: 8px; }
  #write p, #write li, #write blockquote, #write td, #write th { font-size: 15px; line-height: 1.9; }
  #write h1 { font-size: 1.5rem; }
  #write h2 { font-size: 1.25rem; }
  #write h3 { font-size: 1.15rem; }
  .md-fences .CodeMirror-line { font-size: 15px; }
  #write table { font-size: 14px; display: block; overflow-x: auto; }
  #write pre { overflow-x: auto; }
  .post-head h1 { font-size: 1.45rem; }
  .site-post { padding: 14px 8px 44px; gap: 0; }

  /* 列表/卡片页容器 */
  .home-wrap, .category-wrap, .archive-wrap { padding: 16px 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; }
}


/* ============================================================
   P2 · 研习室外壳：终端栏 / 状态栏 / 掌灯 / 命令面板 / 404
   ============================================================ */
kbd { font-family: CascadiaCode, Consolas, monospace; }

/* ---------- 顶部终端导航栏 ---------- */
/* zhitu-lab 风格终端栏 token（随主题自适应） */
:root {
  --term-bg: var(--bg-color, #f3efe6);
  --term-fg: var(--text-color-secondary, #7a6d5a);
  --term-fg-hover: var(--text-color, #4a3d2e);
  --term-accent: var(--element-color, var(--primary-color, #b8620e));
  --term-border: var(--border-color, #d4c9b6);
}
.term-header {
  background: var(--term-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--term-border);
  user-select: none;
}
.term-header .site-header-inner {
  padding: 3px 22px;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}
.term-header .site-brand {
  flex: none;
  gap: 0;
  padding: 0;
  line-height: 0;
}
.term-header .brand-icon { width: 20px; height: 20px; display: block; opacity: .92; }
.term-bar {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: CascadiaCode, Consolas, monospace;
  font-size: .78rem;
  line-height: 1;
  color: var(--term-fg);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.term-user { color: var(--term-accent); font-weight: 700; }
.term-colon { opacity: .6; }
.term-path {
  color: var(--term-fg);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term-path a { color: var(--term-fg); text-decoration: none; transition: color .2s ease; }
.term-path a:hover { color: var(--term-fg-hover); }
.term-cursor {
  display: inline-block;
  width: 5px;
  height: 12px;
  margin-left: 4px;
  background: var(--term-accent);
  animation: term-blink 1s step-end infinite;
  border-radius: 1px;
}
@keyframes term-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 终端栏内按钮：去边框、hover 提亮（更像 zhitu） */
.term-header .theme-btn {
  height: 24px;
  padding: 0 9px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--term-fg);
  font-size: .8rem;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.term-header .theme-btn:hover { background: color-mix(in srgb, var(--term-fg) 10%, transparent); color: var(--term-fg-hover); }
.term-header .theme-btn kbd {
  font-size: .62rem;
  line-height: 1.3;
  border: 1px solid var(--term-border);
  border-radius: 4px;
  padding: 0 4px;
  background: color-mix(in srgb, var(--term-bg) 60%, var(--term-fg) 12%);
  color: var(--term-fg);
}
.term-header .theme-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
}
.term-header .theme-btn-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--term-accent) 22%, transparent); }

/* ---------- 头部按钮（检索 / 掌灯 / 主题） ---------- */
.theme-btn kbd {
  font-size: .68rem;
  border: 1px solid var(--site-border);
  border-radius: 5px;
  padding: 0 4px;
  background: color-mix(in srgb, var(--page-bg, #fff) 70%, transparent);
  color: var(--site-muted);
}
.lamp-btn { gap: 5px; }
.lamp-icon { width: 15px; height: 15px; flex: none; }

/* ---------- 底部状态栏 ---------- */
.status-bar {
  border-top: 1px solid var(--site-border);
  background: color-mix(in srgb, var(--page-bg, #fff) 70%, transparent);
}
.status-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 7px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.status-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--site-muted);
  text-decoration: none;
  font-size: .8rem;
  transition: color .2s ease;
}
.status-link:hover { color: var(--site-accent); }
.status-link kbd {
  font-size: .68rem;
  border: 1px solid var(--site-border);
  border-radius: 5px;
  padding: 0 5px;
  background: color-mix(in srgb, var(--page-bg, #fff) 70%, transparent);
  color: var(--site-muted);
  transition: color .2s ease, border-color .2s ease;
}
.status-link:hover kbd { color: var(--site-accent); border-color: var(--site-accent); }

/* ---------- 命令面板（终端风） ---------- */
.search-box { border-radius: 12px; }
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 10px;
}
.search-prompt { color: var(--site-accent); font-weight: 700; font-size: 1.1rem; flex: none; }
.search-input-wrap input {
  flex: 1;
  min-width: 0;
  font-family: CascadiaCode, Consolas, monospace;
  font-size: 1rem;
  padding: 9px 12px;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  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: .72rem; color: var(--site-muted); letter-spacing: .5px; }
.search-foot {
  display: flex;
  gap: 16px;
  padding: 8px 18px 10px;
  border-top: 1px solid var(--site-border);
  font-size: .72rem;
  color: var(--site-muted);
}
.search-foot kbd {
  font-size: .68rem;
  border: 1px solid var(--site-border);
  border-radius: 5px;
  padding: 0 5px;
  background: color-mix(in srgb, var(--page-bg, #fff) 70%, transparent);
}
.search-static { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.search-static .ss-icon { color: var(--site-accent); font-size: .95rem; flex: none; }
.search-static .ss-label { color: var(--site-text); font-weight: 500; }
.search-static .ss-href {
  margin-left: auto;
  color: var(--site-muted);
  font-size: .74rem;
  font-family: CascadiaCode, Consolas, monospace;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 404 ---------- */
.notfound {
  max-width: 560px;
  margin: 0 auto;
  padding: 90px 22px 110px;
  text-align: center;
}
.nf-code {
  font-family: CascadiaCode, Consolas, monospace;
  font-size: 6rem;
  margin: 0 0 10px;
  color: var(--site-accent);
  letter-spacing: 4px;
  line-height: 1;
}
.nf-title { font-size: 1.35rem; color: var(--site-text); margin: 0 0 8px; }
.nf-desc { color: var(--site-muted); font-size: .92rem; margin: 0 0 26px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .term-bar { display: none; }
  .term-header .site-header-inner { flex-wrap: wrap; padding: 6px 14px; gap: 8px; }
  .term-header .theme-btn { height: 30px; padding: 0 12px; }
}
@media (max-width: 640px) {
  .status-inner { padding: 6px 12px; gap: 14px; }
  .status-link span { display: none; }
  .theme-btn kbd { display: none; }
  .nf-code { font-size: 4.2rem; }
  .notfound { padding: 60px 14px 80px; }
}
/* ============================================================
   P3 · 书桌首页
   ============================================================ */
.desk-wrap { max-width: 1240px; margin: 0 auto; padding: 26px 22px 70px; }
.desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}
.desk-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: CascadiaCode, Consolas, monospace;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--site-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.sec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--site-accent); flex: none; }
.index-card-list { display: flex; flex-direction: column; gap: 14px; }
.index-card {
  position: relative;
  background: var(--card-bg, #fff);
  border: 1px solid var(--site-border);
  border-radius: 10px;
  padding: 16px 20px 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.index-card::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: color-mix(in srgb, var(--site-accent) 35%, transparent);
  opacity: .6;
}
.index-card:hover { transform: translateY(-2px); box-shadow: var(--site-shadow); }
.index-card.note-a { background: var(--note-a, var(--card-bg)); }
.index-card.note-b { background: var(--note-b, var(--card-bg)); }
.index-card.note-c { background: var(--note-c, var(--card-bg)); }
.index-card.note-d { background: var(--note-d, var(--card-bg)); }
.index-card.note-e { background: var(--note-e, var(--card-bg)); }
.index-card.note-f { background: var(--note-f, var(--card-bg)); }
.index-card.note-g { background: var(--note-g, var(--card-bg)); }
.index-card.note-h { background: var(--note-h, var(--card-bg)); }
.index-card-link { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; }
.index-card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.index-card .badge { align-self: flex-start; position: relative; z-index: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-top time { font-family: CascadiaCode, Consolas, monospace; font-size: .72rem; color: var(--site-muted); }
.card-title { margin: 0; font-size: 1.12rem; color: var(--site-text); line-height: 1.5; transition: color .2s ease; }
.index-card:hover .card-title { color: var(--site-accent); }
.card-excerpt {
  margin: 0;
  color: var(--site-muted);
  font-size: .86rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; position: relative; z-index: 1; }
.card-tag { font-size: .7rem; color: var(--site-muted); background: color-mix(in srgb, var(--site-muted) 10%, transparent); border-radius: 4px; padding: 1px 7px; }
.desk-more { text-align: right; margin-top: 14px; }
.desk-more a { color: var(--site-muted); text-decoration: none; font-size: .82rem; }
.desk-more a:hover { color: var(--site-accent); }
.desk-side { display: flex; flex-direction: column; gap: 18px; }
.desk-side .tag-cloud { padding: 4px 0 0; }
.drawer-list { display: flex; flex-direction: column; gap: 10px; }
.drawer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--card-bg, #fff);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.drawer:hover { transform: translateY(-1px); border-color: var(--site-accent); box-shadow: var(--site-shadow); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-name { font-weight: 600; color: var(--site-text); font-size: .95rem; }
.drawer:hover .drawer-name { color: var(--site-accent); }
.drawer-count {
  font-family: CascadiaCode, Consolas, monospace;
  font-size: .75rem;
  color: var(--site-muted);
  background: color-mix(in srgb, var(--site-accent) 12%, transparent);
  border-radius: 50px;
  padding: 0 8px;
}
.drawer-desc { font-size: .76rem; color: var(--site-muted); line-height: 1.6; }
.moments-strip { margin-top: 40px; }
.moments-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.moment-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  background: var(--note-a, var(--card-bg));
  border: 1px solid var(--site-border);
  border-radius: 8px;
  padding: 14px 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.moment-note:hover { transform: translateY(-2px); border-color: var(--site-accent); box-shadow: var(--site-shadow); }
.moment-note.note-a { background: var(--note-a, var(--card-bg)); }
.moment-note.note-b { background: var(--note-b, var(--card-bg)); }
.moment-note.note-c { background: var(--note-c, var(--card-bg)); }
.moment-note.note-d { background: var(--note-d, var(--card-bg)); }
.moment-note.note-e { background: var(--note-e, var(--card-bg)); }
.moment-note.note-f { background: var(--note-f, var(--card-bg)); }
.moment-note.note-g { background: var(--note-g, var(--card-bg)); }
.moment-note.note-h { background: var(--note-h, var(--card-bg)); }
.moment-note time { font-family: CascadiaCode, Consolas, monospace; font-size: .68rem; color: var(--site-muted); }
.moment-text { margin: 0; font-size: .86rem; color: var(--site-text); line-height: 1.7; }

/* 便签四色（随主题自适应） */
:root {
  /* 便签八色：主题色附近小幅色相摆动（±25° 内）+ 深浅交错，同族又有变化、不成梯度 */
  --note-a: color-mix(in srgb, hsl(from var(--site-accent) calc(h - 25) s l) 10%, var(--card-bg, #fff));
  --note-b: color-mix(in srgb, hsl(from var(--site-accent) calc(h - 12) s l) 16%, var(--card-bg, #fff));
  --note-c: color-mix(in srgb, var(--site-accent) 9%, var(--card-bg, #fff));
  --note-d: color-mix(in srgb, hsl(from var(--site-accent) calc(h + 12) s l) 18%, var(--card-bg, #fff));
  --note-e: color-mix(in srgb, hsl(from var(--site-accent) calc(h + 25) s l) 12%, var(--card-bg, #fff));
  --note-f: color-mix(in srgb, hsl(from var(--site-accent) calc(h - 18) s l) 22%, var(--card-bg, #fff));
  --note-g: color-mix(in srgb, hsl(from var(--site-accent) calc(h + 18) s l) 26%, var(--card-bg, #fff));
  --note-h: color-mix(in srgb, var(--site-accent) 30%, var(--card-bg, #fff));
}

@media (max-width: 900px) {
  .desk-grid { grid-template-columns: 1fr; gap: 30px; }
  .desk-wrap { padding: 18px 14px 50px; }
}
/* 锚点定位避开粘性终端栏 */
#desk { scroll-margin-top: 56px; }