:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --fg: #e0e0e0;
  --fg-muted: #888888;
  --fg-dim: #666666;
  --accent: #ffffff;
  --line: #2a2a2a;
  --line-strong: #3a3a3a;
  --line-hover: #555555;
  --font-mono: 'JetBrains Mono','Fira Code','Consolas',monospace;
  --font-sans: 'Inter','PingFang SC','Microsoft YaHei',sans-serif;
  --font-serif: 'Noto Serif SC','Source Han Serif SC','SimSun',serif;
  --radius: 0px;
  --border-w: 1px;
  --nav-height: 56px;
  --max-w: 1200px;
}
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html { font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth; }
body {
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--fg);
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
}
::selection { background:var(--fg);color:var(--bg); }
/* ── Header ── */
.site-header {
  position:sticky;top:0;z-index:100;
  height:var(--nav-height);
  background:var(--bg);
  border-bottom:var(--border-w) solid var(--line);
  display:flex;align-items:center;
}
.site-header .container { width:100%;max-width:var(--max-w);margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between; }
.site-logo { font-family:var(--font-serif);font-size:1.25rem;font-weight:700;letter-spacing:0.05em;color:var(--accent);text-decoration:none; }
.site-logo span { font-family:var(--font-mono);font-size:0.7rem;color:var(--fg-muted);margin-left:8px; }
.header-nav { display:flex;align-items:center;gap:28px; }
.header-nav a { color:var(--fg-muted);text-decoration:none;font-size:0.85rem;font-family:var(--font-mono);transition:color 0.15s; }
.header-nav a:hover,.header-nav a.active { color:var(--accent); }
/* ── Intro ── */
.page-intro { padding:48px 0 36px;border-bottom:var(--border-w) solid var(--line); }
.container { max-width:var(--max-w);margin:0 auto;padding:0 32px; }
.page-intro h1 { font-family:var(--font-serif);font-size:2rem;font-weight:700;letter-spacing:0.03em;margin-bottom:8px; }
.page-intro p { color:var(--fg-muted);font-size:0.95rem; }
.toolbar { display:flex;gap:10px;margin-top:16px;flex-wrap:wrap; }
.toolbar button {
  font-family:var(--font-mono);font-size:0.75rem;color:var(--fg-muted);
  background:var(--surface);border:var(--border-w) solid var(--line);
  padding:6px 14px;cursor:pointer;transition:all 0.15s;
}
.toolbar button:hover { border-color:var(--line-hover);color:var(--accent);background:var(--surface-2); }
.toolbar button:active { border-color:var(--fg-dim); }
.search-box {
  font-family:var(--font-mono);font-size:0.8rem;color:var(--fg);
  background:var(--surface);border:var(--border-w) solid var(--line);
  padding:6px 14px;min-width:240px;outline:none;transition:border-color 0.15s;
}
.search-box:focus { border-color:var(--line-hover); }
.search-box::placeholder { color:var(--fg-dim); }
/* ── Tree Container ── */
.tree-container { padding:36px 0 80px; }
.tree { font-family:var(--font-mono);font-size:0.82rem; }
/* ── Tree Nodes ── */
.tree-node { list-style:none;position:relative; }
.tree-children { overflow:hidden;transition:max-height 0.35s cubic-bezier(0.16,1,0.3,1),opacity 0.35s ease; }
.tree-children.collapsed { max-height:0 !important;opacity:0; }

.tree-item {
  position:relative;
  margin:0;
  transition:background 0.12s;
}
.tree-item:hover { background:rgba(255,255,255,0.015); }
.tree-item.hidden { display:none; }
.tree-item.highlight { background:rgba(255,255,255,0.04); }

.tree-item-content {
  display:flex;align-items:center;
  padding:6px 0;
  border-bottom:1px dashed #1a1a1a;
  min-height:36px;
  cursor:default;
  gap:4px;
}

/* Guide lines */
.tree-node .tree-node { margin-left:28px;position:relative; }
.tree-node .tree-node::before {
  content:'';position:absolute;left:-20px;top:0;bottom:8px;
  border-left:1px solid #1e1e1e;
}
.tree-node .tree-node .tree-item::before {
  content:'';position:absolute;left:-20px;top:18px;width:14px;
  border-bottom:1px solid #1e1e1e;
}
.tree-node .tree-node .tree-node .tree-node .tree-item::before { width:14px; }

/* Toggle button */
.toggle-btn {
  width:20px;height:20px;min-width:20px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.7rem;color:var(--fg-dim);
  cursor:pointer;user-select:none;
  transition:transform 0.2s ease,color 0.15s;
  margin-right:0;
  line-height:1;
}
.toggle-btn:hover { color:var(--accent); }
.toggle-btn.empty { visibility:hidden;pointer-events:none; }
.toggle-btn.expanded { transform:rotate(90deg); }

/* Icon */
.node-icon { width:20px;min-width:20px;text-align:center;font-size:0.78rem;margin-right:4px;flex-shrink:0; }

/* Label */
.node-label { flex-shrink:0;font-weight:500;color:var(--fg);font-size:0.82rem;white-space:nowrap; }

/* URL / Path */
.node-url {
  font-family:var(--font-mono);font-size:0.72rem;color:var(--fg-dim);
  margin-left:8px;white-space:nowrap;flex-shrink:0;
}

/* Description */
.node-desc { font-size:0.72rem;color:var(--fg-dim);margin-left:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:var(--font-sans); }

/* Tags */
.node-tags { display:flex;gap:4px;flex-shrink:0;margin-left:8px; }
.node-tag {
  font-size:0.6rem;padding:1px 6px;
  border:var(--border-w) solid var(--line);
  white-space:nowrap;
}
.node-tag.page { color:#f0c040;border-color:#2a2818; }
.node-tag.api { color:#60a0f0;border-color:#182030; }
.node-tag.db { color:#a0c060;border-color:#203018; }
.node-tag.asset { color:#c080f0;border-color:#201830; }
.node-tag.content { color:#60c0c0;border-color:#182020; }
.node-tag.public { color:#60c060;border-color:#1a3020; }
.node-tag.auth { color:#f0a060;border-color:#3a2818; }
.node-tag.admin { color:#c06060;border-color:#301a1a; }
.node-tag.system { color:var(--fg-dim);border-color:var(--line); }

/* Method badges on API endpoints */
.api-method-badge {
  font-size:0.62rem;font-weight:600;padding:1px 5px;min-width:36px;text-align:center;
  border:var(--border-w) solid var(--line);
  margin-right:4px;flex-shrink:0;
}
.method-get { color:#60c060;border-color:#1a3020; }
.method-post { color:#60a0f0;border-color:#182030; }
.method-put { color:#f0c040;border-color:#2a2818; }
.method-patch { color:#c080f0;border-color:#201830; }
.method-delete { color:#f06060;border-color:#301a1a; }

/* Level styling */
.level-0 > .tree-item-content { background:var(--surface-2);border-bottom-color:var(--line);padding:8px 12px;margin-bottom:0; }
.level-0 > .tree-item-content .node-label { font-size:0.9rem;color:var(--accent); }
.level-0 { margin-bottom:20px; }

/* Count badge */
.count-badge { font-family:var(--font-mono);font-size:0.62rem;color:var(--fg-dim);margin-left:6px; }

/* Stats bar */
.stats-bar {
  display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;
}
.stat-item {
  border:var(--border-w) solid var(--line);background:var(--surface);
  padding:10px 18px;text-align:center;min-width:80px;
  cursor:pointer;transition:border-color 0.15s;
}
.stat-item:hover { border-color:var(--line-hover); }
.stat-item .stat-num { font-family:var(--font-mono);font-size:1.3rem;font-weight:600;color:var(--accent); }
.stat-item .stat-label { font-size:0.65rem;color:var(--fg-dim);margin-top:1px;font-family:var(--font-mono); }

/* Footer */
.site-footer { border-top:var(--border-w) solid var(--line);padding:28px 0;text-align:center; }
.site-footer p { font-family:var(--font-mono);font-size:0.75rem;color:var(--fg-dim); }
.site-footer a { color:var(--fg-muted);text-decoration:none; }
.site-footer a:hover { color:var(--accent); }

/* Skeleton loading */
.skeleton {
  background:var(--surface-2);border:var(--border-w) solid var(--line);
  padding:40px;text-align:center;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:0.5;} }

/* Match highlight */
.match-highlight { background:rgba(240,192,64,0.2);border-bottom:1px solid rgba(240,192,64,0.4); }

@media (max-width:768px) {
  .container { padding:0 16px; }
  .page-intro h1 { font-size:1.5rem; }
  .node-desc { display:none; }
  .node-url { font-size:0.68rem; }
  .tree-node .tree-node { margin-left:20px; }
  .tree-node .tree-node::before { left:-14px; }
  .tree-node .tree-node .tree-item::before { left:-14px;width:10px; }
}