.api-key-dialog { width: 620px; scrollbar-width: thin; scrollbar-color: #ded9e9 transparent; }
.api-key-dialog .dialog-header { position: sticky; top: 0; z-index: 2; background: #fff; }
.key-preview-notice { padding: 12px 14px; border-radius: 8px; background: #f5f2fc; color: #8a7ba6; font-size: 11px; line-height: 1.8; }
.key-preview-notice strong { display: block; color: #8065b3; font-weight: 550; margin-bottom: 3px; }
.key-current { padding: 16px; border: 1px solid #e9e5f1; border-radius: 9px; background: #fcfbfe; margin: 17px 0; }
.key-current-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.key-current-heading strong { color: #77708a; font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.key-status { font-size: 10px; background: #eeeaf4; color: #9a8da8; padding: 4px 8px; border-radius: 5px; white-space: nowrap; }
.key-status[data-active="true"] { color: #64937d; background: #eaf5ef; }
.key-current-empty, .key-previous { color: #9c96a9; font-size: 11px; line-height: 1.8; margin: 10px 0 0; }
.key-current dl { display: grid; gap: 9px; margin: 15px 0 0; font-size: 11px; }
.key-current dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; }
.key-current dt { color: #a09aaa; }
.key-current dd { color: #827a93; margin: 0; overflow-wrap: anywhere; }
.key-previous { border-top: 1px solid #eeebf3; padding-top: 10px; }
.key-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.key-form-grid .field-label { margin-top: 0; }
.key-field-hint, .key-bottom-note { font-size: 10px; line-height: 1.8; color: #a19bad; margin: 8px 0 0; }
.key-permission { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 0; color: #9b93aa; font-size: 10px; }
.key-permission code { padding: 3px 6px; color: #9076bc; background: #f4effb; border-radius: 4px; }
.key-permission > span:last-child { width: 100%; }
.key-action-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 3px; }
.key-action-row #key-revoke { margin-right: auto; font-size: 11px; }
.key-action-row .btn { margin-top: 0; }
.key-reveal { padding: 14px; background: #f2f8f5; border: 1px solid #dcece3; border-radius: 8px; margin-bottom: 18px; }
.key-reveal-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.key-reveal-heading strong { font-size: 11px; color: #64937d; font-weight: 550; }
.key-reveal .text-button { color: #64937d; font-size: 11px; }
#key-full-value { display: block; margin: 10px 0; padding: 11px; border-radius: 6px; background: #ffffffc7; color: #647e72; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; user-select: all; }
.key-reveal p { color: #95a79d; font-size: 10px; line-height: 1.7; margin: 0; }
.key-confirm { padding: 14px; margin-top: 17px; border-radius: 8px; border: 1px solid #efdce2; background: #fff7f8; }
.key-confirm > strong { font-size: 12px; color: #ae7583; font-weight: 550; }
.key-confirm > p { color: #ac8c95; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; margin: 8px 0 12px; }
.key-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; }
.key-confirm-actions .btn { margin-top: 0; }
.key-bottom-note { border-top: 1px solid #eeebf4; padding-top: 14px; margin-top: 17px; }
@media(max-width: 520px) { .key-current dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .key-form-grid { gap: 11px; } .key-action-row { flex-wrap: wrap; } }