.CodeMirror {
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cm-string {
    font-family: 'Andale Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.cm-mindframe-variable-square {
    color: black !important;
    background-color: #a2d2ffDD;
    padding: 2px 4px;
    border-radius: 2px;
    font-family: 'Andale Mono', monospace !important;
}

.cm-mindframe-variable-curly {
    color: black !important;
    background-color: #caffbfDD;
    padding: 2px 4px;
    border-radius: 2px;
    font-family: 'Andale Mono', monospace !important;
}

.cm-mindframe-keyword {
    color: black !important;
    font-weight: bold;
    background-color: #ffadadAA;
    padding: 2px 4px;
    border-radius: 2px;
    font-family: 'Andale Mono', monospace !important;
}

.cm-s-json-monospace .CodeMirror {
    font-family: Monaco, Consolas, "Courier New", monospace;
}

.cm-s-json-monospace .cm-string,
.cm-s-json-monospace .cm-number,
.cm-s-json-monospace .cm-atom,
.cm-s-json-monospace .cm-keyword,
.cm-s-json-monospace .cm-property {
    font-family: "Andale Mono", Consolas, "Courier New", monospace;
}

.cm-property {
    color: #25D366;
}

/* Auto-save indicator styles */
.save-indicator {
    transition: opacity 0.3s ease;
    font-size: 0.85em;
    margin-left: 10px;
}

.save-indicator.saved {
    color: #28a745;
}

.save-indicator.saving {
    color: #ffc107;
}

.save-indicator.error {
    color: #dc3545;
}