.json-main { max-width: 760px; }
.json-form { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.json-form label { color: var(--ink); font-size: 13px; font-weight: 650; }
.json-form textarea { width: 100%; min-height: 180px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--ink); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.json-form textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.json-limit, .json-status, .json-error { margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 1.5; }
.json-error { color: var(--danger); }
.json-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.json-actions button, #json-copy { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent); color: white; font: inherit; font-weight: 650; cursor: pointer; }
.json-actions .secondary-button, #json-copy.secondary-button { background: var(--surface-soft); color: var(--ink); }
#json-copy:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) { .json-form { padding: 17px; } .json-form textarea { min-height: 160px; } }