.docs-layout { display:flex; align-items: flex-start; gap:32px; }
.docs-nav { width:240px; flex:0 0 auto; position:sticky; top:20px; align-self:flex-start; background:var(--c-bg-alt,#101014); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:16px 18px 20px; box-shadow:0 4px 14px -4px rgba(0,0,0,0.5); }
.docs-nav-title { font-size:13px; letter-spacing:.5px; font-weight:600; text-transform:uppercase; opacity:.75; margin-bottom:10px; }
.docs-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.docs-nav li a { display:block; padding:6px 10px 7px; border-radius:8px; font-size:14px; text-decoration:none; color:#e0e4ec; transition:background .15s, color .15s; }
.docs-nav li a:hover { background:rgba(255,255,255,0.06); color:#fff; }
.docs-nav li.active a { background:linear-gradient(135deg,#4158D0 0%,#C850C0 50%,#FFCC70 100%); color:#fff; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.4); }
.docs-nav-cat { margin-top:.6rem; padding:4px 2px 2px; font-size:11px; letter-spacing:.5px; text-transform:uppercase; opacity:.55; list-style:none; cursor:default; }
.docs-nav-cat:first-child { margin-top:0; }
@media (max-width: 900px){
  .docs-layout { flex-direction:column; }
  .docs-nav { width:100%; position:relative; top:auto; }
}