.json-formatter{width:100%;max-width:1200px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.options-bar{flex-wrap:wrap;gap:20px;margin-bottom:15px;padding:12px 15px;background-color:#f6f8fa;border:1px solid #e1e4e8;border-radius:6px}.indentation-control,.options-bar{display:flex;align-items:center}.indentation-control label{margin-right:8px;font-weight:500}.indentation-control select{padding:5px 8px;margin-left:8px;border-radius:4px;border:1px solid #ccc;background-color:white}.formatter-container{display:flex;flex-direction:column;gap:20px}@media (min-width:1024px){.formatter-container{flex-direction:row}}.input-section,.output-section{flex:1;border:1px solid #e1e4e8;border-radius:6px;padding:15px;background-color:white;box-shadow:0 1px 2px rgba(0,0,0,.05)}.input-section h3,.output-section h3{margin-top:0;margin-bottom:15px;color:#333;font-size:18px;font-weight:600;text-align:center}.json-input{width:100%;height:400px;padding:10px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:14px;border:1px solid #ddd;border-radius:5px;resize:vertical;line-height:1.5}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px;justify-content:center}.collapse-button,.copy-button,.download-button,.expand-button,.format-button,.minify-button,.sample-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s,transform .1s}.collapse-button:hover,.copy-button:hover,.download-button:hover,.expand-button:hover,.format-button:hover,.minify-button:hover,.sample-button:hover{transform:translateY(-1px)}.collapse-button:active,.copy-button:active,.download-button:active,.expand-button:active,.format-button:active,.minify-button:active,.sample-button:active{transform:translateY(1px)}.format-button{background-color:#4CAF50;color:white}.format-button:hover{background-color:#45a049}.minify-button{background-color:#2196F3;color:white}.minify-button:hover{background-color:#0b7dda}.collapse-button,.expand-button{background-color:#757575;color:white}.collapse-button:hover,.expand-button:hover{background-color:#616161}.sample-button{background-color:#ff9800;color:white}.sample-button:hover{background-color:#e68a00}.line-numbers-toggle{display:flex;align-items:center}.line-numbers-toggle input{margin-right:6px}.error-message{margin-top:10px;padding:10px;color:#721c24;background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:4px}.output-section{position:relative;background-color:#fafafa}.output-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px;justify-content:center}.copy-button,.download-button{background-color:#673AB7;color:white}.copy-button:hover,.download-button:hover{background-color:#5e35b1}.json-output-container{display:flex;background-color:#fff;border:1px solid #e1e4e8;border-radius:4px;overflow:auto;max-height:500px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:14px;line-height:1.5;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}.line-numbers{display:flex;flex-direction:column;padding:0;background-color:#f6f8fa;border-right:1px solid #e1e4e8;color:#6a737d;text-align:right;-webkit-user-select:none;user-select:none;min-width:40px}.line-number{padding:0 8px;height:21px;line-height:21px;font-size:12px;color:#6a737d}.json-tree-container{flex:1;padding:0;white-space:pre-wrap;word-break:break-word;text-align:left}.empty-output{padding:30px;text-align:center;color:#6a737d;background-color:#f6f8fa;border:1px dashed #ddd;border-radius:4px}.json-object{position:relative}.json-line{display:flex;align-items:flex-start;min-height:21px;line-height:21px;padding:0 10px}.json-line:hover{background-color:#f8f9fa}.json-toggle{cursor:pointer;color:#6a737d;margin-right:5px;font-size:10px;display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;-webkit-user-select:none;user-select:none}.json-toggle:hover{color:#24292e}.json-toggle.expanded{color:#0366d6}.json-property{display:flex;flex-wrap:wrap;align-items:flex-start}.json-children{margin-left:16px}.json-key{color:#881391;font-weight:400}.json-string{color:#008000}.json-boolean,.json-number{color:#0000ff}.json-null{color:#7d7d7d}.json-preview{color:#999;margin:0 4px}.json-bracket{color:#000}.json-comma{color:#000;margin-left:2px}.json-empty{color:#999}