@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600&display=swap";:root{font-family:Space Grotesk,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e2e8f0;background-color:#020617;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:#020617}:root{--bg-body: #0a0e27;--app-shell-bg: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%);--workspace-bg: #151932;--workspace-border: rgba(102, 126, 234, .1);--workspace-shadow: rgba(0, 0, 0, .5);--header-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--header-text: #fff;--header-subtitle: rgba(255, 255, 255, .9);--tab-bg: #0f1229;--tab-border: #1e2442;--tab-text: #6b7280;--tab-hover-bg: rgba(102, 126, 234, .05);--tab-active-text: #a78bfa;--main-bg: #151932;--icon-btn-bg: #1a1f3a;--icon-btn-border: #2d3548;--icon-btn-text: #9ca3af;--icon-btn-hover: #1e2442;--editor-border: #2d3548;--editor-bg: #0f1229;--editor-text: #e5e7eb;--editor-placeholder: #4b5563;--editor-focus-border: #667eea;--line-number-bg: #0a0e1f;--line-number-border: #1e2442;--line-number-text: #4b5563;--btn-secondary-bg: #1a1f3a;--btn-secondary-border: #2d3548;--btn-secondary-text: #9ca3af;--alert-success-bg: rgba(16, 185, 129, .15);--alert-success-border: rgba(16, 185, 129, .3);--alert-success-text: #34d399;--alert-error-bg: rgba(239, 68, 68, .15);--alert-error-border: rgba(239, 68, 68, .3);--alert-error-text: #f87171;--compare-bg: #0f1229;--compare-text: #e5e7eb;--tree-placeholder-color: #6b7280;--tree-container-bg: #0f1229;--format-select-bg: #1a1f3a;--format-select-border: #2d3548;--format-select-text: #9ca3af;--header-theme-btn-bg: rgba(255, 255, 255, .15);--header-theme-btn-border: rgba(255, 255, 255, .3);--header-theme-btn-text: #fff;--footer-btn-bg: rgba(255, 255, 255, .12);--footer-btn-border: rgba(255, 255, 255, .2);--footer-btn-hover-bg: rgba(255, 255, 255, .25);--footer-btn-text: #fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-body)}body.theme-light{--bg-body: #f8fafc;--app-shell-bg: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);--workspace-bg: #ffffff;--workspace-border: rgba(226, 232, 240, .8);--workspace-shadow: rgba(15, 23, 42, .1);--header-gradient: linear-gradient(135deg, #c4b5fd 0%, #e0f2fe 100%);--header-text: #1f2937;--header-subtitle: rgba(15, 23, 42, .85);--tab-bg: #f8fafc;--tab-border: #e5e7eb;--tab-text: #4b5563;--tab-hover-bg: rgba(102, 126, 234, .1);--tab-active-text: #4338ca;--main-bg: #fefefe;--icon-btn-bg: #edf2ff;--icon-btn-border: #cbd5f5;--icon-btn-text: #1f2937;--icon-btn-hover: #dbeafe;--editor-border: #e5e7eb;--editor-bg: #ffffff;--editor-text: #111827;--editor-placeholder: #9ca3af;--editor-focus-border: #6366f1;--line-number-bg: #f3f4f6;--line-number-border: #e5e7eb;--line-number-text: #9ca3af;--btn-secondary-bg: #f3f4f6;--btn-secondary-border: #e5e7eb;--btn-secondary-text: #374151;--alert-success-bg: #dcfce7;--alert-success-border: #bbf7d0;--alert-success-text: #15803d;--alert-error-bg: #fee2e2;--alert-error-border: #fecaca;--alert-error-text: #991b1b;--compare-bg: #ffffff;--compare-text: #111827;--tree-placeholder-color: #4b5563;--tree-container-bg: #ffffff;--format-select-bg: #f8fafc;--format-select-border: #e5e7eb;--format-select-text: #1f2937;--header-theme-btn-bg: #1f2937;--header-theme-btn-border: #374151;--header-theme-btn-text: #f8fafc;--footer-btn-bg: rgba(15, 23, 42, .08);--footer-btn-border: rgba(15, 23, 42, .2);--footer-btn-hover-bg: rgba(15, 23, 42, .15);--footer-btn-text: #f8fafc}.app-shell{min-height:100vh;background:var(--app-shell-bg);padding:2rem;display:flex;align-items:center;justify-content:center}.workspace{width:100%;max-width:1600px;background:var(--workspace-bg);border-radius:24px;box-shadow:0 20px 60px var(--workspace-shadow);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--workspace-border)}.header{background:var(--header-gradient);padding:1.2rem 2rem;color:var(--header-text);display:flex;flex-direction:column;gap:.35rem}.header-title{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:.75rem}.header-title:before{content:"{ }";font-size:2.5rem;opacity:.9}.header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.header-theme-toggle{border:1px solid var(--header-theme-btn-border);background:var(--header-theme-btn-bg);color:var(--header-theme-btn-text);border-radius:999px;padding:.4rem 1rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.header-theme-toggle:hover{transform:translateY(-1px);opacity:.9}.mode-tabs{display:flex;background:var(--tab-bg);border-bottom:2px solid var(--tab-border);padding:0 2.5rem;gap:.5rem}.mode-tab{padding:1rem 1.75rem;border:none;background:transparent;color:var(--tab-text);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;border-bottom:3px solid transparent;position:relative;top:2px}.mode-tab:hover{color:var(--tab-text);background:var(--tab-hover-bg)}.mode-tab.active{color:var(--tab-active-text);border-bottom-color:var(--tab-active-text);background:var(--main-bg)}.main-content{padding:2.5rem;flex:1;background:var(--main-bg)}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem;height:720px}.editor-panel{display:flex;flex-direction:column;gap:1rem;height:100%}.panel-header{display:flex;justify-content:space-between;align-items:center;min-height:40px}.panel-title{font-size:.875rem;font-weight:700;color:var(--tab-text);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:.5rem}.panel-title:before{content:"";width:4px;height:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.panel-actions{display:flex;gap:.5rem;min-height:32px}.icon-btn{padding:.5rem .75rem;border:1px solid var(--icon-btn-border);background:var(--icon-btn-bg);border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.8rem;font-weight:600;color:var(--icon-btn-text);display:flex;align-items:center;gap:.4rem}.icon-btn:hover{border-color:#667eea;color:var(--icon-btn-text);background:var(--icon-btn-hover)}.icon-btn svg{width:14px;height:14px}.editor-wrapper{position:relative;flex:1;min-height:600px;border:2px solid var(--editor-border);border-radius:12px;overflow:hidden;background:var(--editor-bg);transition:border-color .2s ease;display:flex}.editor-wrapper:focus-within{border-color:var(--editor-focus-border);box-shadow:0 0 0 3px #667eea1a}.line-numbers{padding:1.5rem .75rem 1.5rem 1rem;background:var(--line-number-bg);color:var(--line-number-text);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.9rem;line-height:1.6;text-align:right;-webkit-user-select:none;user-select:none;border-right:2px solid var(--line-number-border);min-width:50px}.line-numbers div{height:1.6em}.json-editor{flex:1;height:100%;min-height:600px;padding:1.5rem;border:none;background:var(--editor-bg);color:var(--editor-text);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.9rem;line-height:1.6;resize:none;outline:none}.json-editor::placeholder{color:var(--editor-placeholder)}.action-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;min-height:3rem}.btn{padding:.875rem 1.75rem;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.5rem}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:2px solid var(--btn-secondary-border)}.btn-secondary:hover{border-color:#667eea;color:#a78bfa;background:var(--icon-btn-hover)}.btn svg{width:16px;height:16px}.feedback-row{display:flex;gap:1rem;align-items:center;min-height:2.5rem;margin-top:1rem}.adsense-banner-wrapper{margin-top:1.5rem;display:flex;justify-content:center}.adsense-banner-wrapper .adsbygoogle{width:100%;min-height:90px;display:block}.app-footer{padding:1.5rem 2.5rem;border-top:1px solid rgba(148,163,184,.3);margin-top:2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--tab-text);font-size:.85rem}.footer-links{display:flex;gap:1rem}.footer-links a{border:1px solid var(--tab-border);background:var(--tab-bg);color:var(--tab-text);border-radius:999px;padding:.35rem 1rem;cursor:pointer;font-weight:600;transition:background .2s ease,border .2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.footer-links a:hover{background:var(--tab-hover-bg);border-color:var(--tab-border)}.alert{padding:.75rem 1.25rem;border-radius:10px;font-size:.875rem;font-weight:500;display:inline-flex;align-items:center;gap:.5rem;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-success{background:var(--alert-success-bg);color:var(--alert-success-text);border:1px solid var(--alert-success-border)}.alert-error{background:var(--alert-error-bg);color:var(--alert-error-text);border:1px solid var(--alert-error-border)}.compare-result-view{width:100%;height:100%;min-height:600px;padding:1.5rem;background:var(--compare-bg);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.9rem;line-height:1.6;overflow:auto;color:var(--compare-text)}.compare-line{display:flex;min-height:1.6rem;line-height:1.6rem;transition:background .15s ease}.compare-line.has-diff{background:#fbbf241a;border-left:4px solid #fbbf24;padding-left:.75rem;margin-left:-.75rem}.compare-line-num{display:inline-block;width:3rem;text-align:right;padding-right:1rem;color:var(--line-number-text);-webkit-user-select:none;user-select:none;flex-shrink:0;font-weight:600}.compare-line.has-diff .compare-line-num{color:#fbbf24}.compare-line-content{flex:1;white-space:pre;font-family:inherit}.diff-highlight{background:#ef444433;color:#f87171;font-weight:700;padding:.1rem .3rem;border-radius:4px}.compare-error{color:#f87171;padding:2rem;text-align:center}.tree-view-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--tree-placeholder-color);text-align:center;gap:1rem;width:100%;padding:0 2rem}.tree-view-placeholder svg{width:64px;height:64px;opacity:.5}.tree-view-container{padding:1.5rem;overflow:auto;height:100%;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.9rem;color:var(--compare-text);background:var(--tree-container-bg)}.tree-node{margin:.1rem 0}.tree-item{margin:.2rem 0;padding:.4rem .75rem;border-radius:8px;transition:background .15s ease}.tree-item:hover{background:#667eea1a}.tree-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.tree-expandable:hover{background:#667eea26}.tree-toggle{display:inline-block;width:1.2rem;color:#6b7280;font-size:.9rem;margin-right:.4rem;text-align:center;font-weight:700}.tree-key{color:#a78bfa;font-weight:700;margin-right:.4rem}.tree-value{color:#e5e7eb}.tree-value.tree-string{color:#34d399}.tree-value.tree-number{color:#fb923c}.tree-value.tree-boolean{color:#c084fc}.tree-null{color:#6b7280;font-style:italic}.tree-preview{color:#6b7280;font-style:italic;font-size:.85rem}.tree-bracket{color:#9ca3af;font-weight:700}.tree-children{margin-left:1.5rem;border-left:2px solid #2d3548;padding-left:.75rem;animation:expandDown .2s ease-out}@keyframes expandDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.format-select{padding:.5rem 1rem;border:2px solid var(--format-select-border);border-radius:8px;background:var(--format-select-bg);color:var(--format-select-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.format-select:hover{border-color:#667eea;color:#a78bfa}.format-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}@media(max-width:1200px){.editor-container{grid-template-columns:1fr}.app-shell{padding:1rem}.main-content{padding:1.5rem}}@media(max-width:768px){.header{padding:1.5rem}.header-title{font-size:1.5rem}.mode-tabs{padding:0 1rem;overflow-x:auto}.mode-tab{padding:.875rem 1.25rem;font-size:.85rem}.main-content{padding:1rem}.editor-container{gap:1rem}}