: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}.site-header{background-color:var(--bg-primary);box-shadow:var(--shadow-sm);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.75rem}.logo img{border-radius:var(--border-radius-sm)}.logo-link{text-decoration:none;color:var(--text-primary);font-weight:600;font-size:1.25rem;display:flex;align-items:center;gap:.75rem}.logo-link:focus,.logo-link:hover{text-decoration:none;color:var(--text-primary)}.main-nav{display:flex}.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nav-link{display:block;padding:.75rem 1rem;color:var(--text-secondary);text-decoration:none;border-radius:var(--border-radius-sm);transition:var(--transition-fast);font-weight:500}.nav-link.active,.nav-link:hover{color:var(--primary-color);background-color:var(--bg-secondary)}.mobile-menu-toggle{display:none;flex-direction:column;background:0 0;border:none;cursor:pointer;padding:.5rem}.mobile-menu-toggle span{width:25px;height:3px;background-color:var(--text-primary);margin:3px 0;transition:var(--transition-fast)}.primary-tool{background-color:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);margin:0 0 2rem}.hero-section{max-width:800px;margin:0 auto 2rem;padding:2rem;text-align:center;background-color:var(--bg-secondary);border-radius:var(--border-radius)}.hero-section h1{font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:1rem;line-height:1.2}.hero-description{font-size:1rem;line-height:1.6;color:var(--text-primary);margin-bottom:0}.content-section{max-width:800px;margin:0 auto 3rem;padding:2rem;background-color:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.content-section h2{font-size:1.875rem;font-weight:600;color:var(--text-primary);margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--primary-color)}.content-section h3{font-size:1.5rem;font-weight:500;color:var(--text-primary);margin:1.5rem 0 .75rem}.content-section p{margin-bottom:1.5rem;line-height:1.7;color:var(--text-primary)}.content-section ul{margin:1rem 0;padding-left:2rem}.content-section li{margin-bottom:.75rem;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.feature-item{padding:1.5rem;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-light)}.feature-item h4{margin:0 0 .5rem;color:var(--primary-color);font-size:1.125rem;font-weight:600}.feature-item p{margin:0;color:var(--text-secondary);font-size:.875rem}.app-main{flex:1;display:flex;flex-direction:column;max-width:1200px;width:100%;margin:0 auto;padding:1rem;gap:1rem}.tool-section{background-color:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);margin:0}.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-footer{background-color:var(--bg-primary);border-top:1px solid var(--border-color);margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;padding:3rem 1rem 1.5rem}.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}.footer-column h3{color:var(--text-primary);font-size:1.125rem;margin-bottom:1rem;font-weight:600}.footer-column ul{list-style:none;padding:0;margin:0}.footer-column li{margin-bottom:.75rem}.footer-column a{color:var(--text-secondary);text-decoration:none;transition:var(--transition-fast)}.footer-column a:hover{color:var(--primary-color)}.footer-bottom{padding-top:1.5rem;border-top:1px solid var(--border-light);text-align:center;color:var(--text-muted);font-size:.875rem}@media (max-width:768px){[data-theme=dark] .main-nav{box-shadow:-4px 0 12px rgba(0,0,0,.5)}.main-nav{position:fixed;top:var(--header-height);right:-50%;width:50%;height:calc(100vh - var(--header-height));background-color:var(--bg-primary);box-shadow:-4px 0 12px rgba(0,0,0,.15);transition:right .3s;z-index:1000}.main-nav.open{right:0}.nav-list{flex-direction:column;padding:0 .5rem .5rem;gap:0;width:100%;box-sizing:border-box;overflow-y:auto;max-height:100%}.nav-link{display:block;width:100%;padding:1rem 0;border-bottom:1px solid var(--border-light);text-align:left}.mobile-menu-toggle{display:flex}.hero-section{padding:1.5rem 1rem}.hero-section h1{font-size:1.5rem}.hero-description{font-size:.9rem}.content-section{padding:1.5rem 1rem;margin-bottom:2rem}.features-grid{grid-template-columns:1fr;gap:1rem}.footer-links{grid-template-columns:1fr;gap:1.5rem}.footer-content{padding:2rem 1rem 1rem}}@media (max-width:480px){.header-content{padding:.75rem}.logo{font-size:1.125rem}.hero-section h1{font-size:1.75rem}.hero-description{font-size:1rem}.content-section h2{font-size:1.5rem}.content-section h3{font-size:1.25rem}}