.json-tree{min-height:100%;padding:16px 18px;font-family:SF Mono,Fira Code,JetBrains Mono,Consolas,monospace;font-size:14px;line-height:1.65;overflow:auto}.json-line{border-radius:4px;min-height:26px;display:block;position:relative}.json-line-inner{border-radius:4px;flex-wrap:wrap;align-items:center;gap:0;width:100%;min-height:26px;padding:2px 8px 2px 0;display:flex}.json-line--leaf:hover,.json-line--branch .json-line-inner:hover{background:var(--bg-hover)}.json-line.expandable,.json-line--branch{cursor:pointer;-webkit-user-select:none;user-select:none}.json-line.highlight,.json-node.highlight>.json-line{background:#58a6ff26;outline:1px solid #58a6ff4d}.json-node--object>.json-line--object.expandable:hover{background:color-mix(in srgb, #6366f1 12%, var(--bg-hover))}.json-children--object{border-left:2px solid #6366f173;margin-left:10px;padding-left:10px}.json-bracket--object,.json-type-badge--object{color:#818cf8}.json-type-badge--object{text-transform:uppercase;letter-spacing:.04em;background:#6366f133;border:1px solid #6366f159;border-radius:4px;margin:0 4px;padding:1px 6px;font-size:.65rem;font-weight:700}.json-node--array>.json-line--array.expandable:hover{background:color-mix(in srgb, #f59e0b 12%, var(--bg-hover))}.json-children--array{border-left:2px solid #f59e0b80;margin-left:10px;padding-left:10px}.json-bracket--array,.json-type-badge--array{color:#fbbf24}.json-type-badge--array{text-transform:uppercase;letter-spacing:.04em;background:#f59e0b33;border:1px solid #f59e0b59;border-radius:4px;margin:0 4px;padding:1px 6px;font-size:.65rem;font-weight:700}.json-toggle{color:var(--text-muted);flex-shrink:0;align-items:center;margin-right:4px;display:inline-flex}.json-key{color:var(--key);font-weight:600}.json-key--index{color:#38bdf8;font-weight:600}.json-colon{color:var(--text-secondary)}.json-value.string{color:var(--string)}.json-value.number{color:var(--number)}.json-value.boolean{color:var(--boolean)}.json-value.null{color:var(--null);font-style:italic}.json-bracket{color:var(--text-secondary);font-weight:600}.json-comma{color:var(--text-muted)}.json-preview{color:var(--text-muted);margin:0 4px;font-style:italic}.json-count{color:var(--text-muted);margin-left:6px;font-size:11px}.line-copy{opacity:0;margin-left:8px;transition:opacity .15s}.json-line:hover .line-copy{opacity:1}.json-line--leaf,.json-line--close,.json-line--empty{flex-wrap:wrap;align-items:center;padding:2px 8px 2px 0;display:flex}.json-viewer{flex-direction:column;flex:none;gap:12px;width:100%;height:auto;min-height:min(82vh,900px);max-height:none;display:flex;overflow:hidden}.tool-header{flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.tool-title{color:var(--accent);align-items:center;gap:12px;display:flex}.tool-title h1{color:var(--text-primary);font-size:1.35rem;font-weight:600}.tool-title p{color:var(--text-secondary);font-size:.85rem}.json-stats{color:var(--text-muted);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;gap:10px 16px;padding:8px 12px;font-family:SF Mono,Consolas,monospace;font-size:.8rem;display:flex}.json-toolbar{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:10px 12px;display:flex}.toolbar-spacer{flex:1;min-width:8px}.indent-label{color:var(--text-secondary);align-items:center;gap:6px;font-size:.85rem;display:flex}.indent-label select{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;padding:4px 8px}.layout-toggle,.view-toggle{border:1px solid var(--border);border-radius:6px;display:flex;overflow:hidden}.layout-toggle button,.view-toggle button{background:var(--bg-tertiary);color:var(--text-secondary);white-space:nowrap;border:none;align-items:center;gap:5px;padding:6px 12px;font-size:.8rem;display:inline-flex}.layout-toggle button.active,.view-toggle button.active{background:var(--accent);color:#fff}.json-workspace{border:1px solid var(--border);border-radius:var(--radius);background:var(--border);flex:1;gap:2px;min-height:min(70vh,780px);display:grid;overflow:hidden}.json-viewer.layout-split .json-workspace{grid-template-rows:1fr;grid-template-columns:1fr 1fr;min-height:min(70vh,780px)}.json-viewer.layout-stacked .json-workspace{grid-template-rows:minmax(320px,42vh) minmax(360px,1fr);grid-template-columns:1fr;min-height:min(82vh,900px)}.json-viewer.layout-view .json-workspace{grid-template-rows:1fr;grid-template-columns:1fr}@media (max-width:768px){.json-viewer{min-height:auto}.json-viewer.layout-split .json-workspace,.json-viewer.layout-stacked .json-workspace{grid-template-rows:minmax(300px,42vh) minmax(340px,1fr);grid-template-columns:1fr;min-height:min(88vh,940px)}.json-textarea,.json-tree{font-size:12px}}.json-input-panel,.json-output-panel{background:var(--bg-secondary);height:100%;min-height:0;box-shadow:none;border:none;border-radius:0;flex-direction:column;display:flex;overflow:hidden}.json-input-panel{border-right:2px solid var(--border)}.panel-header--input{background:color-mix(in srgb, var(--accent) 8%, var(--bg-tertiary));border-bottom:2px solid color-mix(in srgb, var(--accent) 35%, var(--border))}.panel-header--response{background:color-mix(in srgb, var(--success,#22c55e) 8%, var(--bg-tertiary));border-bottom:2px solid color-mix(in srgb, var(--success,#22c55e) 35%, var(--border))}.panel-header-main{flex-direction:column;gap:6px;min-width:0;display:flex}.type-legend{flex-wrap:wrap;gap:8px;display:flex}.type-legend-item{border-radius:999px;padding:2px 8px;font-family:SF Mono,Consolas,monospace;font-size:.7rem;font-weight:600}.type-legend-item--object{color:#818cf8;background:#6366f12e;border:1px solid #6366f159}.type-legend-item--array{color:#fbbf24;background:#f59e0b2e;border:1px solid #f59e0b59}.json-output-panel{border-color:#0000}.panel-header{border-bottom:1px solid var(--border);color:var(--text-primary);background:var(--bg-tertiary);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;font-size:.9rem;font-weight:600;display:flex}.panel-subtitle{color:var(--text-muted);margin-left:8px;font-size:.8rem;font-weight:500}.panel-meta{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.panel-meta-item{color:var(--text-muted);font-family:monospace;font-size:.75rem;font-weight:500}.panel-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.search-box{background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;align-items:center;gap:6px;min-width:180px;padding:6px 10px;display:flex}.search-box input{color:var(--text-primary);background:0 0;border:none;outline:none;width:100%;min-width:120px;font-size:.85rem}.status{align-items:center;gap:4px;font-size:.8rem;font-weight:500;display:flex}.status.error{color:var(--error)}.status.success{color:var(--success)}.json-input-body{flex-direction:column;flex:1;min-height:0;display:flex}.json-textarea-wrap{flex:1;min-height:0;display:flex;overflow:auto}.json-textarea{background:var(--bg-primary);width:100%;height:100%;min-height:100%;color:var(--text-primary);resize:none;tab-size:2;white-space:pre;overflow-wrap:normal;border:none;outline:none;flex:1;padding:16px 18px;font-family:SF Mono,Fira Code,JetBrains Mono,Consolas,monospace;font-size:13px;line-height:1.6;overflow:auto}.json-textarea::placeholder{color:var(--text-muted);opacity:.85}.json-output-content{background:var(--bg-primary);-webkit-overflow-scrolling:touch;flex:1;height:100%;min-height:0;overflow:auto}.json-raw-wrap{padding:4px 0;font-family:SF Mono,Fira Code,JetBrains Mono,Consolas,monospace;font-size:14px;line-height:1.65}.json-raw-line{align-items:flex-start;gap:0;min-height:1.65em;display:flex}.json-raw-line:hover{background:var(--bg-hover)}.json-line-num{text-align:right;width:3.25rem;color:var(--text-muted);-webkit-user-select:none;user-select:none;border-right:1px solid var(--border);opacity:.7;flex-shrink:0;margin-right:12px;padding:0 12px 0 8px;font-size:12px}.json-raw-line code{color:var(--string);white-space:pre-wrap;word-break:break-word;flex:1;padding-right:16px}.error-banner{background:color-mix(in srgb, var(--error) 12%, transparent);color:var(--error);border-top:1px solid color-mix(in srgb, var(--error) 30%, var(--border));flex-shrink:0;padding:10px 16px;font-size:.85rem}.empty-state{height:100%;min-height:320px;color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex}.empty-state p{color:var(--text-secondary);max-width:28ch;font-size:1rem}.empty-hint{opacity:.8;font-size:.8rem}