.json-formatter-workspace{display:flex;flex-direction:column;gap:16px;width:100%;margin-top:8px;--editor-font-size:13px;--editor-line-height:1.5;--editor-line-height-px:19.5px}.json-formatter-workspace.theme-accent{--editor-bg:#0f172a;--editor-text:#f1f5f9;--editor-border:rgba(99,102,241,0.35);--editor-gutter-bg:#1e293b;--editor-gutter-text:#64748b;--editor-title-color:#818cf8}.json-formatter-modes-toolbar{width:100%}.json-modes-tabs{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:8px;gap:8px;width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md,12px);padding:8px}.json-mode-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-sm,8px);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition-spring,.3s);white-space:nowrap}.json-mode-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.json-mode-btn.active{background:var(--accent);border-color:var(--accent);color:#ffffff}.json-view-tabs{display:none}.json-panels-stack{gap:16px;width:100%}.json-panel,.json-panels-stack{display:flex;flex-direction:column}.json-panel{background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:var(--radius-md,12px);position:relative;overflow:visible;height:450px;transition:border-color .2s ease,background .2s ease}.json-panel:focus-within{border-color:var(--accent)}.json-panel-header{display:flex;flex-direction:column;gap:8px;padding:16px 16px 10px;border-bottom:1px solid var(--editor-border);background:var(--editor-gutter-bg);border-top-left-radius:11px;border-top-right-radius:11px}.json-panel-header-top{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:0;gap:12px}.json-panel-title{position:absolute;top:-9px;left:16px;font-size:10px;font-weight:600;letter-spacing:.03em;padding:2px 10px;border-radius:20px;white-space:nowrap;z-index:10;line-height:1.2;box-shadow:0 2px 4px rgba(0,0,0,.15)}.json-panel-title.title-input{background:#1e1b4b;border:1px solid #6366f1;color:#c7d2fe}.json-panel-title.title-output{background:#064e3b;border:1px solid #10b981;color:#a7f3d0}.json-header-option{display:flex;align-items:center;gap:6px}.json-option-label{font-size:11px;color:var(--editor-gutter-text);font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.json-header-select{height:28px;padding:0 8px;background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:6px;color:var(--editor-text);font-size:11px;font-weight:600;outline:none;cursor:pointer}.json-header-select option{background:#1e293b;color:#f1f5f9}.json-header-query{flex:1 1;display:flex}.json-header-query-input{width:100%;height:28px;padding:0 10px;background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:6px;color:var(--editor-text);font-family:Fira Code,Courier New,Courier,monospace;font-size:11px;outline:none}.json-header-query-input:focus{border-color:var(--accent)}.json-panel-actions{display:flex;gap:8px;width:100%;justify-content:flex-end;align-items:center}.json-action-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:var(--radius-sm,6px);color:var(--editor-gutter-text);font-size:11px;font-weight:600;cursor:pointer;transition:.2s ease}.json-action-btn:hover:not(:disabled){background:var(--editor-gutter-bg);color:var(--editor-text);border-color:var(--editor-text)}.json-action-btn.active{background:rgba(125,110,243,.08);border-color:var(--accent);color:var(--accent)}.json-action-btn:disabled{opacity:.4;cursor:not-allowed}.json-raw-tree-toggle{display:flex;background:rgba(0,0,0,.25);border:1px solid var(--editor-border);border-radius:6px;padding:2px;gap:2px}.json-raw-tree-toggle .json-toggle-btn{height:24px;border:none;background:transparent;color:var(--editor-gutter-text);border-radius:4px;font-size:11px;padding:0 10px;font-weight:600;cursor:pointer;transition:.15s ease}.json-raw-tree-toggle .json-toggle-btn:hover{background:rgba(255,255,255,.05);color:var(--editor-text)}.json-raw-tree-toggle .json-toggle-btn.active{background:var(--editor-bg)!important;color:var(--editor-text)!important;border:none!important;box-shadow:0 1px 3px rgba(0,0,0,.2)}.json-editor-container{display:flex;position:relative;flex:1 1;overflow:hidden;background:var(--editor-bg);border-bottom-left-radius:11px;border-bottom-right-radius:11px}.json-editor-gutter-wrapper{width:44px;background:var(--editor-gutter-bg);border-right:1px solid var(--editor-border);overflow:hidden;position:relative;flex-shrink:0}.json-editor-gutter{position:absolute;top:0;left:0;width:44px;display:flex;flex-direction:column;align-items:flex-end;padding:12px 10px 12px 0;font-family:Fira Code,Courier New,Courier,monospace;font-size:var(--editor-font-size);line-height:var(--editor-line-height);color:var(--editor-gutter-text);-webkit-user-select:none;-moz-user-select:none;user-select:none}.json-textarea-wrapper{position:relative;flex:1 1;overflow:hidden;background:transparent}.json-textarea{width:100%;height:100%;background:transparent!important;color:transparent!important;caret-color:var(--editor-text);border:none;outline:none;resize:none;overflow:auto;z-index:2}.json-textarea,.json-textarea-backdrop{position:absolute;top:0;left:0;padding:12px;font-family:Fira Code,Courier New,Courier,monospace;font-size:var(--editor-font-size);line-height:var(--editor-line-height);white-space:pre}.json-textarea-backdrop{width:max-content;min-width:100%;margin:0;background:transparent;color:var(--editor-text);z-index:1;pointer-events:none}.json-output-viewer{flex:1 1;padding:12px;overflow:auto;font-family:Fira Code,Courier New,Courier,monospace;font-size:var(--editor-font-size);line-height:var(--editor-line-height);background:var(--editor-bg);white-space:pre;word-break:keep-all;color:var(--editor-text);margin:0;border-bottom-left-radius:11px;border-bottom-right-radius:11px}.json-placeholder-text{color:var(--editor-gutter-text);font-style:italic;opacity:.7}.json-validation-status{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--editor-border);font-size:12px;background:var(--editor-gutter-bg);border-bottom-left-radius:11px;border-bottom-right-radius:11px}.json-status-dot{width:8px;height:8px;border-radius:50%}.json-status-dot.valid{background:var(--success,#30a100)}.json-status-dot.invalid{background:var(--danger,#d12739)}.json-status-dot.empty{background:var(--editor-gutter-text)}.json-status-text{font-weight:500}.json-status-text.valid{color:var(--success,#30a100)}.json-status-text.invalid{color:var(--danger,#d12739)}.json-tree-container{font-family:Fira Code,Courier New,Courier,monospace;font-size:13px;line-height:1.5}.json-tree-node{margin-left:16px;position:relative}.json-tree-row{display:flex;align-items:flex-start;flex-wrap:wrap;padding:1px 0}.json-tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:-16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--editor-gutter-text);font-size:8px;transition:transform .2s ease}.json-tree-toggle.collapsed{transform:rotate(-90deg)}.json-tree-separator{color:var(--editor-gutter-text);margin-right:6px}.json-tree-bracket{color:var(--editor-text)}.json-tree-comma,.json-tree-value.complex{color:var(--editor-gutter-text)}.syntax-vibrant .json-tree-key,.syntax-vibrant .token-json-token-key{color:#9cdcfe}.syntax-vibrant .json-tree-value.string,.syntax-vibrant .token-json-token-string{color:#ce9178;word-break:break-word}.syntax-vibrant .json-tree-value.number,.syntax-vibrant .token-json-token-number{color:#b5cea8}.syntax-vibrant .json-tree-value.boolean,.syntax-vibrant .json-tree-value.null,.syntax-vibrant .token-json-token-boolean,.syntax-vibrant .token-json-token-null{color:#569cd6}@media (min-width:768px){.json-panel-header{flex-direction:row;justify-content:space-between;align-items:center;gap:16px;height:48px}.json-panel-header-top{flex:1 1;justify-content:flex-start;gap:16px}.json-panel-actions{width:auto}}.json-action-buttons-group{display:flex;gap:8px;align-items:center;margin-left:auto}@media (max-width:768px){.json-view-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(0,0,0,.05);border:1px solid var(--border);border-radius:var(--radius-md,10px);padding:3px;grid-gap:2px;gap:2px;width:100%;margin-bottom:4px}.json-view-tab{height:32px;background:transparent;border:none;border-radius:var(--radius-sm,7px);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.json-view-tab.active{background:var(--bg-card);color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,.1)}.json-formatter-modes-toolbar{margin:0 -16px;width:calc(100% + 32px)}.json-modes-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:0 16px;background:transparent;border:none;border-radius:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}.json-modes-tabs::-webkit-scrollbar{display:none}.json-mode-btn{flex:0 0 auto;padding:0 16px}.json-panel{height:480px}.json-panel-input{--editor-font-size:16px;--editor-line-height-px:24px}.json-header-query-input{font-size:16px}.json-panel-title{font-size:12px;top:-10px}.json-panels-stack.show-input .json-panel-output,.json-panels-stack.show-output .json-panel-input{display:none}.json-editor-gutter-wrapper{width:24px}.json-editor-gutter{width:24px;padding-right:4px;font-size:11px}.json-header-query{max-width:none;flex:1 1}.json-btn-text{display:none}.json-panel-actions .json-action-btn{padding:0;width:28px;height:28px;justify-content:center}}