/* Syntax Highlighting for Code Blocks */
.code-block {
    background: #2d2d2d;
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
}

.code-block pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #d4d4d4;
}

.code-block code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* Syntax Colors */
.keyword { color: #569cd6; font-weight: 600; }
.string { color: #ce9178; }
.number { color: #b5cea8; }
.comment { color: #6a9955; font-style: italic; }
.function { color: #dcdcaa; }
.property { color: #9cdcfe; }
.operator { color: #d4d4d4; }
.punctuation { color: #d4d4d4; }
.url { color: #4ec9b0; }
.header { color: #c586c0; }
.method { color: #dcdcaa; font-weight: 600; }
.param { color: #9cdcfe; }
.value { color: #ce9178; }
.boolean { color: #569cd6; }
.null { color: #569cd6; }

/* Response Box Syntax */
.response-box {
    background: #2d2d2d;
    color: #d4d4d4;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.response-box .json-key { color: #9cdcfe; }
.response-box .json-string { color: #ce9178; }
.response-box .json-number { color: #b5cea8; }
.response-box .json-boolean { color: #569cd6; }
.response-box .json-null { color: #569cd6; }

/* Scrollbar styling */
.code-block pre::-webkit-scrollbar,
.response-box::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.code-block pre::-webkit-scrollbar-track,
.response-box::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.code-block pre::-webkit-scrollbar-thumb,
.response-box::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.code-block pre::-webkit-scrollbar-thumb:hover,
.response-box::-webkit-scrollbar-thumb:hover {
    background: #777;
}