.api-wrap{ padding:1rem 0; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 1rem; }
.section-title{ font-size:1.05rem; font-weight:800; margin:.25rem 0 .6rem; color:#2A1D16 }

.api-toolbar .toolbar-row{ display:grid; grid-template-columns: 140px 1fr; gap:.5rem; background:#fff; border:1px solid #ece5da; border-radius:12px; padding:.5rem .6rem; box-shadow:0 6px 18px rgba(0,0,0,.06) }
.api-toolbar .tool{ display:grid; gap:.2rem }
.api-toolbar .tool span{ font-size:.78rem; color:#6b5b4b }
.api-toolbar select,.api-toolbar input{ padding:.6rem .75rem; border:1px solid #d9cfc7; border-radius:10px; background:#fff; min-height:42px; color:#2A1D16 }
.quick-actions{ display:flex; gap:.4rem; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border-radius:.6rem; border:1px solid #ccb9ad; background:#fff; color:#2A1D16; text-decoration:none; font-weight:700 }
.btn-ghost{ background:#faf6f3 }
@media(min-width:760px){ .api-toolbar .toolbar-row{ grid-template-columns: 140px 1fr auto } }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.75rem }
@media(max-width:980px){ .cards{ grid-template-columns: repeat(2, 1fr) } }
@media(max-width:640px){ .cards{ grid-template-columns: 1fr } }
.card{ background:#fff; border:1px solid #eee2d8; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); padding:.75rem }
.card .title{ font-weight:700; margin:0 0 .25rem }
.chips{ display:flex; flex-wrap:wrap; gap:.3rem }
.chip{ padding:.2rem .45rem; border-radius:999px; background:#faf6f3; border:1px solid #e5d8cd; font-size:.78rem }
.badge{ padding:.15rem .45rem; border-radius:999px; font-size:.72rem; border:1px solid #e5d8cd; background:#eff9ef; color:#295b2e }
.muted{ color:#6b5b4b; opacity:.9 }

.api-panel .panel{ background:#fff; border:1px solid #eee2d8; border-radius:12px; padding:.8rem }
.api-panel ul{ margin:.25rem 0 .25rem 1rem }