.tool-header{margin-bottom:2rem}.tool-header h1{font-size:2.2rem;background:linear-gradient(135deg,var(--primary) 0,#818cf8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;min-height:420px}@media (max-width:768px){.editor-layout{grid-template-columns:1fr}}.panel{display:flex;flex-direction:column}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.panel-header h3{font-size:1rem;margin-bottom:0;display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-weight:600}.panel-header h3 svg{flex-shrink:0}.char-count{font-size:.8rem;color:var(--text-muted);background:rgba(79,70,229,.08);padding:.2rem .6rem;border-radius:999px;font-variant-numeric:tabular-nums}#json-input{width:100%;flex:1;min-height:380px;padding:1rem 1.2rem;border:2px solid var(--border-color);border-radius:var(--radius-md);font-family:'Fira Code','Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:.88rem;line-height:1.65;color:var(--text-main);background:var(--input-bg);resize:vertical;transition:border-color .25s;tab-size:2}#json-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}#json-input::placeholder{color:var(--input-placeholder)}.output-wrapper{position:relative;flex:1;min-height:380px;border:2px solid var(--border-color);border-radius:var(--radius-md);background:var(--editor-output-bg);overflow:hidden;display:flex;flex-direction:column}.output-wrapper .placeholder-text{display:flex;align-items:center;justify-content:center;height:100%;color:var(--editor-output-muted);font-size:.95rem;text-align:center;padding:2rem;flex:1}.output-wrapper pre.json-tree{margin:0;padding:1rem 1.2rem;overflow:auto;flex:1;background:0 0!important}.output-wrapper pre.json-tree code{font-family:'Fira Code','Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:.88rem;line-height:1.65;white-space:pre;tab-size:2;color:var(--editor-output-text)}.json-key{color:#89b4fa}.json-string{color:#a6e3a1}.json-number{color:#fab387}.json-boolean{color:#cba6f7}.json-null{color:#f38ba8;font-style:italic}.json-brace,.json-bracket{color:var(--editor-output-brace)}.json-colon,.json-comma{color:var(--editor-output-punct)}.json-toggle{display:inline-block;width:1em;cursor:pointer;user-select:none;color:var(--editor-output-toggle);font-size:.7em;text-align:center;margin-right:2px;transition:color .2s;vertical-align:middle}.json-toggle:hover{color:#89b4fa}.json-ellipsis{color:var(--editor-output-punct);font-style:italic;font-size:.85em;cursor:pointer;user-select:none;padding:0 .3em;border-radius:3px;background:rgba(137,180,250,.08);transition:background .2s}.json-ellipsis:hover{background:rgba(137,180,250,.18);color:#89b4fa}.action-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;justify-content:center}.action-bar .btn{gap:.5rem;padding:.7rem 1.4rem;font-size:.92rem;border-radius:var(--radius-md)}.action-bar .btn svg{width:18px;height:18px;flex-shrink:0}.btn-success{background:var(--secondary);color:#fff;box-shadow:0 4px 14px 0 rgb(16 185 129 / 30%)}.btn-success:hover{background:#059669;transform:translateY(-1px);color:#fff}.btn-danger{background:0 0;color:#ef4444;border:1px solid #ef4444}.btn-danger:hover{background:rgba(239,68,68,.06);color:#dc2626}.btn-ghost{background:0 0;color:var(--text-muted);border:1px solid var(--border-color)}.btn-ghost:hover{background:rgba(79,70,229,.05);color:var(--primary);border-color:var(--primary)}.error-banner{display:none;align-items:flex-start;gap:.75rem;margin-top:1rem;padding:1rem 1.25rem;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.25);border-left:4px solid #ef4444;border-radius:var(--radius-md);color:#b91c1c;font-size:.9rem;line-height:1.6;animation:.3s fadeSlideIn}.error-banner.show{display:flex}.error-banner svg{flex-shrink:0;margin-top:2px;color:#ef4444}.error-banner .error-text{flex:1}.error-banner .error-text strong{display:block;margin-bottom:.25rem;color:#991b1b}.error-banner .error-text code{background:rgba(239,68,68,.1);padding:.15rem .4rem;border-radius:3px;font-family:'Fira Code',monospace;font-size:.85rem}.copy-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--editor-output-bg);color:#a6e3a1;padding:.75rem 1.5rem;border-radius:999px;font-size:.9rem;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:1000;opacity:0;pointer-events:none;transition:.35s cubic-bezier(.34, 1.56, .64, 1);display:flex;align-items:center;gap:.5rem}.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}