.docs-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

.docs-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(16, 185, 129, .18), transparent 28%),
    linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(255, 255, 255, .96));
}

.dark .docs-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(16, 185, 129, .18), transparent 30%),
    linear-gradient(135deg, rgba(6, 78, 59, .28), rgba(15, 23, 42, .96));
}

.docs-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.docs-card:hover {
  transform: translateY(-2px);
  border-color: rgb(52 211 153);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}

.docs-side-link:hover,
.docs-side-link.active {
  color: rgb(4 120 87);
  background: rgb(236 253 245);
}

.dark .docs-side-link:hover,
.dark .docs-side-link.active {
  color: rgb(110 231 183);
  background: rgba(6, 78, 59, .3);
}

.docs-prose > section {
  margin-top: 3rem;
}

.docs-prose h2 {
  margin: 0 0 1rem;
  color: rgb(15 23 42);
  font-size: 1.55rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
}

.dark .docs-prose h2 {
  color: white;
}

.docs-prose h2 a:hover::after {
  content: ' #';
  color: rgb(16 185 129);
}

.docs-prose > section > p,
.docs-note p {
  margin: .9rem 0;
  color: rgb(71 85 105);
  font-size: 1rem;
  line-height: 1.8;
}

.dark .docs-prose > section > p,
.dark .docs-note p {
  color: rgb(203 213 225);
}

.docs-prose ul,
.docs-prose ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
  color: rgb(71 85 105);
}

.dark .docs-prose ul,
.dark .docs-prose ol {
  color: rgb(203 213 225);
}

.docs-prose ul { list-style: disc; }
.docs-prose ol { list-style: decimal; }

.docs-prose li {
  margin: .55rem 0;
  padding-left: .25rem;
  line-height: 1.7;
}

.docs-note {
  margin: 1.4rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgb(186 230 253);
  border-left-width: 4px;
  border-radius: .8rem;
  background: rgb(240 249 255);
}

.docs-note strong { color: rgb(3 105 161); }
.docs-note p { margin: .35rem 0 0; font-size: .93rem; }
.docs-note-success { border-color: rgb(167 243 208); background: rgb(236 253 245); }
.docs-note-success strong { color: rgb(4 120 87); }
.docs-note-warning { border-color: rgb(253 230 138); background: rgb(255 251 235); }
.docs-note-warning strong { color: rgb(180 83 9); }

.dark .docs-note { border-color: rgb(12 74 110); background: rgba(12, 74, 110, .2); }
.dark .docs-note strong { color: rgb(125 211 252); }
.dark .docs-note-success { border-color: rgb(6 95 70); background: rgba(6, 78, 59, .22); }
.dark .docs-note-success strong { color: rgb(110 231 183); }
.dark .docs-note-warning { border-color: rgb(146 64 14); background: rgba(120, 53, 15, .2); }
.dark .docs-note-warning strong { color: rgb(253 186 116); }

.docs-table-wrap {
  margin: 1.4rem 0;
  overflow-x: auto;
  border: 1px solid rgb(226 232 240);
  border-radius: .85rem;
}

.dark .docs-table-wrap { border-color: rgb(51 65 85); }

.docs-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
  font-size: .9rem;
}

.docs-table-wrap th,
.docs-table-wrap td {
  padding: .8rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(226 232 240);
  line-height: 1.55;
}

.dark .docs-table-wrap th,
.dark .docs-table-wrap td { border-color: rgb(51 65 85); }
.docs-table-wrap th { background: rgb(248 250 252); color: rgb(51 65 85); font-weight: 700; }
.dark .docs-table-wrap th { background: rgb(30 41 59); color: rgb(226 232 240); }
.docs-table-wrap tr:last-child td { border-bottom: 0; }

.docs-code {
  margin: 1.4rem 0;
  overflow: hidden;
  border: 1px solid rgb(51 65 85);
  border-radius: .85rem;
  background: rgb(15 23 42);
  color: rgb(226 232 240);
}

.docs-code > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .85rem;
  border-bottom: 1px solid rgb(51 65 85);
  color: rgb(148 163 184);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.docs-code button {
  border: 1px solid rgb(71 85 105);
  border-radius: .4rem;
  padding: .25rem .55rem;
  color: rgb(203 213 225);
  text-transform: none;
  letter-spacing: 0;
}

.docs-code button:hover { background: rgb(30 41 59); }
.docs-code pre { overflow-x: auto; padding: 1rem; font-size: .84rem; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  .docs-card { transition: none; }
}