:root {
  --bg: #0e1116;
  --bg-elev: #161b22;
  --bg-elev-2: #1c2128;
  --border: #30363d;
  --text: #e6edf3;
  --text-dim: #8d96a0;
  --link: #58a6ff;
  --link-hover: #79b8ff;
  --accent: #3fb950;
  --code-bg: #0d1117;
  --selection: #264f78;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
::selection { background: var(--selection); }

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
}
.brand span {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 14px;
  margin-left: 4px;
}
.filter {
  width: 100%;
  margin: 14px 0 10px;
  padding: 7px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.filter:focus { border-color: var(--link); }

.tree { font-size: 13.5px; }
.tree .dir {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 14px 4px 6px;
  font-weight: 600;
}
.tree ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tree li {
  margin: 1px 0;
}
.tree li a {
  display: block;
  padding: 5px 10px;
  color: var(--text);
  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree li a:hover { background: var(--bg-elev-2); }
.tree li.active a {
  background: var(--bg-elev-2);
  color: var(--link);
  font-weight: 500;
  border-left: 2px solid var(--link);
  padding-left: 8px;
}

.footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.footer a { color: var(--text-dim); text-decoration: none; }
.footer a:hover { color: var(--link); }

/* Main */
.content {
  padding: 36px 48px 80px;
  max-width: 920px;
}
.markdown-body { color: var(--text); }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  color: var(--text);
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.25;
}
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid var(--border); padding-bottom: .3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: .3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body p { margin: .8em 0; }
.markdown-body a { color: var(--link); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; color: var(--link-hover); }

.markdown-body ul, .markdown-body ol { padding-left: 2em; }
.markdown-body li { margin: .25em 0; }

.markdown-body blockquote {
  border-left: 3px solid var(--border);
  padding: 0 1em;
  color: var(--text-dim);
  margin: 1em 0;
}

.markdown-body code {
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.markdown-body pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.45;
  font-size: 13px;
}
.markdown-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* Tables */
.markdown-body table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
  font-size: 14px;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.markdown-body th { background: var(--bg-elev); font-weight: 600; }
.markdown-body tr:nth-child(even) td { background: var(--bg-elev); }

/* Mermaid container */
.mermaid {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin: 1em 0;
  text-align: center;
}

/* Syntax highlighting (pygments-style for dark) */
.highlight .hll { background-color: #264f78 }
.highlight .c, .highlight .ch, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs { color: #7c8896; font-style: italic } /* Comment */
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: #ff7b72 } /* Keyword */
.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #a5d6ff } /* String */
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: #79c0ff } /* Number */
.highlight .n, .highlight .na, .highlight .nb, .highlight .nc, .highlight .no, .highlight .nd, .highlight .ni, .highlight .ne, .highlight .nf, .highlight .nl, .highlight .nn, .highlight .nx, .highlight .py, .highlight .nt, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: #e6edf3 }
.highlight .o { color: #ff7b72 } /* Operator */
.highlight .p { color: #e6edf3 } /* Punctuation */

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .content { padding: 24px 18px 60px; }
}