.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.docs-nav {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}
.docs-nav a { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.docs-nav a:hover { color: var(--ink); text-decoration: none; }
.docs-hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; width: 100%; }
.docs-main { min-width: 0; }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.hero h1 { margin-top: 8px; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.endpoint-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.endpoint-head .path {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.95rem;
  font-weight: 700;
}
.method {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
}
.method.get { background: #2563eb; }
.method.post { background: #0f6e56; }
.method.delete { background: #b42318; }
.code {
  margin: 0 0 14px;
  padding: 14px 16px;
  overflow-x: auto;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
}
.code code { font: inherit; color: inherit; }
.endpoint h3 { margin: 18px 0 10px; font-size: 1rem; }
.docs-list { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.docs-list li { margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { font-size: 0.82rem; color: var(--muted); }

@media (max-width: 720px) {
  .hero { align-items: flex-start; flex-direction: column; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-nav { position: static; }
}