:root {
  --brand: #4fc3f7;
  --brand-dark: #2bb5f5;
}
* { box-sizing: border-box; }
.container { max-width: 1280px; }
@media (min-width: 1600px) {
  .container { max-width: 1440px; }
}
.site-header { border-bottom: 1px solid var(--pico-muted-border-color); background: transparent; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; }
.brand-logo { vertical-align: middle; }
.brand-wrap { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.brand-subtext { display: block; font-size: 12px; color: var(--pico-muted-color); line-height: 1; margin-left: 0; }
.nav-groups a { padding: 4px 6px; border-radius: 6px; transition: background-color .15s ease, color .15s ease; }
.nav-groups a:hover { background: rgba(255,255,255,.04); }
.nav-groups a.active {
  color: var(--brand) !important;
  font-weight: 700;
  background: rgba(79,195,247,.12);
  border-bottom: 2px solid var(--brand);
}
.hero { padding: 10px 0 20px; }
.hero h1 { margin: 0 0 6px 0; }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-left p { margin: 0; }
.site-main { padding-top: 8px; }
.site-main { transition: opacity .15s ease; }
.site-main.is-loading { opacity: .35; }
.site-footer { border-top: 1px solid var(--pico-muted-border-color); margin-top: 32px; padding: 18px 0; }

/* 学习人数徽章 */
.site-uv-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  font-size: 12px;
  color: var(--pico-muted-color);
}
/* 首页卡片栅格 */
.post-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.post-card { height: 100%; border: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); }
.post-card .post-title { margin: 6px 0 6px 0; font-size: 1.1rem; }
.post-card .post-title a { text-decoration: none; }
.post-card .post-title a:hover { color: var(--brand); }
.post-card .post-summary { color: var(--pico-muted-color); min-height: 3.2em; }
.post-card .post-meta { color: var(--pico-muted-color); }

/* 文章详情页 */
.post-detail { padding: 8px 0 0; }
.post-header { margin-bottom: 8px; }
.post-title { margin: 0 0 6px 0; }
.post-summary { color: var(--pico-muted-color); }
.prose { line-height: 1.9; }
.prose p { margin: 0 0 0.9em 0; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose code { background: var(--pico-muted-border-color); padding: .1rem .35rem; border-radius: .25rem; }
.prose pre { background: var(--pico-code-block-background-color, #0f1624); padding: 1rem; border-radius: .5rem; overflow: auto; }

/* 标题行与阅读数 */
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.view-count { color: var(--pico-muted-color); font-size: .95rem; white-space: nowrap; }
/* 评论 */
.comments { margin-top: 24px; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-item { padding: 12px 0; border-bottom: 1px dashed var(--pico-muted-border-color); }
.comment-meta { font-size: 12px; color: var(--pico-muted-color); margin-bottom: 6px; }
.comment-content { white-space: pre-wrap; }

/* 代码高亮（Pygments CodeHilite 简洁适配） */
.codehilite { background: var(--pico-code-block-background-color, #0f1624); padding: 1rem; border-radius: .5rem; overflow: auto; }
.codehilite pre { margin: 0; }
.codehilite .hll { background-color: #49483e }
.codehilite .c { color: #75715e } /* Comment */
.codehilite .k { color: #66d9ef } /* Keyword */
.codehilite .o { color: #f92672 } /* Operator */
.codehilite .cm { color: #75715e }
.codehilite .cp { color: #75715e }
.codehilite .c1 { color: #75715e }
.codehilite .cs { color: #75715e }
.codehilite .gd { color: #f92672 }
.codehilite .ge { font-style: italic }
.codehilite .gh { color: #403d3d }
.codehilite .gi { color: #a6e22e }
.codehilite .go { color: #403d3d }
.codehilite .gp { color: #403d3d }
.codehilite .gs { font-weight: bold }
.codehilite .gu { color: #403d3d }
.codehilite .kc { color: #66d9ef }
.codehilite .kd { color: #66d9ef }
.codehilite .kn { color: #f92672 }
.codehilite .kp { color: #66d9ef }
.codehilite .kr { color: #66d9ef }
.codehilite .kt { color: #66d9ef }
.codehilite .m { color: #ae81ff }
.codehilite .s { color: #e6db74 }
.codehilite .na { color: #a6e22e }
.codehilite .nb { color: #f8f8f2 }
.codehilite .nc { color: #a6e22e }
.codehilite .no { color: #66d9ef }
.codehilite .nd { color: #a6e22e }
.codehilite .ni { color: #f8f8f2 }
.codehilite .ne { color: #a6e22e }
.codehilite .nf { color: #a6e22e }
.codehilite .nl { color: #f8f8f2 }
.codehilite .nn { color: #f8f8f2 }
.codehilite .nx { color: #a6e22e }
.codehilite .py { color: #f8f8f2 }
.codehilite .nt { color: #f92672 }
.codehilite .nv { color: #f8f8f2 }
.codehilite .ow { color: #f92672 }
.codehilite .w { color: #f8f8f2 }
.codehilite .mf { color: #ae81ff }
.codehilite .mh { color: #ae81ff }
.codehilite .mi { color: #ae81ff }
.codehilite .mo { color: #ae81ff }
.codehilite .sb { color: #e6db74 }
.codehilite .sc { color: #e6db74 }
.codehilite .sd { color: #e6db74 }
.codehilite .s2 { color: #e6db74 }
.codehilite .se { color: #ae81ff }
.codehilite .sh { color: #e6db74 }
.codehilite .si { color: #e6db74 }
.codehilite .sx { color: #e6db74 }
.codehilite .sr { color: #e6db74 }
.codehilite .s1 { color: #e6db74 }
.codehilite .ss { color: #e6db74 }

/* Mermaid 渲染（贴近 Cursor 预览：不额外上色，仅透明背景与容器样式） */
.mermaid { background: transparent; border: none; border-radius: .5rem; padding: .5rem; overflow: auto; }
.mermaid svg { background: transparent !important; }

/* 分类左右分栏布局（C语言） */
.split-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
}
.split-layout-3 {
  display: grid;
  grid-template-columns: 320px 1fr 240px;
  gap: 18px;
}
@media (max-width: 880px) {
  .split-layout { grid-template-columns: 1fr; }
  .split-layout-3 { grid-template-columns: 1fr; }
}
.split-sidebar {
  position: sticky;
  top: 68px;
  height: calc(100vh - 92px);
  overflow: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: .5rem;
  padding: .5rem;
  background: var(--pico-card-background-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04);
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin: 4px 0; }
.toc-link {
  text-decoration: none;
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
  font-size: 13px;
}
.toc-link:hover {
  background: rgba(255,255,255,.04);
}
.toc-link.active {
  color: var(--brand);
  background: rgba(79,195,247,.09);
  border-left: 3px solid var(--brand);
  padding-left: 7px;
}
.toc-list > li > strong { font-size: 20px; color: var(--pico-muted-color); }
.toc-summary { display: block; color: var(--pico-muted-color); }
.split-content {
  min-height: 40vh;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  background: var(--pico-card-background-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 2px 10px rgba(0,0,0,.06);
}

/* 右侧文章目录（TOC） */
.toc-right {
  position: sticky;
  top: 68px;
  height: calc(100vh - 92px);
  overflow: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: .5rem;
  padding: .75rem;
  background: var(--pico-card-background-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04);
  font-size: 13px;
}
.toc-right .toc-inner ul { list-style: none; padding-left: 0.75em; }
.toc-right .toc-inner li { margin: .25em 0; }
.toc-right .toc-inner a { text-decoration: none; color: var(--pico-muted-color); }
.toc-right .toc-inner a:hover { color: var(--brand); }

/* 单页内容 + TOC */
.content-with-toc {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;
}
@media (max-width: 880px) {
  .content-with-toc { grid-template-columns: 1fr; }
}
/* 侧栏滚动条优化（WebKit） */
.split-sidebar::-webkit-scrollbar { width: 10px; }
.split-sidebar::-webkit-scrollbar-track { background: transparent; }
.split-sidebar::-webkit-scrollbar-thumb {
  background: var(--pico-muted-border-color);
  border-radius: 999px;
}
.split-sidebar::-webkit-scrollbar-thumb:hover { background: #3a4254; }

/* 正文可读性优化 */
.prose { line-height: 1.75; max-width: 860px; margin: 0; font-size: 15px; }
.prose h1 { font-size: 1.6rem; }
.prose h2 { font-size: 1.3rem; margin-top: 1.6em; margin-bottom: .6em; }
.prose h3 { font-size: 1.1rem; margin-top: 1.4em; margin-bottom: .5em; }
.prose img { display: block; max-width: 100%; border-radius: .5rem; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.prose blockquote {
  margin: 1em 0; padding: .75em 1em;
  border-left: 3px solid var(--brand);
  background: rgba(255,255,255,.04);
  border-radius: .25rem;
}
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin: .3em 0; }