/* API Reference Styles - Theme Support */

:root {
    /* Sizing */
    --sidebar-width: 280px;
    --content-max-width: 1400px;
    --code-panel-width: 45%;
    --top-nav-height: 56px;

    /* Method colors (consistent across themes) */
    --method-get: #22c55e;
    --method-post: #3b82f6;
    --method-put: #f59e0b;
    --method-patch: #f59e0b;
    --method-delete: #ef4444;
}

/* Dark Theme (default) */
:root,
[data-theme="dark"] {
    --api-bg-primary: #0d0e11;
    --api-bg-secondary: #141519;
    --api-bg-tertiary: #1a1b20;
    --api-bg-card: #1e1f25;
    --api-border-color: #2a2b32;
    --api-text-primary: #ffffff;
    --api-text-secondary: #a0a0a8;
    --api-text-muted: #6b6b73;
    --api-accent-primary: #6366f1;
    --api-accent-hover: #818cf8;
    --api-success: #22c55e;
    --api-warning: #f59e0b;
    --api-error: #ef4444;
    --api-info: #3b82f6;
}

/* Light Theme */
[data-theme="light"] {
    --api-bg-primary: #ffffff;
    --api-bg-secondary: #f8f9fa;
    --api-bg-tertiary: #f1f3f4;
    --api-bg-card: #ffffff;
    --api-border-color: #e1e4e8;
    --api-text-primary: #1a1a1a;
    --api-text-secondary: #57606a;
    --api-text-muted: #8b949e;
    --api-accent-primary: #6366f1;
    --api-accent-hover: #4f46e5;
    --api-success: #1a7f37;
    --api-warning: #bf8700;
    --api-error: #cf222e;
    --api-info: #0969da;
}

/* Container Layout */
.api-reference-container {
    display: flex;
    min-height: calc(100vh - var(--top-nav-height));
    width: 100%;
    background-color: var(--api-bg-primary);
    color: var(--api-text-primary);
    margin-top: var(--top-nav-height);
}

/* Sidebar Styles */
.api-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: var(--api-bg-secondary);
    border-right: 1px solid var(--api-border-color);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--top-nav-height));
    position: sticky;
    top: var(--top-nav-height);
    overflow: hidden;
}

.api-sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--api-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.api-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--api-text-primary);
    font-weight: 600;
    font-size: 16px;
}

.logo-icon {
    font-size: 20px;
}

.api-sidebar-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--api-border-color);
}

.search-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    padding: 8px 12px;
}

.search-icon {
    margin-right: 8px;
    color: var(--api-text-muted);
    font-size: 14px;
}

.search-input {
    background: transparent;
    border: none;
    color: var(--api-text-primary);
    font-size: 14px;
    width: 100%;
    outline: none;
}

.search-input::placeholder {
    color: var(--api-text-muted);
}

/* Sidebar Navigation */
.api-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-section {
    padding: 4px 12px;
}

.nav-section-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--api-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s ease;
}

.nav-section-link:hover,
.nav-section-link.active {
    background-color: var(--api-bg-tertiary);
    color: var(--api-text-primary);
}

.nav-icon {
    font-size: 16px;
}

.nav-group {
    margin-bottom: 4px;
}

.nav-group-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--api-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.nav-group-header:hover {
    color: var(--api-text-primary);
}

.expand-icon {
    font-size: 10px;
    margin-right: 8px;
    color: var(--api-text-muted);
}

.group-name {
    flex: 1;
    text-align: left;
}

.endpoint-count {
    font-size: 11px;
    color: var(--api-text-muted);
    background-color: var(--api-bg-tertiary);
    padding: 2px 6px;
    border-radius: 10px;
}

.nav-group-items {
    padding: 4px 8px 8px;
}

.nav-endpoint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 2px 0;
    color: var(--api-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.15s ease;
}

.nav-endpoint:hover {
    background-color: var(--api-bg-tertiary);
    color: var(--api-text-primary);
}

.nav-endpoint.active {
    background-color: var(--api-accent-primary);
    color: white;
}

.nav-endpoint.deprecated {
    opacity: 0.6;
    text-decoration: line-through;
}

.endpoint-summary {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Method Badges */
.method-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.method-badge.get {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--method-get);
}

.method-badge.post {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--method-post);
}

.method-badge.put,
.method-badge.patch {
    background-color: rgba(245, 158, 11, 0.15);
    color: var(--method-put);
}

.method-badge.delete {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--method-delete);
}

.method-badge.large {
    font-size: 12px;
    padding: 6px 12px;
    min-width: 60px;
}

/* Sidebar Footer */
.api-sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--api-border-color);
    text-align: center;
}

.powered-by {
    font-size: 12px;
    color: var(--api-text-muted);
}

.nav-loading {
    padding: 20px;
    text-align: center;
    color: var(--api-text-muted);
}

/* Section Navigation */
.nav-section {
    margin-bottom: 4px;
}

.nav-section-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--api-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.15s ease;
    gap: 8px;
}

.nav-section-header:hover {
    color: var(--api-text-primary);
}

.nav-section-contents {
    padding-left: 8px;
}

.section-name {
    flex: 1;
    text-align: left;
}

/* Page Navigation */
.nav-page {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--api-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s ease;
    margin: 2px 8px;
}

.nav-page:hover {
    background-color: var(--api-bg-tertiary);
    color: var(--api-text-primary);
}

.nav-page.active {
    background-color: var(--api-accent-primary);
    color: white;
}

.page-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* API Reference Container */
.nav-api-reference {
    margin-bottom: 4px;
}

.nav-api-groups {
    padding-left: 0;
}

/* Changelog Navigation */
.nav-changelog {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--api-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s ease;
    margin: 4px 8px;
    border-left: 2px solid var(--api-accent-primary);
}

.nav-changelog:hover {
    background-color: var(--api-bg-tertiary);
    color: var(--api-text-primary);
}

.nav-changelog.active {
    background-color: var(--api-accent-primary);
    color: white;
}

/* External Link Navigation */
.nav-link-external {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--api-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s ease;
    margin: 2px 8px;
}

.nav-link-external:hover {
    background-color: var(--api-bg-tertiary);
    color: var(--api-text-primary);
}

.external-icon {
    font-size: 12px;
    opacity: 0.6;
}

/* Folder Navigation */
.nav-folder {
    margin-bottom: 4px;
}

.nav-folder-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--api-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
    gap: 8px;
}

.nav-folder-header:hover {
    color: var(--api-text-primary);
}

.nav-folder-contents {
    padding-left: 8px;
}

.folder-name {
    flex: 1;
    text-align: left;
}

/* Navigation Icons */
.nav-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--api-text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.nav-icon i {
    font-size: 14px;
}

.nav-icon-svg {
    width: 16px;
    height: 16px;
}

.nav-icon-svg svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.nav-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Depth-based indentation */
.nav-depth-1 {
    padding-left: 8px;
}

.nav-depth-2 {
    padding-left: 16px;
}

.nav-depth-3 {
    padding-left: 24px;
}

/* Main Content Area */
.api-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--api-bg-primary);
}

.api-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--api-border-color);
    background-color: var(--api-bg-secondary);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.breadcrumb a {
    color: var(--api-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb a:hover {
    color: var(--api-accent-primary);
}

.breadcrumb .separator {
    color: var(--api-text-muted);
}

.header-actions {
    display: flex;
    gap: 8px;
}

.copy-page-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 6px;
    color: var(--api-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.copy-page-btn:hover {
    background-color: var(--api-bg-card);
    color: var(--api-text-primary);
}

/* API Content */
.api-content {
    flex: 1;
    padding: 32px 40px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    width: 100%;
}

.api-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.api-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

.api-version {
    background-color: var(--api-bg-tertiary);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    color: var(--api-text-secondary);
}

.api-description {
    font-size: 16px;
    color: var(--api-text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Sections */
.api-servers,
.api-overview,
.api-authentication,
.section {
    margin-bottom: 40px;
}

.api-servers h2,
.api-overview h2,
.api-authentication h2,
.section h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--api-border-color);
}

.server-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.server-url {
    background-color: var(--api-bg-tertiary);
    padding: 8px 16px;
    border-radius: 6px;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 14px;
}

.server-description {
    color: var(--api-text-secondary);
    font-size: 14px;
}

/* Overview Stats */
.overview-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.stat {
    color: var(--api-text-secondary);
    font-size: 14px;
}

.stat strong {
    color: var(--api-text-primary);
    font-size: 18px;
}

/* Endpoint Groups Grid */
.endpoint-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.endpoint-group-card {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.15s ease;
}

.endpoint-group-card:hover {
    border-color: var(--api-accent-primary);
}

.endpoint-group-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.group-description {
    color: var(--api-text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.group-endpoints {
    list-style: none;
    padding: 0;
    margin: 0;
}

.group-endpoints li {
    margin: 8px 0;
}

.group-endpoints a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--api-text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s ease;
}

.group-endpoints a:hover {
    color: var(--api-text-primary);
}

.more-endpoints {
    color: var(--api-text-muted);
    font-style: italic;
    font-size: 12px;
    padding-top: 8px;
}

/* Authentication Section */
.auth-scheme {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.auth-scheme h3 {
    font-size: 16px;
    margin: 0 0 8px;
}

.auth-type {
    font-size: 14px;
    color: var(--api-text-secondary);
}

.auth-type code {
    background-color: var(--api-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Endpoint Detail Page */
.endpoint-detail {
    display: flex;
    flex-direction: column;
}

.endpoint-header {
    margin-bottom: 24px;
}

.endpoint-header h1 {
    font-size: 28px;
    margin: 0 0 16px;
}

.endpoint-url {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--api-bg-card);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--api-border-color);
}

.endpoint-path {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 14px;
    color: var(--api-text-secondary);
}

.endpoint-description {
    font-size: 15px;
    color: var(--api-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.deprecation-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--api-warning);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: var(--api-warning);
    font-size: 14px;
}

/* Endpoint Content Grid */
.endpoint-content-grid {
    display: grid;
    grid-template-columns: 1fr var(--code-panel-width);
    gap: 32px;
}

@media (max-width: 1200px) {
    .endpoint-content-grid {
        grid-template-columns: 1fr;
    }
}

.endpoint-details {
    min-width: 0;
}

/* Parameters Section */
.parameters-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.parameter-item {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    padding: 16px;
}

.parameter-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.parameter-name {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--api-text-primary);
}

.parameter-type {
    font-size: 12px;
    color: var(--api-text-muted);
    background-color: var(--api-bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

.required-badge {
    font-size: 11px;
    color: var(--api-error);
    font-weight: 600;
}

.optional-badge {
    font-size: 11px;
    color: var(--api-text-muted);
}

.parameter-description {
    font-size: 14px;
    color: var(--api-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.parameter-default {
    font-size: 13px;
    color: var(--api-text-muted);
    margin: 8px 0 0;
}

.parameter-default code {
    background-color: var(--api-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Request Body Properties Table */
.properties-table {
    margin-bottom: 16px;
}

.properties-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.properties-table th,
.properties-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--api-border-color);
}

.properties-table th {
    background-color: var(--api-bg-tertiary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--api-text-secondary);
}

.properties-table td {
    font-size: 14px;
    color: var(--api-text-secondary);
}

.properties-table td code {
    background-color: var(--api-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 13px;
}

.properties-table tr:last-child td {
    border-bottom: none;
}

.properties-table tr:hover td {
    background-color: var(--api-bg-tertiary);
}

/* Schema Type Info */
.schema-type-info {
    font-size: 14px;
    color: var(--api-text-secondary);
    margin-bottom: 12px;
}

.schema-type-info code {
    background-color: var(--api-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 13px;
    color: var(--api-accent-primary);
}

/* Sample JSON Section */
.sample-json {
    margin-top: 16px;
}

.sample-json h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--api-text-secondary);
    margin: 0 0 8px;
}

.sample-json pre {
    margin: 0;
    padding: 16px;
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow-x: auto;
}

.sample-json code {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--api-text-secondary);
}

/* Response Body */
.response-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--api-border-color);
}

.response-body .properties-table {
    margin-bottom: 12px;
}

.response-body .sample-json {
    margin-top: 12px;
}

.response-body .sample-json h3 {
    font-size: 13px;
}

/* Responses Section - Tabs */
.response-tabs {
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--api-bg-card);
}

.response-tabs-header {
    display: flex;
    gap: 0;
    background-color: var(--api-bg-tertiary);
    border-bottom: 1px solid var(--api-border-color);

}

.response-tab-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.response-tab-button:hover {
    background-color: var(--api-bg-card);
}

.response-tab-button.active {
    background-color: var(--api-bg-card);
}

.response-tab-button.success .tab-status-code {
    color: var(--api-success);
}

.response-tab-button.success.active {
    border-bottom-color: var(--api-success);
}

.response-tab-button.client-error .tab-status-code,
.response-tab-button.server-error .tab-status-code {
    color: var(--api-error);
}

.response-tab-button.client-error.active,
.response-tab-button.server-error.active {
    border-bottom-color: var(--api-error);
}

.tab-status-code {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-weight: 700;
    font-size: 13px;
}

.tab-status-text {
    font-size: 13px;
    color: var(--api-text-secondary);
}

.response-tab-button.active .tab-status-text {
    color: var(--api-text-primary);
}

.response-tabs-content {
    padding: 0;
}

.response-tab-panel {
    display: none;
    padding: 16px;
}

.response-tab-panel.active {
    display: block;
}

.response-description {
    font-size: 14px;
    color: var(--api-text-secondary);
    margin: 0 0 16px;
    line-height: 1.5;
}

.no-response-body {
    font-size: 14px;
    color: var(--api-text-muted);
    margin: 0;
    font-style: italic;
}

.status-code {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-weight: 700;
    font-size: 14px;
    min-width: 40px;
}

.status-description {
    color: var(--api-text-secondary);
    font-size: 14px;
}

/* Code Examples Panel */
.code-examples {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.code-panel,
.response-panel {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.code-panel-header,
.response-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--api-bg-tertiary);
    border-bottom: 1px solid var(--api-border-color);
}

.endpoint-path-display {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 13px;
    color: var(--api-text-secondary);
}

.language-selector {
    display: flex;
    gap: 4px;
}

.language-selector button {
    padding: 4px 10px;
    background: transparent;
    border: none;
    color: var(--api-text-muted);
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.language-selector button:hover {
    color: var(--api-text-primary);
}

.language-selector button.active {
    background-color: var(--api-bg-card);
    color: var(--api-text-primary);
}

.code-content {
    position: relative;
    padding: 16px;
}

.code-content pre {
    margin: 0;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
}

.code-content code {
    color: var(--api-text-secondary);
}

.copy-code-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px;
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.code-content:hover .copy-code-btn {
    opacity: 1;
}

.response-panel-header {
    gap: 8px;
}

.response-status {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
}

.response-status.success {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--api-success);
}

.response-content pre {
    margin: 0;
    padding: 16px;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
}

.response-content code {
    color: var(--api-text-secondary);
}

/* Endpoint Navigation */
.endpoint-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--api-border-color);
}

.nav-previous,
.nav-next {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    max-width: 45%;
}

.nav-previous:hover,
.nav-next:hover {
    border-color: var(--api-accent-primary);
}

.nav-direction {
    font-size: 12px;
    color: var(--api-text-muted);
}

.nav-title {
    font-size: 14px;
    color: var(--api-text-primary);
    font-weight: 500;
}

.nav-next {
    align-items: flex-end;
    margin-left: auto;
}

/* Footer */
.api-footer {
    padding: 24px 40px;
    border-top: 1px solid var(--api-border-color);
    background-color: var(--api-bg-secondary);
}

.feedback {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--api-text-secondary);
}

.feedback-btn {
    padding: 6px 12px;
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 6px;
    color: var(--api-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feedback-btn:hover {
    background-color: var(--api-bg-card);
    color: var(--api-text-primary);
}

/* Loading and Empty States */
.loading-state,
.empty-state,
.not-found-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--api-border-color);
    border-top-color: var(--api-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.empty-state h2,
.not-found-state h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.empty-state p,
.not-found-state p {
    color: var(--api-text-secondary);
    margin-bottom: 24px;
}

.back-link {
    color: var(--api-accent-primary);
    text-decoration: none;
}

.back-link:hover {
    color: var(--api-accent-hover);
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* --- Sidebar Overlay --- */
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 899;
        -webkit-tap-highlight-color: transparent;
    }

    /* --- Sidebar Drawer --- */
    .api-sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 280px;
        min-width: 280px;
        height: calc(100vh - 56px);
        max-height: none;
        z-index: 900;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .api-sidebar.sidebar-open {
        transform: translateX(0);
    }

    /* --- Container --- */
    .api-reference-container {
        flex-direction: column;
    }

    /* --- Content --- */
    .api-content {
        padding: 16px;
    }

    .api-footer {
        padding: 16px;
    }

    /* --- Font Sizes --- */
    .api-header h1 {
        font-size: 22px;
    }

    .endpoint-header h1 {
        font-size: 20px;
    }

    /* --- Breadcrumb & Header Actions --- */
    .api-content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
    }

    .breadcrumb {
        flex-wrap: wrap;
        font-size: 12px;
    }

    .header-actions {
        width: 100%;
    }

    .copy-page-btn {
        min-height: 44px;
    }

    /* --- Overview Stats --- */
    .overview-stats {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* --- Endpoint Groups Grid --- */
    .endpoint-groups-grid {
        grid-template-columns: 1fr;
    }

    /* --- Server URL --- */
    .server-url {
        word-break: break-all;
        font-size: 13px;
    }

    .server-item {
        flex-direction: column;
        align-items: flex-start;
    }

    /* --- Endpoint URL --- */
    .endpoint-url-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .endpoint-url {
        flex-wrap: wrap;
        gap: 8px;
    }

    .endpoint-path {
        word-break: break-all;
        font-size: 12px;
    }

    .send-btn {
        width: 100%;
        min-height: 44px;
    }

    /* --- Endpoint Content Grid --- */
    .endpoint-content-grid {
        grid-template-columns: 1fr;
    }

    .code-examples {
        position: relative;
        top: 0;
    }

    /* --- Code Panel Header --- */
    .code-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .endpoint-path-display {
        word-break: break-all;
        font-size: 12px;
    }

    .language-selector {
        width: 100%;
        justify-content: flex-start;
    }

    .language-selector button {
        min-height: 44px;
        padding: 8px 12px;
    }

    /* --- Tables --- */
    .properties-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .properties-table table {
        min-width: 500px;
    }

    /* --- Auth Input --- */
    .auth-input-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .auth-label {
        min-width: unset;
    }

    /* --- Response Header Items --- */
    .response-header-item {
        flex-direction: column;
        gap: 4px;
    }

    .response-header-item .header-name {
        min-width: unset;
        font-weight: 600;
    }

    .response-header-item .header-value {
        word-break: break-all;
    }

    /* --- API Tester Response Header --- */
    .api-tester-response .response-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .response-meta {
        width: 100%;
        justify-content: space-between;
    }

    /* --- Response Tabs --- */
    .response-tabs-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .response-tab-button {
        min-height: 44px;
    }

    /* --- Endpoint Navigation --- */
    .endpoint-navigation {
        flex-direction: column;
        gap: 12px;
    }

    .nav-previous,
    .nav-next {
        max-width: 100%;
        min-height: 44px;
    }

    .nav-next {
        align-items: flex-start;
    }

    /* --- Touch Targets --- */
    .nav-endpoint,
    .nav-page,
    .nav-section-link,
    .nav-group-header,
    .nav-folder-header,
    .nav-section-header {
        min-height: 44px;
    }

    .feedback-btn {
        min-height: 44px;
        padding: 8px 16px;
    }

    .send-request-btn {
        min-height: 44px;
    }

    .param-input-header {
        min-height: 44px;
    }

    /* --- Markdown --- */
    .markdown-body h1 {
        font-size: 24px;
    }

    .markdown-body h2 {
        font-size: 20px;
    }

    .markdown-body h3 {
        font-size: 17px;
    }

    .markdown-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Extra-small screens */
@media (max-width: 400px) {
    .api-sidebar.sidebar-open {
        width: 100%;
        min-width: 100%;
    }

    .api-content {
        padding: 12px;
    }

    .api-tester-section {
        padding: 12px;
    }

    .api-tester-response {
        margin: 12px;
    }

    .endpoint-url .method-badge.large {
        font-size: 10px;
        padding: 4px 8px;
        min-width: 48px;
    }
}

/* Documentation Page Styles */
.docs-content {
    max-width: 800px;
}

/* Markdown Body Styles */
.markdown-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--api-text-primary);
}

.markdown-body h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--api-border-color);
}

.markdown-body h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 32px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--api-border-color);
}

.markdown-body h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 12px;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 10px;
}

.markdown-body p {
    margin: 0 0 16px;
}

.markdown-body a {
    color: var(--api-accent-primary);
    text-decoration: none;
}

.markdown-body a:hover {
    color: var(--api-accent-hover);
    text-decoration: underline;
}

.markdown-body code {
    background-color: var(--api-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 14px;
}

.markdown-body pre {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
}

.markdown-body pre code {
    background: transparent;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}

.markdown-body ul,
.markdown-body ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.markdown-body li {
    margin: 8px 0;
}

.markdown-body blockquote {
    border-left: 4px solid var(--api-accent-primary);
    margin: 16px 0;
    padding: 12px 20px;
    background-color: var(--api-bg-card);
    border-radius: 0 8px 8px 0;
    color: var(--api-text-secondary);
}

.markdown-body blockquote p:last-child {
    margin-bottom: 0;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--api-border-color);
    padding: 12px;
    text-align: left;
}

.markdown-body th {
    background-color: var(--api-bg-tertiary);
    font-weight: 600;
}

.markdown-body tr:nth-child(even) {
    background-color: var(--api-bg-card);
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--api-border-color);
    margin: 32px 0;
}

.markdown-body .task-list-item {
    list-style: none;
    margin-left: -24px;
}

.markdown-body .task-list-item input[type="checkbox"] {
    margin-right: 8px;
}

/* Accordion Component Styles */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.accordion {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
}

.accordion-group .accordion {
    margin: 0;
}

.accordion summary {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    color: var(--api-text-primary);
    background-color: var(--api-bg-tertiary);
    transition: background-color 0.15s ease;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid var(--api-text-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-right: 12px;
    transition: transform 0.2s ease;
}

.accordion[open] summary::before {
    transform: rotate(90deg);
}

.accordion summary:hover {
    background-color: var(--api-bg-card);
}

.accordion-content {
    padding: 16px;
    border-top: 1px solid var(--api-border-color);
}

.accordion-content > *:first-child {
    margin-top: 0;
}

.accordion-content > *:last-child {
    margin-bottom: 0;
}

/* Card Component Styles */
.mdx-card-group {
    display: grid;
    grid-template-columns: repeat(var(--card-cols, 2), 1fr);
    gap: 16px;
    margin: 16px 0;
}

@media (max-width: 768px) {
    .mdx-card-group {
        grid-template-columns: 1fr;
    }
}

.mdx-card {
    display: flex;
    flex-direction: column;
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mdx-card.clickable {
    cursor: pointer;
}

.mdx-card.clickable:hover {
    border-color: var(--api-accent-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mdx-card.horizontal {
    flex-direction: row;
}

.mdx-card-image {
    overflow: hidden;
    background-color: var(--api-bg-tertiary);
}

.mdx-card-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.mdx-card.horizontal .mdx-card-image {
    width: 40%;
    min-width: 120px;
    max-width: 200px;
    flex-shrink: 0;
}

.mdx-card.horizontal .mdx-card-image img {
    height: 100%;
    object-fit: cover;
}

.mdx-card.horizontal .mdx-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mdx-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    padding-bottom: 0;
}

.mdx-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--api-accent-primary);
    font-size: 16px;
}

.mdx-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--api-text-primary);
}

.mdx-card-body {
    padding: 16px;
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--api-text-secondary);
}

.mdx-card-body > *:first-child {
    margin-top: 0;
}

.mdx-card-body > *:last-child {
    margin-bottom: 0;
}

.mdx-card-body p {
    margin: 8px 0;
}

/* Aside Component Styles */
.mdx-aside {
    float: right;
    width: 45%;
    max-width: 500px;
    margin: 0 0 16px 24px;
    position: sticky;
    top: 24px;
}

.mdx-aside-content {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.mdx-aside-content pre {
    margin: 0;
    border-radius: 0;
    border: none;
}

.mdx-aside-content > *:first-child {
    margin-top: 0;
}

.mdx-aside-content > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .mdx-aside {
        float: none;
        width: 100%;
        max-width: none;
        margin: 16px 0;
        position: relative;
        top: 0;
    }
}

/* Badge Component Styles */
.mdx-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* Badge Intent Colors */
.mdx-badge-success {
    background-color: var(--api-success);
    color: #fff;
}

.mdx-badge-note {
    background-color: #6366f1;
    color: #fff;
}

.mdx-badge-tip {
    background-color: #14b8a6;
    color: #fff;
}

.mdx-badge-warning {
    background-color: var(--api-warning);
    color: #000;
}

.mdx-badge-error {
    background-color: var(--api-error);
    color: #fff;
}

.mdx-badge-info {
    background-color: var(--api-info);
    color: #fff;
}

.mdx-badge-launch {
    background-color: #22c55e;
    color: #fff;
}

.mdx-badge-check {
    background-color: #8b5cf6;
    color: #fff;
}

/* Badge Minimal Style */
.mdx-badge-minimal.mdx-badge-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--api-success);
}

.mdx-badge-minimal.mdx-badge-note {
    background-color: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.mdx-badge-minimal.mdx-badge-tip {
    background-color: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
}

.mdx-badge-minimal.mdx-badge-warning {
    background-color: rgba(245, 158, 11, 0.15);
    color: var(--api-warning);
}

.mdx-badge-minimal.mdx-badge-error {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--api-error);
}

.mdx-badge-minimal.mdx-badge-info {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--api-info);
}

.mdx-badge-minimal.mdx-badge-launch {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.mdx-badge-minimal.mdx-badge-check {
    background-color: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* Badge Outlined Style */
.mdx-badge-outlined {
    background-color: transparent;
    border: 1px solid currentColor;
}

.mdx-badge-outlined.mdx-badge-success {
    color: var(--api-success);
}

.mdx-badge-outlined.mdx-badge-note {
    color: #818cf8;
}

.mdx-badge-outlined.mdx-badge-tip {
    color: #14b8a6;
}

.mdx-badge-outlined.mdx-badge-warning {
    color: var(--api-warning);
}

.mdx-badge-outlined.mdx-badge-error {
    color: var(--api-error);
}

.mdx-badge-outlined.mdx-badge-info {
    color: var(--api-info);
}

.mdx-badge-outlined.mdx-badge-launch {
    color: #22c55e;
}

.mdx-badge-outlined.mdx-badge-check {
    color: #8b5cf6;
}

/* Badge Minimal + Outlined Combined */
.mdx-badge-minimal.mdx-badge-outlined {
    border: 1px solid currentColor;
}

/* Button Component Styles */
.mdx-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* Button Intent Colors */
.mdx-button-none {
    background-color: var(--api-bg-tertiary);
    border-color: var(--api-border-color);
    color: var(--api-text-primary);
}

.mdx-button-none:hover {
    background-color: var(--api-bg-card);
    border-color: var(--api-text-muted);
}

.mdx-button-primary {
    background-color: var(--api-accent-primary);
    color: #fff;
}

.mdx-button-primary:hover {
    background-color: var(--api-accent-hover);
}

.mdx-button-success {
    background-color: var(--api-success);
    color: #fff;
}

.mdx-button-success:hover {
    background-color: #16a34a;
}

.mdx-button-warning {
    background-color: var(--api-warning);
    color: #000;
}

.mdx-button-warning:hover {
    background-color: #d97706;
}

.mdx-button-danger {
    background-color: var(--api-error);
    color: #fff;
}

.mdx-button-danger:hover {
    background-color: #dc2626;
}

/* Button Sizes */
.mdx-button-small {
    padding: 4px 10px;
    font-size: 12px;
}

.mdx-button-large {
    padding: 12px 24px;
    font-size: 16px;
}

/* Button Minimal Style */
.mdx-button-minimal {
    background-color: transparent;
    border-color: transparent;
}

.mdx-button-minimal.mdx-button-none {
    color: var(--api-text-secondary);
}

.mdx-button-minimal.mdx-button-none:hover {
    background-color: var(--api-bg-tertiary);
    color: var(--api-text-primary);
}

.mdx-button-minimal.mdx-button-primary {
    color: var(--api-accent-primary);
}

.mdx-button-minimal.mdx-button-primary:hover {
    background-color: rgba(99, 102, 241, 0.1);
}

.mdx-button-minimal.mdx-button-success {
    color: var(--api-success);
}

.mdx-button-minimal.mdx-button-success:hover {
    background-color: rgba(34, 197, 94, 0.1);
}

.mdx-button-minimal.mdx-button-warning {
    color: var(--api-warning);
}

.mdx-button-minimal.mdx-button-warning:hover {
    background-color: rgba(245, 158, 11, 0.1);
}

.mdx-button-minimal.mdx-button-danger {
    color: var(--api-error);
}

.mdx-button-minimal.mdx-button-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Button Outlined Style */
.mdx-button-outlined {
    background-color: transparent;
}

.mdx-button-outlined.mdx-button-none {
    border-color: var(--api-border-color);
    color: var(--api-text-primary);
}

.mdx-button-outlined.mdx-button-none:hover {
    background-color: var(--api-bg-tertiary);
}

.mdx-button-outlined.mdx-button-primary {
    border-color: var(--api-accent-primary);
    color: var(--api-accent-primary);
}

.mdx-button-outlined.mdx-button-primary:hover {
    background-color: rgba(99, 102, 241, 0.1);
}

.mdx-button-outlined.mdx-button-success {
    border-color: var(--api-success);
    color: var(--api-success);
}

.mdx-button-outlined.mdx-button-success:hover {
    background-color: rgba(34, 197, 94, 0.1);
}

.mdx-button-outlined.mdx-button-warning {
    border-color: var(--api-warning);
    color: var(--api-warning);
}

.mdx-button-outlined.mdx-button-warning:hover {
    background-color: rgba(245, 158, 11, 0.1);
}

.mdx-button-outlined.mdx-button-danger {
    border-color: var(--api-error);
    color: var(--api-error);
}

.mdx-button-outlined.mdx-button-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Button Modifiers */
.mdx-button-full {
    width: 100%;
}

.mdx-button-rounded {
    border-radius: 9999px;
}

.mdx-button-active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mdx-button-mono {
    font-family: 'Fira Code', 'Monaco', monospace;
}

.mdx-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button Icons */
.mdx-button-icon-left {
    font-size: 0.9em;
}

.mdx-button-icon-right {
    font-size: 0.9em;
}

.mdx-button-text {
    display: inline;
}

/* Callout Component Styles */
.mdx-callout {
    display: flex;
    gap: 12px;
    padding: 16px;
    margin: 16px 0;
    border-radius: 8px;
    border-left: 4px solid;
}

.mdx-callout-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 2px;
}

.mdx-callout-content {
    flex: 1;
    min-width: 0;
}

.mdx-callout-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.mdx-callout-body {
    font-size: 14px;
    line-height: 1.6;
}

.mdx-callout-body > *:first-child {
    margin-top: 0;
}

.mdx-callout-body > *:last-child {
    margin-bottom: 0;
}

.mdx-callout-body p {
    margin: 8px 0;
}

/* Callout Intent Colors */
.mdx-callout-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--api-info);
}

.mdx-callout-info .mdx-callout-icon {
    color: var(--api-info);
}

.mdx-callout-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: var(--api-warning);
}

.mdx-callout-warning .mdx-callout-icon {
    color: var(--api-warning);
}

.mdx-callout-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: var(--api-success);
}

.mdx-callout-success .mdx-callout-icon {
    color: var(--api-success);
}

.mdx-callout-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--api-error);
}

.mdx-callout-error .mdx-callout-icon {
    color: var(--api-error);
}

.mdx-callout-note {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
}

.mdx-callout-note .mdx-callout-icon {
    color: #818cf8;
}

.mdx-callout-launch {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: var(--api-accent-primary);
}

.mdx-callout-launch .mdx-callout-icon {
    color: var(--api-accent-primary);
}

.mdx-callout-tip {
    background-color: rgba(250, 204, 21, 0.1);
    border-color: #facc15;
}

.mdx-callout-tip .mdx-callout-icon {
    color: #facc15;
}

.mdx-callout-check {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: var(--api-success);
}

.mdx-callout-check .mdx-callout-icon {
    color: var(--api-success);
}

/* Code Component */
.mdx-code {
    margin: 16px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--api-border-color);
    background-color: var(--api-bg-card);
}

.mdx-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: var(--api-bg-tertiary);
    border-bottom: 1px solid var(--api-border-color);
}

.mdx-code-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--api-text-secondary);
    font-family: 'Fira Code', 'Monaco', monospace;
}

.mdx-code-content {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    background-color: var(--api-bg-card);
    border: none;
    border-radius: 0;
}

.mdx-code-content code {
    background: transparent;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
    font-family: 'Fira Code', 'Monaco', monospace;
    color: var(--api-text-primary);
}

.mdx-code[data-max-lines] .mdx-code-content {
    max-height: calc(var(--max-lines, 20) * 1.6em + 32px);
    overflow-y: auto;
}

/* Copy Component */
.mdx-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 4px;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 0.9em;
    color: var(--api-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: middle;
}

.mdx-copy:hover {
    background-color: var(--api-bg-card);
    border-color: var(--api-accent-primary);
}

.mdx-copy:focus {
    outline: 2px solid var(--api-accent-primary);
    outline-offset: 1px;
}

.mdx-copy:active {
    transform: scale(0.98);
}

.mdx-copy-text {
    color: inherit;
}

.mdx-copy-icon {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.15s ease;
}

.mdx-copy:hover .mdx-copy-icon {
    opacity: 1;
}

.mdx-copy.copied {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: var(--api-success);
}

.mdx-copy.copied .mdx-copy-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    opacity: 1;
}

/* Download Component */
.mdx-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.mdx-download-content {
    display: inline-flex;
    align-items: center;
}

.mdx-download-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.mdx-download:hover .mdx-download-icon {
    opacity: 1;
}

/* Files Component */
.mdx-files {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    padding: 12px 0;
    margin: 16px 0;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 13px;
}

/* File Component */
.mdx-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    color: var(--api-text-secondary);
    transition: background-color 0.15s ease;
}

.mdx-file:hover {
    background-color: var(--api-bg-tertiary);
}

.mdx-file-highlighted {
    background-color: rgba(99, 102, 241, 0.1);
}

.mdx-file-highlighted:hover {
    background-color: rgba(99, 102, 241, 0.15);
}

.mdx-file-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.mdx-file-name {
    color: var(--api-text-primary);
    text-decoration: none;
}

a.mdx-file-name:hover {
    color: var(--api-accent-primary);
    text-decoration: underline;
}

.mdx-file-comment {
    color: var(--api-text-muted);
    font-style: italic;
    margin-left: auto;
}

.mdx-file-comment::before {
    content: '// ';
}

/* Folder Component */
.mdx-folder {
    margin: 0;
}

.mdx-folder-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    cursor: pointer;
    list-style: none;
    color: var(--api-text-secondary);
    transition: background-color 0.15s ease;
}

.mdx-folder-header::-webkit-details-marker {
    display: none;
}

.mdx-folder-header:hover {
    background-color: var(--api-bg-tertiary);
}

.mdx-folder-highlighted > .mdx-folder-header {
    background-color: rgba(99, 102, 241, 0.1);
}

.mdx-folder-highlighted > .mdx-folder-header:hover {
    background-color: rgba(99, 102, 241, 0.15);
}

.mdx-folder-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.15s ease;
}

.mdx-folder[open] > .mdx-folder-header .mdx-folder-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Cline x1='9' y1='14' x2='15' y2='14'%3E%3C/line%3E%3C/svg%3E");
}

.mdx-folder-name {
    color: var(--api-text-primary);
    font-weight: 500;
    text-decoration: none;
}

a.mdx-folder-name:hover {
    color: var(--api-accent-primary);
    text-decoration: underline;
}

.mdx-folder-comment {
    color: var(--api-text-muted);
    font-style: italic;
    font-weight: 400;
    margin-left: auto;
}

.mdx-folder-comment::before {
    content: '// ';
}

.mdx-folder-contents {
    padding-left: 16px;
    border-left: 1px solid var(--api-border-color);
    margin-left: 23px;
}

/* Nested folder adjustments */
.mdx-folder .mdx-folder {
    margin-left: 0;
}

.mdx-folder .mdx-file {
    padding-left: 8px;
}

/* Frame Component */
.mdx-frame {
    margin: 16px 0;
    border: 1px solid var(--api-border-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--api-bg-card);
}

.mdx-frame-subtle {
    background-color: var(--api-bg-tertiary);
    border-color: var(--api-bg-tertiary);
}

.mdx-frame-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mdx-frame-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.mdx-frame-content video,
.mdx-frame-content iframe {
    max-width: 100%;
    border-radius: 8px;
}

.mdx-frame-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--api-text-secondary);
    border-top: 1px solid var(--api-border-color);
    background-color: var(--api-bg-secondary);
}

.mdx-frame-subtle .mdx-frame-caption {
    border-top-color: var(--api-border-color);
    background-color: var(--api-bg-tertiary);
}

/* Icon Component */
.mdx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.mdx-icon-themed {
    color: var(--icon-light-color, inherit);
}

@media (prefers-color-scheme: dark) {
    .mdx-icon-themed {
        color: var(--icon-dark-color, inherit);
    }
}

.mdx-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Steps Component */
.mdx-steps {
    counter-reset: step-counter;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 16px 0;
}

/* Step Component */
.mdx-step {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 24px;
}

.mdx-step:last-child {
    padding-bottom: 0;
}

.mdx-step::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background-color: var(--api-border-color);
}

.mdx-step:last-child::before {
    display: none;
}

.mdx-step-indicator {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--api-bg-tertiary);
    border: 2px solid var(--api-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--api-text-primary);
    counter-increment: step-counter;
    position: relative;
    z-index: 1;
}

.mdx-step-indicator::before {
    content: counter(step-counter);
}

.mdx-step-content {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.mdx-step-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--api-text-primary);
    margin-bottom: 8px;
}

.mdx-step-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--api-text-secondary);
}

.mdx-step-body > *:first-child {
    margin-top: 0;
}

.mdx-step-body > *:last-child {
    margin-bottom: 0;
}

.mdx-step-body p {
    margin: 8px 0;
}

/* Tabs Component */
.mdx-tabs {
    margin: 16px 0;
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--api-bg-card);
}

.mdx-tabs-header {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--api-border-color);
    background-color: var(--api-bg-tertiary);
    overflow-x: auto;
}

.mdx-tab-button {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--api-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.mdx-tab-button:hover {
    color: var(--api-text-primary);
    background-color: var(--api-bg-card);
}

.mdx-tab-button.active {
    color: var(--api-text-primary);
    border-bottom-color: var(--api-accent-primary);
    background-color: var(--api-bg-card);
}

/* Tab Component */
.mdx-tab {
    display: none;
}

.mdx-tab.active {
    display: block;
}

.mdx-tab-content {
    padding: 16px;
}

.mdx-tab-content > *:first-child {
    margin-top: 0;
}

.mdx-tab-content > *:last-child {
    margin-bottom: 0;
}

.mdx-tab-content p {
    margin: 8px 0;
}

.mdx-tab-content .mdx-code {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* ============================================
   API Tester Styles
   ============================================ */

/* Send Button in Endpoint Header */
.endpoint-url-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background-color: var(--method-post);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.send-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.send-btn.active {
    background-color: var(--api-text-muted);
}

/* API Tester Container */
.api-tester {
    background-color: var(--api-bg-card);
    border: 1px solid var(--api-border-color);
    border-radius: 12px;
    margin: 24px 0;
    overflow: hidden;
}

.api-tester-section {
    border-bottom: 1px solid var(--api-border-color);
    padding: 16px 20px;
}

.api-tester-section:last-of-type {
    border-bottom: none;
}

.api-tester-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.api-tester-section .section-icon {
    margin-right: 8px;
}

.api-tester-section .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--api-text-primary);
}

/* Authentication Input */
.authentication-input .auth-input-container {
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    padding: 12px;
}

.auth-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--api-text-secondary);
    min-width: 100px;
}

.auth-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.auth-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    background-color: var(--api-bg-primary);
    border: 1px solid var(--api-border-color);
    border-radius: 6px;
    color: var(--api-text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 13px;
}

.auth-input:focus {
    border-color: var(--api-accent-primary);
    outline: none;
}

.auth-input::placeholder {
    color: var(--api-text-muted);
}

.toggle-visibility-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--api-text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
}

.toggle-visibility-btn:hover {
    color: var(--api-text-secondary);
}

.auth-remember-row {
    margin-top: 10px;
}

.remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--api-text-secondary);
    cursor: pointer;
}

.remember-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Parameter Input List */
.parameters-input-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.param-input-item {
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--api-bg-tertiary);
}

.param-input-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.param-input-header:hover {
    background-color: var(--api-bg-secondary);
}

.param-input-header .expand-chevron {
    font-size: 10px;
    color: var(--api-text-muted);
    transition: transform 0.2s ease;
    width: 12px;
}

.param-input-item.expanded .param-input-header .expand-chevron {
    transform: rotate(0deg);
}

.param-input-header .param-name {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: var(--api-text-primary);
}

.param-input-header .required-indicator {
    color: var(--api-error);
    font-weight: 600;
}

.param-input-header .param-type {
    font-size: 12px;
    color: var(--api-text-muted);
    background-color: var(--api-bg-primary);
    padding: 2px 8px;
    border-radius: 4px;
}

.param-input-header .param-value-preview {
    margin-left: auto;
    font-size: 12px;
    color: var(--api-accent-primary);
    font-family: 'Fira Code', monospace;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.param-input-body {
    display: none;
    padding: 14px;
    background-color: var(--api-bg-primary);
    border-top: 1px solid var(--api-border-color);
}

.param-input-item.expanded .param-input-body {
    display: block;
}

.param-input-body .param-description {
    font-size: 12px;
    color: var(--api-text-secondary);
    margin: 0 0 12px 0;
}

.param-input-field {
    width: 100%;
    padding: 10px 14px;
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 6px;
    color: var(--api-text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 13px;
}

.param-input-field:focus {
    border-color: var(--api-accent-primary);
    outline: none;
}

.param-input-field::placeholder {
    color: var(--api-text-muted);
}

.param-select {
    cursor: pointer;
}

.param-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--api-text-secondary);
    cursor: pointer;
}

.param-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* JSON Editor Toggle Button */
.json-editor-toggle-btn {
    padding: 6px 12px;
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 6px;
    color: var(--api-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.json-editor-toggle-btn:hover {
    background-color: var(--api-bg-secondary);
    color: var(--api-text-primary);
}

/* Body Editor Container */
.body-editor-container {
    background-color: var(--api-bg-tertiary);
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.raw-json-editor {
    position: relative;
}

.json-textarea {
    width: 100%;
    min-height: 200px;
    padding: 14px;
    background-color: var(--api-bg-primary);
    border: none;
    color: var(--api-text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

.json-textarea:focus {
    outline: none;
}

.json-textarea::placeholder {
    color: var(--api-text-muted);
}

.json-validation-error {
    padding: 10px 14px;
    background-color: rgba(239, 68, 68, 0.1);
    border-top: 1px solid var(--api-error);
    color: var(--api-error);
    font-size: 12px;
}

/* JSON Body Editor (WYSIWYG) */
.json-body-editor {
    padding: 14px;
}

.json-properties-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.json-property-item {
    border: 1px solid var(--api-border-color);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--api-bg-primary);
}

.json-property-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.json-property-header:hover {
    background-color: var(--api-bg-tertiary);
}

.json-property-header .expand-chevron {
    font-size: 10px;
    color: var(--api-text-muted);
    width: 12px;
}

.json-property-header .property-name {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: var(--api-text-primary);
}

.json-property-header .required-indicator {
    color: var(--api-error);
    font-weight: 600;
}

.json-property-header .property-type {
    font-size: 11px;
    color: var(--api-text-muted);
    background-color: var(--api-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.json-property-header .property-value-preview {
    margin-left: auto;
    font-size: 12px;
    color: var(--api-accent-primary);
    font-family: 'Fira Code', monospace;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.json-property-body {
    display: none;
    padding: 12px;
    background-color: var(--api-bg-tertiary);
    border-top: 1px solid var(--api-border-color);
}

.json-property-item.expanded .json-property-body {
    display: block;
}

.json-property-body .property-description {
    font-size: 12px;
    color: var(--api-text-secondary);
    margin: 0 0 10px 0;
}

.property-input-field {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--api-bg-primary);
    border: 1px solid var(--api-border-color);
    border-radius: 6px;
    color: var(--api-text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 13px;
}

.property-input-field:focus {
    border-color: var(--api-accent-primary);
    outline: none;
}

.property-input-field::placeholder {
    color: var(--api-text-muted);
}

.property-select {
    cursor: pointer;
}

.property-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--api-text-secondary);
    cursor: pointer;
}

.property-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.property-object-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Array Input */
.array-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.array-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.array-item-input {
    flex: 1;
}

.array-remove-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--api-bg-primary);
    border: 1px solid var(--api-border-color);
    border-radius: 4px;
    color: var(--api-error);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s ease;
}

.array-remove-btn:hover {
    background-color: var(--api-error);
    color: white;
    border-color: var(--api-error);
}

.array-add-btn {
    padding: 8px 12px;
    background-color: var(--api-bg-primary);
    border: 1px dashed var(--api-border-color);
    border-radius: 6px;
    color: var(--api-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.array-add-btn:hover {
    border-color: var(--api-accent-primary);
    color: var(--api-accent-primary);
}

.json-empty-schema {
    padding: 20px;
    text-align: center;
    color: var(--api-text-muted);
    font-size: 13px;
}

/* API Tester Actions */
.api-tester-actions {
    padding: 16px 20px;
    background-color: var(--api-bg-tertiary);
    border-top: 1px solid var(--api-border-color);
}

.send-request-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background-color: var(--method-post);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.send-request-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.send-request-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.send-request-btn.loading {
    background-color: var(--api-text-muted);
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* API Tester Response */
.api-tester-response {
    margin: 16px 20px 20px;
    border: 1px solid var(--api-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.api-tester-response .response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background-color: var(--api-bg-tertiary);
    border-bottom: 1px solid var(--api-border-color);
}

.api-tester-response .response-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.response-status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-weight: 600;
    font-size: 13px;
}

.response-status-badge.success {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--api-success);
}

.response-status-badge.client-error,
.response-status-badge.server-error,
.response-status-badge.error {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--api-error);
}

.response-status-text {
    font-size: 13px;
    color: var(--api-text-secondary);
}

.response-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.response-time {
    font-size: 12px;
    color: var(--api-text-muted);
    font-family: 'Fira Code', monospace;
}

.copy-response-btn {
    padding: 4px 10px;
    background-color: var(--api-bg-primary);
    border: 1px solid var(--api-border-color);
    border-radius: 4px;
    color: var(--api-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.copy-response-btn:hover {
    background-color: var(--api-bg-secondary);
    color: var(--api-text-primary);
}

.response-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--api-error);
    font-size: 13px;
}

.response-error .error-icon {
    font-size: 16px;
}

.response-body-container {
    background-color: var(--api-bg-primary);
}

.api-tester-response .response-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--api-border-color);
    padding: 0 14px;
}

.api-tester-response .response-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--api-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.api-tester-response .response-tab:hover {
    color: var(--api-text-primary);
}

.api-tester-response .response-tab.active {
    color: var(--api-accent-primary);
    border-bottom-color: var(--api-accent-primary);
}

.api-tester-response .response-body {
    padding: 14px;
    max-height: 400px;
    overflow: auto;
    margin: 0;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--api-text-primary);
}

.response-headers-list {
    padding: 14px;
}

.response-header-item {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--api-border-color);
    font-size: 12px;
}

.response-header-item:last-child {
    border-bottom: none;
}

.response-header-item .header-name {
    color: var(--api-text-secondary);
    font-weight: 500;
    min-width: 150px;
}

.response-header-item .header-value {
    color: var(--api-text-primary);
    font-family: 'Fira Code', monospace;
    word-break: break-all;
}