/* =====================================================================
   imxcai —— 豆瓣风格主题（清新绿）
   设计令牌取自 douban.com 的真实计算样式：
     豆绿 #007722 / 浅绿带 #EDF4EC / 链接蓝 #3377AA
     字体 Helvetica, Arial / 13px / 行高 1.62
   换配色只要改 :root 里这几个变量。
   ===================================================================== */

:root {
  --green:        #007722;   /* 豆绿，栏目标题 */
  --green-hi:     #0a5c2a;   /* hover 深一点 */
  --green-band:   #EDF4EC;   /* 顶栏浅绿带 */
  --blue:         #3377AA;   /* 主链接 */
  --blue-hi:      #26618a;
  --teal:         #017A85;   /* 侧栏链接 */
  --text:         #111111;
  --text-2:       #666666;
  --text-3:       #999999;
  --line:         #E0E0E0;
  --line-2:       #EBEBEB;
  --hover-bg:     #F7F9F7;   /* 列表 hover 的极浅绿 */

  --fs:           13px;
  --lh:           1.62;
  --gap:          30px;      /* 块间距，豆瓣是 30px */

  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Courier New", monospace;
}

/* --------------------------------------------------------------- 基础 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--text);
  background: #fff;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--green); text-decoration: underline; }

img { max-width: 100%; height: auto; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }
p { margin: 0 0 .8em; }
hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid var(--line); }
code, pre, kbd { font-family: var(--mono); }

::selection { background: #C8E6C9; }

/* --------------------------------------------------------------- 顶栏
   站名 + 副标题 + 导航 + 搜索，同一条浅绿带里排完。
   导航靠 margin-left:auto 顶到右边，搜索框紧跟在它屁股后头。 */
.brand-band {
  background: var(--green-band);
  border-bottom: 1px solid #E3EEE2;
  /* 搜索候选浮层要盖在页面内容上，所以给顶栏一个层叠上下文 */
  position: relative;
  z-index: 50;
}
.brand-band .wrapper {
  display: flex;
  align-items: center;
  /* 这里不用 gap：换行时会算错间距（浏览器把元素之间的空白文本
     也算成 flex item，尾部凭空多出一个 gap）。横向间距改成各元素自己的
     margin，row-gap 只负责换行后的行间距。 */
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 10px 0;
  /* 全局 .wrapper 有 overflow:hidden（给浮动做清除），会把搜索浮层裁掉 */
  overflow: visible;
}
.brand {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: bold;
  color: var(--green);
  letter-spacing: .5px;
  line-height: 1.2;
}
.brand:hover { color: var(--green-hi); text-decoration: none; }
.brand-tagline {
  flex: 0 1 auto;
  margin-left: 12px;
  font-size: 12px;
  color: #7A8B7C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  /* margin-left:auto 把导航挤到右边，紧挨着搜索框 */
  margin-left: auto;
  font-size: 14px;
}
.nav-links a {
  display: block;
  padding: 3px 11px;
  color: var(--blue);
  border-radius: 2px;
}
.nav-links a:hover {
  color: #fff;
  background: var(--green);
  text-decoration: none;
}
.nav-links a.on { color: var(--green); font-weight: bold; }
.nav-links a.on:hover { color: #fff; background: var(--green); }

/* --------------------------------------------------------------- 搜索 */
/* 搜索框：跟在导航右边（导航自己顶到最右了） */
.srh { position: relative; flex: 0 0 auto; margin-left: 12px; }
.srh-form { display: flex; }
.srh-inp {
  display: block;
  width: 240px;
  height: 30px;
  border: 1px solid var(--line);
  border-right: 0;
  background: #fff;
  /* 圆角只留左边，豆瓣那个输入框 */
  border-radius: 2px 0 0 2px;
  overflow: hidden;
}
.srh-inp input {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 0;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  outline: none;
}
.srh-inp input::placeholder { color: #B4B4B4; }
.srh-bn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 2px 2px 0;
  background: #F6F6F6;
  color: #888;
  cursor: pointer;
}
.srh-bn:hover { background: var(--green-band); color: var(--green); }
.srh-bn svg { display: block; }

/* 搜索结果浮层 */
.srh-panel {
  position: absolute;
  z-index: 60;
  top: 32px;
  right: 0;
  width: 380px;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.srh-panel[hidden] { display: none; }
.srh-hint {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}
.srh-item { display: block; padding: 8px 12px; border-bottom: 1px solid var(--line-2); }
.srh-item:last-child { border-bottom: 0; }
.srh-item:hover, .srh-item.sel { background: var(--hover-bg); text-decoration: none; }
.srh-item .t { display: block; font-size: 13px; color: var(--blue); line-height: 1.5; }
.srh-item:hover .t, .srh-item.sel .t { color: var(--green); text-decoration: none; }
.srh-item .m { display: block; margin-top: 2px; font-size: 11px; color: var(--text-3); }
.srh-item .m span { margin-right: 8px; }
.srh-item mark { background: #FFF3C4; color: inherit; padding: 0 1px; }

/* --------------------------------------------------------------- 布局
   正文外壳用 flex，不用 float。
   float 的侧栏高度只等于自身内容的高度，position:sticky 压根没有活动空间；
   换成 flex 之后 align-items 默认 stretch，侧栏被拉到和正文一样高，
   目录才能一路吸在视口边上。
   overflow 也必须放开：祖先链上只要有 overflow:hidden，侧栏就成了滚动容器，
   吸附直接失效。 */
.wrapper {
  width: 950px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: content-box;
}
.main { flex: 0 0 655px; min-width: 0; }
.sidebar { flex: 0 0 265px; }
.main-full { flex: 1 1 auto; }
.wrapper::after { content: ""; display: block; clear: both; }
.wrapper { overflow: hidden; padding-bottom: 10px; }

.wrapper.content {
  display: flex;
  gap: 30px;
  padding-top: 22px;      /* 和顶栏之间留一段呼吸空间 */
  padding-bottom: 10px;
  overflow: visible;
}
/* flex 容器里的 clearfix 伪元素会变成真正的 flex item，凭空多出一个 gap */
.wrapper.content::after { display: none; }

/* --------------------------------------------------------------- 栏目标题
   豆瓣的招牌：豆绿 15px + 一串 · · · · · · 点线 + 右端蓝色（更多） */
.mod { margin: 0 0 var(--gap); }
.mod-title {
  display: flex;
  align-items: baseline;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--green);
  line-height: 1.5;
  padding-bottom: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid transparent;
}
.mod-title .mt-text { flex: 0 0 auto; }
.mod-title .mt-dots {
  flex: 1 1 auto;
  margin: 0 6px;
  font-size: 11px;
  color: #C8D8C8;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
}
.mod-title .mt-pl { flex: 0 0 auto; font-size: 12px; }
.mod-title .mt-pl a { color: var(--blue); }
.mod-title a { color: inherit; }
.mod-title .mt-pl a:hover { color: var(--green); }

.empty { color: var(--text-3); padding: 10px 0; }

/* --------------------------------------------------------------- 首页文章流
   照搬豆瓣的 doulist-item：灰 meta 行 / 蓝色标题 / 灰摘要 / 右下统计 */
.topic {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--line-2);
}
.topic:first-child { padding-top: 4px; }
.topic:last-child { border-bottom: 0; }

.topic-meta {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.topic-meta .date { color: var(--text-2); }
.topic-meta .sep { margin: 0 5px; color: #CCC; }
.topic-meta .cats a { color: var(--teal); }
.topic-meta .cats a:hover { color: var(--green); }

.topic-title {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.45;
  margin: 3px 0 5px;
}
.topic-title a { color: var(--blue); }
.topic-title a:hover { color: var(--green); text-decoration: none; }

.topic-abstract {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.62;
  margin: 0 0 7px;
  /* 两行截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-foot {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
}
.topic-foot .reading { color: var(--text-3); }
.topic-foot .tags { margin-left: 12px; }
.topic-foot .tags a {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  color: #7A8B7C;
  background: var(--green-band);
  border-radius: 2px;
  font-size: 11px;
  line-height: 17px;
}
.topic-foot .tags a:hover { color: #fff; background: var(--green); text-decoration: none; }
.topic-foot .more { margin-left: auto; color: var(--blue); }
.topic-foot .more span { font-size: 15px; line-height: 1; vertical-align: -1px; }

/* --------------------------------------------------------------- 紧凑列表
   归档 / 分类 / 标签页：绿色序号 + 标题 + 右侧灰字 */
.post-list { font-size: 13px; }
.post-list li {
  padding: 6px 0 6px 2px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
}
.post-list li::before {
  /* 豆瓣那种绿色序号 */
  content: counter(pl-li, decimal-leading-zero);
  counter-increment: pl-li;
  position: absolute;
  left: -22px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #BFD8C0;
  line-height: 21px;
}
.post-list { counter-reset: pl-li; padding-left: 24px; }
.post-list li:hover { background: var(--hover-bg); }
.post-list li:hover::before { color: var(--green); }
.post-list .t { color: var(--blue); }
.post-list li:hover .t { color: var(--green); text-decoration: none; }
.post-list .meta { float: right; font-size: 12px; color: var(--text-3); }
.post-list .meta .cat { color: var(--teal); }
.post-list .meta .sep { margin: 0 4px; color: #CCC; }

/* 归档页年份分组 */
.year-group { margin-bottom: 24px; }
.year-head {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--green);
  padding-bottom: 3px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.year-head a { color: var(--green); }
.year-head a:hover { color: var(--green-hi); }
.year-head .year-num { float: right; font-size: 12px; color: var(--text-3); }
.archive-summary { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
.archive-summary span { color: var(--green); font-weight: bold; }

.sub-cats { margin-bottom: 14px; font-size: 12px; }
.sub-cats .label { color: var(--text-3); margin-right: 6px; }
.sub-cats a {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 1px 7px;
  color: var(--teal);
  background: var(--green-band);
  border-radius: 2px;
}
.sub-cats a:hover { color: #fff; background: var(--green); text-decoration: none; }
.sub-cats sup { font-size: 9px; opacity: .7; margin-left: 2px; }
.cat-parent { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }

/* --------------------------------------------------------------- 文章页 */
.crumbs {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.crumbs a { color: var(--teal); }
.crumbs .sep { margin: 0 5px; color: #CCC; }

.post-title {
  font-size: 21px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 10px;
}

.post-meta {
  font-size: 12px;
  color: var(--text-3);
  padding: 7px 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.post-meta .item { margin-right: 14px; white-space: nowrap; }
.post-meta .item:last-child { margin-right: 0; }
.post-meta .updated { color: var(--text-3); }
.post-meta .updated::before {
  content: "·";
  margin-right: 14px;
  color: #CCC;
}

.post-content { font-size: 13px; line-height: 1.85; word-wrap: break-word; }
.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 {
  font-weight: bold;
  line-height: 1.5;
  color: var(--text);
  margin: 1.5em 0 .6em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--line-2);
}
.post-content h1 { font-size: 18px; }
.post-content h2 { font-size: 16px; }
.post-content h3 { font-size: 15px; }
.post-content h4 { font-size: 14px; }
.post-content h5, .post-content h6 { font-size: 13px; }
.post-content > h1:first-child, .post-content > h2:first-child { margin-top: 0; }

.post-content p { margin: 0 0 1.1em; }
.post-content ul, .post-content ol { margin: 0 0 1.1em; padding-left: 2em; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: .35em; }
.post-content li > ul, .post-content li > ol { margin: .35em 0 0; }

.post-content a { color: var(--blue); border-bottom: 1px solid #CFE0EF; }
.post-content a:hover { color: var(--green); border-bottom-color: var(--green); text-decoration: none; }

.post-content blockquote {
  margin: 1.2em 0;
  padding: .7em 1em;
  color: var(--text-2);
  background: var(--hover-bg);
  border-left: 3px solid #A8C9A8;
}
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content img {
  display: block;
  max-width: 100%;
  margin: 1.2em auto;
  border: 1px solid var(--line);
  cursor: zoom-in;
  background: #FAFAFA;
}
.post-content img.lazy { min-height: 40px; background: #F4F4F4; }

.post-content table {
  width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
  font-size: 12px;
}
.post-content th, .post-content td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.post-content th { background: var(--green-band); font-weight: bold; }
.post-content tbody tr:nth-child(even) td { background: #FAFAFA; }

/* --------------------------------------------------------------- 代码
   全站是豆绿 + 浅绿带，代码也顺着这个调子走：
   浅绿底 + 左边一道豆绿竖条，行内代码深绿字配浅绿底。 */

/* 行内代码 */
.post-content code {
  padding: 1px 5px;
  font-size: 12px;
  color: #0A5C2A;          /* 深绿，13px 正文里也读得清 */
  background: #E9F2E7;     /* 浅绿带再压一档 */
  border-radius: 3px;
}

/* 代码块外框。
   figure.highlight 是带行号的（站点开了 highlight.line_number），
   裸 pre 是缩进代码块，两者一起框。 */
.post-content figure.highlight,
.post-content pre {
  margin: 1.2em 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.65;
  color: #26332B;          /* 代码正文也偏一点绿 */
  background: #F5FAF4;
  border: 1px solid #D9EAD6;
  border-left: 3px solid var(--green);
  border-radius: 3px;
}
/* 外框已经在 figure 上了，里面这两个 pre 不要再套一层 */
.post-content figure.highlight pre {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.post-content pre code {
  padding: 0;
  font-size: 12px;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}

/* 词法配色，绿系为主：豆绿关键字 / 青绿字符串 / 深金数字 / 深绿类型。
   注意：站点 _config.yml 里 highlight.hljs: false，Hexo 输出的 token class
   是「去掉前缀」的（class="keyword" 而不是 class="hljs-keyword"），
   所以这里必须写不带前缀的选择器 —— 写 .hljs-keyword 是不生效的。 */
.post-content .highlight .comment,
.post-content .highlight .quote { color: #6F8172; font-style: italic; }
.post-content .highlight .keyword,
.post-content .highlight .selector-tag,
.post-content .highlight .literal,
.post-content .highlight .doctag { color: #007722; font-weight: bold; }
.post-content .highlight .string,
.post-content .highlight .regexp,
.post-content .highlight .addition { color: #0C6E59; }
.post-content .highlight .number,
.post-content .highlight .symbol,
.post-content .highlight .bullet { color: #8A5E00; }
.post-content .highlight .title,
.post-content .highlight .section,
.post-content .highlight .name,
.post-content .highlight .selector-id { color: #0A5C2A; font-weight: bold; }
.post-content .highlight .attr,
.post-content .highlight .attribute,
.post-content .highlight .variable,
.post-content .highlight .template-variable { color: #6E5F33; }
.post-content .highlight .type,
.post-content .highlight .built_in,
.post-content .highlight .class .title { color: #43702A; }
.post-content .highlight .operator,
.post-content .highlight .punctuation { color: #5A7560; }
.post-content .highlight .meta { color: #6F8172; }
.post-content .highlight .deletion { color: #C0392B; }
.post-content .highlight .emphasis { font-style: italic; }
.post-content .highlight .strong { font-weight: bold; }
.post-content .highlight .link { text-decoration: underline; }
/* 行号：hexo 的 highlight.js 渲染成 <table><td class="gutter"> + <td class="code">
   两列并排，行号列不参与换行，所以移动端也不会挤到代码上。 */
.highlight { overflow-x: auto; }
.highlight table { border-collapse: collapse; width: 100%; margin: 0; }
.highlight td { border: 0; padding: 0; vertical-align: top; }
.highlight td.gutter {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  user-select: none;
  /* 行号列给一层更深的浅绿，和代码区分开 */
  background: #EDF5EB;
  border-right: 1px solid #D9EAD6;
  padding-right: 10px;
}
.highlight td.gutter pre { margin: 0; border: 0; background: transparent; }
.highlight td.gutter .line { color: #66855F; }
.highlight td.code pre { margin: 0; border: 0; background: transparent; }
.highlight td.code .line { display: inline-block; width: 100%; }

.post-tags {
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.post-tags .label { color: var(--text-3); margin-right: 6px; }
.post-tags a {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 1px 8px;
  color: var(--teal);
  background: var(--green-band);
  border-radius: 2px;
}
.post-tags a:hover { color: #fff; background: var(--green); text-decoration: none; }

.post-copyright {
  margin: 20px 0 0;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--hover-bg);
  border-left: 3px solid #A8C9A8;
}

/* 上一篇 / 下一篇 */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 var(--gap);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.post-nav .pn { width: 48%; font-size: 13px; }
.post-nav .next { text-align: right; }
.post-nav .pn-label {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 2px;
}
.post-nav .pn a {
  display: block;
  color: var(--blue);
  line-height: 1.5;
}
.post-nav .pn a:hover { color: var(--green); text-decoration: none; }

/* --------------------------------------------------------------- 侧栏 */
.mod-title + * { }

.cat-list { font-size: 13px; }
.cat-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line-2);
  position: relative;
}
.cat-list li:last-child { border-bottom: 0; }
.cat-list ul { padding-left: 16px; }
.cat-list ul li { border-bottom: 0; padding: 2px 0; }
.cat-list a { color: var(--teal); }
.cat-list a:hover { color: var(--green); text-decoration: none; }
.cat-list li.on > a { color: var(--green); font-weight: bold; }
.cat-list .count {
  float: right;
  font-size: 11px;
  color: #B4B4B4;
  font-family: Arial, Helvetica, sans-serif;
}

.recent-list { font-size: 13px; }
.recent-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.recent-list li:last-child { border-bottom: 0; }
.recent-list a {
  color: var(--blue);
  display: inline;
  background: #fff;
}
.recent-list a:hover { color: var(--green); text-decoration: none; }
.recent-list .date {
  float: right;
  font-size: 11px;
  color: #B4B4B4;
  font-family: Arial, Helvetica, sans-serif;
  padding-left: 8px;
}

.tag-cloud { line-height: 2.1; font-size: 12px; }
.tag-cloud a {
  display: inline-block;
  margin: 0 6px 4px 0;
  color: var(--teal);
  line-height: 1.5;
}
.tag-cloud a:hover { color: var(--green); text-decoration: none; }
.tag-cloud sup { font-size: 9px; color: #B4B4B4; margin-left: 2px; }
.tag-cloud a:hover sup { color: var(--green); }

.year-list { font-size: 13px; font-family: Arial, Helvetica, sans-serif; }
.year-list li {
  padding: 3px 0;
  border-bottom: 1px solid var(--line-2);
}
.year-list li:last-child { border-bottom: 0; }
.year-list a { color: var(--teal); }
.year-list a:hover { color: var(--green); text-decoration: none; }
.year-list .num {
  float: right;
  font-size: 12px;
  color: var(--green);
}
.archive-total { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }
.archive-total span { color: var(--green); }

.links-list { font-size: 13px; }
.links-list li {
  padding: 3px 0;
  border-bottom: 1px solid var(--line-2);
}
.links-list li:last-child { border-bottom: 0; }
.links-list a { color: var(--teal); }
.links-list a:hover { color: var(--green); text-decoration: none; }

/* 友链页 */
.links-grid { margin: 10px 0 0; }
.links-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.links-item:last-child { border-bottom: 0; }
.links-name {
  font-size: 14px;
  font-weight: bold;
  color: var(--green);
}
.links-name:hover { color: var(--link); text-decoration: none; }
.links-desc { margin: 5px 0 3px; color: var(--text-2); line-height: 1.62; }
.links-url { font-size: 12px; color: var(--text-3); word-break: break-all; }
.links-url:hover { color: var(--link); }

/* 目录。文章页侧栏只有这一个模块，所以吸在视口上沿跟着读。 */
.mod-toc {
  position: sticky;
  top: 18px;
}
.toc-list { font-size: 12px; }
.toc-list li { line-height: 1.75; }
.toc-list a {
  display: block;
  padding: 1px 0 1px 10px;
  color: var(--text-2);
  border-left: 2px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc-list a:hover { color: var(--green); text-decoration: none; border-left-color: #A8C9A8; }
.toc-list .lv2 a { padding-left: 20px; font-size: 12px; }
.toc-list .lv3 a { padding-left: 32px; font-size: 12px; color: var(--text-3); }
.toc-list .on > a {
  color: var(--green);
  font-weight: bold;
  border-left-color: var(--green);
  background: var(--hover-bg);
}

/* --------------------------------------------------------------- 独立页面 */
.page-title {
  font-size: 19px;
  font-weight: bold;
  color: var(--text);
  padding-bottom: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.page-content { font-size: 13px; line-height: 1.85; }
.page-content h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 1.4em 0 .5em;
  padding-bottom: .2em;
  border-bottom: 1px solid var(--line-2);
}
.page-content h3 { font-size: 14px; font-weight: bold; margin: 1.2em 0 .4em; }
.page-content img { display: block; margin: 1em auto; border: 1px solid var(--line); }
.page-content a { color: var(--blue); }
.page-content a:hover { color: var(--green); }

/* scripts/taxonomy-index.js 产出的分类/标签总览 */
.category-index-list, .tag-index-list { font-size: 13px; }
.category-index-list > li, .tag-index-list > li {
  padding: 5px 0;
  border-bottom: 1px solid var(--line-2);
}
.category-index-list ul {
  padding-left: 18px;
  border-top: 1px dashed var(--line-2);
  margin-top: 4px;
}
.category-index-list ul li { padding: 3px 0; border-bottom: 0; }
.category-index-list a, .tag-index-list a { color: var(--teal); }
.category-index-list a:hover, .tag-index-list a:hover { color: var(--green); text-decoration: none; }
.category-index-list .count, .tag-index-list .count {
  float: right;
  font-size: 11px;
  color: #B4B4B4;
  font-family: Arial, Helvetica, sans-serif;
}
.tag-index-list { margin-top: 24px; }

/* --------------------------------------------------------------- 404 */
.err-code {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 60px;
  line-height: 1;
  color: var(--green-band);
  margin: 10px 0 14px;
}
.err-links { font-size: 13px; }
.err-links li { display: inline-block; margin: 0 14px 6px 0; }
.err-links a {
  display: inline-block;
  padding: 2px 10px;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.err-links a:hover { color: #fff; background: var(--green); border-color: var(--green); text-decoration: none; }

/* --------------------------------------------------------------- 分页 */
.pager {
  margin: 24px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
}
.pager a, .pager span { display: inline-block; }
.pager-num, .pager-ext {
  margin: 0 1px;
  padding: 3px 9px;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.pager-num:hover, .pager-ext:hover {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
  text-decoration: none;
}
.pager .on {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
  font-weight: bold;
}
.pager-space { color: var(--text-3); padding: 0 2px; }

/* --------------------------------------------------------------- 评论 */
.mod-comments { margin-top: var(--gap); }
/* Waline 自带的样式是给独立页设计的，嵌在 .mod 里要收一下边距，
   不然和上面的「评论」标题之间会空一大块。 */
#waline { margin-top: 8px; }
#waline .wl-panel,
#waline .wl-header,
#waline .wl-footer { margin: 0; }
.comments-off {
  font-size: 12px;
  color: var(--text-3);
  padding: 10px 0;
}
.comments-off code {
  padding: 1px 5px;
  font-size: 12px;
  color: #0A5C2A;
  background: #E9F2E7;
  border-radius: 3px;
}

/* --------------------------------------------------------------- 页脚 */
#db-footer {
  margin-top: 20px;
  padding: 18px 0 26px;
  border-top: 1px solid var(--line);
  background: #FAFAFA;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
.footer-links { margin-bottom: 8px; }
.footer-links a {
  color: var(--teal);
  margin: 0 7px;
}
.footer-links a:hover { color: var(--green); }
.copyright { margin: 0; line-height: 1.8; color: #B0B0B0; }
.copyright .sep { margin: 0 8px; }
/* 备案号 / CDN 致谢的链接：比正文链接更淡，别在页脚抢戏 */
.copyright a { color: #8A9A8C; }
.copyright a:hover { color: var(--green); }
/* 三行之间留点呼吸：版权 → 备案 → CDN 致谢 */
.copyright + .copyright { margin-top: 4px; }

/* --------------------------------------------------------------- 回到顶部 */
.db-top {
  position: fixed;
  right: 24px;
  bottom: 40px;
  z-index: 80;
  width: 34px;
  height: 34px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1;
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
}
.db-top.show { opacity: 1; visibility: visible; }
.db-top:hover { color: #fff; background: var(--green); border-color: var(--green); }

/* --------------------------------------------------------------- 灯箱 */
.db-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
}
.db-lb[hidden] { display: none; }
.db-lb img {
  max-width: 92vw;
  max-height: 88vh;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.db-lb-count {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  text-align: center;
  color: #BBB;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}
.db-lb-nav {
  position: absolute;
  top: 0; bottom: 0;
  width: 15%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #DDD;
  font-size: 26px;
  opacity: .55;
}
.db-lb-nav:hover { opacity: 1; }
.db-lb-prev { left: 0; }
.db-lb-next { right: 0; }

/* --------------------------------------------------------------- 响应式 */
@media screen and (max-width: 1000px) {
  .wrapper { width: auto; max-width: 950px; }
  /* 单栏：两栏上下摞起来 */
  .wrapper.content { flex-direction: column; gap: 0; }
  .main, .main-full { flex: none; width: 100%; }
  .sidebar { flex: none; width: 100%; margin-top: 20px; }
  /* 目录跑到正文下面去了，吸顶没意义 */
  .mod-toc { position: static; }
  .post-list li::before { left: -20px; }
  .srh-panel { width: 320px; }
}

@media screen and (max-width: 640px) {
  :root { --fs: 13px; }
  .brand-tagline { display: none; }
  .nav-links { margin-left: 0; font-size: 13px; }
  /* 搜索框换到自己一行，铺满 */
  .srh { flex: 1 1 100%; margin-left: 0; margin-top: 0; }
  .srh-inp { width: 100%; }
  .srh-form { width: 100%; }
  .srh-panel { width: 100%; }
  .topic-foot .tags { margin-left: 0; }
  .topic-foot .more { margin-left: auto; }
  .post-nav { flex-direction: column; gap: 12px; }
  .post-nav .pn { width: 100%; }
  .post-nav .next { text-align: left; }
  .post-meta .item { margin-right: 10px; }
  .db-top { right: 12px; bottom: 20px; }
}