.api-directory-icon { font: 700 26px/1.2 monospace; white-space: nowrap; }
.api-settings { grid-column: 1 / -1; min-width: 0; width: 100%; }
.api-settings[hidden] { display: none; }
#saveSettingsButton[hidden] { display: none; }
#apiSettingsGroup[hidden] { display: none; }
.api-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.api-toolbar label { font-weight: 700; }
.api-toolbar select { width: 320px; max-width: 100%; min-height: 42px; padding: 9px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--control-border); border-radius: 6px; font: inherit; }
.api-toolbar select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.api-settings #apiMessage { min-height: 24px; margin: 12px 0 20px; color: var(--muted); }
.api-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.api-section-heading h3 { margin: 0; font-size: 18px; }
.api-section-heading > span:not(.api-state) { color: var(--muted); font-size: 14px; }
.api-connection, .api-activity, .api-contract { padding: 24px 0; border-top: 1px solid var(--border); }
.api-state { font-size: 13px; font-weight: 700; }
.api-state-enabled { color: var(--success); }
.api-state-disabled { color: var(--muted); }
.api-state-attention { color: var(--warning); }
.api-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 24px; }
.api-facts > div { min-width: 0; }
.api-facts dt { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.api-facts dd { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.api-endpoint { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.api-endpoint > span { color: var(--success); font-size: 13px; font-weight: 700; }
.api-endpoint code { overflow-wrap: anywhere; font-size: 14px; }
.api-table-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; }
.api-table-scroll table { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; }
.api-table-scroll th, .api-table-scroll td { padding: 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: normal; overflow-wrap: anywhere; }
.api-table-scroll th { background: var(--panel); font-size: 13px; }
.api-table-scroll th:first-child { width: 40%; }
.api-table-scroll td { font-size: 14px; vertical-align: top; }
.api-table-scroll small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.api-ticket-link { white-space: normal; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.api-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.api-pagination span { font-size: 13px; color: var(--muted); }
.api-pagination button { min-width: 92px; }
.api-contract summary { cursor: pointer; font-weight: 700; width: fit-content; margin-bottom: 20px; }
.api-contract pre { background: var(--panel); color: var(--text); padding: 16px; border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
@media (max-width: 900px) { .api-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .api-facts { grid-template-columns: 1fr; gap: 18px; }
  .api-toolbar select { width: 100%; }
  .api-pagination { justify-content: space-between; gap: 8px; }
}