:root {
  --fg: #1f2328;
  --muted: #59636e;
  --border: #d1d9e0;
  --bg: #ffffff;
  --soft: #f6f8fa;
  --link: #0969da;
  --accent: #0969da;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 16px/1.7 -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: 10px 28px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.topbar a { color: var(--link); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar i { color: var(--border); font-style: normal; }
.topbar .raw { margin-left: auto; }

/* 首页头部 */
.hero {
  background: linear-gradient(180deg, #f6f8fa 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 1360px; margin: 0 auto; padding: 30px 26px 22px; }
.hero h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: .5px; }
.hero .sub { margin: 0; color: var(--muted); font-size: 14px; }
.search {
  width: 100%; margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px; outline: none;
  background: #fff;
}
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(9,105,218,.12); }

/* 主体：左目录 + 正文 + 右大纲 */
.layout {
  display: flex; gap: 28px;
  max-width: 1360px; margin: 0 auto; padding: 22px 26px 64px;
  align-items: flex-start;
}
.markdown-body { flex: 1 1 auto; min-width: 0; }

/* 左侧目录栏 */
.sidebar {
  flex: 0 0 296px;
  position: sticky; top: 56px;
  max-height: calc(100vh - 76px);
  overflow: auto;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}
.side-head { position: sticky; top: 0; background: var(--bg); padding-bottom: 8px; }
.side-title { font-size: 15px; font-weight: 600; }
.side-count { font-size: 12px; color: var(--muted); }
.filelist { list-style: none; margin: 0; padding: 0; }
.filelist .row { border-bottom: 1px solid var(--soft); }
.filelist .row:last-child { border-bottom: none; }
.filelist a {
  display: block; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: var(--fg);
}
.filelist a:hover { background: var(--soft); }
.filelist .active > a { background: #ddf4ff; }
.filelist .rname { display: block; font-size: 14px; line-height: 1.5; word-break: break-all; }
.filelist .rmeta { display: block; font-size: 12px; color: var(--muted); }

/* 目录翻页 */
.pager {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 0 2px;
}
.pager button {
  padding: 4px 10px; font-size: 13px; cursor: pointer;
  color: var(--fg); background: #fff;
  border: 1px solid var(--border); border-radius: 6px;
}
.pager button:hover:enabled { border-color: var(--accent); color: var(--link); }
.pager button:disabled { opacity: .45; cursor: default; }
.pager-info { font-size: 12px; color: var(--muted); margin-left: auto; }

/* 右侧标题大纲 */
.toc {
  display: none;
  position: sticky; top: 56px;
  flex: 0 0 200px;
  max-height: calc(100vh - 76px);
  overflow: auto;
  font-size: 14px;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}
.toc-title { font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 4px 0; }
.toc .lv2 { padding-left: 12px; }
.toc .lv3 { padding-left: 24px; font-size: 13px; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--link); }

.empty { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.badge {
  display: inline-block;
  font-size: 11px; line-height: 18px;
  padding: 0 7px; border-radius: 20px;
  background: var(--soft); color: var(--muted);
  border: 1px solid var(--border);
  letter-spacing: .5px;
}
.b-md { background: #ddf4ff; color: #0969da; border-color: #b6e3ff; }
.b-dir { background: #fff8c5; color: #7d4e00; border-color: #f0e17a; }
.b-img { background: #dafbe1; color: #1a7f37; border-color: #a7f3ba; }

/* markdown 正文 */
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body h1, .markdown-body h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px; margin-top: 32px;
}
.markdown-body h1 { font-size: 28px; }
.markdown-body h2 { font-size: 22px; }
.markdown-body h3 { font-size: 19px; margin-top: 26px; }
.markdown-body a { color: var(--link); }
.markdown-body code {
  background: var(--soft); border-radius: 6px;
  padding: 2px 6px; font-size: .9em;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.markdown-body pre {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; overflow: auto;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote {
  margin: 16px 0; padding: 0 14px;
  color: var(--muted); border-left: 4px solid var(--border);
}
.markdown-body table {
  border-collapse: collapse; display: block;
  overflow: auto; width: max-content; max-width: 100%;
}
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 12px; }
.markdown-body th { background: var(--soft); }
.markdown-body img { max-width: 100%; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.markdown-body kbd {
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px; font-size: 12px; background: var(--soft);
}

/* 底部备案 */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--soft);
}
.footer-inner {
  max-width: 1360px; margin: 0 auto;
  padding: 16px 26px;
  text-align: center;
  font-size: 13px; color: var(--muted);
}
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: var(--link); text-decoration: underline; }

@media (max-width: 1180px) {
  .toc { display: none !important; }
}

@media (max-width: 900px) {
  .layout { flex-direction: column; gap: 18px; padding: 16px; }
  .sidebar {
    order: 2; flex: none; width: 100%;
    position: static; max-height: 62vh;
    padding-right: 0; border-right: none;
    border-top: 1px solid var(--border); padding-top: 12px;
  }
  .markdown-body { order: 1; }
  .hero-inner { padding: 24px 16px 20px; }
}