.json-formatter{min-height:100vh;background:var(--bg-color);color:var(--text-color);padding:20px;max-width:1400px;margin:0 auto}.json-formatter-fullscreen{position:fixed;inset:0;background:var(--bg-color);color:var(--text-color);z-index:9999;padding:20px;overflow:hidden}.json-formatter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.json-formatter-header h1{font-size:2.5rem;font-weight:700;color:var(--text-color);margin:0}.fullscreen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-color)}.fullscreen-header h1{font-size:2rem;font-weight:700;color:var(--text-color);margin:0}.close-btn{background:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s}.close-btn:hover{background:#3a5bd9}.json-formatter-content{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;height:calc(100vh - 200px);min-height:600px;margin-bottom:20px}.editor-container,.output-container{display:flex;flex-direction:column;background:var(--secondary-bg);border-radius:8px;overflow:hidden;border:1px solid var(--border-color)}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:var(--secondary-bg);border-bottom:1px solid var(--border-color)}.editor-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color)}.error-indicator{color:#ff6b6b;font-size:12px;font-weight:500}.operation-indicator{background:var(--primary-color);color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:500;text-transform:uppercase}.operations-panel{display:flex;flex-direction:column;justify-content:center;padding:20px;background:var(--secondary-bg);border-radius:8px;border:1px solid var(--border-color);height:fit-content;min-width:200px}.editor-controls{display:flex;gap:8px;align-items:center}.control-group{display:flex;flex-direction:column;gap:10px;align-items:stretch}.control-group h4{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--text-color);text-transform:uppercase;letter-spacing:.5px;text-align:center}.control-btn{background:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);padding:8px 12px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.control-btn:hover,.control-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.editor-content-wrapper{flex:1;display:flex;flex-direction:column;min-height:400px}.ace-editor{flex:1;border:none;border-radius:0;min-height:400px}.ace_editor{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px}.error-message{background:#ff6b6b1a;color:#ff6b6b;padding:10px 15px;border-radius:5px;margin:10px;font-size:12px;border-left:3px solid #ff6b6b}.tree-view-container{flex:1;padding:20px;background:var(--bg-color);overflow-y:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4;min-height:400px;border:none;border-radius:0;display:flex;flex-direction:column}.tree-node{margin-bottom:5px}.tree-key{color:var(--primary-color);font-weight:600}.tree-count{color:#888;font-size:11px;margin-left:5px}.tree-item{margin:2px 0}.tree-value{margin-left:10px}.tree-value-string{color:#4ecdc4}.tree-value-number{color:#f7b731}.tree-value-boolean{color:#ff6b6b}.tree-value-null{color:#a8a8a8;font-style:italic}.json-formatter-footer{margin-top:40px;padding-top:40px;border-top:1px solid var(--border-color)}.seo-content{max-width:800px;margin:0 auto}.seo-content h2{font-size:2rem;font-weight:700;color:var(--text-color);margin-bottom:20px}.seo-content h3{font-size:1.5rem;font-weight:600;color:var(--text-color);margin:30px 0 15px}.seo-content p{font-size:16px;line-height:1.6;color:#ccc;margin-bottom:20px}.seo-content ul{margin:20px 0;padding-left:20px}.seo-content li{font-size:16px;line-height:1.6;color:#ccc;margin-bottom:10px}.seo-content strong{color:var(--text-color);font-weight:600}@media (max-width: 968px){.json-formatter-content{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto;gap:15px}.operations-panel{order:2;flex-direction:row;justify-content:center;min-width:auto}.control-group{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}.control-group h4{width:100%;margin-bottom:8px}.json-formatter-header{flex-direction:column;gap:15px;align-items:flex-start}}@media (max-width: 640px){.json-formatter{padding:15px}.json-formatter-header h1{font-size:2rem}.control-btn{font-size:10px;padding:5px 8px}.operations-panel{padding:15px}.control-group{flex-direction:column;align-items:center}.editor-controls{flex-wrap:wrap;gap:5px}}.json-formatter-fullscreen .json-formatter-content{height:calc(100vh - 100px);display:block}.json-formatter-content.fullscreen-content{height:calc(100vh - 80px);overflow:hidden}.json-formatter-content.fullscreen-content .editor-container,.json-formatter-content.fullscreen-content .output-container{height:100%}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;gap:20px}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container p{color:var(--text-color);font-size:16px}.tree-view-container::-webkit-scrollbar{width:8px}.tree-view-container::-webkit-scrollbar-track{background:var(--bg-color)}.tree-view-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.tree-view-container::-webkit-scrollbar-thumb:hover{background:#555}