:root{--bg:#f5f7f6;--surface:#ffffff;--surface-elevated:#fafbfb;--text:#1a1c1b;--text-secondary:#5a6360;--muted:#8a9390;--border:#e1e6e3;--border-light:#eef1ef;--accent:#208663;--accent-light:#e9f5f0;--accent-lighter:#f0faf5;--accent-strong:#166b4d;--danger:#d32f2f;--danger-light:#fef2f2;--shadow-sm:0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.06);--shadow-lg:0 8px 24px rgba(0,0,0,0.08);--radius-sm:6px;--radius-md:8px;--radius-lg:12px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}*,*::before,*::after{box-sizing:border-box}body,html{height:100%;margin:0;background:var(--bg);color:var(--text);overflow:hidden;font-size:14px;line-height:1.5}.copyright-badge{position:fixed;top:8px;right:12px;z-index:100;font-size:11px;line-height:1;color:var(--muted);opacity:0.72;pointer-events:none}.app-container{display:grid;grid-template-columns:minmax(380px,40%) 1fr;height:100vh}.side-panel{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);box-shadow:var(--shadow-md);z-index:10}.panel-header{height:60px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--surface-elevated);backdrop-filter:blur(8px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.brand-icon img{width:100%;height:100%;object-fit:contain}.brand-text{display:flex;flex-direction:column;gap:2px}.brand h1.logo{font-size:18px;font-weight:800;margin:0;letter-spacing:0.5px;color:var(--text)}.subtitle{font-size:11px;color:var(--text-muted);white-space:nowrap}.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}.view-toggle{display:flex;background:var(--border-light);padding:2px;border-radius:var(--radius-sm);gap:2px}.view-toggle button{height:26px;padding:0 10px;border:0;background:transparent;font-size:11px;border-radius:4px;cursor:pointer;transition:all 0.15s;color:var(--text-secondary);font-weight:500}.view-toggle button:hover{color:var(--text)}.view-toggle button.active{background:var(--surface);box-shadow:var(--shadow-sm);font-weight:600;color:var(--text)}.eyebrow{font-size:9px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;display:inline-block;vertical-align:super;margin-left:6px;line-height:1}.editor-container{flex:1;min-height:0;position:relative;overflow:hidden}.code-editor{display:flex;position:absolute;inset:0;min-height:0;overflow:hidden}.code-editor.hidden{display:none}.json-highlight{position:absolute;inset:0 0 0 48px;margin:0;padding:16px 20px;overflow:hidden;white-space:pre;pointer-events:none;font-family:'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;font-size:13px;line-height:1.65;font-weight:400;font-style:normal;font-variant-ligatures:none;letter-spacing:0;color:var(--text);background:var(--surface);tab-size:2}.json-highlight code{display:block;min-width:max-content;transform:translate3d(0,0,0);transform-origin:0 0;font:inherit;color:inherit;white-space:inherit;tab-size:inherit}.json-highlight .json-key{color:#0f766e}.json-highlight .json-string{color:#be185d}.json-highlight .json-number{color:#1d4ed8}.json-highlight .json-boolean{color:#7c3aed}.json-highlight .json-null{color:#8a9390}.json-highlight .json-punctuation{color:#64748b}.json-highlight .json-colon{color:#94a3b8}.line-numbers{width:48px;padding:16px 8px 16px 0;text-align:right;font-family:'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;font-size:13px;line-height:1.65;color:var(--muted);opacity:0.5;user-select:none;overflow:hidden;contain:strict;flex-shrink:0;border-right:1px solid var(--border-light);background:var(--surface);pointer-events:none}.line-numbers .ln{display:block;height:1.65em}#jsonInput{position:relative;z-index:1;flex:1;min-width:0;height:100%;border:0;padding:16px 20px;resize:none;outline:none;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;font-family:'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;font-size:13px;line-height:1.65;font-weight:400;font-style:normal;font-variant-ligatures:none;letter-spacing:0;white-space:pre;overflow-wrap:normal;background:transparent;color:transparent;caret-color:var(--text);tab-size:2}#jsonInput::selection{background:rgba(32,134,99,0.18)}#jsonInput::placeholder{color:var(--muted);opacity:0.6}.json-tree{position:absolute;inset:0;width:100%;height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;padding:12px 16px;font-family:'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;font-size:13px;line-height:1.6;background:var(--surface);user-select:text}.json-tree-node{position:relative;padding-left:20px}.json-tree-node[data-depth="0"]{padding-left:4px}.tree-toggle{position:absolute;left:2px;top:2px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:10px;transition:transform 0.15s;user-select:none}.tree-toggle:hover{color:var(--accent)}.tree-toggle.collapsed{transform:rotate(-90deg)}.tree-key{color:#208663;font-weight:500;cursor:pointer;border-radius:3px;padding:1px 3px;transition:background 0.1s}.tree-key:hover{background:var(--accent-light)}.tree-separator{color:var(--muted);margin-right:2px}.tree-value{color:var(--text)}.tree-value.string{color:#d63384}.tree-value.number{color:#0d6efd}.tree-value.boolean{color:#6f42c1}.tree-value.null{color:var(--muted);font-style:italic}.tree-bracket{color:var(--text-secondary);font-weight:600}.tree-ellipsis{color:var(--muted);font-size:11px;cursor:pointer}.tree-ellipsis:hover{color:var(--accent);text-decoration:underline}.tree-children{overflow:hidden}.tree-children.collapsed{display:none}.editor-actions{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--surface-elevated);backdrop-filter:blur(8px)}.editor-footer{padding:8px 16px;border-top:1px solid var(--border);display:flex;align-items:center;background:var(--surface-elevated);backdrop-filter:blur(8px)}.global-status-bar{height:60px;padding:0 20px;background:var(--surface-elevated);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm)}.status-group{display:flex;align-items:center;gap:8px}.status-label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px}.status-divider{width:1px;height:16px;background:var(--border)}.editor-actions .spacer{flex:1}.status-indicator{font-size:11px;font-weight:500;color:var(--muted);margin-left:8px;padding:4px 8px;border-radius:100px;background:var(--border-light);transition:all 0.2s}.status-indicator.ok{color:var(--accent);background:var(--accent-light);font-weight:600}.status-indicator.error{color:var(--danger);background:var(--danger-light)}.main-panel{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.config-section{padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm)}.config-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,38%);gap:16px;align-items:stretch}.field{display:flex;flex-direction:column;gap:6px}.config-controls{display:grid;grid-template-columns:1fr;gap:12px;align-content:start}.mode-field,.options-field{min-width:0}label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px}.input-group{display:flex;gap:8px;min-width:0}input[type="text"]{height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;transition:all 0.15s;background:var(--surface);color:var(--text)}input[type="text"]:hover{border-color:#cdd3d0}input[type="text"]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(32,134,99,0.1)}#pathFilter{width:clamp(180px,30vw,260px);height:30px;font-size:12px;padding:0 10px}.segmented{display:grid;grid-template-columns:repeat(4,1fr);background:var(--border-light);padding:3px;border-radius:var(--radius-md);gap:2px;width:100%}.segmented button{border:0;background:transparent;padding:6px 12px;font-size:12px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s;color:var(--text-secondary);font-weight:500}.segmented button:hover{color:var(--text)}.segmented button.active{background:var(--surface);box-shadow:var(--shadow-sm);font-weight:600;color:var(--text)}.field-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:2px}.path-list-container{min-height:92px;max-height:128px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 10px 4px;background:var(--surface-elevated);transition:border-color 0.15s;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}.path-list-container:hover{border-color:#cdd3d0}.empty-hint{display:block;width:100%;text-align:center;color:var(--muted);font-size:12px;padding:20px 0}.path-pill{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--border);border-radius:100px;font-size:12px;font-family:'SF Mono','Consolas',monospace;background:var(--surface);cursor:pointer;transition:all 0.12s;color:var(--text-secondary);user-select:none}.path-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lighter)}.path-pill.selected{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:500}.path-selector-field{min-width:0}.options-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:8px}.check-pill{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;padding:5px 10px;border:1px solid var(--border);border-radius:100px;background:var(--surface);transition:all 0.12s;color:var(--text-secondary);justify-content:center;min-width:0;white-space:nowrap}.check-pill:hover{border-color:var(--accent);color:var(--accent)}.check-pill input{margin:0;cursor:pointer}.flex-spacer{flex:1}.output-stats{font-size:12px;color:var(--accent);font-weight:600;padding:4px 10px;background:var(--accent-light);border-radius:100px}.output-section{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.section-header{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:var(--surface-elevated);backdrop-filter:blur(8px)}.section-header h2{font-size:13px;margin:0;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.output-actions{display:flex;gap:8px}.output-viewer{flex:1;min-height:0;position:relative;overflow:hidden}#jsonOutput{width:100%;height:100%;border:0;padding:16px 20px;resize:none;outline:none;font-family:'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;font-size:12px;line-height:1.65;background:var(--surface-elevated);color:var(--text);tab-size:2}#jsonOutput::placeholder{color:var(--muted);opacity:0.6}.table-wrap{width:100%;height:100%;overflow:auto;background:var(--surface);display:flex;flex-direction:column}.table-hint{padding:10px 14px;font-size:12px;color:var(--text-secondary);background:var(--accent-lighter);border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}.download-hint-btn{height:26px;padding:0 12px;font-size:11px;background:var(--accent);color:#fff;border:0;border-radius:var(--radius-sm);cursor:pointer;font-weight:600}.download-hint-btn:hover{background:var(--accent-strong)}table{width:100%;border-collapse:collapse;font-size:12px}thead{position:sticky;top:0;z-index:10}th{background:var(--surface-elevated);border-bottom:2px solid var(--border);text-align:left;padding:10px 14px;font-weight:600;color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}td{padding:8px 14px;border-bottom:1px solid var(--border-light);font-family:'SF Mono','Consolas',monospace;font-size:12px;color:var(--text);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr:hover td{background:var(--accent-lighter)}tr:last-child td{border-bottom:none}button{height:32px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;font-size:12px;font-weight:500;transition:all 0.15s;color:var(--text-secondary);white-space:nowrap}button:hover{background:var(--surface-elevated);border-color:#cdd3d0;color:var(--text)}button:active{transform:scale(0.98)}button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}button.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}.hidden{display:none !important}@media (max-width:1000px){.app-container{grid-template-columns:1fr;grid-template-rows:45vh 1fr}.side-panel{border-right:0;border-bottom:1px solid var(--border)}.config-row{grid-template-columns:1fr;align-items:stretch}.mode-field,.options-field{min-width:0;width:100%}.segmented,.options-row{width:100%}.segmented{display:grid;grid-template-columns:repeat(4,1fr)}.options-row{grid-template-columns:repeat(3,minmax(0,max-content))}}