/* Presentation only. Parsing and literal precision remain in json-core.js. */
.json-input-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.json-input-header label { flex: 1; }
.json-input-header .up-button { padding-inline: 16px; }
.json-page .editor-textarea { min-height: 192px; font-family: ui-monospace, "Consolas", "Monaco", monospace; font-size: 16px; line-height: 1.6; tab-size: 2; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.json-page .editor-textarea.error { border-color: var(--up-error); background: var(--up-error-surface); }
.json-primary-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.json-primary-actions .up-button { padding-inline: 8px; font-size: 14px; }
.json-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.indent-selector { display: flex; align-items: center; gap: 8px; }
.indent-label { font-size: 14px; font-weight: 500; }
.indent-select { width: auto; }
.status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--up-muted); font-size: 13px; line-height: 1.5; }
.status-badge { font-weight: 650; }
.status-badge.valid { color: var(--up-green); }
.status-badge.invalid { color: var(--up-error); }
.error-display { display: none; }
.error-display.show { display: block; }
.error-title { font-size: 14px; font-weight: 650; margin-bottom: 4px; }
.error-message { font-size: 14px; overflow-wrap: anywhere; }
.json-feedback { color: var(--up-muted); font-size: 13px; line-height: 1.5; }
.json-feedback:empty { display: none; }
.json-secondary-actions { margin-top: 16px; }
.json-secondary-actions .up-button { flex: 1; max-width: 176px; }
.tree-view { display: none; margin-top: 12px; padding: 16px; border: 1px solid var(--up-border); border-radius: var(--up-radius); background: var(--up-surface); max-height: 400px; overflow: auto; font-family: ui-monospace, "Consolas", "Monaco", monospace; font-size: 16px; line-height: 1.6; }
.tree-view.show { display: block; }
.tree-view pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tree-key { color: var(--up-forest); font-weight: 650; }
.tree-string { color: var(--up-green); }
.tree-number { color: var(--up-info); }
.tree-boolean { color: var(--up-error); }
.tree-null, .tree-bracket { color: var(--up-muted); }
.json-warning { margin-top: 16px; }
@media (max-width: 767px) {
  .json-page .editor-textarea { min-height: 128px; }
  .json-toolbar { gap: 8px; }
  .status-bar { width: 100%; }
  .json-secondary-actions .up-button { max-width: none; padding-inline: 8px; font-size: 14px; }
}