html{font-size:16px}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh}button:focus-visible,textarea:focus-visible{outline:2px solid #667eea;outline-offset:2px}::selection{background:#667eea4d;color:#333}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;color:#333;background:#f8f9fa;min-height:100vh;transition:background-color .3s ease,color .3s ease}.app{min-height:100vh;display:flex;flex-direction:column}.container{max-width:none;margin:0;padding:0 40px;width:100%}.header{background:#fff;border-bottom:1px solid #e9ecef;padding:1.5rem 0;box-shadow:0 1px 3px #0000001a}.title{font-size:2rem;font-weight:600;color:#212529;margin-bottom:.25rem;text-align:left}.subtitle{font-size:1rem;color:#6c757d;font-weight:400;text-align:left}.main{flex:1;padding:2rem 0;background:#f8f9fa}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.toolbar-left{display:flex;gap:1rem;flex-wrap:wrap}.toolbar-right{display:flex;align-items:center}.indent-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#495057}.indent-select{padding:.375rem 2rem .375rem .75rem;border:1px solid #dee2e6;border-radius:4px;font-size:.875rem;background:#fff;color:#495057;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px}.indent-select:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 3px #0d6efd1a}.btn{padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease;background:#fff;color:#495057;display:inline-flex;align-items:center;white-space:nowrap}.btn:hover{background:#e9ecef;border-color:#adb5bd}.btn:active{background:#dee2e6;transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:not-allowed;background:#f8f9fa}.btn-primary{background:#0d6efd;color:#fff;border-color:#0d6efd}.btn-primary:hover{background:#0b5ed7;border-color:#0a58ca}.btn-primary:disabled{background:#6c757d;border-color:#6c757d;color:#fff}.btn-secondary{background:#17a2b8;color:#fff;border-color:#17a2b8}.btn-secondary:hover{background:#138496;border-color:#117a8b}.btn-secondary:disabled{background:#6c757d;border-color:#6c757d;color:#fff}.btn-tertiary{background:#dc3545;color:#fff;border-color:#dc3545}.btn-tertiary:hover{background:#c82333;border-color:#bd2130}.btn-sample{background:#198754;color:#fff;border-color:#198754}.btn-sample:hover{background:#157347;border-color:#146c43}.btn-upload{background:#fd7e14;color:#fff;border-color:#fd7e14}.btn-upload:hover{background:#e76500;border-color:#dc5e00}.btn-copy{padding:.375rem .75rem;background:#0d6efd;color:#fff;border:1px solid #0d6efd;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s ease}.btn-copy:hover{background:#0b5ed7;border-color:#0a58ca}.btn-copy.copied{background:#198754;border-color:#198754}.btn-download{padding:.375rem .75rem;background:#198754;color:#fff;border:1px solid #198754;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s ease;margin-right:.5rem}.btn-download:hover{background:#157347;border-color:#146c43}.output-actions{display:flex;align-items:center}.theme-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:1rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:1.2rem;transition:all .15s ease;color:#6c757d}.theme-toggle:hover{background:#0000000d;color:#495057}.dark-theme,.dark-theme body{background:#1a1d23!important;color:#e9ecef!important}.dark-theme .header{background:#2d3748;border-bottom:1px solid #4a5568;box-shadow:0 1px 3px #0000004d}.dark-theme .title{color:#e9ecef}.dark-theme .subtitle{color:#a0aec0}.dark-theme .main{background:#1a1d23}.dark-theme .btn{background:#2d3748;color:#e9ecef;border-color:#4a5568}.dark-theme .btn:hover{background:#4a5568;border-color:#718096}.dark-theme .btn:disabled{background:#2d3748;opacity:.6}.dark-theme .btn-primary{background:#3182ce;border-color:#3182ce}.dark-theme .btn-primary:hover{background:#2b77cb;border-color:#2b77cb}.dark-theme .btn-secondary{background:#319795;border-color:#319795}.dark-theme .btn-secondary:hover{background:#2c7a7b;border-color:#2c7a7b}.dark-theme .btn-tertiary{background:#e53e3e;border-color:#e53e3e}.dark-theme .btn-tertiary:hover{background:#c53030;border-color:#c53030}.dark-theme .btn-sample{background:#38a169;border-color:#38a169}.dark-theme .btn-sample:hover{background:#2f855a;border-color:#2f855a}.dark-theme .btn-upload{background:#dd6b20;border-color:#dd6b20}.dark-theme .btn-upload:hover{background:#c05621;border-color:#c05621}.dark-theme .btn-copy,.dark-theme .btn-download{background:#3182ce;border-color:#3182ce}.dark-theme .btn-copy:hover,.dark-theme .btn-download:hover{background:#2b77cb;border-color:#2b77cb}.dark-theme .btn-copy.copied{background:#38a169;border-color:#38a169}.dark-theme .theme-toggle{color:#a0aec0}.dark-theme .theme-toggle:hover{background:#ffffff1a;color:#e9ecef}.dark-theme .indent-label{color:#e9ecef}.dark-theme .indent-select{background:#2d3748;color:#e9ecef;border-color:#4a5568}.dark-theme .indent-select:focus{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dark-theme .editor-container{background:#2d3748;border-color:#4a5568;box-shadow:0 1px 3px #0000004d}.dark-theme .input-section{border-right:1px solid #4a5568}.dark-theme .output-section{background:#2d3748!important}.dark-theme .section-header{background:#1a202c;border-bottom:1px solid #4a5568}.dark-theme .section-header h3{color:#e9ecef}.dark-theme .status-indicator.valid{background:#276749;color:#9ae6b4;border-color:#38a169}.dark-theme .status-indicator.invalid{background:#742a2a;color:#feb2b2;border-color:#e53e3e}.dark-theme .json-placeholder{color:#718096;background:#282c34!important}.dark-theme .json-output,.dark-theme .json-output pre,.dark-theme .json-output code,.dark-theme .json-output .token-line,.dark-theme .json-output pre[class*=language-],.dark-theme .json-output code[class*=language-]{background:#282c34!important}.dark-theme .error-message{background:#742a2a;color:#feb2b2;border-color:#e53e3e}.dark-theme .footer{background:#2d3748;border-top:1px solid #4a5568;color:#a0aec0}.dark-theme ::-webkit-scrollbar-track{background:#2d3748}.dark-theme ::-webkit-scrollbar-thumb{background:#4a5568}.dark-theme ::-webkit-scrollbar-thumb:hover{background:#718096}.dark-theme .input-section .ace_editor{background:#272822!important}.dark-theme .input-section .ace_gutter{background:#383830!important;border-right:1px solid #4a5568!important;color:#75715e!important}.dark-theme .input-section .ace_content{background:#272822!important}.dark-theme .input-section .ace_cursor{color:#f8f8f0!important}.dark-theme .input-section .ace_selection{background:#49483e80!important}.dark-theme .input-section .ace_active-line{background:#49483e4d!important}.dark-theme .input-section .ace_string{color:#e6db74!important}.dark-theme .input-section .ace_constant.ace_numeric,.dark-theme .input-section .ace_constant.ace_language{color:#ae81ff!important}.dark-theme .input-section .ace_keyword{color:#f92672!important}.dark-theme .input-section .ace_variable,.dark-theme .input-section .ace_paren,.dark-theme .input-section .ace_punctuation{color:#f8f8f2!important}.dark-theme .input-section .ace_comment{color:#75715e!important;font-style:italic!important}.dark-theme .input-section .ace_bracket,.dark-theme .input-section .ace_text{color:#f8f8f2!important}.dark-theme .input-section .ace_gutter-active-line,.dark-theme .input-section .ace_marker-layer .ace_active-line{background:#49483e4d!important}.dark-theme .container{background:transparent!important}.dark-theme #root{background:#1a1d23!important;color:#e9ecef!important}.dark-theme html{background:#1a1d23!important}@media (max-width: 768px){.dark-theme .input-section{border-right:none;border-bottom:1px solid #4a5568}}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border-radius:4px;padding:0;box-shadow:0 1px 3px #0000001a;border:1px solid #dee2e6;height:calc(100vh - 200px);min-height:600px;overflow:hidden}@media (max-width: 768px){.editor-container{grid-template-columns:1fr;gap:0;height:auto;min-height:500px}}.input-section,.output-section{display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden}.input-section{border-right:1px solid #e9ecef}@media (max-width: 768px){.input-section{border-right:none;border-bottom:1px solid #e9ecef}}.section-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;min-height:60px}.section-header h3{font-size:1rem;font-weight:600;color:#495057;text-transform:uppercase;letter-spacing:.5px}.status-indicator{font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:3px;text-transform:uppercase;letter-spacing:.5px}.status-indicator.valid{background:#d1e7dd;color:#0f5132;border:1px solid #badbcc}.status-indicator.invalid{background:#f8d7da;color:#721c24;border:1px solid #f5c2c7}.input-section .ace_editor{width:100%!important;height:100%!important;flex:1;border:none!important;border-radius:0!important;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace!important;font-size:13px!important;line-height:1.6!important;background:#fafafa!important}.input-section .ace_gutter{background:#f8f9fa!important;border-right:1px solid #e9ecef!important;color:#999!important}.input-section .ace_content{background:#fafafa!important}.input-section .ace_cursor{color:#383a42!important}.input-section .ace_selection{background:#383a421a!important}.input-section .ace_active-line{background:#383a420d!important}.input-section .ace_string{color:#50a14f!important}.input-section .ace_constant.ace_numeric{color:#986801!important}.input-section .ace_constant.ace_language{color:#a626a4!important}.input-section .ace_keyword{color:#e45649!important}.input-section .ace_variable,.input-section .ace_paren,.input-section .ace_punctuation{color:#383a42!important}.input-section .ace_comment{color:#a0a1a7!important;font-style:italic!important}.input-section .ace_bracket,.input-section .ace_text{color:#383a42!important}.json-output{width:100%;flex:1;padding:1.5rem;border:none;border-radius:0;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;background:#f8f9fa;overflow:auto;white-space:pre;word-wrap:normal;margin:0;color:#212529}.json-output code{font-family:inherit;color:inherit;background:none;padding:0}.json-placeholder{padding:1.5rem;color:#adb5bd;font-style:italic;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px}.error-message{margin:1rem 1.5rem;padding:.75rem;background:#f8d7da;color:#721c24;border:1px solid #f5c2c7;border-radius:4px;font-size:.875rem;font-weight:400}.footer{background:#fff;border-top:1px solid #e9ecef;padding:1rem 0;text-align:center;color:#6c757d;font-size:.875rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f3f4}::-webkit-scrollbar-thumb{background:#c1c8cd;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8b3ba}@media (max-width: 1200px){.container{padding:0 30px}}@media (max-width: 768px){.container{padding:0 20px}.title,.subtitle{text-align:center}.toolbar{justify-content:center;flex-direction:column;gap:1rem}.toolbar-left,.toolbar-right{justify-content:center}.input-section .ace_editor{font-size:12px!important}.json-output{font-size:12px;padding:1rem}.section-header{padding:.75rem 1rem}}@media (max-width: 480px){.container{padding:0 15px}.header{padding:1rem 0}.title{font-size:1.5rem}.subtitle{font-size:.875rem}.toolbar{flex-direction:column;gap:.5rem}.btn{width:100%;justify-content:center}.input-section .ace_editor{font-size:11px!important}.json-output{font-size:11px;padding:.75rem}}