/* CreatesOnline JSON editor — self-hosted, zero-dependency, theme-aware. */
.co-json { border: 1px solid var(--border, #2a2f3a); border-radius: 12px; overflow: hidden; background: var(--bg, #10141c); }
.co-json.co-json--focus { border-color: #2563ff; }
.co-json.co-json--invalid { border-color: #f87171; }
.co-json__bar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border, #2a2f3a); background: var(--surface, #161a23); }
.co-json__btn { background: transparent; border: 1px solid var(--border,#2a2f3a); color: var(--fg-muted, #8b93a7); height: 28px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-size: .8rem; }
.co-json__btn:hover { color: var(--fg, #e6e9ef); border-color: rgba(37,99,255,.5); }
.co-json__status { margin-inline-start: auto; font-size: .78rem; }
.co-json__status.ok { color: #6ee7b7; }
.co-json__status.err { color: #f87171; }
.co-json__body { display: flex; max-height: 60vh; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; line-height: 1.55; }
.co-json__gutter { flex: none; padding: 12px 8px; text-align: right; color: var(--fg-subtle, #5b6472); background: rgba(0,0,0,.18); user-select: none; white-space: pre; min-width: 38px; }
.co-json__area { flex: 1; border: 0; resize: vertical; min-height: 220px; padding: 12px 14px; background: transparent; color: var(--fg, #e6e9ef); font: inherit; line-height: inherit; outline: none; white-space: pre; overflow-wrap: normal; tab-size: 2; }