*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #282a36;--bg-alt: #21222c;--bg-surface: #393c4e;--bg-hover: #44475a;--border: #393c4e;--border-light: #575b70;--text: #f8f8f2;--text-muted: #8a8dad;--text-dim: #6272a4;--accent: #f1fa8c;--accent-hover: #fffcb3;--string: #f8f8f2;--number: #bd93f9;--boolean: #50fa7b;--null: #ff79c6;--diff-added: #50fa7b33;--diff-removed: #ff555533;--diff-modified: #ffb86c33;--diff-add-text: #50fa7b;--diff-rem-text: #ff5555;--diff-mod-text: #ffb86c;--radius: 6px;--radius-sm: 3px;--font: "IBM Plex Mono", monospace;--font-size: 11px;--toolbar-w: 120px;--transition: .15s ease}.light-mode{--bg: #ffffff;--bg-alt: #f5f5f5;--bg-surface: #e8e8e8;--bg-hover: #dcdcdc;--border: #e0e0e0;--border-light: #c8c8c8;--text: #333333;--text-muted: #888888;--text-dim: #aaaaaa;--accent: #cc1144;--accent-hover: #ff2255;--string: #111111;--number: #1a6fa5;--boolean: #1a8c30;--null: #a050a0}html,body{height:100%}body{font-family:var(--font);font-size:var(--font-size);background:var(--bg);color:var(--text);line-height:1.5;overflow:hidden}.app-layout{display:grid;grid-template-columns:minmax(200px,30%) var(--toolbar-w) 1fr;grid-template-rows:minmax(0,1fr);height:calc(100vh - 22px);height:calc(100dvh - 22px);overflow:hidden}.editor-panel{position:relative;display:flex;flex-direction:column;overflow:hidden}.editor-panel:after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom,var(--border) 0%,transparent 100%);pointer-events:none}#editor-single{flex:1;display:flex;flex-direction:column;overflow:hidden}.xml-badge{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--bg-surface);border-top:1px solid var(--border);color:var(--text-muted);font-size:10px;font-family:var(--font);flex-shrink:0}.xml-badge .xml-badge-label{color:var(--text-dim)}.xml-badge .btn-inline{color:var(--accent);background:none;border:none;padding:0;font:inherit;font-size:10px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.xml-badge .btn-inline:hover{color:var(--accent-hover)}.cm-host{flex:1;min-height:0;overflow:hidden}.cm-host .cm-editor{height:100%}.cm-host .cm-scroller{overflow:auto!important}#editor-dual{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden;padding-bottom:36px}.diff-pane{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.diff-pane-label{padding:2px 8px;font-size:10px;color:var(--text-dim);background:var(--bg-alt);border-bottom:1px solid var(--border);letter-spacing:.05em;text-transform:uppercase;flex-shrink:0}.diff-pane .cm-host{flex:1;min-height:0}.btn-run-diff{position:absolute;bottom:0;left:0;right:0;padding:6px;background:var(--bg-surface);border:none;border-top:1px solid var(--border);color:var(--accent);font-family:var(--font);font-size:var(--font-size);cursor:pointer;transition:background var(--transition)}.btn-run-diff:hover{background:var(--bg-hover)}.drop-overlay{position:absolute;inset:0;background:#282a36e0;display:flex;align-items:center;justify-content:center;border:2px dashed var(--accent);border-radius:var(--radius);z-index:100;pointer-events:none;opacity:0;transition:opacity var(--transition)}.light-mode .drop-overlay{background:#ffffffe0}.drop-overlay.visible{opacity:1;pointer-events:all}.drop-overlay span{font-size:16px;color:var(--accent);letter-spacing:.05em}.toolbar{width:var(--toolbar-w);display:flex;flex-direction:column;justify-content:center;padding:8px 4px;gap:2px;min-width:0;overflow:hidden}.toolbar-actions{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;overflow-x:hidden}.btn{background:transparent;border:none;color:var(--text-muted);padding:7px 8px;font-family:var(--font);font-size:14px;text-align:left;cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition);white-space:nowrap}.btn:hover{color:var(--accent);background:var(--bg-surface)}.btn.active{color:var(--accent)}.btn:focus-visible,.search-input:focus-visible,.search-nav:focus-visible,.search-clear:focus-visible,.btn-inline:focus-visible,.export-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.toolbar-sep{display:none}.export-wrap{position:relative;display:flex;align-items:center}.export-menu{display:none;position:fixed;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);z-index:9000;min-width:100px;box-shadow:0 4px 16px #00000080;overflow:hidden}.export-menu.open{display:block}.export-menu button{display:block;width:100%;padding:7px 14px;background:transparent;border:none;color:var(--text-muted);font-family:var(--font);font-size:13px;text-align:left;cursor:pointer;transition:background var(--transition),color var(--transition)}.export-menu button:hover{background:var(--bg-surface);color:var(--accent)}.search-wrap{display:flex;flex-direction:column;margin-top:2px;min-width:0}.search-input{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13px;padding:5px 8px}.search-input::placeholder{color:var(--text-dim)}.search-controls{display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:0 4px 2px;min-height:18px}.search-count{font-size:10px;color:var(--text-dim);flex:1;white-space:nowrap}.search-nav{background:transparent;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;padding:2px 3px;font-family:var(--font);opacity:0;transition:opacity var(--transition),color var(--transition);line-height:1}.search-nav.visible{opacity:1}.search-nav:hover{color:var(--text)}.search-clear{background:transparent;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;padding:2px 4px;font-family:var(--font);opacity:0;transition:opacity var(--transition),color var(--transition)}.search-clear.visible{opacity:1}.search-clear:hover{color:var(--text)}tr.search-hidden{display:none}.grid-panel{min-width:0;min-height:0;overflow:auto;padding:20px 16px 40px;background:var(--bg);overscroll-behavior:contain}.json-grid-container{min-width:100%;font-size:12px;font-weight:500;display:inline-block}.json-grid-container table{border-collapse:collapse;border:1px solid var(--border);border-spacing:0;margin:0}.json-grid-container table.shrinked{display:none}.json-grid-container th,.json-grid-container td{text-align:left;padding:4px 14px 4px 8px;border:1px solid var(--border);vertical-align:top}.json-grid-container th,.json-grid-container td.rowName{font-weight:600;color:var(--text-muted);background:var(--bg-surface)}.json-grid-container tbody tr:hover>td:not(.rowName){background:#ffffff05}.light-mode .json-grid-container tbody tr:hover>td:not(.rowName){background:#00000005}.json-grid-container td.rowName[data-key-type=attribute]{color:var(--text-dim);font-style:italic;font-weight:500}.json-grid-container span.string{color:var(--string)}.json-grid-container span.number{color:var(--number)}.json-grid-container span.boolean{color:var(--boolean)}.json-grid-container span.null{color:var(--null);font-style:italic}.json-grid-container span.value{overflow-wrap:anywhere}span.editable{cursor:text;border-radius:2px;outline:none;transition:background var(--transition),box-shadow var(--transition);min-width:4px;display:inline-block}span.editable:hover{background:#ffffff0d;box-shadow:0 1px 0 0 var(--text-dim)}.light-mode span.editable:hover{background:#0000000a}span.editable:focus{background:#f1fa8c14;box-shadow:0 0 0 1px var(--accent)}.cell-hover{background:#44475a59!important}.cell-locked{background:#44475a99!important}.light-mode .cell-hover{background:#0000000f!important}.light-mode .cell-locked{background:#0000001f!important}.expander{display:inline-flex;align-items:baseline;gap:5px;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.8}.expander-toggle{color:var(--accent);font-weight:600;transition:color var(--transition)}.expander:hover .expander-toggle{color:var(--accent-hover)}.expander-title{color:var(--text);font-weight:500}.expander-count{color:var(--text-dim);font-size:10px;padding:0 1px}.focus-node{opacity:.55}.expander:hover .focus-node,.focus-node:focus-visible{opacity:1}.focus-bar{display:flex;align-items:center;gap:5px;padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text-dim);overflow-x:auto;white-space:nowrap}.focus-label{font-size:10px}#focus-breadcrumb{display:flex;align-items:center;gap:3px}.focus-separator{color:var(--text-dim)}mark.highlight{background:#f1fa8c33;color:inherit;border-radius:2px;outline:1px solid #f1fa8c66}mark.highlight-active{background:#f1fa8c99;color:#282a36;border-radius:2px;outline:2px solid #f1fa8c}.light-mode mark.highlight{background:#ffe06660;outline-color:#fb0}.light-mode mark.highlight-active{background:#fc0;color:#111;outline-color:#e90}td.diff-added,span.diff-added{background:var(--diff-added)}td.diff-removed,span.diff-removed{background:var(--diff-removed)}td.diff-modified,span.diff-modified{background:var(--diff-modified)}span.diff-added{color:var(--diff-add-text)}span.diff-removed{color:var(--diff-rem-text)}span.diff-modified{color:var(--diff-mod-text)}#diff-legend{display:flex;align-items:center;gap:8px;padding:6px 4px;flex-wrap:wrap}#diff-legend .pill{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600}#diff-legend .added{background:var(--diff-added);color:var(--diff-add-text)}#diff-legend .removed{background:var(--diff-removed);color:var(--diff-rem-text)}#diff-legend .modified{background:var(--diff-modified);color:var(--diff-mod-text)}#diff-legend .total{background:var(--bg-surface);color:var(--text-muted)}.diff-nav-btn{background:var(--bg-surface);border:1px solid var(--border-light);color:var(--text-muted);border-radius:var(--radius-sm);padding:1px 6px;font-size:11px;cursor:pointer;line-height:1.6;font-family:var(--font);transition:background var(--transition),color var(--transition)}.diff-nav-btn:hover{background:var(--bg-hover);color:var(--text)}.diff-nav-counter{font-size:10px;color:var(--text-muted);min-width:36px;text-align:center;font-family:var(--font)}span.diff-nav-active{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}#json-path-panel{position:fixed;bottom:0;left:0;right:0;height:22px;background:#15161ceb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-muted);padding:0 12px;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:9999;border-top:1px solid var(--border)}.light-mode #json-path-panel{background:#f0f0f0f2;border-top-color:var(--border)}#json-path-display{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font)}.btn-inline{background:transparent;border:none;color:var(--text-dim);font-family:var(--font);font-size:10px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-sm);transition:color var(--transition);white-space:nowrap}.btn-inline:hover{color:var(--accent)}.footer-bar{position:fixed;top:0;right:0;z-index:1000;padding:6px 12px}.footer-bar a{text-decoration:none;color:var(--text-dim);font-size:10px;font-family:var(--font);transition:color var(--transition)}.footer-bar a:hover{color:var(--accent)}#app-toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(8px);background:var(--bg-hover);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:7px 16px;font-size:12px;font-family:var(--font);z-index:10000;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;white-space:nowrap;max-width:calc(100vw - 24px);text-align:center}#app-toast.show{opacity:1;transform:translate(-50%) translateY(0)}#app-toast.error{border-color:#f55;color:#f55}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}::-webkit-scrollbar-corner{background:var(--bg)}.hidden{display:none!important}#schema-panel{position:fixed;top:0;right:0;width:auto;max-width:50vw;height:calc(100vh - 22px);height:calc(100dvh - 22px);background:var(--bg-alt);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:1100;overflow:hidden}.schema-panel-header{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--border);background:var(--bg-surface);flex-shrink:0}.schema-panel-title{flex:1;font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}.schema-close{color:var(--text-dim)}.schema-close:hover{color:var(--text)}.schema-table-wrap{overflow:auto;flex:1}.schema-table{width:100%;border-collapse:collapse;font-size:11px}.schema-table thead th{position:sticky;top:0;background:var(--bg-surface);color:var(--text-muted);font-weight:600;padding:5px 8px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.schema-table tbody tr:hover{background:var(--bg-hover)}.schema-table td{padding:3px 8px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;font-family:var(--font)}.type-badge{display:inline-block;padding:1px 5px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;background:var(--bg-hover);margin-right:2px}.type-badge.type-string{color:var(--string)}.type-badge.type-number{color:var(--number)}.type-badge.type-boolean{color:var(--boolean)}.type-badge.type-null{color:var(--null)}.type-badge.type-object{color:var(--text-muted)}.type-badge.type-array{color:var(--accent)}.nullable-cell{color:var(--boolean);text-align:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(max-width:900px){:root{--font-size: 12px}body{overflow:hidden;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app-layout{grid-template-columns:1fr;grid-template-rows:minmax(240px,42dvh) auto minmax(0,1fr);height:calc(100vh - 30px);height:calc(100dvh - 30px - env(safe-area-inset-bottom));overflow:hidden}.editor-panel{grid-column:1;min-width:0;height:auto;border-bottom:1px solid var(--border)}.editor-panel:after{display:none}.toolbar{grid-column:1;width:100%;padding:0;gap:0;justify-content:flex-start;overflow:visible;border-right:0;border-bottom:1px solid var(--border);background:var(--bg-alt);z-index:50}.toolbar-actions{width:100%;display:flex;flex-direction:row;gap:2px;padding:4px max(6px,env(safe-area-inset-right)) 4px max(6px,env(safe-area-inset-left));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;justify-content:safe center}.toolbar-actions::-webkit-scrollbar{display:none}.toolbar-actions:after{content:"";flex:0 0 4px}.toolbar:after{content:"";position:absolute;top:0;right:0;width:26px;height:49px;background:linear-gradient(to right,transparent,var(--bg-alt));pointer-events:none}.toolbar-sep{display:none}.btn{flex:0 0 auto;min-height:40px;padding:8px 10px;text-align:center}.export-wrap{flex:0 0 auto}.search-wrap{width:100%;min-height:42px;flex-direction:row;align-items:center;margin:0;border-top:1px solid var(--border)}.search-input{min-width:0;min-height:42px;flex:1;padding:8px 12px;font-size:16px}.search-controls{flex:0 0 auto;min-height:42px;padding:0 8px 0 0}.search-count{min-width:30px}.search-nav,.search-clear{min-width:34px;min-height:34px;font-size:14px}.grid-panel{grid-column:1;padding:12px 10px 48px;-webkit-overflow-scrolling:touch}.json-grid-container{font-size:11px}.json-grid-container th,.json-grid-container td{padding:6px 10px 6px 7px}.expander{min-height:34px;align-items:center}span.editable{min-height:24px;padding:3px 0}#schema-panel{top:0;width:100%;max-width:none;height:calc(100vh - 30px);height:calc(100dvh - 30px - env(safe-area-inset-bottom));border-left:0}.schema-panel-header{min-height:46px;padding:6px 8px}.schema-panel-header .btn-inline{min-height:34px;padding:6px 8px}#json-path-panel{height:calc(30px + env(safe-area-inset-bottom));padding:0 max(10px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-left));font-size:10px}#json-path-panel .btn-inline{min-height:28px}#app-toast{bottom:calc(38px + env(safe-area-inset-bottom));white-space:normal}.footer-bar{display:none}.export-menu button{min-height:44px;padding:10px 14px}body:has(#editor-dual:not(.hidden)) .app-layout{grid-template-rows:minmax(320px,56dvh) auto minmax(0,1fr)}}@media(max-width:600px){.app-layout{grid-template-rows:minmax(220px,38dvh) auto minmax(0,1fr)}}@media(max-width:900px)and (max-height:600px){.app-layout{grid-template-rows:minmax(150px,38dvh) auto minmax(0,1fr)}body:has(#editor-dual:not(.hidden)) .app-layout{grid-template-rows:minmax(210px,56dvh) auto minmax(0,1fr)}.toolbar-actions{padding-block:2px}.btn{min-height:36px;padding-block:6px}}