.api-page { padding-top: var(--s6); }
.api-head { margin-bottom: var(--s5); }
.api-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; margin: 0 0 var(--s3); }
.api-intro { color: var(--muted); font-size: var(--fs-section); max-width: 72ch; margin: 0; }
.api-mode { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-top: var(--s4); }
.api-mode a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.api-mode a[aria-current="page"] { color: var(--text); font-weight: 600; }
.api-owner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-block: var(--s5); }
.api-owner h2, .api-section h2, .api-secret h2, #staffBrowse > h2 { font-size: var(--fs-section); font-weight: 600; margin: 0 0 var(--s3); }
.api-owner-controls { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.api-owner h2 { margin: 0; }
.api-owner-controls select { min-width: 240px; max-width: 100%; }
.api-owner-controls input { max-width: 240px; }
.api-page input:not([type="checkbox"]), .api-page select, .api-page textarea { border: 1px solid var(--control); background: var(--panel); color: var(--text); border-radius: var(--radius-nested); min-height: 40px; padding: var(--s2) var(--s3); font: inherit; }
.api-page textarea { resize: vertical; }
.api-message { margin-block: var(--s4); color: var(--muted); }
.api-message[data-state="error"], .api-warning { color: var(--negative); }
.api-warning { padding-block: var(--s3); }
.api-quota { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--col-gap); margin-top: var(--s5); padding-block: var(--s4); border-block: 1px solid var(--rule); align-items: end; }
.api-quota > div { min-width: 0; }
.api-quota h2 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; color: var(--muted); margin: 0 0 var(--s1); }
.api-quota .api-figure { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 var(--s1); color: var(--text); }
.api-quota > div:first-child .api-figure { font-size: var(--fs-stamp); line-height: var(--lh-stamp); letter-spacing: -0.025em; }
.api-quota p { color: var(--muted); margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.api-updated { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; }
.api-updated .text-btn { font-size: var(--fs-small); line-height: var(--lh-small); }
.api-section { display: grid; grid-template-columns: 256px minmax(0,1fr); gap: var(--s6); align-items: start; margin-top: var(--s6); }
.api-section-title p { color: var(--muted); margin: 0; max-width: 36ch; }
.api-form { display: grid; gap: var(--s3); align-items: start; }
.api-form label, .api-form legend { font-size: var(--fs-body); font-weight: 500; }
.api-form label:not(.api-check):not(:first-child) { margin-top: var(--s2); }
.api-form input:not([type="checkbox"]), .api-form select, .api-form textarea { width: 100%; background: var(--ground); }
.api-form > .btn { justify-self: start; margin-top: var(--s2); }
.api-form fieldset { border: 0; padding: 0; margin: var(--s2) 0; }
.api-form legend { margin-bottom: var(--s3); }
.api-check { display: flex; align-items: center; gap: var(--s3); min-height: 32px; }
.api-check input { accent-color: var(--text); }
.api-form p { margin: 0; }
.api-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4) var(--s5); }
.api-create-form { grid-template-columns: minmax(0,1fr) 180px; }
.api-field { display: grid; gap: var(--s2); min-width: 0; }
.api-form .api-field label { margin: 0; }
.api-wide { grid-column: 1 / -1; }
.api-form-grid fieldset { margin: 0; }
.api-form-grid legend { margin-bottom: var(--s2); }
.api-form-grid > .btn { margin-top: 0; }
.api-scope-options { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.api-account-suspend { align-self: start; margin-top: var(--s5); }
.api-secret { margin-top: var(--s6); }
.api-secret pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--ground); border-radius: var(--radius-nested); padding: var(--s4); }
.api-secret code, .api-key-prefix, .api-audit pre code { font-family: var(--mono); font-weight: 400; }
.api-rows { display: grid; gap: var(--s3); }
.api-rows + .btn, .api-audit + .btn { margin-top: var(--s3); }
.api-key-row { padding: var(--s4) 0; border-top: 1px solid var(--rule); min-width: 0; }
.api-rows { gap: 0 !important; }
.api-key-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.api-key-head h3 { font-size: var(--fs-section); margin: 0; overflow-wrap: anywhere; }
.api-key-head .pill { margin-left: auto; }
.api-key-meta { color: var(--muted); margin-block: var(--s3); overflow-wrap: anywhere; }
.api-key-meta p { margin: var(--s2) 0; }
.api-key-prefix { color: var(--text); }
.api-key-actions { margin-top: var(--s4); }
.api-key-form { margin-top: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.api-key-form form { margin-top: var(--s3); }
.api-usage { overflow-x: auto; }
.api-usage table { width: 100%; text-align: right; font-variant-numeric: tabular-nums; border-collapse: collapse; }
.api-usage th, .api-usage td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); }
.api-usage th { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.api-usage th:first-child, .api-usage td:first-child { text-align: left; }
.api-audit .disclosure-body > * + * { margin-top: var(--s3); }
.api-audit .disclosure-body p { overflow-wrap: anywhere; }
.api-audit .disclosure-body > .text-btn { display: block; }
#staffBrowse { margin-top: var(--s6); }
.api-page :focus-visible { outline-color: var(--text); }
.api-page .btn:disabled { opacity: .55; cursor: wait; }
@media(max-width:960px){ .api-section { grid-template-columns: minmax(0,1fr); gap: var(--s4); } .api-section-title p { max-width: 72ch; } }
@media(max-width:600px){
 .api-page { padding-top: var(--s5); }
 .api-quota { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s3) var(--s4); }
 .api-quota > div:first-child { grid-column: 1 / -1; }
 .api-owner-controls { align-items: stretch; }
 .api-owner { align-items: stretch; gap: var(--s3); }
 .api-owner > h2, .api-owner-controls { width: 100%; }
 .api-owner-controls select { min-width: 0; flex: 1; }
 .api-owner-controls input { max-width: none; min-width: 0; flex: 1; }
 .api-page input:not([type="checkbox"]), .api-page select, .api-page textarea { font-size: 16px; min-height: 44px; }
 .api-page .btn, .api-key-form summary { min-height: 44px; }
 .api-key-row { padding: var(--s4) 0; }
 .api-section { margin-top: var(--s6); }
 .api-usage { padding: var(--s3); }
 .api-usage th, .api-usage td { padding-inline: var(--s1); font-size: var(--fs-small); }
 .api-usage th:first-child { width: 30%; }
 .api-key-head .pill { margin-left: 0; }
 .api-form-grid { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
 .api-account-suspend { margin-top: 0; }
 .api-check { min-height: 44px; }
}

.api-register { margin-top: var(--s6); }
.api-register-head h2 { font-size: var(--fs-section); font-weight: 600; margin: 0; }
.api-register-head p { margin: var(--s1) 0 0; max-width: 72ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
#usageSection, #activitySection { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
#usageSection .api-section-title h2, #activitySection .api-section-title h2 { margin: 0; }
#usageSection .api-section-title p, #activitySection .api-section-title p { max-width: 72ch; margin-top: var(--s1); font-size: var(--fs-small); line-height: var(--lh-small); }
.api-reg-cols, .api-key-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(88px, auto); column-gap: var(--s4); align-items: baseline; }
.api-reg-cols { margin-top: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.api-reg-cols .r, .api-key-row .c-since { text-align: right; }
.api-register.empty .api-reg-cols { display: none; }
.api-empty { margin: var(--s3) 0 0; }
.api-key-row { padding: var(--s3) 0; border-top: 0; border-bottom: 1px solid var(--rule); }
.api-key-row h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.api-key-sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.api-key-row .c-prefix { font-size: var(--fs-small); overflow-wrap: anywhere; }
.api-key-row .c-scopes, .api-key-row .c-state { color: var(--muted); }
.api-key-row .c-since { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.api-key-row .state-revoked { color: var(--pill-negative-ink); }
.api-key-row .state-suspended, .api-key-row .state-expired { color: var(--pill-warning-ink); }
.api-key-row.off h3 { color: var(--muted); }
.api-key-row .c-act { justify-self: end; text-align: right; min-width: 0; }
.api-key-row .c-act > .btn { height: 28px; padding: 0 var(--s3); font-size: var(--fs-small); }
.api-key-row .api-key-form { margin: 0; padding: 0; border: 0; }
.api-key-row .api-key-form > summary { justify-content: flex-end; }
.api-key-row .api-key-form[open] > summary { justify-content: flex-start; }
.api-key-row .c-act:has(details[open]) { grid-column: 1 / -1; justify-self: stretch; text-align: left; margin-top: var(--s3); }
.api-key-row details[open] { padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--panel); }
.api-key-row details[open] p { margin: var(--s2) 0 var(--s3); color: var(--text); }
.api-create-row { padding-top: var(--s4); }
.api-create-row h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; margin: 0 0 var(--s3); }
.api-create-line { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto auto; gap: var(--s3) var(--s4); align-items: end; }
.api-create-line .api-check { white-space: nowrap; }
.api-create-line input, .api-create-line select { width: 100%; background: var(--ground); }
.api-create-line label, .api-create-line legend { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.api-create-line fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.api-create-line legend { margin-bottom: var(--s2); }
.api-create-line .api-scope-options { min-height: 40px; align-items: center; gap: var(--s1) var(--s4); }
.api-create-line .api-check { min-height: 40px; }
.api-c-go { align-self: end; }
.api-create-help { margin: var(--s3) 0 0; max-width: 90ch; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
#secretPanel { margin-top: var(--s5); }
@media (max-width: 960px) {
  .api-create-line { grid-template-columns: minmax(0, 1fr) 150px; }
  .api-c-scopes, .api-c-go { grid-column: 1 / -1; }
  .api-c-go { justify-self: start; }
}
@media (max-width: 760px) {
  .api-reg-cols { display: none; }
  .api-key-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .api-key-row .c-name { grid-column: 1; }
  .api-key-row .c-state { grid-column: 2; grid-row: 1; text-align: right; }
  .api-key-row .c-prefix, .api-key-row .c-scopes, .api-key-row .c-since { grid-column: 1 / -1; text-align: left; font-size: var(--fs-small); }
  .api-key-row .c-act { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .api-create-line { grid-template-columns: minmax(0, 1fr); }
}

.api-key-row .c-scopes { display: grid; gap: 2px; }
.api-scope-word { display: block; }
.api-review { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--panel); max-width: 760px; }
.api-review-t { font-weight: 600; }
.api-review-p { margin: var(--s1) 0 var(--s3); color: var(--muted); }
.api-review .actions-row, .api-secret .actions-row, .api-revoke .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.api-secret { margin-top: var(--s4); padding: var(--s4); border-radius: var(--radius-nested); background: var(--panel); }
.api-secret h2 { margin-bottom: var(--s1) !important; }
.api-secret > p { color: var(--muted); margin: 0; }
.api-secret-box { display: flex; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s3); }
.api-secret-box pre { flex: 1 1 auto; min-width: 0; margin: 0; background: var(--ground); }
.api-secret-box .btn { flex: none; }
.api-secret-state { min-height: var(--lh-small); margin: var(--s2) 0 var(--s3) !important; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text) !important; }
.api-key-row .c-act:has(.api-revoke) { grid-column: 1 / -1; justify-self: stretch; text-align: left; margin-top: var(--s3); }
.api-revoke { padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--pill-negative-bg); }
.api-revoke p { margin: 0 0 var(--s3); }
.api-revoke b { font-weight: 600; color: var(--pill-negative-ink); }
.api-revoke span { color: var(--text); }
.api-key-row .c-act > .text-btn { font-size: var(--fs-small); }
@media (max-width: 600px) {
  .api-secret-box { flex-direction: column; align-items: stretch; }
}
#keysSection, #usageSection, #activitySection { scroll-margin-top: 64px; }

@media (scripting: enabled) {
  main:has(#apiMessage:not([data-state])) + .page-end,
  main:has(#apiContent[hidden]):has(#apiLogin[hidden]):not(:has(#apiMessage[data-state="error"])) + .page-end { visibility: hidden; }
  main:has(#apiContent:not([hidden])):has(#accountDetails[hidden]):has(#staffBrowse[hidden]):not(:has(#apiMessage[data-state="error"])) + .page-end { visibility: hidden; }
}
.api-message { min-height: var(--lh-body); }
.api-mode #staffLink { order: 1; }
#accountDetails { transition: opacity var(--t-fast) var(--ease-out); }
#accountDetails[aria-busy="true"] { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { #accountDetails { transition: none; } }