#dropZone {
            width: auto;
            padding: 40px;
            border: 2px dashed #8b5cf6;
            border-radius: 15px;
            text-align: center;
            color: #fff;
            font-size: 1.2rem;
            transition: 0.25s;
            background: rgba(255,255,255,0.03);
            cursor: pointer;
            position: relative;
            z-index: 10;
        }
        
        #dropZone.dragover {
            background: rgba(139, 92, 246, 0.2);
            border-color: #c084fc;
        }
        
        #fileupload {
            display: none;
        }
        
        #tabBar {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: thin;
        }
        
        .tab {
            padding: 6px 14px;
            background: #181818;
            color: #fff;
            cursor: pointer;
            font-size: 14px;
            overflow: hidden;
            border: 1px solid #2B2B2B;
            user-select: none;
            transition: 0.2s;
        }
        
        .tab:hover {
            background: #1F1F1F;
        }
        
        .tab.active {
            background: #1F1F1F;
            font-weight: bold;
            border: none;
        	border-top: 1px solid #0078D4;
        	border-left: 1px solid #2B2B2B;
        	border-right: 1px solid #2B2B2B;
        }
        
        #editorContainer {
        	flex-direction: column;
        }
        
        .save-btn {
            padding: 10px 16px;
            background: #181818; 
            color: #fff;
            font-size: 1rem;
            border: 1px solid var(--border-color);
            cursor: pointer; 
            align-items: center;
            justify-content: center;
        	transition: 0.3s;
        }
        
        .save-btn:hover {
            background: #1F1F1F;
            border-color: rgba(168, 85, 247, 0.3);
        }
        
        .border {
            display: flex;
            gap: 6px;
            padding: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .border2 {
            display: flex;
            gap: 6px;
            margin-bottom: 15px;
            border-top: 1px solid rgba(255,255,255,0.1);
            overflow-x: auto;
            white-space: nowrap;
        }
        
        #tabBar::-webkit-scrollbar,
        textarea::-webkit-scrollbar {
            width: 14px;
            height: 14px;
        }
         
        #tabBar::-webkit-scrollbar-track,
        textarea::-webkit-scrollbar-track {
            background: #1F1F1F;
        }
         
        #tabBar::-webkit-scrollbar-thumb,
        textarea::-webkit-scrollbar-thumb {
            background: #1F1F1F;
            border-radius: 10px;
            border: 4px solid transparent;
            background-clip: padding-box;
            transition: 0.3s ease;
        }
         
        #tabBar:hover::-webkit-scrollbar-thumb,
        textarea:hover::-webkit-scrollbar-thumb {
            background: #1F1F1F;
            background-clip: padding-box;
        }
         
        #tabBar::-webkit-scrollbar-thumb:hover,
        textarea::-webkit-scrollbar-thumb:hover {
            background: #1F1F1F;
            background-clip: padding-box;
        }
         
        #tabBar::-webkit-scrollbar-thumb:active,
        textarea::-webkit-scrollbar-thumb:active {
            background: #1F1F1F;
            background-clip: padding-box;
        }
         
        #tabBar::-webkit-scrollbar-corner,
        textarea::-webkit-scrollbar-corner {
            background: transparent;
        }
         
        #tabBar {
            scrollbar-width: thin;
            scrollbar-color: #1F1F1F #1F1F1F;
        }
        
        #tabBar:hover {
            scrollbar-color: #1F1F1F #1F1F1F;
        }
         
        #tabBar,
        textarea {
            scroll-behavior: smooth;
            scrollbar-width: thin;
        }

        .tab-close {
          margin-left: 5px;
          opacity: 0;
          pointer-events: none;
        }
        
        .tab-close:hover {
          opacity: 1.2;
          pointer-events: auto;
        }
        
        .tab:hover .tab-close,
        .tab.active .tab-close {
            opacity: 0.8;
            pointer-events: auto;
        }
        
        .tab.dragging {
          opacity: 0.5;
        }
        
        .tab-bar {
            background: #181818;
            border-bottom: 1px solid #333;
            position: relative;
            z-index: 10;
        }
        
        #editorContainer {
            width: 100%;
            height: 600px;  
            position: relative;
            z-index: 1;
        }
        
        .button-bar {
            margin-top: 8px;
            display: flex; 
        }
        
        .status-bar {
            display: flex;
            justify-content: flex-end;
            gap: 16px;
            padding: 4px 10px;
            background: #181818;
            color: #cccccc;
            font-size: 12px;
            border-top: 1px solid #333;
            user-select: none;
        }
        
        .wrapeditor {
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
        .wrapeditor:hover {
            border-color: rgba(168, 85, 247, 0.3);
        }
        
        .layout > .col { min-width: 0; }
        .panel, .panel__body, .wrapeditor { min-width: 0; }
        
        .wrapeditor { width: 100%; max-width: 100%; overflow: hidden; }
        
        #tabBar, .tab-bar { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
        #tabBar { white-space: nowrap; flex-wrap: nowrap; }
        
        .tab { flex: 0 0 auto; }