*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh;font-family:Public Sans,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,微软雅黑,Noto Sans SC,Noto Sans CJK SC,Helvetica Neue,Arial,sans-serif}:root{--bg:#f4f5f9;--surface:#fff;--surface-soft:#f8f8fb;--border:#e5e6ec;--border-strong:#d7d8e0;--text:#20262b;--muted:#68737b;--subtle:#98a1a8;--purple:#405866;--purple-dark:#314650;--purple-soft:#e9eef1;--green:#27745d;--green-soft:#e9f3ef;--red:#b84a58;--red-soft:#f8ecee;--code-bg:#fafbfb;--shadow:0 12px 34px #1f2b3212;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Microsoft YaHei", monospace}.app-shell.is-dark{--bg:#111217;--surface:#191a21;--surface-soft:#202129;--border:#2b2d37;--border-strong:#3a3c48;--text:#e7ecef;--muted:#9da9b0;--subtle:#66747c;--purple:#87a0ae;--purple-dark:#9bb0bc;--purple-soft:#26343b;--green:#66b89b;--green-soft:#1d332d;--red:#e17580;--red-soft:#382328;--code-bg:#14191c;--shadow:0 16px 44px #00000042}.app-shell{min-height:100vh;color:var(--text);background:var(--bg);transition:background .18s,color .18s}button,select,textarea{font:inherit}button{color:inherit}.topbar{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;height:54px;padding:0 clamp(18px,3vw,44px);display:flex}.brand,.header-actions,.toolbar,.toolbar-group,.panel-title,.output-controls,.status-summary,.stats{align-items:center;display:flex}.brand h1{letter-spacing:-.01em;margin:0;font-size:15px;font-weight:700;line-height:1.2}.header-actions{gap:9px}.shortcut-hint{color:var(--subtle);font-family:var(--mono);margin-right:8px;font-size:11px}.mode-button,.language-button,.compact-action{border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}.mode-button:hover,.language-button:hover,.compact-action:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-soft)}.mode-button:focus,.language-button:focus,.compact-action:focus{outline:none}.mode-button:focus-visible,.language-button:focus-visible,.compact-action:focus-visible{border-color:var(--purple);box-shadow:0 0 0 2px color-mix(in srgb, var(--purple) 14%, transparent)}.mode-button,.language-button{height:30px;color:var(--muted);border-radius:6px;padding:0 11px;font-size:11px;font-weight:650}.workspace{width:min(1760px,100% - clamp(16px,2.5vw,40px));margin:clamp(10px,1.4vw,20px) auto}.toolbar{border:1px solid var(--border);background:var(--surface);min-height:48px;box-shadow:var(--shadow);border-bottom:0;border-radius:10px 10px 0 0;gap:8px;padding:6px 9px}.toolbar-group{gap:5px}.toolbar-divider{background:var(--border);width:1px;height:26px;margin:0 3px}.tool-button{height:32px;color:var(--muted);white-space:nowrap;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;padding:0 11px;font-size:11px;font-weight:600;transition:all .14s;display:inline-flex}.tool-button:hover:not(:disabled){color:var(--text);background:var(--surface-soft);border-color:var(--border)}.tool-button.primary{color:#fff;background:var(--purple);border-color:var(--purple);padding-inline:16px}.tool-button.primary:hover:not(:disabled){color:#fff;background:var(--purple-dark);border-color:var(--purple-dark)}.tool-button.active{color:var(--purple);background:var(--purple-soft)}.tool-button.danger:hover:not(:disabled){color:var(--red);background:var(--red-soft);border-color:#0000}.tool-button:disabled,.compact-action:disabled{opacity:.38;cursor:not-allowed}.file-input{display:none}.validation-badge{color:var(--muted);background:var(--surface-soft);white-space:nowrap;border-radius:99px;align-items:center;gap:7px;margin-left:auto;padding:7px 11px;font-size:11px;font-weight:650;display:inline-flex}.validation-badge.valid{color:var(--green);background:var(--green-soft)}.validation-badge.invalid{color:var(--red);background:var(--red-soft)}.status-dot{width:6px;height:6px;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);background:currentColor;border-radius:50%}.editor-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 176px);display:grid}.panel{background:var(--surface);border:1px solid var(--border);flex-direction:column;min-width:0;display:flex}.input-panel{border-right:0}.panel-header{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;min-height:42px;padding:0 14px;display:flex}.panel-title{gap:8px;font-size:12px;font-weight:700}.panel-index{color:var(--purple);font-family:var(--mono);letter-spacing:.04em;font-size:10px}.panel-meta{color:var(--subtle);font-family:var(--mono);font-size:10px}.code-editor{background:var(--code-bg);flex:1;min-height:380px;display:flex;overflow:hidden}.line-numbers{width:52px;color:var(--subtle);border-right:1px solid var(--border);background:var(--surface-soft);font:12px/22.75px var(--mono);text-align:right;-webkit-user-select:none;user-select:none;flex:0 0 52px;padding:18px 12px 18px 0;overflow:hidden}.line-numbers span{height:22.75px;display:block}.code-editor textarea{resize:none;width:100%;min-height:100%;color:var(--text);caret-color:var(--purple);font:13px/1.75 var(--mono);tab-size:2;background:0 0;border:0;outline:none;padding:18px 20px}.code-editor textarea::placeholder{color:var(--subtle)}.output-header{gap:12px}.output-controls{gap:8px}.segment-control{background:var(--surface-soft);border:1px solid var(--border);border-radius:6px;padding:2px;display:flex}.segment-control button{height:25px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:4px;align-items:center;padding:0 9px;font-size:10px;font-weight:650;display:flex}.segment-control button.active{color:var(--text);background:var(--surface);box-shadow:0 2px 7px #1e1f2514}.indent-control{color:var(--subtle);align-items:center;gap:5px;font-size:10px;display:flex}.indent-control select{height:28px;color:var(--text);border:1px solid var(--border);background:var(--surface);border-radius:7px;outline:none}.compact-action{height:29px;color:var(--muted);white-space:nowrap;border-radius:6px;padding:0 9px;font-size:10px;font-weight:600}.compact-action.success{color:var(--green);border-color:color-mix(in srgb, var(--green) 32%, var(--border));background:var(--green-soft)}.output-content{background:var(--code-bg);flex:1;min-height:0;position:relative;overflow:hidden}.output-code-editor{height:100%;min-height:380px;display:flex;overflow:hidden}.output-line-numbers{width:52px;color:var(--subtle);border-right:1px solid var(--border);background:var(--surface-soft);font:12px/22.75px var(--mono);text-align:right;-webkit-user-select:none;user-select:none;flex:0 0 52px;padding:18px 12px 18px 0;overflow:hidden}.output-line-numbers span{height:22.75px;display:block}.code-output{min-width:0;height:100%;color:var(--text);font:13px/1.75 var(--mono);white-space:pre;tab-size:2;background:0 0;flex:1;margin:0;padding:18px 20px;overflow:auto}.tree-view{height:100%;color:var(--text);font:12.5px/1.6 var(--mono);background:0 0;padding:13px 12px 24px;overflow:auto}.custom-json-tree{min-width:max-content}.json-tree-node{position:relative}.json-tree-row{min-height:29px;padding:3px 12px 3px calc(8px + var(--depth) * 20px);white-space:nowrap;align-items:center;gap:0;display:flex}.json-tree-row.branch{width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;outline:0}.json-tree-row.branch:hover{background:var(--purple-soft)}.json-tree-row.branch:focus-visible{box-shadow:inset 0 0 0 1px var(--purple)}.tree-chevron,.tree-spacer{flex:0 0 18px;justify-content:center;align-items:center;width:18px;display:inline-flex}.tree-chevron{color:var(--purple);font-size:9px}.json-tree-children{position:relative}.json-tree-children:before{content:"";z-index:0;top:0;bottom:16px;left:calc(17px + var(--guide-depth) * 20px);background:var(--border);pointer-events:none;width:1px;position:absolute}.json-key{color:#365f78;font-weight:600}.is-dark .json-key{color:#83afc7}.json-index{min-width:16px;color:var(--subtle);text-align:right;font-size:10px}.json-colon{color:var(--subtle);margin-right:7px}.json-bracket,.json-comma{color:var(--muted)}.json-value.string{color:#168563}.is-dark .json-value.string{color:#65d9ad}.json-value.number{color:#cc6b20}.is-dark .json-value.number{color:#ffad66}.json-value.boolean{color:#cf4168;font-weight:600}.is-dark .json-value.boolean{color:#ff7897}.json-value.null{color:var(--subtle);font-style:italic}.json-preview{color:var(--muted);border:1px solid var(--border);background:var(--surface);border-radius:99px;margin:0 7px;padding:1px 7px;font-family:inherit;font-size:9px}.empty-state,.error-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;min-height:380px;padding:40px;display:flex}.empty-glyph{color:var(--border-strong);font:700 40px var(--mono)}.empty-state p{color:var(--subtle);font-size:12px}.error-symbol{width:42px;height:42px;color:var(--red);background:var(--red-soft);border:1px solid color-mix(in srgb, var(--red) 25%, transparent);font:700 20px var(--mono);border-radius:50%;place-items:center;margin-bottom:12px;display:grid}.error-state h2{margin:0 0 12px;font-size:15px}.error-detail{max-width:540px;color:var(--red);background:var(--red-soft);font:11px/1.6 var(--mono);word-break:break-word;border-radius:8px;margin:0;padding:10px 13px}.error-location{color:var(--red);font:11px var(--mono);margin-top:9px}.error-hint{max-width:440px;color:var(--muted);margin:14px 0 0;font-size:11px;line-height:1.7}.statusbar{border:1px solid var(--border);min-height:34px;color:var(--muted);background:var(--surface);box-shadow:var(--shadow);border-top:0;border-radius:0 0 10px 10px;justify-content:space-between;align-items:center;padding:0 14px;font-size:10px;display:flex}.status-summary{color:var(--muted);gap:7px;font-weight:650}.status-summary.valid{color:var(--green)}.status-summary.invalid{color:var(--red)}.stats{gap:18px}.stats b{color:var(--text);font-family:var(--mono);font-weight:650}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);background-clip:content-box;border:3px solid #0000;border-radius:10px}@media (width<=1040px){.toolbar{flex-wrap:wrap}.validation-badge{margin-left:0}.toolbar-group:last-of-type{flex:1}.shortcut-hint{display:none}}@media (width<=760px){.topbar{height:50px;padding-inline:14px}.workspace{width:calc(100% - 14px);margin:7px auto}.toolbar{border-radius:12px 12px 0 0;padding:8px}.toolbar-divider{display:none}.toolbar-group{width:100%;overflow-x:auto}.validation-badge{position:absolute;top:61px;right:12px}.tool-button{padding-inline:10px}.editor-grid{grid-template-columns:1fr;min-height:0}.input-panel{border-right:1px solid var(--border);border-bottom:0}.code-editor,.empty-state,.error-state,.output-content{min-height:320px}.panel-header{padding-inline:12px}.panel-meta,.indent-control{display:none}.statusbar{flex-wrap:wrap;gap:10px;padding:10px 12px}.stats{flex-wrap:wrap;gap:11px}}@media (width<=430px){.brand h1{font-size:14px}.language-button,.mode-button{padding-inline:8px}.output-header{align-items:flex-start;padding-block:10px}.output-controls{gap:4px}.segment-control button{padding-inline:7px}}