.ide-container{display:flex;width:100vw;height:100vh;background:#1e1e1e;color:#d4d4d4;font-family:Inter,system-ui,sans-serif;overflow:hidden}.sidebar{width:240px;background:#252526;border-right:1px solid #333;display:flex;flex-direction:column}.logo{padding:20px;display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;letter-spacing:.5px}.file-list{flex:1;padding:10px 0}.file-item{width:100%;padding:8px 20px;display:flex;align-items:center;gap:10px;background:transparent;border:none;color:#969696;cursor:pointer;transition:all .2s;position:relative}.file-item:hover{background:#2a2d2e;color:#fff}.file-item.active{background:#37373d;color:#fff}.file-name{font-size:13px;flex:1;text-align:left}.unsaved-dot{width:6px;height:6px;background:#4ade80;border-radius:50%}.add-btn{margin:15px;padding:8px;background:#333;border:1px dashed #555;color:#aaa;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer}.editor-area{flex:1;display:flex;flex-direction:column;position:relative}.editor-header{height:40px;background:#252526;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #333}.breadcrumb{font-size:12px;display:flex;gap:5px}.path{color:#666}.sync-badge{display:flex;align-items:center;gap:6px;font-size:11px;color:#4ade80;background:#4ade801a;padding:2px 8px;border-radius:10px}.code-wrapper{flex:1;display:flex;background:#1e1e1e;padding-top:10px}.line-numbers{width:45px;text-align:right;padding-right:12px;color:#858585;font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.6;-webkit-user-select:none;user-select:none}.code-input{flex:1;background:transparent;border:none;color:#d4d4d4;font-family:JetBrains Mono,monospace;font-size:14px;line-height:1.6;resize:none;outline:none;padding:0}.status-bar{height:25px;background:#007acc;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:11px}.status-left,.status-right{display:flex;align-items:center;gap:12px}.lang-tag{background:#fff3;padding:0 6px;border-radius:2px}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}