body{min-width:320px;min-height:100vh;margin:0}#root{flex-direction:column;min-height:100vh;display:flex}*{box-sizing:border-box;margin:0;padding:0}.app.light{--bg:#eef1f5;--panel:#fbfcfd;--panel-2:#f1f4f8;--line:#d3dae4;--line-strong:#b3bfcf;--ink:#131a24;--muted:#566377;--accent:#a86600;--accent-ink:#fff;--accent-soft:#fbe9c8;--good:#137a4f;--warn:#a86600;--bad:#c0303c;--key:#1f5fbf;--string:#1b7a3d;--number:#8a3fc0;--boolean:#0b6fa8;--null:#c0303c;--bracket:#566377}.app.dark{--bg:#0f141b;--panel:#141b24;--panel-2:#19222d;--line:#263241;--line-strong:#394a5f;--ink:#e4eaf2;--muted:#8d9bb0;--accent:#f2b233;--accent-ink:#1b1300;--accent-soft:#3a2c0c;--good:#52d19b;--warn:#f2b233;--bad:#ff8590;--key:#8ab4f8;--string:#a5d6a7;--number:#d7a5ff;--boolean:#7fd1ff;--null:#ff9e9e;--bracket:#8d9bb0}.app{--sans:"Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;background:var(--bg);height:100vh;min-height:560px;color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;flex-direction:column;display:flex}.app button,.app input,.app textarea{font:inherit;color:inherit}.app :focus-visible{outline:2px solid var(--accent);outline-offset:2px}.header{background:var(--panel);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:10px 20px;display:flex}.logo{align-items:center;gap:10px;display:flex}.logo-icon{background:var(--accent);width:30px;height:30px;color:var(--accent-ink);font:700 15px var(--mono);border-radius:7px;place-items:center;display:grid}.logo h1{letter-spacing:-.01em;font-size:16px;font-weight:700}.tab-nav{background:var(--bg);border:1px solid var(--line);border-radius:8px;gap:4px;padding:3px;display:flex}.tab-btn{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:6px;min-height:32px;padding:6px 14px;font-weight:600}.tab-btn:hover{color:var(--ink)}.tab-btn.active{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}.header-actions{align-items:center;gap:8px;display:flex}.lang{border:1px solid var(--line-strong);background:var(--panel);border-radius:6px;display:flex;overflow:hidden}.lang button{cursor:pointer;font:600 12px var(--mono);color:var(--muted);letter-spacing:.04em;background:0 0;border:0;padding:6px 11px}.lang button:hover{color:var(--ink)}.lang button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.btn{border:1px solid var(--line-strong);cursor:pointer;background:var(--panel);color:var(--ink);border-radius:6px;min-height:34px;padding:7px 14px;font-weight:600}.btn:hover{border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-primary:hover{filter:brightness(1.08)}.btn-danger:hover{border-color:var(--bad);color:var(--bad)}.btn-theme{min-width:64px}.main-content{flex:1;gap:12px;min-height:0;padding:12px 20px;display:flex}.panel,.compare-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.panel-header{background:var(--panel-2);border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;gap:10px;height:46px;padding:0 14px;display:flex}.panel-header h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:700}.view-toggle{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px;display:flex}.toggle-btn{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:4px;padding:3px 12px;font-size:13px;font-weight:600}.toggle-btn:hover:not(.active){color:var(--ink)}.toggle-btn.active{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}.status{align-items:center;gap:6px;font-size:12.5px;font-weight:650;display:inline-flex}.status:before{content:"";background:currentColor;border-radius:50%;width:8px;height:8px}.status.valid{color:var(--good)}.status.invalid{color:var(--bad)}.editor-container{background:var(--panel);flex:1;min-height:0;overflow:auto}.editor-loading{color:var(--muted);padding:16px}.tree-view{font:13.5px/1.65 var(--mono);color:var(--ink);white-space:pre-wrap;word-break:break-word;padding:14px 16px}.tree-placeholder{color:var(--muted)}.tree-error{color:var(--bad);font-weight:600}.json-key{color:var(--key)}.json-string{color:var(--string)}.json-number{color:var(--number)}.json-boolean{color:var(--boolean)}.json-null{color:var(--null)}.json-bracket{color:var(--bracket)}.error-message{background:color-mix(in srgb, var(--bad) 12%, transparent);border-bottom:1px solid var(--bad);color:var(--bad);padding:10px 14px;font-size:13px}.error-location{font:12px var(--mono);opacity:.9}.toolbar{background:var(--panel);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 20px;display:flex}.toolbar-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn-options-inline,.btn-options-toggle{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:6px;padding:6px 8px;font-weight:600}.btn-options-inline:hover,.btn-options-toggle:hover,.btn-options-inline.active,.btn-options-toggle.active{color:var(--accent)}.btn-options-inline:before,.btn-options-toggle:before{content:"▾ "}.btn-options-inline.active:before,.btn-options-toggle.active:before{content:"▴ "}.options-drawer{background:var(--panel-2);border-top:1px solid var(--line);padding:12px 20px 14px}.options-section-title{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-size:12px;font-weight:700}.options-row{flex-wrap:wrap;align-items:center;gap:10px 24px;display:flex}.options-field{align-items:center;gap:10px;display:flex}.options-label{color:var(--muted);font-size:13px;font-weight:600}.options-toggle{cursor:pointer;align-items:center;gap:8px;font-size:13.5px;display:inline-flex}.options-toggle input,.options-radio input{accent-color:var(--accent);width:16px;height:16px}.options-toggle--disabled{opacity:.5;cursor:not-allowed}.options-hint{color:var(--muted);font-size:12px}.options-radio-group{gap:14px;display:flex}.options-radio{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.compare-container{flex-direction:column;flex:1;min-height:0;display:flex}.compare-header{background:var(--panel);border-bottom:1px solid var(--line);gap:10px;padding:10px 20px;display:grid}.compare-header-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.diff-count{color:var(--warn);font-weight:650}.diff-no-change{color:var(--good);font-weight:650}.diff-error{color:var(--bad);flex-direction:column;gap:4px;font-weight:600;display:flex}.compare-editors{flex:1;gap:12px;min-height:0;padding:12px 20px;display:flex}.diff-nav-bar{align-items:center;gap:10px;display:flex}.diff-nav-index{font:13px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;min-width:48px}.btn-nav{border:1px solid var(--line-strong);background:var(--panel);cursor:pointer;border-radius:6px;padding:5px 12px;font-weight:600}.btn-nav:hover:not(:disabled){border-color:var(--accent)}.btn-nav:disabled{opacity:.4;cursor:not-allowed}.compare-options-panel{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;gap:10px;padding:12px;display:grid}.options-grid{flex-wrap:wrap;gap:8px 24px;display:flex}.compare-options-panel .options-field{flex-direction:column;align-items:stretch;gap:6px}.options-textarea{resize:vertical;border:1px solid var(--line-strong);background:var(--panel);width:100%;font:13px var(--mono);border-radius:6px;padding:8px 10px}.options-textarea:focus{border-color:var(--accent);outline:none}.diff-added{background-color:#34be8c3d!important}.diff-removed{background-color:#e646553d!important}.diff-changed{background-color:#f2b23342!important}.diff-line-active.diff-added{background-color:#34be8c80!important}.diff-line-active.diff-removed{background-color:#e6465580!important}.diff-line-active.diff-changed{background-color:#f2b2338c!important}.diff-glyph-added,.diff-glyph-removed,.diff-glyph-changed,.diff-glyph-type{margin-left:3px;width:6px!important}.diff-glyph-added{background-color:var(--good)}.diff-glyph-removed{background-color:var(--bad)}.diff-glyph-changed,.diff-glyph-type{background-color:var(--warn)}.diff-glyph-active.diff-glyph-added{background-color:#6ee7d4!important}.diff-glyph-active.diff-glyph-removed{background-color:#ff8a8a!important}.diff-glyph-active.diff-glyph-changed,.diff-glyph-active.diff-glyph-type{background-color:#f5d76e!important}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--line-strong,#8886);border-radius:5px}@media (width<=768px){.app{height:auto;min-height:100vh}.header{flex-wrap:wrap;padding:10px 14px}.tab-nav{order:3;width:100%}.tab-btn{flex:1}.main-content,.compare-editors{flex-direction:column;padding:10px 14px}.panel,.compare-panel{min-height:320px}.toolbar{padding:10px 14px}.toolbar-group{width:100%}.options-drawer,.compare-header{padding-left:14px;padding-right:14px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}