/* API keys section in the Account & Security dialog (users-auth). */
.api-keys-section { display: flex; flex-direction: column; gap: 10px; }
.api-keys-head { border-top: 1px solid var(--border); padding-top: 14px; }
.api-keys-head h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.api-keys-head p { font-size: 12px; color: var(--text-muted); }
.api-keys-list { display: flex; flex-direction: column; gap: 8px; }
.api-key-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.api-key-row.revoked { opacity: 0.55; }
.api-key-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.api-key-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #fff; }
.api-key-prefix { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.api-key-meta { font-size: 11px; color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.api-key-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 2px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-muted);
}
.api-key-tag.env { color: var(--warning-text); border-color: rgba(217, 119, 6, 0.35); }
.api-key-tag.off { color: var(--danger-text); border-color: rgba(225, 29, 72, 0.35); }
.api-key-empty { font-size: 12px; color: var(--text-muted); }
.api-key-form { border-style: dashed; margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; }
.api-key-form-title { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; }
.api-key-form-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 10px; }
.api-key-form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-main); }
.api-key-form-row[hidden] { display: none; }
.api-key-form-label { color: var(--text-muted); font-weight: 600; }
.api-key-choices { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.api-key-choices label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.api-key-form-actions { display: flex; justify-content: flex-end; }
.api-key-created { display: flex; flex-direction: column; gap: 14px; }
.api-key-created h3 { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800; color: #fff; }
.api-key-created p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.api-key-created-row { display: flex; gap: 8px; }
.api-key-created-row .input-text { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.api-key-created-actions { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
    .api-key-form-grid { grid-template-columns: 1fr; }
    .api-key-row { align-items: flex-start; }
}