:root{--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--bg-overlay:rgba(0, 0, 0, 0.1);--text-primary:#212529;--text-secondary:#6c757d;--text-muted:#adb5bd;--text-inverse:#ffffff;--border-color:#dee2e6;--border-light:#f1f3f4;--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.1);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.1);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.1);--primary-color:#4CAF50;--primary-hover:#45a049;--secondary-color:#6c757d;--secondary-hover:#5a6268;--danger-color:#f44336;--danger-hover:#d32f2f;--success-color:#4CAF50;--warning-color:#ff9800;--error-color:#f44336;--font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-mono:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,'Courier New',monospace;--border-radius:8px;--border-radius-sm:4px;--transition:all 0.3s ease;--transition-fast:all 0.15s ease;--toolbar-height:60px;--header-height:80px;--status-bar-height:50px}[data-theme=dark]{--bg-primary:#1e1e1e;--bg-secondary:#2d2d30;--bg-tertiary:#3e3e42;--bg-overlay:rgba(255, 255, 255, 0.1);--text-primary:#e4e6ea;--text-secondary:#9d9d9d;--text-muted:#6d6d6d;--text-inverse:#1e1e1e;--border-color:#3e3e42;--border-light:#2d2d30;--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.3);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.3);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.3)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-family);background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;transition:var(--transition)}.skip-link{position:absolute;top:-40px;left:6px;background:var(--primary-color);color:var(--text-inverse);padding:8px;text-decoration:none;border-radius:var(--border-radius-sm);z-index:1000;transition:var(--transition-fast)}.skip-link:focus{top:6px}.app-header{background-color:var(--bg-primary);padding:1.5rem 1rem;text-align:center;box-shadow:var(--shadow-sm);border-bottom:1px solid var(--border-color);height:var(--header-height);display:flex;align-items:center;justify-content:center}.header-content{max-width:1200px;width:100%}.app-title{font-size:1.75rem;font-weight:600;margin-bottom:.25rem;color:var(--text-primary)}.tagline{color:var(--text-secondary);font-size:.95rem;font-weight:400}.app-main{flex:1;display:flex;flex-direction:column;max-width:1200px;width:100%;margin:0 auto;padding:1rem;gap:1rem}.toolbar{background-color:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--border-color);min-height:var(--toolbar-height)}.action-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.toolbar-actions{display:flex;gap:.5rem;align-items:center}.toolbar-status{display:flex;gap:.75rem;align-items:center;font-size:.875rem}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;border-radius:var(--border-radius-sm);font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--transition-fast);text-decoration:none;font-family:inherit;background-color:transparent;color:inherit;position:relative;overflow:hidden}.btn:focus{outline:2px solid var(--primary-color);outline-offset:2px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--primary-color);color:var(--text-inverse)}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background-color:var(--bg-overlay);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-danger{background-color:var(--danger-color);color:var(--text-inverse)}.btn-danger:hover:not(:disabled){background-color:var(--danger-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-icon{padding:.5rem;border-radius:50%;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center}.btn-icon:hover:not(:disabled){background-color:var(--bg-tertiary);transform:none}.btn-icon svg{flex-shrink:0}.content-container{background-color:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);flex:1;display:flex;flex-direction:column;overflow:hidden}.content-area{position:relative;flex:1;min-height:400px}.editor-wrapper,.output-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;transition:opacity .3s,transform .3s;display:flex;flex-direction:column}.output-wrapper{opacity:0;transform:translateX(20px);pointer-events:none;z-index:1}.output-wrapper.active{opacity:1;transform:translateX(0);pointer-events:auto}.editor-wrapper.hidden{opacity:0;transform:translateX(-20px);pointer-events:none}.output-wrapper.show{display:flex!important;opacity:1!important;transform:translateX(0)!important;pointer-events:auto!important}.editor-wrapper.hide{display:none!important}.json-editor{flex:1;width:100%;padding:1rem;border:none;font-family:var(--font-mono);font-size:14px;line-height:1.5;resize:none;outline:0;background-color:transparent;color:var(--text-primary)}.json-editor::placeholder{color:var(--text-muted)}.json-output{flex:1;padding:1rem;font-family:var(--font-mono);font-size:14px;line-height:1.5;overflow:auto;white-space:pre-wrap;word-break:break-all;background-color:transparent;color:var(--text-primary);margin:0}.info-panel{padding:.5rem 1rem;background-color:var(--bg-tertiary);display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:var(--text-secondary);border-top:1px solid var(--border-color)}.line-info{display:flex;gap:.5rem}.mode-indicator{font-weight:500;text-transform:uppercase;font-size:.75rem;color:var(--primary-color)}.status-bar{background-color:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border-color);min-height:var(--status-bar-height)}.status-info{display:flex;gap:1rem;align-items:center;font-size:.875rem}.status-indicator{padding:.25rem .75rem;border-radius:16px;font-size:.8rem;font-weight:500;background-color:var(--bg-tertiary);color:var(--text-secondary)}.status-indicator.valid{background-color:rgba(76,175,80,.1);color:var(--success-color)}.status-indicator.invalid{background-color:rgba(244,67,54,.1);color:var(--error-color)}.size-info,.time-info{color:var(--text-secondary)}.settings-panel{position:fixed;top:0;right:0;height:100vh;width:320px;background-color:var(--bg-primary);box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .3s;z-index:1000;border-left:1px solid var(--border-color)}.settings-panel.open{transform:translateX(0)}.settings-content{height:100%;display:flex;flex-direction:column}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color)}.settings-header h2{font-size:1.25rem;font-weight:600}.settings-body{flex:1;padding:1.5rem;overflow-y:auto}.setting-group{margin-bottom:1.5rem}.setting-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.setting-control{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background-color:var(--bg-secondary);color:var(--text-primary);font-family:inherit;font-size:.875rem}.setting-control:focus{outline:2px solid var(--primary-color);outline-offset:2px;border-color:var(--primary-color)}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;position:relative}.checkbox-label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{height:20px;width:20px;background-color:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-sm);transition:var(--transition-fast);flex-shrink:0;position:relative}.checkbox-label:hover input~.checkmark{border-color:var(--primary-color)}.checkbox-label input:checked~.checkmark{background-color:var(--primary-color);border-color:var(--primary-color)}.checkmark:after{content:"";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-label input:checked~.checkmark:after{display:block}.file-drop-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:2000;backdrop-filter:blur(2px)}.drop-message{background-color:var(--bg-primary);padding:3rem;border-radius:var(--border-radius);text-align:center;box-shadow:var(--shadow-lg);border:2px dashed var(--border-color);min-width:300px}.drop-message svg{color:var(--primary-color);margin-bottom:1rem}.drop-message p{margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.drop-hint{font-size:.875rem;color:var(--text-secondary)}#file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.json-key{color:#06c;font-weight:500}.json-string{color:green}.json-number{color:#f60}.json-boolean{color:#90c;font-weight:500}.json-null{color:#999;font-style:italic}[data-theme=dark] .json-key{color:#66b3ff}[data-theme=dark] .json-string{color:#6f6}[data-theme=dark] .json-number{color:#fc6}[data-theme=dark] .json-boolean{color:#c9f}[data-theme=dark] .json-null{color:#ccc}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading{animation:1.5s ease-in-out infinite pulse}.error-highlight{background-color:rgba(244,67,54,.1);border-left:3px solid var(--error-color);padding-left:.5rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.site-credit{background-color:var(--bg-primary);color:var(--text-secondary);border-top:1px solid var(--border-color);box-shadow:var(--shadow-sm);font-size:.875rem;padding:.75rem 1rem;max-width:1200px;width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;text-align:initial}@media (max-width:768px){.site-credit{font-size:.8rem;padding:.5rem .75rem}}.site-credit .credit{color:var(--text-secondary);font-weight:500}.site-credit .copyright{color:var(--text-muted);font-size:.8rem;margin-top:.25rem;order:1;margin-right:auto;text-align:left}.site-credit .credit{order:2;margin-left:auto;text-align:right}@media (max-width:600px){.site-credit{flex-direction:column;align-items:stretch}.site-credit .copyright,.site-credit .credit{order:initial;margin:0;text-align:left}}