.api-card {
    background: #fff; border-radius: var(--radius);
    padding: 24px; margin-bottom: 20px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
}
.api-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.api-form { display: flex; gap: 10px; align-items: center; }
.api-form .input { flex: 1; }
.api-flash {
    background: #fef3c7; border: 1px solid #f59e0b; border-radius: var(--radius);
    padding: 16px 20px; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.api-flash-inner { display: flex; flex-direction: column; gap: 8px; }
.api-key-display {
    font-size: 13px; background: #1a1a2e; color: #2ecc71;
    padding: 8px 14px; border-radius: 8px; word-break: break-all;
}
.api-docs-section {
    background: #fff; border-radius: var(--radius);
    padding: 28px; margin-bottom: 20px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
}
.api-docs-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.code-block {
    background: #1a1a2e; color: #e2e8f0; border-radius: 8px;
    padding: 16px; margin: 12px 0; overflow-x: auto;
}
.code-block pre { font-size: 13px; line-height: 1.6; margin: 0; }
.api-info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-top: 16px;
}
.api-info-item {
    background: var(--gray-50); border-radius: 8px; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.api-info-item strong { font-size: 12px; color: var(--gray-500); }
.api-info-item span { font-size: 14px; font-weight: 600; }
.method-badge {
    font-size: 11px; font-weight: 700; padding: 3px 8px;
    border-radius: 4px; text-transform: uppercase;
}
.method-get { background: #d1fae5; color: #065f46; }
.method-post { background: #dbeafe; color: #1e40af; }
.method-delete { background: #fee2e2; color: #991b1b; }