:root {
  --docdraw-sidebar-width: 280px;
}

body {
  background: #fff;
}

.docdraw-navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.docdraw-layout {
  display: grid;
  grid-template-columns: var(--docdraw-sidebar-width) 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}

.docdraw-sidebar {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: #f8f9fa;
}

.docdraw-sidebar .nav-link {
  color: #212529;
  border-radius: 0.375rem;
}

.docdraw-sidebar .nav-link.active {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
  font-weight: 600;
}

.docdraw-content {
  padding: 1.5rem 1.5rem 4rem;
}

.docdraw-content h1,
.docdraw-content h2,
.docdraw-content h3 {
  scroll-margin-top: 80px;
}

.docdraw-content pre,
.docdraw-content code {
  font-size: 0.95em;
}

.docdraw-content pre {
  background: #0b1020;
  color: #e6edf3;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow: auto;
}

.docdraw-content code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
}

.docdraw-content pre code {
  background: transparent;
  padding: 0;
}

@media (max-width: 992px) {
  .docdraw-layout {
    grid-template-columns: 1fr;
  }
  .docdraw-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}