.docs-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.docs-sidebar {
    position: sticky;
    top: 85px;
    max-height: calc(100vh - 105px);
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

    .docs-sidebar .nav-link {
        color: var(--bs-body-color);
        border-radius: .7rem;
        padding: .7rem .85rem;
        font-size: .92rem;
        display: flex;
        align-items: center;
        gap: .7rem;
    }

        .docs-sidebar .nav-link:hover,
        .docs-sidebar .nav-link.active {
            color: var(--bs-primary);
            background: rgba(var(--bs-primary-rgb), .09);
        }

.docs-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 2rem;
    background: radial-gradient( circle at top right, rgba(var(--bs-primary-rgb), .26), transparent 36% ), linear-gradient( 135deg, #101828, #1d2939 );
    color: #fff;
}

    .docs-hero::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        right: -90px;
        bottom: -130px;
        background: rgba(255, 255, 255, .05);
    }

.docs-section {
    scroll-margin-top: 90px;
}

.docs-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.docs-card-header {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.endpoint-path {
    font-family: var(--bs-font-monospace);
    overflow-wrap: anywhere;
}

.method-badge {
    min-width: 66px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .03em;
}

.method-post {
    color: #067647;
    background: #ecfdf3;
}

.method-get {
    color: #175cd3;
    background: #eff8ff;
}

.method-redirect {
    color: #175cd3;
    background: #eff8ff;
}

.method-put {
    color: #b54708;
    background: #fffaeb;
}

.method-delete {
    color: #b42318;
    background: #fef3f2;
}

.code-shell {
    position: relative;
    border-radius: .85rem;
    background: #101828;
    color: #d0d5dd;
    overflow: hidden;
}

.code-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #98a2b3;
    font-size: .78rem;
}

.code-shell pre {
    margin: 0;
    padding: 1rem;
    max-height: 520px;
    overflow: auto;
    font-size: .82rem;
    color: #e4e7ec;
}

.copy-code {
    border: 0;
    background: transparent;
    color: #d0d5dd;
}

    .copy-code:hover {
        color: #fff;
    }

.docs-table th {
    white-space: nowrap;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: var(--bs-secondary-color);
}

.required-pill {
    color: #b42318;
    background: #fef3f2;
}

.optional-pill {
    color: #344054;
    background: #f2f4f7;
}

.base-url-box {
    border: 1px dashed var(--bs-border-color);
    border-radius: .85rem;
    padding: .9rem 1rem;
    background: var(--bs-tertiary-bg);
}

@media (max-width: 991.98px) {
    .docs-shell {
        grid-template-columns: 1fr;
    }

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