/* Glass Panel effect */
.glass-panel {
    background-color: #1E293B;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Custom Scrollbar for Textareas and Pre */
.custom-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #0d1322;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
    border: 2px solid #0d1322;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Syntax Highlighting Base (optional enhancements beyond basic text color) */
#json-output {
    white-space: pre-wrap;
    /* css-3 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

/* JSON Key / Value coloring (applied via JS simple regex or just single color) */
.json-key {
    color: #818CF8;
}

/* Indigo 400 */
.json-str {
    color: #34D399;
}

/* Emerald 400 */
.json-num {
    color: #F472B6;
}

/* Pink 400 */
.json-bool {
    color: #FBBF24;
}

/* Amber 400 */
.json-null {
    color: #9CA3AF;
    font-style: italic;
}

/* Gray 400 */

/* Animations */
#error-overlay {
    animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}