.api-dialog { width: 690px; scrollbar-width: thin; scrollbar-color: #ded9e9 transparent; }
.api-dialog .dialog-header { position: sticky; top: 0; z-index: 1; background: white; border-bottom: 1px solid #f4f2f8; margin-bottom: 15px; }
.api-preview-notice { padding: 11px 13px; border-radius: 7px; background: #f5f2fc; color: #8a7ba6; font-size: 11px; line-height: 1.8; }
.api-source-switch { display: flex; gap: 5px; margin-top: 18px; padding: 4px; border-radius: 8px; background: #f5f6fa; }
.api-source-switch .text-button { flex: 1; justify-content: center; padding: 8px; font-size: 11px; border-radius: 5px; }
.api-source-switch [aria-pressed="true"] { background: white; color: #7962de; box-shadow: 0 1px 4px #25213c0b; }
.api-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.api-options { grid-template-columns: minmax(110px,.8fr) minmax(0,1.2fr); }
.api-key-panel { margin-top: 16px; padding: 12px 14px; border: 1px solid #eae6f4; border-radius: 8px; background: #faf9fd; }
.api-key-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.api-key-heading .field-label { margin: 0; }
.api-key-heading .text-button { color: #8d76c7; }
.api-fields .text-field { min-height: 40px; }
.api-field-hint { color: #9994aa; font-size: 10px; line-height: 1.7; margin: 7px 0 0; }
.api-rule-note { font-size: 11px; color: #9291a5; line-height: 1.8; margin: 17px 0; }
.api-request-heading, .api-result-heading { display: flex; align-items: center; justify-content: space-between; color: #828199; font-size: 11px; margin: 15px 0 8px; }
.api-request-heading .text-button { color: #8d76c7; }
.api-request { background: #24263a; color: #d3c9ed; border: 1px solid #30334c; border-radius: 8px; padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.8; margin: 0; }
.api-run-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.api-run-row > span { color: #9c98ae; font-size: 10px; }
.api-run-row .btn { margin-top: 0; white-space: nowrap; }
.api-result { padding: 0 15px 12px; background: #faf7f4; border: 1px solid #efe3d9; border-radius: 8px; margin-top: 18px; }
.api-result[data-success="true"] { background: #f4faf7; border-color: #dceee4; }
.api-status { color: #a67c54; font-variant-numeric: tabular-nums; }
.api-result[data-success="true"] .api-status { color: #589c7c; }
#api-response { font-size: 25px; letter-spacing: 3px; line-height: 1.5; color: #6b5a86; margin: 10px 0; white-space: pre-wrap; }
.api-result[data-success="false"] #api-response { font-size: 12px; letter-spacing: 0; color: #a18f7e; }
#api-result-note { margin: 7px 0 0; color: #9891a5; font-size: 10px; line-height: 1.8; }
.api-security-note { margin-top: 19px; border-top: 1px solid #eeedf4; padding-top: 15px; color: #9291a5; font-size: 11px; line-height: 1.8; }
.api-security-note summary { cursor: pointer; color: #867b9d; }
.api-security-note p { margin: 10px 0 0; }
@media(max-width:700px) { .api-fields { grid-template-columns: minmax(0,1fr); gap: 0; } .api-run-row { align-items: flex-start; } }