/* Developer API credentials (.billing-api-keys / .api-key-*), shared by CLGS, Bolt Cut and Bolt Nest. Appearance only:
 * [hidden], disabled and revoked states keep their meaning. Colours and fonts come from the product theme (--bt-*,
 * App/billing-theme.css, inherited from #settingsModal / #boltSettingsModal / #nestAccountDialog or a
 * .billing-theme-* wrapper); the fallbacks repeat the brand-kit values for hosts that do not link the theme. */
.billing-api-keys {
  --ak-ink: var(--bt-ink, #0F172A); --ak-sub: var(--bt-sub, #475569); --ak-muted: var(--bt-muted, #64748B); --ak-line: var(--bt-line, #E2E8F0);
  --ak-paper: var(--bt-paper, #FFFFFF); --ak-bg: var(--bt-bg, #F8FAFC); --ak-soft: var(--bt-soft, #F1F5F9);
  --ak-brand: var(--bt-brand, #1A365D); --ak-brand-dark: var(--bt-brand-dark, #0F172A); --ak-tint: var(--bt-tint, #E8EEF6);
  --ak-accent: var(--bt-accent, #7D9B5E); --ak-focus: var(--bt-focus, #38BDF8);
  --ak-body: var(--bt-body, Poppins, Arial, sans-serif); --ak-heading: var(--bt-heading, Montserrat, Arial, sans-serif); --ak-radius: var(--bt-radius, 8px);
  --ak-warn: var(--bt-warn, #8B5B13); --ak-warn-bg: var(--bt-warn-bg, #FFF5E4); --ak-danger: var(--bt-danger, #AE3F3A); --ak-danger-bg: var(--bt-danger-bg, #FFF0EF);
  --ak-ok: var(--bt-ok, #127A4A); --ak-ok-bg: var(--bt-ok-bg, #E7F6EE);
  --ak-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM7.1 6.8h1.8v5.6H7.1V6.8Zm.9-1.5a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2Z'/%3E%3C/svg%3E");
  --ak-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.6 1.3a1.6 1.6 0 0 1 2.8 0l6.4 11.4A1.6 1.6 0 0 1 14.4 15H1.6a1.6 1.6 0 0 1-1.4-2.3L6.6 1.3ZM7.1 5.4h1.8v4.4H7.1V5.4Zm.9 7.4a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2Z'/%3E%3C/svg%3E");
  color:var(--ak-ink); font:14px/1.5 var(--ak-body); max-width:960px; margin:12px auto; padding:16px; text-align:start;
}
#boltApiKeysList.billing-api-keys {
  --ak-ink: var(--bt-ink, #172135); --ak-sub: var(--bt-sub, #606B80); --ak-muted: var(--bt-muted, #738098); --ak-line: var(--bt-line, #DEE4F0);
  --ak-bg: var(--bt-bg, #F5F7FC); --ak-soft: var(--bt-soft, #EEF2FA); --ak-brand: var(--bt-brand, #3457E8); --ak-brand-dark: var(--bt-brand-dark, #2342BC);
  --ak-tint: var(--bt-tint, #E9EEFF); --ak-accent: var(--bt-accent, #F45B25); --ak-focus: var(--bt-focus, #3457E8);
  --ak-body: var(--bt-body, Inter, -apple-system, 'Segoe UI', Arial, sans-serif); --ak-heading: var(--bt-heading, 'Barlow Condensed', Inter, Arial, sans-serif); --ak-radius: var(--bt-radius, 12px);
}
#nestApiKeysList.billing-api-keys {
  --ak-ink: var(--bt-ink, #192D30); --ak-sub: var(--bt-sub, #5F7377); --ak-muted: var(--bt-muted, #78898C); --ak-line: var(--bt-line, #E0E7E6);
  --ak-bg: var(--bt-bg, #F3F6F5); --ak-soft: var(--bt-soft, #EDF3F1); --ak-brand: var(--bt-brand, #116E63); --ak-brand-dark: var(--bt-brand-dark, #08534B);
  --ak-tint: var(--bt-tint, #E4F2EC); --ak-accent: var(--bt-accent, #116E63); --ak-focus: var(--bt-focus, #116E63);
  --ak-body: var(--bt-body, Inter, -apple-system, 'Segoe UI', Arial, sans-serif); --ak-heading: var(--bt-heading, Inter, -apple-system, 'Segoe UI', Arial, sans-serif); --ak-radius: var(--bt-radius, 12px);
}
.billing-api-keys [hidden]{display:none!important}
.billing-api-keys *{box-sizing:border-box}

/* Status and messages */
.billing-api-keys .api-key-summary{position:relative;padding:14px 16px;padding-inline-start:42px;border:1px solid var(--ak-line);border-inline-start:3px solid var(--ak-brand);border-radius:var(--ak-radius);background:var(--ak-tint);margin-bottom:16px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.billing-api-keys .api-key-summary::before,.billing-api-keys .api-key-alert::before{content:"";position:absolute;inset-inline-start:15px;top:16px;width:16px;height:16px;color:var(--ak-brand);background:currentColor;-webkit-mask:var(--ak-icon-info) center/16px 16px no-repeat;mask:var(--ak-icon-info) center/16px 16px no-repeat;opacity:.85}
.billing-api-keys .api-key-alert{position:relative;padding:12px 16px;padding-inline-start:42px;background:var(--ak-warn-bg);color:var(--ak-ink);border:1px solid var(--ak-warn);border-inline-start:3px solid var(--ak-warn);border-radius:var(--ak-radius);margin-bottom:16px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.billing-api-keys .api-key-alert::before{top:14px;color:var(--ak-warn);-webkit-mask-image:var(--ak-icon-alert);mask-image:var(--ak-icon-alert)}

/* Surfaces */
.billing-api-keys .api-key-create,.billing-api-keys .api-key-card,.billing-api-keys .api-key-secret{position:relative;padding:18px;margin-bottom:14px;border:1px solid var(--ak-line);border-radius:var(--ak-radius);background:var(--ak-paper);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.billing-api-keys .api-key-create{background:var(--ak-bg)}
.billing-api-keys .api-key-secret{border-color:var(--ak-ok);border-inline-start:3px solid var(--ak-ok);background:var(--ak-ok-bg)}
.billing-api-keys .api-key-secret strong{display:block;color:var(--ak-ok);font-family:var(--ak-heading);font-size:15px}

.billing-api-keys h4{margin:0 0 6px;font-family:var(--ak-heading);font-size:16px;line-height:1.3;color:var(--ak-ink);overflow-wrap:anywhere}
.billing-api-keys code{display:inline-block;max-width:100%;padding:3px 8px;border:1px solid var(--ak-line);border-radius:6px;background:var(--ak-soft);color:var(--ak-ink);font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;vertical-align:middle}
.billing-api-keys p{margin:8px 0;color:var(--ak-sub);font-size:13px}

/* Credential cards: the key preview and its status read as one row. */
.billing-api-keys .api-key-card > code + p{display:inline-flex;align-items:center;gap:6px;margin:0;margin-inline-start:8px;padding:2px 10px;border-radius:999px;background:var(--ak-ok-bg);color:var(--ak-ok);font-size:12px;font-weight:600;vertical-align:middle}
.billing-api-keys .api-key-card > code + p::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.billing-api-keys .api-key-card > code + p + p{margin-top:10px}
.billing-api-keys .api-key-card:not(:has(.api-key-actions)){background:var(--ak-soft);border-style:dashed;box-shadow:none}
.billing-api-keys .api-key-card:not(:has(.api-key-actions)) h4{color:var(--ak-sub)}
.billing-api-keys .api-key-card:not(:has(.api-key-actions)) > code + p{background:var(--ak-danger-bg);color:var(--ak-danger)}

/* Fields */
.billing-api-keys label{color:var(--ak-ink);font-size:13px;font-weight:600}
.billing-api-keys input:not([type=checkbox]){display:block;box-sizing:border-box;width:100%;min-height:42px;margin:6px 0 12px;border:1px solid var(--ak-muted);border-radius:var(--ak-radius);padding:10px 12px;font:inherit;font-weight:400;color:var(--ak-ink);background:var(--ak-paper)}
.billing-api-keys .api-key-secret input:not([type=checkbox]){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:var(--ak-paper)}
.billing-api-keys input:not([type=checkbox]):focus-visible{outline:3px solid var(--ak-focus);outline-offset:1px;border-color:var(--ak-brand)}
.billing-api-keys fieldset{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 12px;margin:10px 0 14px;border:1px solid var(--ak-line);border-radius:var(--ak-radius);background:var(--ak-paper);min-width:0}
.billing-api-keys legend{padding:0 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ak-sub)}
.billing-api-keys fieldset label{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 12px;border:1px solid var(--ak-line);border-radius:999px;background:var(--ak-paper);font-weight:500;cursor:pointer}
.billing-api-keys fieldset label:has(input:checked){border-color:var(--ak-brand);background:var(--ak-tint);color:var(--ak-brand-dark);font-weight:600}
.billing-api-keys fieldset label:not(:has(input:enabled)){cursor:default;color:var(--ak-sub);background:var(--ak-soft);border-style:dashed}
.billing-api-keys input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--ak-brand)}
.billing-api-keys input[type=checkbox]:focus-visible{outline:3px solid var(--ak-focus);outline-offset:2px}

/* Buttons: create/copy are primary, save is outlined, rotate is quiet, revoke is a danger outline. */
.billing-api-keys button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;font:600 13px/1.3 var(--ak-body);padding:9px 16px;border:1px solid var(--ak-brand);border-radius:var(--ak-radius);background:var(--ak-paper);color:var(--ak-brand);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.billing-api-keys button:enabled:hover{background:var(--ak-tint)}
.billing-api-keys button:focus-visible{outline:3px solid var(--ak-focus);outline-offset:2px}
.billing-api-keys .api-key-create button[type=submit],.billing-api-keys .api-key-secret button{background:var(--ak-brand);color:var(--ak-paper)}
.billing-api-keys .api-key-create button[type=submit]:enabled:hover,.billing-api-keys .api-key-secret button:enabled:hover{background:var(--ak-brand-dark);border-color:var(--ak-brand-dark)}
.billing-api-keys .api-key-actions button:nth-child(2){border-color:var(--ak-line);color:var(--ak-ink)}
.billing-api-keys .api-key-actions button:last-child{border-color:var(--ak-danger);color:var(--ak-danger)}
.billing-api-keys .api-key-actions button:last-child:enabled:hover{background:var(--ak-danger-bg)}
.billing-api-keys button:disabled{opacity:.5;cursor:default}
.billing-api-keys .api-key-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--ak-line)}
.billing-api-keys .api-key-list > p{padding:18px;margin:0 0 14px;border:1px dashed var(--ak-line);border-radius:var(--ak-radius);background:var(--ak-bg);text-align:center}
@media(max-width:520px){.billing-api-keys{padding:4px}.billing-api-keys .api-key-create,.billing-api-keys .api-key-card,.billing-api-keys .api-key-secret{padding:12px}.billing-api-keys .api-key-actions button{flex:1}.billing-api-keys .api-key-card > code + p{margin-inline-start:0;margin-top:6px}}
@media(prefers-reduced-motion:reduce){.billing-api-keys button{transition:none}}

/* CLGS keyboard focus (owner, 2026-11-02): the sky ring with a thin navy ring inside it; Bolt Cut and Nest keep theirs. */
.billing-api-keys:not(#boltApiKeysList):not(#nestApiKeysList) :is(input, button):focus-visible{box-shadow:0 0 0 2px #1A365D}