#api-keys-menu { background: #fff; }
#api-keys-menu:hover { background: #3498db; color: #fff; }
#api-keys-menu[hidden] { display: none; }
#api-keys-dialog { width: min(1040px, calc(100vw - 40px)); max-height: 90vh; box-sizing: border-box; border: 1px solid #bdc3c7; border-radius: 8px; padding: 24px; color: #2c3e50; background: #fff; }
#api-keys-dialog::backdrop { background: rgba(24, 39, 52, .45); }
#api-keys-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#api-keys-dialog h2 { margin: 0; }
#api-key-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin: 20px 0; }
#api-key-form label { display: grid; gap: 6px; min-width: 0; }
#api-key-form input, #api-key-form select { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #bdc3c7; border-radius: 4px; min-width: 0; }
#api-key-targets { grid-column: 1 / -1; }
#api-key-targets[hidden], #api-key-secret-box[hidden] { display: none; }
#api-key-targets select { margin-top: 6px; }
#api-key-secret-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; background: #eaf4fb; border-radius: 4px; margin: 12px 0; }
#api-key-secret { flex: 1; min-width: 160px; font: 13px monospace; padding: 8px; }
.api-key-table-wrap { overflow: auto; max-height: 40vh; }
#api-key-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
#api-key-table th, #api-key-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e1e5e8; vertical-align: top; overflow-wrap: anywhere; }
#api-key-table td:first-child { max-width: 160px; }
#api-key-table td:nth-child(2) { max-width: 260px; }
.api-key-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.api-key-expired { color: #7f8c8d; background: #f5f6f7; }
#api-key-status { min-height: 20px; margin: 10px 0; }
#api-key-status.error { color: #c0392b; }
@media (max-width: 600px) { #api-key-form { grid-template-columns: minmax(0,1fr); } #api-keys-dialog { padding: 14px; } }