@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.formatter-container{height:100vh;display:flex;flex-direction:column;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);flex-shrink:0}.header-left,.header-right{display:flex;align-items:center;gap:12px}.logo{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:18px;font-weight:600}.logo-bracket{color:var(--accent-primary)}.logo-text{color:var(--text-primary)}.header-center{display:flex;align-items:center}.language-tabs{display:flex;gap:4px;padding:4px;background:var(--bg-tertiary);border-radius:var(--radius-md)}.lang-tab{padding:6px 14px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.lang-tab:hover{color:var(--text-primary);background:var(--hover-overlay)}.lang-tab.active{color:var(--text-primary);background:var(--bg-elevated);box-shadow:var(--shadow-sm)}.view-toggle{display:flex;gap:2px;padding:3px;background:var(--bg-tertiary);border-radius:var(--radius-sm)}.view-btn{display:flex;align-items:center;justify-content:center;padding:6px 8px;background:transparent;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.view-btn:hover{color:var(--text-primary)}.view-btn.active{color:var(--text-primary);background:var(--bg-elevated)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover:not(:disabled){color:var(--text-primary);background:var(--hover-overlay);border-color:var(--border-primary)}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn.copied{color:var(--success)}.main-content{display:flex;flex:1;overflow:hidden;min-height:0}.sidebar{width:280px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-primary);transition:transform var(--transition-normal),width var(--transition-normal);overflow:hidden;flex-shrink:0}.sidebar:not(.open){width:0;transform:translate(-100%)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-primary)}.sidebar-header h2{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-primary)}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.sidebar-toggle:hover{color:var(--text-primary);background:var(--hover-overlay)}.sidebar-content{flex:1;overflow-y:auto;padding:20px}.setting-section{margin-bottom:24px}.setting-section:last-child{margin-bottom:0}.setting-section h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:12px}.radio-group{display:flex;flex-direction:column;gap:6px}.radio-item{display:flex;align-items:center;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.radio-item:hover{border-color:var(--border-accent)}.radio-item.active{border-color:var(--accent-primary);background:#58a6ff14}.radio-item input{display:none}.radio-label{font-size:13px;font-weight:500;color:var(--text-primary)}.setting-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.setting-row label{font-size:12px;color:var(--text-secondary);font-weight:500}.setting-row input[type=number],.setting-row select{padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;outline:none;transition:border-color var(--transition-fast)}.setting-row input[type=number]:focus,.setting-row select:focus{border-color:var(--accent-primary)}.checkbox-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);margin-bottom:6px}.checkbox-item:hover{border-color:var(--border-accent)}.checkbox-item.checked{border-color:var(--accent-primary);background:#58a6ff14}.checkbox-item input{width:16px;height:16px;accent-color:var(--accent-primary);cursor:pointer}.checkbox-item span{font-size:13px;font-weight:500;color:var(--text-primary)}.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border-primary)}.format-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;background:var(--accent-gradient);border:none;border-radius:var(--radius-md);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px #58a6ff40}.format-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #58a6ff59}.format-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.shortcut{text-align:center;font-size:11px;color:var(--text-muted);margin-top:10px}.sidebar-open-btn{position:fixed;left:16px;top:72px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;z-index:100;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.sidebar-open-btn:hover{color:var(--text-primary);border-color:var(--accent-primary)}.editor-area{flex:1;display:flex;overflow:hidden;min-width:0;position:relative}.editor-area.split{gap:1px;background:var(--border-primary)}.editor-area.single .output-panel{display:none}.editor-panel{flex:1;display:flex;flex-direction:column;background:var(--bg-primary);overflow:hidden;min-width:0}.panel-header{display:flex;align-items:center;padding:8px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);gap:12px;flex-shrink:0}.panel-title{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.panel-stats{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.panel-actions{display:flex;gap:4px;margin-left:auto}.panel-actions .icon-btn{width:32px;height:32px}.upload-btn{position:relative;cursor:pointer}.upload-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.editor-wrapper{flex:1;display:flex;overflow:hidden;position:relative;min-height:0}.editor-wrapper.dragging{background:#58a6ff0d}.line-numbers{display:flex;flex-direction:column;padding:16px 0;background:var(--bg-secondary);border-right:1px solid var(--border-primary);-webkit-user-select:none;user-select:none;flex-shrink:0;min-width:50px;overflow:hidden}.line-number{padding:0 12px;font-family:var(--font-mono);font-size:13px;line-height:1.6;height:20.8px;color:var(--line-number);text-align:right;flex-shrink:0}.code-textarea{flex:1;padding:16px;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:13px;line-height:1.6;resize:none;outline:none;tab-size:2;min-width:0;overflow:auto;white-space:pre}.code-textarea::placeholder{color:var(--text-muted)}.drop-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#58a6ff1a;border:2px dashed var(--accent-primary);border-radius:var(--radius-md);color:var(--accent-primary);font-size:14px;font-weight:500;z-index:10}.code-scroll-container{flex:1;overflow:auto;min-width:0}.code-output{margin:0;padding:16px;background:transparent;min-height:100%}.code-output code{font-family:var(--font-mono);font-size:13px;line-height:1.6;white-space:pre;display:block;background:transparent}.output-placeholder{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;color:var(--text-muted);font-size:14px}.error-toast{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--error-bg);border:1px solid var(--error);border-radius:var(--radius-md);color:var(--error);font-size:13px;z-index:100;box-shadow:var(--shadow-lg);animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.error-toast button{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--error);cursor:pointer;padding:4px;margin-left:4px;border-radius:4px;transition:background var(--transition-fast)}.error-toast button:hover{background:#f8514933}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:5px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--text-muted);border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-corner{background:transparent}@media(max-width:1024px){.header-center{display:none}.sidebar{position:fixed;left:0;top:56px;bottom:0;z-index:200;box-shadow:var(--shadow-lg)}.editor-area.split{flex-direction:column}}@media(max-width:768px){.header{padding:0 12px;height:52px}.logo-text,.view-toggle{display:none}.sidebar{width:100%}.line-numbers{min-width:40px}.line-number{padding:0 8px;font-size:11px;height:17.6px;line-height:1.6}.code-textarea,.code-output code{font-size:12px}.panel-stats{display:none}}@media(max-width:480px){.panel-header{padding:6px 12px}.code-textarea,.code-output{padding:12px}}pre[class*=language-],code[class*=language-]{background:transparent!important}.lang-toggle{font-weight:600}.lang-code{font-size:12px;letter-spacing:.5px}.language-tabs{display:flex;gap:4px;padding:4px;background:var(--bg-tertiary);border-radius:var(--radius-md);overflow-x:auto;max-width:100%}.language-tabs::-webkit-scrollbar{height:0}@media(max-width:1200px){.header-center{flex:1;overflow-x:auto;margin:0 12px}.language-tabs{justify-content:flex-start}}@media(max-width:768px){.header-center{position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--border-primary);padding:8px;z-index:100;margin:0}.language-tabs{justify-content:center;flex-wrap:wrap}.lang-tab{padding:8px 12px;font-size:12px}.formatter-container{padding-bottom:60px}.sidebar{position:fixed;top:52px;bottom:60px;width:100%;z-index:200}}.detected-language{font-size:12px;color:var(--text-secondary);margin-left:8px;font-weight:400}:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--transition-fast: .15s ease;--transition-normal: .25s ease}.app.dark{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--bg-elevated: #1c2128;--border-primary: #30363d;--border-secondary: #21262d;--border-accent: #58a6ff;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #484f58;--accent-primary: #58a6ff;--accent-secondary: #1f6feb;--accent-gradient: linear-gradient(135deg, #58a6ff 0%, #a371f7 100%);--success: #3fb950;--warning: #d29922;--error: #f85149;--error-bg: rgba(248, 81, 73, .1);--hover-overlay: rgba(255, 255, 255, .05);--active-overlay: rgba(255, 255, 255, .08);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--code-bg: #0d1117;--line-number: #484f58;--selection: rgba(88, 166, 255, .2)}.app.light{--bg-primary: #ffffff;--bg-secondary: #f6f8fa;--bg-tertiary: #eaeef2;--bg-elevated: #ffffff;--border-primary: #d0d7de;--border-secondary: #e6e8eb;--border-accent: #0969da;--text-primary: #1f2328;--text-secondary: #656d76;--text-muted: #8c959f;--accent-primary: #0969da;--accent-secondary: #0550ae;--accent-gradient: linear-gradient(135deg, #0969da 0%, #8250df 100%);--success: #1a7f37;--warning: #9a6700;--error: #cf222e;--error-bg: rgba(207, 34, 46, .08);--hover-overlay: rgba(0, 0, 0, .04);--active-overlay: rgba(0, 0, 0, .06);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--code-bg: #f6f8fa;--line-number: #8c959f;--selection: rgba(9, 105, 218, .15)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}.app{height:100vh;overflow:hidden;background:var(--bg-primary);color:var(--text-primary);transition:background var(--transition-normal),color var(--transition-normal)}::selection{background:var(--selection)}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}