body {
    font-family: 'Roboto', Arial, sans-serif;
    margin: 20px;
    background-color: #121212; /* Material Dark theme background */
    color: #B0B0B0; /* Very light grey for normal text */
    line-height: 1.6;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.panel {
    background: #1E1E1E; /* Slightly lighter than background for elevation effect */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Deeper shadow for elevation */
    border: 1px solid #2C2C2C; /* Subtle border */
}

.json-input, .expression-output, .preview-output {
    width: 100%;
    font-family: 'Roboto Mono', monospace;
    background-color: #2C2C2C; /* Slightly lighter background for inputs */
    color: #B0B0B0;
    border: 1px solid #3C3C3C;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.json-input {
    height: 200px;
}

.expression-output {
    height: 400px;
}

.preview-output {
    height: 200px;
    background-color: #252525;
    margin-top: 10px;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

button {
    background-color: #1A2634; /* Darker blue-grey for button background */
    color: #718096; /* Medium blue-grey for button text */
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

button:hover {
    background-color: #233645; /* Slightly lighter on hover */
    color: #8BA3C1; /* Lighter text on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

button.secondary {
    background-color: #1A2634; /* Same as primary */
    color: #4CAF50; /* Green accent */
}

button.secondary:hover {
    background-color: #233645;
    color: #81C784; /* Lighter green */
}

.tree-node {
    margin-left: 20px;
    display: none;
}

.tree-node.expanded {
    display: block;
}

.tree-label {
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    display: block;
    margin: 2px 0;
    transition: background-color 0.3s ease;
}

.tree-label:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle hover effect */
}

.expandable {
    color: #4A6EA9; /* Medium blue-grey for expandable text */
    font-weight: bold;
}

.expandable::before {
    content: '►';
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.2s;
    color: #4A6EA9; /* Matching expandable color */
}

.expandable.expanded::before {
    transform: rotate(90deg);
}

.error {
    color: #FF5252; /* Material Red */
    margin-top: 10px;
}

/* Tree view color adjustments */
.tree-label .key {
    color: #4A6EA9; /* Medium blue-grey for keys */
}

.tree-label .string {
    color: #4A9C6D; /* Muted green for strings */
}

.tree-label .number {
    color: #C19A6B; /* Muted bronze for numbers */
}

.tree-label .boolean {
    color: #9C6D4A; /* Muted brown for booleans */
}

/* Optional: Add focus states for accessibility */
.json-input:focus, 
.expression-output:focus, 
.preview-output:focus {
    outline: none;
    border-color: #4A6EA9;
    box-shadow: 0 0 0 2px rgba(74, 110, 169, 0.3);
}