.json-workbench .panel-body {
    padding: 16px;
    gap: 16px;
}

.json-workbench textarea,
#json-tree {
    width: 100%;
    height: 420px;
    min-height: 260px;
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--editor-bg);
    color: var(--editor-text);
    font: 14px/1.65 var(--font-mono);
    tab-size: 2;
    overflow: auto;
    resize: vertical;
    white-space: pre;
}

.json-workbench .panel-header,
.json-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.json-workbench .panel-header {
    justify-content: space-between;
}

.json-actions button,
.json-feedback button {
    padding: 8px 12px;
}

body[data-tool="json_formatter"] .secondary {
    background: var(--bg-alt);
    border: 1px solid var(--card-border);
    color: var(--text);
}

body[data-tool="json_formatter"] button[aria-pressed="true"] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--bg);
}

.json-indent-label {
    font-size: 14px;
}

#json-indent {
    padding: 8px 28px 8px 10px;
    font-size: 14px;
}

.json-meta,
.json-privacy {
    color: var(--text-muted);
    font-size: 13px;
}

.json-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: -12px;
    font-size: 14px;
}

#json-status[data-state="valid"] {
    color: var(--primary);
}

#json-status[data-state="error"] {
    color: #b33a36;
}

body.dark-mode #json-status[data-state="error"] {
    color: #ffaaa3;
}

#json-input[aria-invalid="true"] {
    border-color: #b33a36;
}

#json-tree details {
    margin-left: 18px;
}

#json-tree > details {
    margin-left: 0;
}

#json-tree summary {
    cursor: pointer;
    width: max-content;
    min-height: 28px;
}

.json-leaf {
    margin-left: 18px;
}

.json-value-string {
    color: var(--primary);
}

.json-value-number,
.json-value-boolean,
.json-value-null {
    color: #7654a4;
}

body.dark-mode .json-value-number,
body.dark-mode .json-value-boolean,
body.dark-mode .json-value-null {
    color: #d0b4f7;
}

body[data-tool="json_formatter"] [hidden] {
    display: none;
}

@media (max-width: 600px) {
    .json-workbench textarea,
    #json-tree {
        height: 320px;
    }
}