body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;margin:0;overflow:hidden;display:flex;height:100vh;background-color:#1e1e1e;color:#ccc}#app-container{display:flex;width:100%;height:100%}#sidebar{width:250px;background-color:#252526;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;border-right:1px solid #333;position:relative}#load-example-project-btn,#download-project-btn{padding:8px 12px;margin-bottom:10px;background-color:#007acc;color:#fff;border:none;border-radius:3px;cursor:pointer;width:100%}#load-example-project-btn:hover,#download-project-btn:hover{background-color:#0060a0}#file-explorer-tree{flex-grow:1;overflow-y:auto;user-select:none}#file-explorer-tree ul{list-style:none;padding:0;margin:0}#file-explorer-tree li{padding:4px 0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#file-explorer-tree li:hover{background-color:#333}.folder-name{font-weight:700;color:#999}.file-name{margin-left:10px}.file-explorer-tree .context-item-active{background-color:#007acc!important}#file-actions{display:flex;gap:5px;margin-top:10px}#file-actions button{flex-grow:1;padding:8px;background-color:#3c3c3c;color:#ccc;border:1px solid #555;border-radius:3px;cursor:pointer}#file-actions button:hover{background-color:#505050}#main-panel{flex-grow:1;display:flex;flex-direction:column}#tabs-container{display:flex;background-color:#2d2d2d;border-bottom:1px solid #333;overflow-x:auto;white-space:nowrap}.tab{padding:8px 15px;cursor:pointer;border-right:1px solid #333;color:#999;position:relative;user-select:none;flex-shrink:0}.tab.active{background-color:#1e1e1e;color:#fff}.tab .close-tab{margin-left:10px;font-weight:700;color:#ccc}.tab .close-tab:hover{color:#fff}#editor-and-preview{display:flex;flex-grow:1;overflow:hidden}#editor-wrapper{flex:1}#preview-panel{flex:1;background-color:#fff;border-left:1px solid #333;overflow:auto}#live-preview{width:100%;height:100%;border:none}.monaco-editor .view-lines{font-family:'Cascadia Code','Fira Code',monospace!important}#context-menu{display:none;position:absolute;background-color:#252526;border:1px solid #333;border-radius:3px;box-shadow:0 2px 5px rgb(0 0 0 / .5);z-index:1000;padding:5px 0}#context-menu ul{list-style:none;padding:0;margin:0}#context-menu li{padding:8px 15px;cursor:pointer;color:#ccc;font-size:13px}#context-menu li:hover{background-color:#007acc;color:#fff}#context-menu li.separator{height:1px;background-color:#333;margin:5px 0;padding:0}
::-webkit-scrollbar {
    width: 12px; 
    height: 12px; 
    background-color: red; 
    border-radius: 6px; 
  }
  
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
    background-color: #000000; 
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #ff6600; 
    border-radius: 6px; 
    border: 2px solid #f5f5f5; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #fa0000;
  }
  
  ::-webkit-scrollbar-corner {
    background-color: #000000; 
  }
  
  ::-webkit-resizer {
    background-color: #850000;
  }
  
  .custom-scrollbar-container {
    width: 300px;
    height: 200px;
    overflow: auto; 
    border: 1px solid #ddd;
    padding: 10px;
    margin: 20px;
    resize: both; 
  }
  
  .content {
    height: 400px; 
    width: 400px; 
    background-color: #000000;
    padding: 15px;
    box-sizing: border-box;
  }