.api-header-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.api-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 var(--space-10);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.api-facts > div { padding: var(--space-4) var(--space-5); border-right: 1px solid var(--border-subtle); }
.api-facts > div:last-child { border-right: 0; }
.api-facts dt { color: var(--text-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.api-facts dd { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-base); }

.api-section { margin-bottom: var(--space-12); }
.api-section h2 { margin: 0 0 var(--space-2); color: var(--text-primary); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }
.api-section > p { margin: 0 0 var(--space-5); color: var(--text-muted); font-size: var(--text-md); line-height: 1.65; }
.api-section code { padding: 2px 5px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-tertiary); font-size: var(--text-sm); }

.api-endpoints { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.api-endpoint { display: grid; grid-template-columns: 72px minmax(0, 1fr) 80px; align-items: center; gap: var(--space-4); padding: 11px var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.api-endpoint:last-child { border-bottom: 0; }
.api-endpoint code { padding: 0; border: 0; background: none; color: var(--text-secondary); font-size: var(--text-base); }
.api-method { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }
.api-method-get { color: var(--status-info); }
.api-method-post { color: var(--status-success); }
.api-method-delete { color: var(--status-error); }
.api-auth { justify-self: end; color: var(--text-faint); font-size: var(--text-sm); }

.api-code { margin-top: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.api-code-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-muted); font-size: var(--text-sm); }
.api-code-head .button { min-height: 26px; padding: 4px 10px; font-size: var(--text-sm); }
.api-code .code-block { border: 0; border-radius: 0; }
.api-code .code-block code { color: var(--text-tertiary); font-size: var(--text-sm); line-height: 1.65; }

.api-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.api-cta h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); font-weight: 600; }
.api-cta p { margin: 0; font-size: var(--text-base); }

@media (max-width: 720px) {
    .api-facts { grid-template-columns: 1fr; }
    .api-facts > div { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .api-facts > div:last-child { border-bottom: 0; }
    .api-endpoint { grid-template-columns: 56px minmax(0, 1fr); }
    .api-auth { grid-column: 2; justify-self: start; }
    .api-cta { align-items: flex-start; flex-direction: column; }
}