body{font:14px Arial;color:#173452;margin:0;padding:22px;background:#f7f9fc}h2{margin:0 0 8px}p{color:#71859d}textarea,input,select{width:100%;box-sizing:border-box;border:1px solid #ccd9e8;border-radius:8px;padding:10px;font:14px monospace;margin:8px 0}textarea{min-height:180px;resize:vertical}.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}.actions{display:flex;gap:8px;margin:8px 0}button{border:1px solid #c9d9eb;border-radius:8px;padding:9px 13px;background:#f4f8fd;color:#1768c4;cursor:pointer}.out{background:#f6f9fc;border-radius:8px;padding:12px;white-space:pre-wrap;word-break:break-word;min-height:80px}

/* Side-by-side source and result editors. */
.json-columns{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:20px;align-items:stretch}
.json-panel{display:flex;flex-direction:column;min-width:0}
.json-panel label{font-weight:600;margin:0 0 8px}
.json-panel textarea,.json-panel .out{box-sizing:border-box;width:100%;height:clamp(320px,65vh,800px);min-height:320px;margin:0;padding:12px;font:14px/1.6 monospace;tab-size:2;overflow:auto;white-space:pre;overflow-wrap:normal;word-break:normal;border:1px solid #ccd9e8;border-radius:8px}
.json-panel textarea{resize:vertical}
.json-panel .out{background:#f6f9fc}
@media(max-width:600px){body{padding:12px}.json-columns{gap:12px}.json-panel textarea,.json-panel .out{font-size:12px}}

/* Result tabs and expandable JSON tree. */
.json-panel{position:relative}
.json-panel>label{min-height:32px;display:flex;align-items:center}
.json-result-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;min-height:32px}
.json-result-heading label{margin:0;min-width:0}
.json-tabs{display:flex;gap:0;flex-shrink:0;border:1px solid #ccd9e8;border-radius:7px;overflow:hidden}
.json-tabs button{border:0;border-radius:0;padding:6px 10px;background:#fff;color:#61758c;font:13px Arial,sans-serif}
.json-tabs button[aria-selected="true"]{background:#e8f1fe;color:#1768c4;font-weight:600}
.json-panel [hidden]{display:none!important}
.json-tree{box-sizing:border-box;width:100%;height:clamp(320px,65vh,800px);min-height:320px;padding:12px;overflow:auto;background:#f6f9fc;border:1px solid #ccd9e8;border-radius:8px;font:14px/1.8 monospace;white-space:pre}
.json-tree-children{margin-left:18px;padding-left:12px;border-left:1px solid #dce5f0}
.json-tree-node summary{cursor:pointer;width:max-content;min-width:120px}
.json-tree-node summary:focus-visible{outline:2px solid #1768c4}
.json-tree-key{color:#173452}.json-tree-string{color:#178049}.json-tree-number{color:#1768c4}.json-tree-boolean{color:#8a48b5}.json-tree-null,.json-tree-count{color:#71859d}
@media(max-width:600px){.json-result-heading{flex-wrap:wrap}.json-tabs button{padding:6px}.json-tree{font-size:12px}}

/* Selected tree node actions. */
.json-node-label{position:relative;cursor:pointer;min-width:max-content}
.json-tree-selected>.json-node-label{background:#fff2b7;border-radius:3px}
.json-node-menu{display:inline-flex;vertical-align:middle;margin-left:20px;border:1px solid #ccd9e8;border-radius:5px;background:#fff;white-space:nowrap;line-height:1.4}
.json-node-menu button{padding:4px 8px;border:0;border-radius:0;border-right:1px solid #e4eaf2;background:transparent;font:12px Arial,sans-serif;color:#51637a}
.json-node-menu button:last-child{border-right:0}.json-node-menu .json-node-delete{color:#bc3541}
.json-node-menu button:hover{background:#e8f1fe}
.json-node-menu button:focus-visible{outline:2px solid #1768c4;outline-offset:-2px}

/* Search and locate result matches. */
.json-search{display:flex;align-items:center;gap:4px;flex:1;min-width:100px;max-width:360px}
.json-search input{min-width:40px;width:100%;margin:0;padding:6px 8px;font:13px Arial,sans-serif}
.json-search button{padding:5px 7px;border-radius:4px}
.json-search button:disabled{opacity:.4;cursor:default}
#json-search-count{white-space:nowrap;font:12px Arial,sans-serif;color:#71859d}
.json-panel mark{background:#fff1a1;color:inherit;border-radius:2px}
.json-panel .json-search-current{background:#ffd36a;color:#173452;outline:1px solid #e6ab28;border-radius:2px}
@media(max-width:900px){.json-result-heading{flex-wrap:wrap}.json-search{order:3;flex-basis:100%;max-width:none}}

/* Shared search above both JSON columns. */
body>.json-search{max-width:none;width:100%;margin:12px 0 16px;gap:8px;box-sizing:border-box}
body>.json-search input{flex:1;max-width:460px}
body>.json-search #json-search-count{min-width:70px}
.json-panel textarea.json-source-match{border-color:#e6ab28;box-shadow:0 0 0 1px #e6ab28}
.json-panel textarea::selection{background:#ffd36a;color:#173452}

/* Wrap long JSON values in all three views. */
.json-panel textarea,.json-panel .out,.json-panel .json-tree{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.json-tree .json-tree-node{min-width:0;max-width:100%}
.json-tree .json-node-label,.json-tree .json-tree-node summary{box-sizing:border-box;width:auto;min-width:0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.json-tree .json-tree-node>span.json-node-label{display:block}
.json-tree .json-node-menu{max-width:100%;box-sizing:border-box;flex-wrap:wrap;white-space:normal;margin-left:8px}

/* Source character count and actions on the same heading row. */
.json-source-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:32px;margin-bottom:8px}
.json-source-heading label{margin:0;min-height:0;white-space:nowrap}
#json-source-count{font:12px Arial,sans-serif;color:#71859d;white-space:nowrap}
.json-source-heading .actions{display:flex;gap:6px;margin:0 0 0 auto}
.json-source-heading .actions button{padding:6px 9px;font:13px Arial,sans-serif}

/* Independent search controls below each column. */
.json-panel>.json-panel-search{flex:none;order:initial;max-width:none;width:100%;box-sizing:border-box;margin:12px 0 0;gap:6px;flex-wrap:wrap}
.json-panel-search input{flex:1;min-width:80px;width:auto}
.json-search-count{white-space:nowrap;font:12px Arial,sans-serif;color:#71859d}

/* Persistent source search highlights beneath the editable text. */
.json-source-editor{position:relative;min-width:0;background:#fff;border-radius:8px}
.json-source-editor .json-source-highlights{position:absolute;left:0;top:0;box-sizing:border-box;border:1px solid transparent;border-radius:8px;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;color:transparent;pointer-events:none;user-select:none}
.json-source-editor .json-source-highlights mark{color:transparent!important;background:#fff1a1;border-radius:2px;outline:0}
.json-source-editor .json-source-highlights mark.json-source-current{background:#ffd36a;outline:1px solid #e6ab28}
.json-panel .json-source-editor textarea{position:relative;display:block;background:transparent;z-index:1}

/* Compact copy controls above source and result. */
.json-result-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.json-panel .json-copy-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:30px;flex-shrink:0;padding:5px;border:0;border-radius:5px;background:transparent;color:#51637a;cursor:pointer}
.json-panel .json-copy-button:hover{background:#e8f1fe;color:#1768c4}
.json-panel .json-copy-button:focus-visible{outline:2px solid #1768c4}
.json-panel .json-copy-success{color:#178049;background:#e8f6ec}

/* Result size and whole-tree controls. */
.json-character-count{font:12px Arial,sans-serif;color:#71859d;white-space:nowrap}
#json-tree-controls{display:inline-flex;align-items:center;gap:6px}
#json-tree-controls[hidden]{display:none!important}
#json-tree-controls button{padding:6px 9px;font:13px Arial,sans-serif;white-space:nowrap}
.json-result-heading{flex-wrap:wrap}

/* Whole-tree icons beside copy and result tabs. */
.json-result-actions #json-tree-controls{gap:2px}
.json-result-actions #json-tree-controls .json-tree-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:30px;padding:5px;border:0;border-radius:5px;background:transparent;color:#51637a;cursor:pointer}
.json-result-actions #json-tree-controls .json-tree-icon:hover{background:#e8f1fe;color:#1768c4}
.json-result-actions #json-tree-controls .json-tree-icon:focus-visible{outline:2px solid #1768c4}
.json-result-actions #json-tree-controls .json-tree-icon:disabled{opacity:.4;cursor:default}

/* Soft focus indication without a heavier border. */
.json-panel textarea:focus,.json-search input:focus,.json-panel .out:focus,.json-panel .json-tree:focus{outline:none;box-shadow:none;border-color:#ccd9e8}
.json-search input:focus,.json-panel .out:focus,.json-panel .json-tree:focus{background:#eef8ef}
.json-source-editor:focus-within{background:#eef8ef}
.json-panel .json-source-editor textarea:focus{background:transparent;outline:none;box-shadow:none;border-color:#ccd9e8}
.json-tree:focus-within{background:#eef8ef}

/* Keep copy SVGs identical in both heading toolbars. */
.json-panel .json-source-heading .actions .json-copy-button,.json-panel .json-result-actions .json-copy-button{box-sizing:border-box;width:28px;height:30px;padding:5px;flex:0 0 28px}
.json-panel .json-copy-button svg{display:block;width:16px;height:16px;min-width:16px;flex:0 0 16px}