/* JSON Output Styling */
.json-output {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    max-height: 60vh;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    border-radius: 4px;
    text-align: left;
    box-sizing: border-box;
    overflow-wrap: break-word;
    hyphens: auto;
}

.card-container {
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Responsive container for different screen sizes */
@media (max-width: 1200px) {
    .card-container {
        max-width: 95%;
    }
}

@media (max-width: 768px) {
    .json-output {
        font-size: 12px;
        max-height: 50vh;
    }
    
    .card-container {
        max-width: 98%;
    }
}

/* Highlight.js custom styles */
.hljs-attr {
    color: #91d7ff; /* Property names */
}

.hljs-string {
    color: #b5cea8; /* String values */
}

.hljs-number {
    color: #b5cea8; /* Number values */
}

.hljs-literal {
    color: #569cd6; /* true/false/null */
}

.hljs-punctuation {
    color: #d4d4d4; /* Braces, brackets, commas */
}