:root {
  --bg: #0f172a;
  --panel: rgba(15, 23, 42, 0.82);
  --card: #ffffff;
  --muted: #64748b;
  --text: #0f172a;
  --border: rgba(148, 163, 184, 0.22);
  --accent: #0f766e;
  --accent-weak: rgba(15, 118, 110, 0.12);
  --shadow: 0 30px 80px rgba(15, 23, 42, 0.14);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 30%),
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.16), transparent 26%),
    linear-gradient(180deg, #e2e8f0 0%, #f8fafc 36%, #eef2ff 100%);
}
.page { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto;
  padding: 24px 18px; color: #e2e8f0; background: var(--panel); backdrop-filter: blur(16px);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.content { padding: 32px; min-width: 0; }
.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.project-icon { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.brand-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #94a3b8; }
.brand-title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.project-meta, .stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 18px;
}
.project-meta div, .stats div {
  padding: 10px 12px; border: 1px solid rgba(148,163,184,0.16); border-radius: 14px; background: rgba(255,255,255,0.06);
}
.project-meta span, .stats span { display: block; font-size: 11px; color: #94a3b8; margin-bottom: 6px; }
.project-meta strong, .stats strong { font-size: 14px; color: #f8fafc; }
.nav-tree { list-style: none; padding-left: 0; margin: 0; }
.nav-tree .nav-tree { padding-left: 16px; margin-top: 8px; border-left: 1px dashed rgba(148,163,184,0.22); }
.nav-item { margin: 2px 0; }
.nav-row { display: flex; align-items: center; gap: 6px; }
.tree-toggle {
  width: 20px; height: 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 14px; line-height: 20px;
}
.nav-item.collapsed > .nav-tree { display: none; }
.sidebar-actions { margin: 12px 0 10px; }
.sidebar-collapse {
  width: 100%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08);
  color: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer;
}
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .brand,
.sidebar.collapsed .project-meta,
.sidebar.collapsed .sidebar-actions,
.sidebar.collapsed .nav-link,
.sidebar.collapsed .tree-toggle,
.sidebar.collapsed .nav-tree .nav-tree { display: none; }
.sidebar.collapsed .nav-row { justify-content: center; }
.nav-link {
  display: block; padding: 8px 10px; border-radius: 10px; color: #e2e8f0; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active > .nav-link { background: rgba(20,184,166,0.18); color: #fff; }
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); margin: 0 0 16px;
  font-size: 14px;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.doc-card {
  max-width: 1080px; background: var(--card); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: var(--shadow); padding: 34px;
}
.hero h1 { margin-top: 0; font-size: 38px; line-height: 1.1; }
.hero p { color: var(--muted); font-size: 16px; max-width: 72ch; }
.markdown { line-height: 1.75; font-size: 16px; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { line-height: 1.25; margin-top: 1.6em; }
.markdown h1 { font-size: 2rem; }
.markdown h2 { font-size: 1.5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
.markdown h3 { font-size: 1.15rem; }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown pre, .markdown table { margin: 1em 0; }
.markdown blockquote {
  padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--accent-weak); border-radius: 0 12px 12px 0;
}
.markdown pre {
  overflow: auto; padding: 16px; border-radius: 16px; background: #0b1120; color: #e2e8f0;
}
.markdown .codehilite {
  margin: 1em 0;
  padding: 0;
  border-radius: 16px;
  overflow: auto;
  background: #0b1120;
  color: #e2e8f0;
}
.markdown .codehilite pre {
  margin: 0;
  padding: 16px;
  background: transparent;
  color: #e2e8f0;
}
.markdown .codehilite code {
  color: #e2e8f0;
}
.markdown .codehilite .hll { background-color: rgba(255, 255, 255, 0.08); }
.markdown .codehilite .c { color: #64748b; font-style: italic; }
.markdown .codehilite .err { color: #fca5a5; }
.markdown .codehilite .k { color: #c084fc; }
.markdown .codehilite .o { color: #f8fafc; }
.markdown .codehilite .ch, .markdown .codehilite .cm, .markdown .codehilite .cp, .markdown .codehilite .c1, .markdown .codehilite .cs { color: #64748b; }
.markdown .codehilite .gd { color: #fca5a5; }
.markdown .codehilite .ge { font-style: italic; }
.markdown .codehilite .gh { color: #f8fafc; font-weight: bold; }
.markdown .codehilite .gi { color: #86efac; }
.markdown .codehilite .go { color: #94a3b8; }
.markdown .codehilite .gp { color: #94a3b8; }
.markdown .codehilite .gr { color: #fca5a5; }
.markdown .codehilite .gs { font-weight: bold; }
.markdown .codehilite .gt { color: #fca5a5; }
.markdown .codehilite .kc, .markdown .codehilite .kd, .markdown .codehilite .kn, .markdown .codehilite .kp, .markdown .codehilite .kr { color: #c084fc; }
.markdown .codehilite .kt { color: #38bdf8; }
.markdown .codehilite .m, .markdown .codehilite .s, .markdown .codehilite .na { color: #fbbf24; }
.markdown .codehilite .nb, .markdown .codehilite .nc, .markdown .codehilite .no, .markdown .codehilite .nd, .markdown .codehilite .ni, .markdown .codehilite .ne, .markdown .codehilite .nf, .markdown .codehilite .nl, .markdown .codehilite .nn, .markdown .codehilite .nx, .markdown .codehilite .py, .markdown .codehilite .nt, .markdown .codehilite .nv, .markdown .codehilite .ow, .markdown .codehilite .w { color: #e2e8f0; }
.markdown .codehilite .bp, .markdown .codehilite .fm, .markdown .codehilite .vc, .markdown .codehilite .vg, .markdown .codehilite .vi { color: #a5b4fc; }
.markdown .codehilite .mf, .markdown .codehilite .mh, .markdown .codehilite .mi, .markdown .codehilite .mo, .markdown .codehilite .il { color: #fbbf24; }
.markdown .codehilite .s1, .markdown .codehilite .s2, .markdown .codehilite .sa, .markdown .codehilite .sb, .markdown .codehilite .sc, .markdown .codehilite .dl, .markdown .codehilite .sd, .markdown .codehilite .sh, .markdown .codehilite .si, .markdown .codehilite .sx { color: #86efac; }
.markdown .codehilite .sr { color: #f9a8d4; }
.markdown .codehilite .ss { color: #f472b6; }
.markdown code { background: rgba(148,163,184,0.16); padding: .15em .35em; border-radius: 6px; }
.markdown pre code { background: transparent; padding: 0; color: inherit; }
.markdown table {
  width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 16px; display: block; overflow-x: auto;
}
.markdown th, .markdown td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.markdown th { background: #f8fafc; }
.markdown img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,0.12); }
.folder-index ul { padding-left: 18px; }
.folder-index li { margin: 8px 0; }
.folder-index .kind {
  display: inline-block; margin-right: 10px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent); font-size: 12px;
}
.folder-index a { color: var(--text); }
.kv-table { width: 100%; border-collapse: collapse; margin: 0; }
.kv-table th, .kv-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.kv-table th { width: 140px; background: #f8fafc; }
.stats strong { color: var(--text); }
.page-index .sidebar { background: rgba(15, 23, 42, 0.92); }
@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .content { padding: 18px; }
  .doc-card { padding: 22px; }
  .project-meta, .stats { grid-template-columns: 1fr; }
}