.api-manager-page { --api-primary: #08758a; --api-ink: #183b56; --api-muted: #6c8191; --api-line: #dce7ee; background: #f5f8fa; min-height: calc(100vh - 64px); padding: 30px clamp(16px, 3vw, 46px) 60px; }
.api-manager-heading { align-items: flex-end; display: flex; gap: 24px; justify-content: space-between; margin: 0 auto 24px; max-width: 1500px; }
.api-manager-eyebrow { color: var(--api-primary); display: block; font-size: 11px; font-weight: 900; letter-spacing: .13em; margin-bottom: 7px; }
.api-manager-heading h1 { color: var(--api-ink); font-size: 32px; font-weight: 850; margin: 0 0 7px; }
.api-manager-heading p { color: var(--api-muted); margin: 0; }
.api-manager-heading-actions { display: flex; gap: 10px; }
.api-manager-page > .alert, .api-manager-stats, .api-manager-layout, .api-delivery-card { margin-left: auto; margin-right: auto; max-width: 1500px; }
.api-manager-stats { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.api-manager-stats article { align-items: center; background: #fff; border: 1px solid var(--api-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(23, 60, 88, .05); display: flex; gap: 14px; padding: 18px; }
.api-manager-stats article > span { align-items: center; border-radius: 10px; display: flex; flex: 0 0 44px; height: 44px; justify-content: center; }
.api-manager-stats article > span.is-pending { background: #fff4d8; color: #a46a00; }
.api-manager-stats article > span.is-success { background: #e3f5ed; color: #14754f; }
.api-manager-stats article > span.is-failed { background: #e7f1fa; color: #166998; }
.api-manager-stats article > span.is-dead { background: #fdebed; color: #ad3544; }
.api-manager-stats article div { display: grid; }
.api-manager-stats strong { color: var(--api-ink); font-size: 24px; line-height: 1; }
.api-manager-stats small { color: var(--api-muted); margin-top: 6px; }
.api-manager-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: 300px minmax(0, 1fr); }
.api-provider-list, .api-provider-editor, .api-delivery-card { background: #fff; border: 1px solid var(--api-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(23, 60, 88, .06); overflow: hidden; }
.api-provider-list > header { border-bottom: 1px solid #e7edf1; padding: 18px; }
.api-provider-list > header div { display: grid; }
.api-provider-list > header strong { color: var(--api-ink); }
.api-provider-list > header small { color: var(--api-muted); font-size: 11px; margin-top: 3px; }
.api-provider-item { align-items: center; background: #fff; border: 0; border-bottom: 1px solid #edf1f4; display: grid; gap: 11px; grid-template-columns: 38px minmax(0, 1fr) auto; padding: 14px 16px; text-align: left; width: 100%; }
.api-provider-item:hover, .api-provider-item.is-active { background: #edf8fa; }
.api-provider-item.is-active { box-shadow: inset 3px 0 var(--api-primary); }
.api-provider-icon { align-items: center; background: #e5f2f5; border-radius: 9px; color: var(--api-primary); display: flex; height: 38px; justify-content: center; }
.api-provider-item > span:nth-child(2) { display: grid; min-width: 0; }
.api-provider-item strong { color: var(--api-ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-provider-item small { color: var(--api-muted); font-size: 10px; margin-top: 4px; }
.api-provider-state { border-radius: 999px; font-size: 10px; font-weight: 800; padding: 4px 7px; }
.api-provider-state.is-on { background: #dcf3e8; color: #14744e; }
.api-provider-state.is-off { background: #eef1f3; color: #73818c; }
.api-provider-editor > header { align-items: center; border-bottom: 1px solid #e7edf1; display: flex; justify-content: space-between; padding: 20px 24px; }
.api-provider-editor > header > div:first-child { display: grid; }
.api-provider-editor > header > div:first-child span, .api-delivery-card > header span { color: var(--api-primary); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.api-provider-editor h2, .api-delivery-card h2 { color: var(--api-ink); font-size: 21px; font-weight: 800; margin: 4px 0 0; }
.api-test-state { align-items: center; border-radius: 9px; display: flex; gap: 10px; padding: 9px 12px; }
.api-test-state > i { font-size: 20px; }
.api-test-state > span { display: grid; }
.api-test-state strong { font-size: 11px; }
.api-test-state small { font-size: 9px; margin-top: 2px; }
.api-test-state.is-success { background: #e4f5ed; color: #14744e; }
.api-test-state.is-failed { background: #fdebed; color: #ad3544; }
.api-test-state.is-unknown { background: #eef2f5; color: #6f7f8b; }
.api-form-section { border-bottom: 1px solid #edf1f4; padding: 24px; }
.api-form-section-title { align-items: center; display: flex; gap: 11px; margin-bottom: 18px; }
.api-form-section-title > span { align-items: center; background: #e4f3f6; border-radius: 8px; color: var(--api-primary); display: flex; flex: 0 0 34px; font-size: 11px; font-weight: 900; height: 34px; justify-content: center; }
.api-form-section-title > div { display: grid; }
.api-form-section-title strong { color: var(--api-ink); font-size: 14px; }
.api-form-section-title small { color: var(--api-muted); font-size: 11px; margin-top: 3px; }
.api-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.api-form-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.api-form-grid label { color: #34536a; display: grid; font-size: 12px; font-weight: 750; gap: 7px; margin: 0; }
.api-form-grid label.wide { grid-column: 1 / -1; }
.api-form-grid label em { color: #c74450; font-style: normal; }
.api-form-grid .form-control, .api-form-grid .form-select { border-color: #ccd9e2; border-radius: 8px; font-size: 13px; min-height: 43px; }
.api-form-grid .form-control:focus, .api-form-grid .form-select:focus { border-color: var(--api-primary); box-shadow: 0 0 0 .2rem rgba(8, 117, 138, .12); }
.api-form-grid label.api-checkbox { align-items: center; display: flex; flex-direction: row; gap: 9px; }
.api-form-grid label.api-checkbox input { accent-color: var(--api-primary); height: 17px; width: 17px; }
.api-endpoint-grid label > span { align-items: center; display: flex; gap: 7px; }
.api-endpoint-grid b { background: #e4f4ed; border-radius: 4px; color: #14744e; font-size: 9px; padding: 3px 5px; }
.api-provider-editor form > footer { align-items: center; display: grid; gap: 10px; grid-template-columns: auto auto 1fr auto; padding: 18px 24px; }
.api-delivery-card { margin-top: 22px; }
.api-delivery-card > header { align-items: center; border-bottom: 1px solid #e7edf1; display: flex; justify-content: space-between; padding: 20px 22px; }
.api-delivery-card > header > div { display: grid; }
.api-delivery-card > header > small { color: var(--api-muted); }
.api-delivery-card table th { background: #f7f9fb; border-bottom-color: #dfe7ec; color: #6c8191; font-size: 10px; letter-spacing: .07em; padding: 12px 14px; text-transform: uppercase; white-space: nowrap; }
.api-delivery-card table td { border-bottom-color: #edf1f4; color: #3e596d; font-size: 12px; padding: 13px 14px; }
.api-delivery-card table td > strong, .api-delivery-card table td > small { display: block; }
.api-delivery-card table td > strong { color: var(--api-ink); }
.api-delivery-card table td > small { color: var(--api-muted); margin-top: 3px; }
.api-delivery-status { border-radius: 999px; display: inline-flex; font-size: 10px; font-weight: 800; padding: 5px 8px; white-space: nowrap; }
.api-delivery-status.status-pending { background: #fff4d8; color: #986400; }
.api-delivery-status.status-processing { background: #e5f1fb; color: #176a9b; }
.api-delivery-status.status-succeeded { background: #e3f5ed; color: #14754f; }
.api-delivery-status.status-failed { background: #fff0e2; color: #a55712; }
.api-delivery-status.status-dead_letter { background: #fdebed; color: #ad3544; }
.api-error { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-manager-empty { align-items: center; color: #8192a0; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 110px; padding: 24px; }
.api-manager-empty i { color: #a4b3be; font-size: 24px; }
@media (max-width: 1000px) { .api-manager-stats { grid-template-columns: repeat(2, 1fr); } .api-manager-layout { grid-template-columns: 1fr; } .api-provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .api-provider-list > header { grid-column: 1 / -1; } }
@media (max-width: 680px) { .api-manager-page { padding: 20px 12px 40px; } .api-manager-heading { align-items: flex-start; flex-direction: column; } .api-manager-heading-actions { width: 100%; } .api-manager-stats, .api-form-grid, .api-form-grid.three-columns, .api-provider-list { grid-template-columns: 1fr; } .api-provider-list > header { grid-column: auto; } .api-provider-editor > header { align-items: flex-start; gap: 14px; } .api-provider-editor form > footer { grid-template-columns: 1fr; } .api-provider-editor form > footer > span { display: none; } }