.tool-ui{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);margin-bottom:var(--space-8);padding:var(--space-6)}.json-formatter{display:flex;flex-direction:column;gap:var(--space-4)}.json-toolbar{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;padding:var(--space-3)}.toolbar-left,.toolbar-right{display:flex;flex-wrap:wrap;gap:var(--space-2)}.btn{align-items:center;border:2px solid transparent;border-radius:var(--radius-lg);cursor:pointer;display:inline-flex;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-semibold);gap:var(--space-2);padding:10px 16px;transition:all var(--transition-fast)}.btn-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:transparent;color:#fff}.btn-primary:hover{box-shadow:0 8px 24px rgba(79,70,229,.35);transform:translateY(-2px)}.btn-secondary{background:var(--color-bg);border-color:var(--color-primary);color:var(--color-primary)}.btn-secondary:hover{background:var(--color-primary);color:#fff}.btn-outline{background:var(--color-bg);border-color:var(--color-border);color:var(--color-text-secondary)}.btn-outline:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-muted)}.btn-ghost:hover{background:var(--color-bg-secondary);color:var(--color-text)}.json-error{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-lg);color:#dc2626;display:flex;font-size:var(--text-sm);gap:var(--space-3);padding:var(--space-4)}[data-theme=dark] .json-error{background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.3)}.json-error svg{flex-shrink:0}.json-stats{align-items:center;background:#ecfdf5;border-radius:var(--radius-lg);color:#059669;display:flex;font-size:var(--text-sm);font-weight:var(--font-medium);gap:var(--space-3);padding:var(--space-3) var(--space-4)}[data-theme=dark] .json-stats{background:rgba(5,150,105,.15)}.json-container{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));min-height:400px}@media (max-width:768px){.json-container{grid-template-columns:1fr}}.json-input-wrapper,.json-output-wrapper{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.json-label{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--font-semibold)}.output-wrapper,.textarea-wrapper{background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex:0 0 auto;height:clamp(350px,50vh,480px);max-height:480px;min-height:350px;min-width:0;overflow:hidden;position:relative;width:100%}.output-wrapper:focus-within,.textarea-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(79,70,229,.12)}.line-numbers{background:var(--color-bg-secondary);border-right:1px solid var(--color-border);box-sizing:border-box;color:var(--color-text-muted);flex:0 0 48px;max-width:48px;min-width:48px;overflow:hidden;text-align:right;user-select:none;white-space:pre;width:48px;word-break:normal}.json-input,.line-numbers{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;padding:var(--space-4)}.json-input{background:var(--color-bg);border:none;color:var(--color-text);flex:1 1 0;min-width:0;outline:none;overflow:auto;resize:none;width:0}.json-input::placeholder{color:var(--color-text-muted)}.json-output{background:var(--color-bg);flex:1 1 0;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;margin:0;min-width:0;overflow:auto;padding:var(--space-4);width:0}#jsonCode{font-family:inherit;white-space:pre-wrap;word-break:break-word}.json-key{color:#0891b2;font-weight:500}.json-string{color:#059669}.json-number{color:#7c3aed}.json-boolean{color:#dc2626}.json-null{color:#9ca3af;font-style:italic}.json-bracket{color:#64748b}.json-collapsible{cursor:pointer;position:relative}.json-collapsible:before{border-bottom:4px solid transparent;border-left:6px solid var(--color-text-muted);border-top:4px solid transparent;content:"";height:0;left:-20px;position:absolute;top:50%;transform:translateY(-50%);transition:transform .2s;width:0}.json-collapsible.collapsed:before{transform:translateY(-50%) rotate(-90deg)}.json-collapsed-content{display:none}.json-collapsible.collapsed+.json-collapsed-content{display:inline}@media (max-width:640px){.tool-ui{padding:var(--space-4)}.json-toolbar{align-items:stretch;flex-direction:column}.btn,.toolbar-left,.toolbar-right{justify-content:center}.btn{flex:1;padding:12px}.line-numbers{flex-basis:38px;max-width:38px;min-width:38px;padding:var(--space-3) 6px;width:38px}.json-input,.json-output{padding:var(--space-3)}.output-wrapper,.textarea-wrapper{height:clamp(320px,52vh,420px);max-height:420px;min-height:320px}}