*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0f1117;--bg-secondary: #1a1d27;--bg-tertiary: #242736;--bg-hover: #2d3142;--border: #2d3142;--border-focus: #4f6df5;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-muted: #64748b;--accent: #4f6df5;--accent-hover: #6381f7;--success: #22c55e;--error: #ef4444;--warning: #f59e0b;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root.light{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--bg-tertiary: #f1f5f9;--bg-hover: #e2e8f0;--border: #cbd5e1;--border-focus: #4f6df5;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--accent: #4f6df5;--accent-hover: #3b5be5;--success: #16a34a;--error: #dc2626;--warning: #d97706}:root.light ::selection{background:#4f6df533}:root.light ::-webkit-scrollbar-track{background:#f1f5f9}:root.light ::-webkit-scrollbar-thumb{background:#cbd5e1}:root.light ::-webkit-scrollbar-thumb:hover{background:#94a3b8}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:var(--space-md) var(--space-xl)}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--space-md)}.logo-icon{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--accent)}.logo h1{font-size:1.1rem;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.header-actions{display:flex;align-items:center;gap:var(--space-sm)}.header-btn{background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:var(--space-sm);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.header-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.main{flex:1;max-width:1400px;margin:0 auto;width:100%;padding:var(--space-lg) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap}.toolbar-center{display:flex;align-items:center;gap:var(--space-md)}.format-selector{display:flex;align-items:center;gap:var(--space-sm)}.format-selector-label{font-size:.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.format-buttons{display:flex;gap:2px;background:var(--bg-tertiary);border-radius:var(--radius-md);padding:2px}.format-btn{padding:var(--space-xs) var(--space-md);border:none;background:transparent;color:var(--text-secondary);font-size:.85rem;font-weight:500;font-family:var(--font-mono);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.format-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.format-btn.active{background:var(--accent);color:#fff}.auto-detected{font-size:.75rem;color:var(--text-muted);font-style:italic}.indent-selector{display:flex;align-items:center;gap:var(--space-sm);font-size:.85rem;color:var(--text-secondary)}.indent-selector label{font-weight:500}.indent-selector select{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-size:.85rem;font-family:var(--font-sans);cursor:pointer}.indent-selector select:focus{outline:none;border-color:var(--border-focus)}.input-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}.input-toolbar-left{display:flex;align-items:center;gap:var(--space-sm)}.input-toolbar-right{display:flex;align-items:center;gap:var(--space-md)}.small-btn{padding:var(--space-xs) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);font-size:.8rem;font-weight:500;font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.small-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.size-reduction{font-size:.8rem;color:var(--success);font-weight:500}.action-buttons{display:flex;gap:var(--space-sm);flex-wrap:wrap}.action-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);font-size:.85rem;font-weight:500;font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;transition:all .15s}.action-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.action-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.action-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.action-btn svg{flex-shrink:0}.editors{flex:1;display:flex;gap:var(--space-md);min-height:400px}.editor-container{flex:1;display:flex;flex-direction:column;position:relative}.editor-container.drag-over:after{content:"Drop file here";position:absolute;inset:0;background:#4f6df51a;border:2px dashed var(--accent);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:500;color:var(--accent);z-index:10;pointer-events:none}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-md) var(--radius-md) 0 0}.editor-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.editor-stats{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}.editor-textarea{flex:1;min-height:300px;padding:var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:0 0 var(--radius-md) var(--radius-md);color:var(--text-primary);font-family:var(--font-mono);font-size:.85rem;line-height:1.6;resize:vertical;outline:none;transition:border-color .15s;tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto}.editor-textarea:focus{border-color:var(--border-focus)}.editor-textarea.has-error{border-color:var(--error)}.editor-textarea::placeholder{color:var(--text-muted)}.editor-textarea[readonly]{cursor:default}.editor-error{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);color:var(--error);font-size:.8rem;line-height:1.4}.editor-error svg{flex-shrink:0;margin-top:1px}.editor-error strong{font-weight:600}.drop-hint{position:absolute;bottom:var(--space-lg);left:50%;transform:translate(-50%);color:var(--text-muted);font-size:.8rem;pointer-events:none}.editor-divider{width:1px;background:var(--border);flex-shrink:0}.output-panel{flex:1;display:flex;flex-direction:column;gap:var(--space-sm)}.output-actions{display:flex;gap:var(--space-sm)}.output-action-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);font-size:.8rem;font-weight:500;font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.output-action-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.output-action-btn:disabled{opacity:.4;cursor:not-allowed}.validation-status{display:flex;align-items:center;gap:var(--space-xs);font-size:.8rem;font-weight:500}.validation-status.valid{color:var(--success)}.validation-status.invalid{color:var(--error)}.validation-status svg{flex-shrink:0}.modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-xl)}.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:420px;width:100%;box-shadow:0 20px 60px #0006}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xl)}.modal-header h2{font-size:1.1rem;font-weight:600}.modal-close{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:var(--space-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .15s}.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.shortcuts-list{display:flex;flex-direction:column;gap:var(--space-md)}.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}.shortcut-keys{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px var(--space-sm);font-family:var(--font-mono);font-size:.8rem;color:var(--text-primary);white-space:nowrap}.shortcut-action{font-size:.85rem;color:var(--text-secondary)}.footer{padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--border);text-align:center}.footer-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-bottom:12px}.footer-tools a{font-size:.75rem;color:var(--text-muted);text-decoration:none;transition:color .2s}.footer-tools a:hover{color:var(--accent)}.footer p{font-size:.8rem;color:var(--text-muted)}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.8rem;font-family:var(--font-sans);padding:0;text-decoration:none}.link-btn:hover{text-decoration:underline}@media(max-width:768px){.header{padding:var(--space-sm) var(--space-md)}.logo h1{font-size:.9rem}.main{padding:var(--space-md)}.toolbar{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.format-selector{justify-content:space-between}.toolbar-center{justify-content:center}.editors{flex-direction:column;min-height:auto}.editor-textarea{min-height:200px}.editor-divider{width:100%;height:1px}.action-buttons{justify-content:center}.input-toolbar{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.input-toolbar-left,.input-toolbar-right{justify-content:center}.footer p{font-size:.75rem}}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}::selection{background:#4f6df54d}