.docs-site-shell {
      background:
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.020) 1px, transparent 1px),
        var(--bg);
      background-size: 72px 72px;
    }

    .docs-shell {
      width: 100%;
      max-width: 1320px;
      margin: 0 auto;
      padding: 42px 22px 0;
      display: grid;
      grid-template-columns: minmax(210px, 0.24fr) minmax(0, 1fr) minmax(180px, 0.22fr);
      gap: 28px;
      align-items: start;
      overflow: visible;
    }

    .docs-sidebar,
    .docs-toc {
      position: sticky;
      top: 96px;
      max-height: calc(100vh - 118px);
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(17, 23, 21, 0.78);
      box-shadow: 0 18px 44px rgba(0,0,0,0.16);
    }

    .docs-sidebar {
      padding: 14px;
    }

    .docs-nav-group {
      display: grid;
      gap: 5px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .docs-nav-group:last-child {
      border-bottom: 0;
    }

    .docs-nav-label {
      color: var(--gold);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .docs-nav-group a {
      display: flex;
      min-height: 34px;
      align-items: center;
      padding: 0 10px;
      border-radius: var(--radius);
      color: var(--soft);
      font-size: 14px;
      font-weight: 800;
    }

    .docs-nav-group a.active,
    .docs-nav-group a:hover {
      color: var(--text);
      background: rgba(24,160,133,0.14);
    }

    .docs-article {
      min-width: 0;
      display: grid;
      gap: 18px;
    }

    .docs-hero,
    .docs-section,
    .docs-related {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 18px 44px rgba(0,0,0,0.16);
    }

    .docs-hero {
      padding: 34px;
      background:
        linear-gradient(135deg, rgba(24,160,133,0.16), rgba(215,168,79,0.09)),
        var(--surface-2);
    }

    .docs-hero h1 {
      margin: 8px 0 0;
      max-width: 860px;
      font-size: 46px;
      line-height: 1.06;
    }

    .docs-hero p {
      margin: 16px 0 0;
      max-width: 820px;
      color: var(--soft);
      font-size: 17px;
      line-height: 1.6;
    }

    .docs-section {
      padding: 28px;
      scroll-margin-top: 104px;
    }

    .docs-section h2,
    .docs-related h2 {
      margin: 0 0 14px;
      font-size: 28px;
      line-height: 1.18;
    }

    .docs-section p {
      margin: 0 0 14px;
      color: var(--soft);
      font-size: 16px;
      line-height: 1.68;
    }

    .docs-section p:last-child {
      margin-bottom: 0;
    }

    .docs-section ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--soft);
    }

    .docs-section li {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 8px;
      align-items: start;
      line-height: 1.62;
    }

    .docs-section li::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 8px;
      border-radius: 50%;
      background: var(--brand);
    }

    .docs-inline-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      margin-top: 12px;
      padding: 0 14px;
      border-radius: var(--radius);
      background: var(--brand);
      color: #03110e;
      font-weight: 900;
    }

    .docs-toc {
      display: grid;
      gap: 8px;
      padding: 16px;
    }

    .docs-toc strong,
    .docs-mobile-toc strong {
      color: var(--gold);
      font-size: 12px;
      text-transform: uppercase;
    }

    .docs-toc a,
    .docs-mobile-toc a {
      display: block;
      color: var(--soft);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .docs-toc a:hover,
    .docs-mobile-toc a:hover {
      color: var(--text);
    }

    .docs-mobile-toc {
      display: none;
      gap: 10px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(17, 23, 21, 0.78);
    }

    .docs-pager {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .docs-pager-link {
      min-height: 74px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      display: grid;
      align-content: center;
      gap: 4px;
    }

    .docs-pager-link.next {
      text-align: right;
    }

    .docs-pager-link span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .docs-pager-link strong {
      color: var(--text);
      font-size: 17px;
    }

    .docs-related {
      padding: 26px;
    }

    .docs-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .docs-card {
      display: grid;
      gap: 6px;
      min-height: 82px;
      align-content: center;
      padding: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.045);
    }

    .docs-card span {
      color: var(--text);
      font-weight: 900;
    }

    .docs-card small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    @media (max-width: 1100px) {
      .docs-shell {
        grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
      }

      .docs-toc {
        display: none;
      }

      .docs-mobile-toc {
        display: grid;
      }
    }

    @media (max-width: 820px) {
      .docs-shell {
        grid-template-columns: 1fr;
        padding: 24px 16px 0;
      }

      .docs-sidebar {
        position: static;
        max-height: none;
      }

      .docs-nav-group {
        grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
        align-items: start;
      }

      .docs-nav-label {
        grid-column: 1 / -1;
      }

      .docs-hero,
      .docs-section,
      .docs-related {
        padding: 22px;
      }

      .docs-hero h1 {
        font-size: 36px;
      }

      .docs-card-grid,
      .docs-pager {
        grid-template-columns: 1fr;
      }

      .docs-pager-link.next {
        text-align: left;
      }
    }