.json-workbench-page{max-width:1380px}.json-title{padding-bottom:18px}.tool-edition{display:inline-flex;margin-bottom:8px;padding:5px 8px;border-radius:6px;background:#edf0fa;color:#485fa3;font-size:8px;font-weight:900;letter-spacing:.12em}.json-studio{overflow:hidden;border:1px solid #d9e1de;border-radius:18px;background:#fff;box-shadow:0 22px 65px rgba(19,48,39,.1)}.studio-topbar{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fbfcfc}.studio-brand{display:flex;align-items:center;gap:10px}.studio-brand>i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#edf0fa;color:#485fa3;font:800 12px Consolas}.studio-brand>div{display:flex;flex-direction:column;gap:2px}.studio-brand b{font-size:12px}.studio-brand span{color:var(--muted);font-size:9px}.studio-file-actions{display:flex;align-items:center;gap:6px}.studio-file-actions button,.file-action{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#52615b;font-size:9px;cursor:pointer}.studio-file-actions button:hover,.file-action:hover{border-color:#b6c6c0}.studio-file-actions .accent{border-color:var(--green);background:var(--green);color:#fff}.studio-file-actions em{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:3px;border-radius:5px;background:var(--surface-2);font-size:8px;font-style:normal}.studio-actions{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border-bottom:1px solid var(--line);background:#f7f9f8}.action-group{display:flex;align-items:center;gap:5px}.action-group+ .action-group{padding-left:12px;border-left:1px solid var(--line)}.studio-actions button{padding:7px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:#52615b;font-size:9px;cursor:pointer}.studio-actions button:hover{background:#fff}.primary-actions button.active{background:var(--green);color:#fff}.studio-actions kbd{margin-left:5px;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.13);color:inherit}.action-group label{display:flex;align-items:center;gap:5px;color:#68736f;font-size:9px}.action-group select{padding:6px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#4f5c57;font-size:9px}.check-option input{accent-color:var(--green)}.utility-actions{margin-left:auto}.studio-workspace{display:grid;grid-template-columns:1fr 1fr;min-height:560px}.editor-pane{display:flex;min-width:0;flex-direction:column}.editor-pane+ .editor-pane{border-left:1px solid var(--line)}.editor-pane>header{display:flex;min-height:47px;align-items:center;justify-content:space-between;padding:7px 13px;border-bottom:1px solid var(--line);background:#fff}.editor-pane>header>div:first-child{display:flex;align-items:center;gap:7px}.editor-pane>header b{font-size:10px}.editor-pane>header span,.editor-pane>header small{color:#86908c;font-size:8px}.code-editor{position:relative;display:grid;grid-template-columns:43px minmax(0,1fr);flex:1;min-height:500px;overflow:hidden;background:#fcfdfd}.code-editor.dragging{outline:3px solid rgba(20,92,73,.25);outline-offset:-3px}.line-numbers{height:100%;margin:0;padding:16px 10px;overflow:hidden;border-right:1px solid #edf0ee;background:#f6f8f7;color:#a0aaa6;text-align:right;white-space:pre;font:11px/1.7 Consolas,monospace;user-select:none}.code-editor textarea{width:100%;height:100%;min-height:500px;padding:16px;border:0;outline:0;background:transparent;resize:none;color:#25322d;font:12px/1.7 Consolas,"Microsoft YaHei",monospace;tab-size:2;white-space:pre}.output-tabs{display:flex!important;gap:3px!important}.output-tabs button{padding:6px 9px;border:0;border-radius:6px;background:transparent;color:#75807c;font-size:9px;cursor:pointer}.output-tabs button.active{background:#e9f2ee;color:var(--green);font-weight:800}.tree-actions{display:flex;align-items:center;gap:4px}.tree-actions input{width:130px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:8px}.tree-actions button{padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--green);font-size:8px}.output-view{flex:1;min-height:500px}.output-view[hidden]{display:none!important}.json-tree{height:500px;padding:12px;overflow:auto;background:#fcfdfd;font:10px/1.65 Consolas,"Microsoft YaHei",monospace}.tree-node{position:relative;margin-left:14px}.tree-node[hidden]{display:none}.tree-node>summary{display:flex;align-items:center;gap:7px;min-height:28px;padding:3px 5px;border-radius:6px;cursor:pointer;list-style-position:outside}.tree-node>summary:hover,.leaf-row:hover{background:#eef5f2}.tree-key{color:#6b3fa0;font-weight:700}.tree-value.string{color:#a04436}.tree-value.number{color:#2466a2}.tree-value.boolean{color:#93630c}.tree-value.null{color:#858d89}.type-badge{padding:2px 5px;border-radius:5px;background:#edf0ee;color:#77817d!important;font-size:7px!important;text-transform:uppercase}.tree-node code{margin-left:auto;color:#a1aaa7;font-size:7px}.leaf-row{display:flex;align-items:center;gap:7px;min-height:28px;padding:3px 5px;border-radius:6px}.node-actions{display:flex;gap:3px;margin-left:5px;opacity:0}.tree-node>summary:hover .node-actions,.leaf-row:hover .node-actions{opacity:1}.node-actions button{padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--green);font-size:7px;cursor:pointer}.tree-empty{display:grid;height:100%;place-items:center;color:var(--muted)}.query-panel,.diff-panel{height:500px;padding:17px;overflow:auto;background:#fcfdfd}.query-box{display:flex;align-items:end;gap:8px}.query-box label{display:flex;flex:1;flex-direction:column;gap:6px;color:var(--muted);font-size:9px}.query-box input{padding:10px;border:1px solid var(--line);border-radius:8px;font:11px Consolas}.query-box button,.diff-toolbar button{padding:10px 13px;border:0;border-radius:8px;background:var(--green);color:#fff;font-size:9px}.query-examples{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:12px 0}.query-examples span{color:var(--muted);font-size:8px}.query-examples button{padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#52615b;font:8px Consolas;cursor:pointer}.query-panel pre{min-height:330px;padding:14px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:#fff;white-space:pre-wrap;font:10px/1.65 Consolas}.diff-panel>textarea{width:100%;height:170px;padding:13px;border:1px solid var(--line);border-radius:9px;resize:vertical;font:10px/1.6 Consolas}.diff-toolbar{display:flex;align-items:center;gap:12px;margin:10px 0}.diff-toolbar span{color:var(--muted);font-size:9px}.diff-result{display:grid;gap:6px}.diff-result article{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-left:3px solid;border-radius:5px;background:#fff;font:9px/1.5 Consolas}.diff-result article.add{border-color:#32a071}.diff-result article.remove{border-color:#d04b43}.diff-result article.change{border-color:#d89b25}.diff-result article span{color:var(--muted)}.no-diff{padding:40px;text-align:center;color:var(--green)}.studio-status{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:5px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#f7f9f8}.studio-status>div{display:flex;align-items:center;gap:13px;color:#76817d;font-size:8px}.studio-status #jsonStatus{gap:7px}.studio-status #jsonStatus i{width:7px;height:7px;border-radius:50%;background:#2f9e70}.studio-status #jsonStatus.error{color:#b53d3d;white-space:pre-wrap}.studio-status #jsonStatus.error i{background:#d04b43}.studio-status #jsonStatus.warning i{background:#d89b25}.studio-inspector{display:grid;grid-template-columns:.8fr 1.2fr;gap:0}.studio-inspector>section{padding:20px}.studio-inspector>section+section{border-left:1px solid var(--line)}.studio-inspector header{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.studio-inspector header span{color:var(--orange);font-size:7px;font-weight:900;letter-spacing:.1em}.studio-inspector header h2{margin:3px 0 0;font-size:13px}.studio-inspector header button{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--green);font-size:8px}.stat-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.stat-cards div{display:flex;align-items:center;flex-direction:column;padding:10px 5px;border:1px solid var(--line);border-radius:8px;background:#fafbfb}.stat-cards b{color:var(--green);font:18px Georgia}.stat-cards span{margin-top:3px;color:var(--muted);font-size:7px}.type-bars{display:grid;gap:5px;margin-top:12px}.type-bars>div{display:grid;grid-template-columns:48px 1fr 22px;align-items:center;gap:6px;color:var(--muted);font-size:7px}.type-bars i{height:4px;overflow:hidden;border-radius:9px;background:#edf0ee}.type-bars i b{display:block;height:100%;border-radius:9px;background:var(--green)}.type-bars em{font-style:normal;text-align:right}.conversion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.conversion-grid button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:9px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff;text-align:left;cursor:pointer}.conversion-grid button:hover{border-color:#afc5bc;background:#fbfdfc}.conversion-grid i{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#edf0fa;color:#485fa3;font-size:8px;font-style:normal;font-weight:900}.conversion-grid b{align-self:end;font-size:9px}.conversion-grid span{align-self:start;color:var(--muted);font-size:7px}.json-guide{margin-top:55px}.json-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(12,25,21,.45);backdrop-filter:blur(5px)}.json-modal[hidden]{display:none}.json-modal>section{width:min(500px,100%);padding:20px;border-radius:15px;background:#fff;box-shadow:0 25px 80px rgba(8,25,20,.3)}.json-modal header{display:flex;align-items:center;justify-content:space-between}.json-modal h2{margin:0;font:21px Georgia}.json-modal header button{border:0;background:none;font-size:22px}.json-modal p{color:var(--muted);font-size:10px}.json-modal>section>input{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px}.json-modal>section>div:last-child{display:flex;justify-content:flex-end;gap:7px;margin-top:16px}.json-modal>section>div:last-child button{padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--green)}.json-modal>section>div:last-child .primary{border-color:var(--green);background:var(--green);color:#fff}.history-modal>section{width:min(620px,100%)}#historyList{display:grid;max-height:380px;gap:6px;margin-top:14px;overflow:auto}#historyList article{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px}#historyList article div{display:flex;flex-direction:column;gap:3px}#historyList article b{font-size:10px}#historyList article span{color:var(--muted);font-size:8px}#historyList article button{padding:5px 7px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--green);font-size:8px}.empty-history{padding:35px;text-align:center}
@media(max-width:1050px){.studio-actions{align-items:flex-start;flex-wrap:wrap}.utility-actions{margin-left:0}.studio-workspace{grid-template-columns:1fr}.editor-pane+ .editor-pane{border-top:1px solid var(--line);border-left:0}.studio-inspector{grid-template-columns:1fr}.studio-inspector>section+section{border-top:1px solid var(--line);border-left:0}}
@media(max-width:700px){.json-workbench-page{padding-right:8px;padding-left:8px}.json-title h1{font-size:36px}.studio-topbar{align-items:flex-start;flex-direction:column;gap:10px}.studio-file-actions{width:100%;overflow:auto}.studio-file-actions button,.file-action{flex:0 0 auto}.studio-actions{display:block;padding:8px}.action-group{padding:4px 0;overflow:auto}.action-group+ .action-group{padding-left:0;border-top:1px solid var(--line);border-left:0}.studio-actions button,.action-group label{flex:0 0 auto}.code-editor{grid-template-columns:34px minmax(0,1fr);min-height:410px}.code-editor textarea{min-height:410px;padding:12px;font-size:11px}.line-numbers{padding:12px 6px;font-size:9px}.output-view{min-height:410px}.json-tree,.query-panel,.diff-panel{height:410px}.editor-pane>header{align-items:flex-start;flex-direction:column;gap:6px}.output-pane>header{align-items:stretch}.output-tabs{overflow:auto}.tree-actions{width:100%}.tree-actions input{min-width:0;flex:1}.studio-inspector>section{padding:15px}.stat-cards{grid-template-columns:repeat(3,1fr)}.conversion-grid{grid-template-columns:repeat(2,1fr)}.studio-status{align-items:flex-start;flex-direction:column;gap:5px}.tree-node{margin-left:8px}.tree-node code{display:none}.node-actions{opacity:1}.json-guide{padding:0 8px}}

/* Compact controls stay dense, but no longer rely on 7–9px text. */
.studio-brand span,.studio-file-actions button,.file-action,.studio-actions button,.action-group label,.action-group select,.output-tabs button{font-size:11px}
.editor-pane>header b,.editor-pane>header span,.editor-pane>header small,.tree-actions input,.tree-actions button{font-size:10px}
.json-tree,.query-panel pre,.diff-panel>textarea{font-size:11px}
.type-badge,.tree-node code,.node-actions button{font-size:9px!important}
.query-box label,.query-box button,.diff-toolbar button,.diff-toolbar span,.diff-result article{font-size:10px}
.query-examples span,.query-examples button,.studio-status>div{font-size:10px}
.studio-inspector header span,.studio-inspector header button,.stat-cards span,.type-bars>div,.conversion-grid i,.conversion-grid span{font-size:9px}
.conversion-grid b{font-size:11px}