*{box-sizing:border-box;margin:0;padding:0}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh}#root{min-height:100vh}code{font-family:Courier New,Courier,monospace}.home-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem}.home-header{text-align:center;color:#fff;margin-bottom:3rem}.home-header h1{margin:0 0 .5rem;font-size:3rem;font-weight:700}.home-header p{margin:0;font-size:1.2rem;opacity:.9}.tools-container{display:flex;gap:2rem;justify-content:center;align-items:stretch;max-width:1200px;margin:0 auto;width:100%}.tool-card{flex:1;max-width:500px;background:#fff;border-radius:16px;padding:2.5rem;text-decoration:none;color:#333;transition:all .3s ease;box-shadow:0 10px 40px #00000026;display:flex;flex-direction:column;align-items:center;text-align:center}.tool-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px #00000040}.tool-icon{width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;color:#fff}.tool-card h2{margin:0 0 1rem;font-size:1.8rem;font-weight:700;color:#2d3748}.tool-card>p{margin:0 0 1.5rem;font-size:1rem;color:#718096;line-height:1.6}.feature-list{list-style:none;padding:0;margin:0;width:100%;text-align:left}.feature-list li{border-bottom:1px solid #e2e8f0;color:#4a5568;font-size:.95rem;position:relative;padding:.75rem 0 .75rem 1.5rem}.feature-list li:last-child{border-bottom:none}.feature-list li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700}@media(max-width:1024px){.tools-container{flex-direction:column;align-items:center}.tool-card{max-width:100%}.home-header h1{font-size:2.5rem}}@media(max-width:768px){.home-page{padding:1.5rem}.home-header h1{font-size:2rem}.tool-card{padding:2rem}.tool-icon{width:64px;height:64px}}.json-editor{flex:0 0 33.33%;max-width:500px;display:flex;flex-direction:column;height:75vh;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001a;overflow:hidden}.json-editor h2{margin:0;padding:1.5rem;background:#f8f9fa;border-bottom:2px solid #e9ecef;font-size:1.25rem;font-weight:600;color:#495057}.editor-textarea{flex:1;width:100%;border:none;padding:1.5rem;font-family:Courier New,monospace;font-size:14px;line-height:1.6;resize:none;outline:none;background:#fff}.editor-textarea.error{background:#fff5f5}.editor-textarea::placeholder{color:#adb5bd}.error-message{padding:1rem 1.5rem;background:#fee;color:#c92a2a;font-size:.9rem;border-top:1px solid #fcc}@media(max-width:1024px){.json-editor{flex:1;max-width:100%;height:40vh}}.json-viewer{flex:0 0 33.33%;max-width:500px;display:flex;flex-direction:column;height:75vh;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001a;overflow:hidden;position:relative}.viewer-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#f8f9fa;border-bottom:2px solid #e9ecef}.viewer-header h2{margin:0;font-size:1.25rem;font-weight:600;color:#495057}.copy-button{background:#667eea;color:#fff;border:none;border-radius:8px;padding:.5rem .75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.copy-button:hover{background:#5568d3;transform:scale(1.05)}.copy-button:active{transform:scale(.95)}.copy-button svg{display:block}.viewer-content{flex:1;margin:0;padding:1.5rem;font-family:Courier New,monospace;font-size:14px;line-height:1.6;overflow:auto;background:#fff;color:#212529;white-space:pre;word-wrap:normal}.viewer-content:empty:before{content:attr(data-placeholder);color:#adb5bd}.viewer-content .key{color:#8b1538;font-weight:600}.viewer-content .string{color:#0d5f0d}.viewer-content .number{color:#003a70}.viewer-content .boolean{color:#d73a49;font-weight:600}.viewer-content .null{color:#6f42c1;font-weight:600}.viewer-content .sql-keyword{color:#00f;font-weight:600}.viewer-content .sql-string{color:#a31515}.viewer-content .sql-number{color:#098658}.viewer-content .sql-comment{color:green;font-style:italic}.copy-notification{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);background:#38a169;color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:600;box-shadow:0 4px 12px #00000026;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-width:1024px){.json-viewer{flex:1;max-width:100%;height:40vh}}.file-uploader{display:flex;flex-direction:column;align-items:center;justify-content:center}.file-input{display:none}.upload-label{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 2.5rem;background:#fff;border:3px dashed #dee2e6;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #0000001a}.upload-label:hover{border-color:#667eea;background:#f8f9ff;transform:translateY(-2px);box-shadow:0 6px 24px #667eea33}.upload-label svg{color:#667eea;transition:transform .3s ease}.upload-label:hover svg{transform:translateY(-4px)}.upload-label span{font-size:1rem;font-weight:600;color:#495057}@media(max-width:1024px){.upload-label{padding:1.5rem 2rem}.upload-label span{font-size:.9rem}}.font-selector{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;background:#fff;border:2px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 16px #0000001a}.font-label{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;color:#4a5568}.font-label svg{color:#667eea}.font-select{width:100%;padding:.65rem 1rem;border:2px solid #e2e8f0;border-radius:8px;font-size:.95rem;background:#fff;color:#2d3748;cursor:pointer;transition:all .2s ease;outline:none}.font-select:hover{border-color:#667eea}.font-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.font-select option{padding:.5rem}@media(max-width:1024px){.font-selector{width:100%;max-width:300px}}.formatter-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.formatter-header{padding:1.5rem 2rem;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:2rem}.back-button{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-size:1rem;font-weight:500;padding:.5rem 1rem;border-radius:8px;transition:all .2s ease;background:#ffffff1a}.back-button:hover{background:#fff3;transform:translate(-4px)}.header-content{flex:1;text-align:center}.header-content h1{margin:0 0 .25rem;font-size:2rem;font-weight:700}.header-content p{margin:0;font-size:1rem;opacity:.9}.mode-toggle{display:flex;gap:0;background:#fff3;border-radius:12px;padding:.25rem}.toggle-button{padding:.65rem 1.25rem;border:none;background:transparent;color:#fff;font-size:.95rem;font-weight:500;cursor:pointer;border-radius:10px;transition:all .3s ease;white-space:nowrap}.toggle-button:hover{background:#ffffff1a}.toggle-button.active{background:#fff;color:#667eea;font-weight:600;box-shadow:0 4px 12px #0000001a}.formatter-container{flex:1;display:flex;justify-content:center;align-items:center;gap:2rem;padding:2rem;max-width:1600px;margin:0 auto;width:100%}.controls-column{display:flex;flex-direction:column;gap:1.5rem;align-items:center}@media(max-width:1024px){.formatter-header{flex-wrap:wrap;justify-content:center}.back-button{order:-1;width:100%}.header-content{order:1;width:100%}.mode-toggle{order:2;width:100%;max-width:400px}.formatter-container{flex-direction:column;gap:1.5rem}}@media(max-width:768px){.formatter-header{padding:1rem}.header-content h1{font-size:1.5rem}.header-content p{font-size:.9rem}.toggle-button{padding:.5rem 1rem;font-size:.85rem}}