:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#21262d;--bg-quaternary:#30363d;--text-primary:#f0f6fc;--text-secondary:#8b949e;--text-muted:#656d76;--accent-primary:#238636;--accent-secondary:#2ea043;--accent-hover:#26a641;--border-primary:#30363d;--border-secondary:#21262d;--success:#238636;--warning:#d29922;--error:#da3633;--info:#1f6feb;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.4);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.5);--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--font-mono:'JetBrains Mono','Fira Code','Monaco','Cascadia Code',monospace;--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--transition-fast:0.15s ease;--transition-normal:0.25s ease;--transition-slow:0.35s ease}[data-theme=light]{--bg-primary:#ffffff;--bg-secondary:#f6f8fa;--bg-tertiary:#f1f3f4;--bg-quaternary:#e1e4e8;--text-primary:#24292f;--text-secondary:#656d76;--text-muted:#8b949e;--border-primary:#d0d7de;--border-secondary:#e1e4e8;--shadow-sm:0 1px 2px 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)}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5}.loading-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity var(--transition-slow),visibility var(--transition-slow)}.loading-screen.hidden{opacity:0;visibility:hidden}.loading-content{text-align:center}.loading-logo{font-size:4rem;margin-bottom:1rem;animation:bounce 2s infinite}.loading-text{font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem}.loading-bar{width:200px;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.loading-progress{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:2px;animation:loading 2s ease-in-out infinite}@keyframes bounce{0%,100%,20%,50%,80%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes loading{0%{width:0%}50%{width:70%}100%{width:100%}}.app-container{display:flex;flex-direction:column;height:100vh;opacity:0;transition:opacity var(--transition-slow)}.app-container.loaded{opacity:1}.header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);box-shadow:var(--shadow-sm);z-index:100;min-height:60px}.header-left{display:flex;align-items:center;gap:1.5rem;flex:1}.logo-section{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:1.5rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-text{display:flex;flex-direction:column}.logo-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);line-height:1.2}.logo-subtitle{font-size:.75rem;color:var(--text-secondary);line-height:1}.file-tabs{display:flex;align-items:center;gap:.25rem}.tab{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);position:relative;max-width:200px}.tab:hover{background:var(--bg-quaternary)}.tab.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.tab-icon{font-size:.875rem;flex-shrink:0}.tab-name{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-close{background:0 0;border:none;color:inherit;cursor:pointer;padding:.125rem;border-radius:var(--radius-sm);opacity:.7;transition:all var(--transition-fast);flex-shrink:0}.tab-close:hover{opacity:1;background:rgba(255,255,255,.1)}.add-tab-btn{background:var(--bg-tertiary);border:1px solid var(--border-primary);color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:1rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.add-tab-btn:hover{background:var(--bg-quaternary);color:var(--text-primary)}.header-center{flex:1;display:flex;justify-content:center}.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-secondary)}.breadcrumb-item{padding:.25rem .5rem;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.breadcrumb-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.breadcrumb-separator{opacity:.5}.header-right{flex:1;display:flex;justify-content:flex-end}.header-actions{display:flex;align-items:center;gap:.75rem}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid transparent;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap;position:relative;overflow:hidden}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-primary)}.btn-secondary:hover:not(:disabled){background:var(--bg-quaternary);border-color:var(--border-secondary)}.btn-icon{padding:.5rem;background:0 0;border:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:36px;height:36px}.btn-icon:hover{background:var(--bg-tertiary);color:var(--text-primary)}.theme-icon{transition:all var(--transition-fast)}[data-theme=light] .theme-icon.moon{display:none}:root .theme-icon.sun,[data-theme=dark] .theme-icon.sun{display:none}.main-content{display:flex;flex:1;overflow:hidden}.sidebar{width:250px;background:var(--bg-secondary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column;transition:all var(--transition-normal)}.sidebar.collapsed{width:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-primary)}.sidebar-header h3{font-size:.875rem;font-weight:600;color:var(--text-primary)}.sidebar-content{flex:1;overflow-y:auto}.file-tree{padding:.5rem}.file-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:.875rem}.file-item:hover{background:var(--bg-tertiary)}.file-item.active{background:var(--accent-primary);color:#fff}.file-icon{font-size:.875rem;flex-shrink:0}.file-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor-section{flex:1;display:flex;flex-direction:column;background:var(--bg-primary)}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}.editor-info{display:flex;align-items:center;gap:1rem}.language-badge{background:var(--accent-primary);color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.editor-stats{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary)}.stat-separator{opacity:.5}.editor-actions{display:flex;gap:.25rem}.editor-container{flex:1;display:flex;position:relative;overflow:hidden}.editor-gutter{background:var(--bg-secondary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column}.line-numbers{padding:1rem .75rem;font-family:var(--font-mono);font-size:.875rem;line-height:1.5;color:var(--text-muted);text-align:right;user-select:none;min-width:60px;background:var(--bg-secondary)}.editor-main{flex:1;position:relative}.code-editor{width:100%;height:100%;padding:1rem;background:0 0;border:none;outline:0;font-family:var(--font-mono);font-size:.875rem;line-height:1.5;color:var(--text-primary);resize:none;tab-size:4;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto}.code-editor::placeholder{color:var(--text-muted);font-style:italic}.output-panel{width:400px;background:var(--bg-secondary);border-left:1px solid var(--border-primary);display:flex;flex-direction:column;transition:all var(--transition-normal)}.output-panel.collapsed{width:0;overflow:hidden}.output-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-primary);background:var(--bg-tertiary)}.output-tabs{display:flex;gap:.25rem}.output-tab{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:0 0;border:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-md);font-size:.875rem;transition:all var(--transition-fast);position:relative}.output-tab:hover{background:var(--bg-quaternary);color:var(--text-primary)}.output-tab.active{background:var(--accent-primary);color:#fff}.tab-badge{background:rgba(255,255,255,.2);color:inherit;padding:.125rem .375rem;border-radius:10px;font-size:.625rem;font-weight:600;min-width:18px;text-align:center}.output-actions{display:flex;gap:.25rem}.output-content{flex:1;position:relative;overflow:hidden}.output-section{position:absolute;top:0;left:0;right:0;bottom:0;padding:1rem;font-family:var(--font-mono);font-size:.875rem;line-height:1.4;overflow-y:auto;display:none}.output-section.active{display:block}.output-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-secondary)}.placeholder-icon{font-size:2rem;margin-bottom:1rem;opacity:.7}.placeholder-text{font-size:1rem;margin-bottom:.5rem;color:var(--text-primary)}.placeholder-hint{font-size:.875rem;opacity:.7}.output-line{margin-bottom:.25rem;padding:.125rem 0;white-space:pre-wrap;word-wrap:break-word}.output-line.success{color:var(--success)}.output-line.error{color:var(--error)}.output-line.warning{color:var(--warning)}.output-line.info{color:var(--info)}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--bg-tertiary);border-top:1px solid var(--border-primary);font-size:.75rem;color:var(--text-secondary);min-height:32px}.status-left,.status-right{display:flex;align-items:center;gap:1rem}.status-item{display:flex;align-items:center;gap:.375rem}.status-indicator{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.status-indicator.ready{background:var(--success)}.status-indicator.running{background:var(--warning);animation:pulse 1.5s ease-in-out infinite}.status-indicator.error{background:var(--error)}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}.modal-overlay.active{display:flex}.modal{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:90%;max-width:500px;max-height:80vh;overflow:hidden;border:1px solid var(--border-primary);animation:modalSlideIn var(--transition-normal)}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--border-primary);background:var(--bg-tertiary)}.modal-header h3{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.modal-close{background:0 0;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;border-radius:var(--radius-md);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.modal-close:hover{background:var(--bg-quaternary);color:var(--text-primary)}.modal-body{padding:1.5rem}.share-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem}.share-option{display:flex;align-items:center;gap:.75rem;padding:1rem;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:left}.share-option:hover{background:var(--bg-quaternary);border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.share-icon{font-size:1.5rem;flex-shrink:0}.share-text{flex:1}.share-title{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.share-desc{font-size:.875rem;color:var(--text-secondary)}.share-link-section{margin-top:1.5rem}.share-link-section label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.input-group{display:flex;gap:.5rem}.input-group input{flex:1;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-mono);font-size:.875rem}.input-group input:focus{outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(35,134,54,.2)}.settings-section{margin-bottom:1.5rem}.settings-section h4{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-primary)}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border-secondary)}.setting-item:last-child{border-bottom:none}.setting-item label{font-weight:500;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.setting-item select{padding:.5rem;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem}.setting-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary)}.toast{position:fixed;top:1rem;right:1rem;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:1rem;z-index:1001;transform:translateX(100%);transition:transform var(--transition-normal);max-width:300px}.toast.show{transform:translateX(0)}.toast-content{display:flex;align-items:center;gap:.75rem}.toast-icon{font-size:1.25rem;flex-shrink:0}.toast-message{flex:1;font-size:.875rem;color:var(--text-primary)}.toast.success .toast-icon::before{content:'✅'}.toast.error .toast-icon::before{content:'❌'}.toast.warning .toast-icon::before{content:'⚠️'}.toast.info .toast-icon::before{content:'ℹ️'}@media (max-width:1024px){.output-panel{width:300px}.sidebar{width:200px}}@media (max-width:768px){.header{padding:.5rem}.header-left{gap:1rem}.file-tabs{display:none}.breadcrumb{display:none}.main-content{flex-direction:column}.sidebar{width:100%;height:0;border-right:none;border-bottom:1px solid var(--border-primary);order:2}.sidebar.expanded{height:200px}.editor-section{order:1}.output-panel{width:100%;height:250px;border-left:none;border-top:1px solid var(--border-primary);order:3}.modal{width:95%;margin:1rem}.share-options{grid-template-columns:1fr}}@media (max-width:480px){.header-actions{gap:.5rem}.btn{padding:.5rem;font-size:.75rem}.btn span{display:none}.logo-subtitle{display:none}}.token.keyword{color:#ff7b72;font-weight:600}.token.string{color:#a5d6ff}.token.comment{color:#8b949e;font-style:italic}.token.number{color:#79c0ff}.token.operator{color:#ff7b72}.token.punctuation{color:#c9d1d9}.token.class-name{color:#ffa657}.token.function{color:#d2a8ff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:rgba(35,134,54,.3)}.code-editor:focus{outline:0}.editor-section.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:var(--bg-primary)}.editor-section.fullscreen .editor-container{height:calc(100vh - 60px)}.fade-in{animation:fadeIn var(--transition-normal)}.slide-in{animation:slideIn var(--transition-normal)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.btn-primary.running{background:var(--warning);border-color:var(--warning)}.btn-primary.running::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-contrast:high){:root{--border-primary:#ffffff;--border-secondary:#ffffff;--text-secondary:#ffffff}}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}