.app{height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--border-soft);background:var(--panel-alt);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px}.brand-mark{font-family:var(--font-mono);font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-dim);border-radius:6px;padding:2px 7px;font-size:14px}.brand-name{font-weight:600;font-size:15px;letter-spacing:-.01em}.page-nav{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:3px}.nav-btn{font-family:var(--font-ui);font-size:12.5px;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-radius:6px;padding:6px 14px;cursor:pointer;transition:background .15s ease,color .15s ease}.nav-btn:hover{color:var(--text)}.nav-btn.active{background:var(--accent-soft);color:var(--accent)}.theme-toggle{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:3px;margin-left:12px}.theme-btn{font-family:var(--font-ui);font-size:12px;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;transition:background .15s ease,color .15s ease}.theme-btn:hover{color:var(--text)}.theme-btn.active{background:var(--accent-soft);color:var(--accent)}.page-statusbar{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border-soft);background:var(--panel-alt);flex:0 0 auto;flex-wrap:wrap}.hint-text{font-size:12.5px;color:var(--text-muted)}.status-pill{font-family:var(--font-mono);font-size:12.5px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted);background:var(--panel)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim)}.status-empty .status-dot{background:var(--text-dim)}.status-valid{color:var(--green);border-color:#7ee78747}.status-valid .status-dot{background:var(--green);box-shadow:0 0 8px #7ee78799}.status-invalid{color:var(--red);border-color:#ff6b6b47}.status-invalid .status-dot{background:var(--red);box-shadow:0 0 8px #ff6b6b80}.panes{flex:1;display:grid;grid-template-columns:minmax(320px,.85fr) minmax(400px,1.15fr);min-height:0}.pane{display:flex;flex-direction:column;min-height:0;min-width:0}.pane-left{border-right:1px solid var(--border-soft);background:var(--bg)}.pane-right{background:var(--panel-alt)}.pane-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}.pane-header h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar-divider{width:1px;align-self:stretch;background:var(--border-soft);margin:0 2px}.btn{font-family:var(--font-ui);font-size:12.5px;font-weight:500;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 11px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.btn:hover:not(:disabled){border-color:var(--text-dim);background:#161b26}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{background:transparent}.btn-accent{color:#1a1206;background:var(--accent);border-color:var(--accent);font-weight:600}.btn-accent:hover:not(:disabled){background:#ffc370;border-color:#ffc370}.btn-active{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-soft)}.btn-sample{margin-left:auto}.input-area{flex:1;resize:none;border:none;outline:none;background:transparent;color:var(--text);font-family:var(--font-mono);font-size:13.5px;line-height:1.65;padding:16px;min-height:0}.input-area::placeholder{color:var(--text-dim);font-family:var(--font-ui);font-size:13px;line-height:1.6}.pane-footer{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--border-soft);font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim)}.output-area{flex:1;min-height:0;overflow:auto}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-dim)}.empty-glyph{font-family:var(--font-mono);font-size:34px;color:var(--border)}.empty-state p{font-size:13px;margin:0}.error-state{display:flex;flex-direction:column;height:100%;min-height:0}.error-banner{display:flex;align-items:baseline;gap:10px;padding:10px 16px;background:#ff6b6b14;border-bottom:1px solid rgba(255,107,107,.22);font-family:var(--font-mono);font-size:12.5px;color:#ffb3b3}.error-label{font-weight:700;color:var(--red);flex-shrink:0}.code-block{display:flex;min-height:100%;font-family:var(--font-mono);font-size:13px;line-height:1.65}.gutter{flex-shrink:0;text-align:right;padding:16px 12px 16px 16px;color:var(--text-dim);-webkit-user-select:none;user-select:none;background:var(--panel);border-right:1px solid var(--border-soft)}.gutter-line.err{color:var(--red)}.code{flex:1;padding:16px;white-space:pre;overflow-x:auto;color:var(--text)}.code-line.err{background:#ff6b6b1a;margin:0 -16px;padding:0 16px}.json-tree{font-family:var(--font-mono);font-size:13px;line-height:1.75;padding:12px 16px 24px}.tree-row{display:flex;align-items:baseline;white-space:pre}.row-toggle{flex-shrink:0;width:16px;height:16px;margin-right:4px;padding:0;border:none;background:transparent;color:var(--text-dim);font-size:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transform:translateY(-1px)}.row-toggle:hover{color:var(--accent);background:var(--accent-soft)}.row-spacer{flex-shrink:0;width:20px}.row-count{color:var(--text-dim);font-style:italic;padding:0 2px}.row-path{color:var(--text-dim);padding:0 6px 0 2px;border-right:1px solid var(--border-soft);margin-right:6px}.punct{color:var(--text-muted)}.tok-key{color:var(--blue)}.tok-string{color:var(--green)}.tok-number{color:var(--purple)}.tok-bool{color:var(--accent)}.tok-null{color:var(--text-dim)}@media (max-width: 860px){.panes{grid-template-columns:1fr;grid-template-rows:1fr 1fr;overflow-y:auto}.pane-left{border-right:none;border-bottom:1px solid var(--border-soft)}.pane{min-height:320px}.topbar{padding:12px 14px}.compare-inputs{grid-template-columns:1fr;flex-basis:auto}.search-results-columns{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.search-result-col:first-child{border-right:none;border-bottom:1px solid var(--border-soft)}}.diff-stats{display:flex;gap:8px;flex-wrap:wrap}.diff-badge{font-family:var(--font-mono);font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted);background:var(--panel)}.diff-badge-removed{color:var(--red);border-color:#ff6b6b47}.diff-badge-added{color:var(--green);border-color:#7ee78747}.diff-badge-changed{color:var(--accent);border-color:var(--accent-dim)}.compare-inputs{flex:0 0 210px;display:grid;grid-template-columns:1fr 1fr;min-height:0;border-bottom:1px solid var(--border-soft)}.compare-inputs .pane:first-child{border-right:1px solid var(--border-soft)}.cmp-input{font-size:12.5px}.compare-output{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--panel-alt)}.cmp-columns-header{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border-soft);flex:0 0 auto}.cmp-columns-header div{padding:7px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.cmp-columns-header div:first-child{border-right:1px solid var(--border-soft)}.cmp-tree{font-family:var(--font-mono);font-size:13px;line-height:1.75;padding-bottom:24px}.cmp-row{display:grid;grid-template-columns:1fr 1fr}.cmp-cell{min-width:0;overflow-x:auto;white-space:pre}.cmp-cell:first-child{border-right:1px solid var(--border-soft)}.cmp-blank{display:inline-block;padding-left:8px;color:var(--text-dim);opacity:.5}.cmp-row.cmp-left-only{background:#ff6b6b12}.cmp-row.cmp-right-only{background:#7ee78712}.cmp-row.cmp-changed{background:#ffb45414}.path-hierarchy-block{font-family:var(--font-mono);font-size:13px;line-height:1.65;padding:16px;white-space:pre}.hierarchy-line{color:var(--text)}.hierarchy-line.collapsed{color:var(--accent);font-style:italic}.search-results-pane{display:flex;flex-direction:column;min-height:0}.search-box{padding:12px 16px;border-bottom:1px solid var(--border-soft);flex:0 0 auto}.search-input{width:100%;font-family:var(--font-mono);font-size:13px;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px 12px;outline:none}.search-input:focus{border-color:var(--accent-dim)}.search-input:disabled{opacity:.5}.search-results-columns{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr}.search-result-col{display:flex;flex-direction:column;min-height:0}.search-result-col:first-child{border-right:1px solid var(--border-soft)}.search-result-col h3{flex:0 0 auto;margin:0;padding:10px 14px 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.search-result-list{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px;display:flex;flex-direction:column;gap:2px}.search-empty{color:var(--text-dim);font-size:12.5px;padding:6px;margin:0}.search-result-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 8px;cursor:pointer;font-family:var(--font-mono)}.search-result-item:hover{background:var(--panel);border-color:var(--border)}.search-result-item.active{background:var(--accent-soft);border-color:var(--accent-dim)}.search-result-path{font-size:10.5px;color:var(--text-dim)}.search-result-preview{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.search-mark{background:var(--accent-soft);color:var(--accent);border-radius:2px;padding:0 1px}:root{--bg: #0b0e14;--panel: #10141d;--panel-alt: #0d1017;--border: #232838;--border-soft: #1a1f2c;--text: #e6e9f0;--text-muted: #7c8496;--text-dim: #4b5266;--accent: #ffb454;--accent-dim: #b98342;--accent-soft: rgba(255, 180, 84, .12);--blue: #6cb6ff;--green: #7ee787;--red: #ff6b6b;--purple: #c9a8ff;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace}:root[data-theme=light]{--bg: #f6f7fa;--panel: #ffffff;--panel-alt: #eef0f4;--border: #dde1e8;--border-soft: #e7eaef;--text: #1c2130;--text-muted: #5b6472;--text-dim: #97a0b0;--accent: #b45309;--accent-dim: #d98a35;--accent-soft: rgba(180, 83, 9, .1);--blue: #1d6fd8;--green: #1f8a4c;--red: #d1403a;--purple: #7c3aed}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;transition:background-color .15s ease,color .15s ease}::selection{background:var(--accent-soft);color:var(--accent)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}button{font-family:var(--font-ui)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}