:root{--primary-color: #08A9E6;--secondary-color: #a29bfe;--dark-color: #2d3436;--light-color: #f5f6fa;--success-color: #00b894;--warning-color: #fdcb6e;--danger-color: #d63031;--border-radius: 6px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:#f8f9fa;color:var(--dark-color);line-height:1.6}.editor-container{display:flex;flex-direction:column;height:100vh;max-width:100%;overflow:hidden}.editor-header{background-color:var(--primary-color);color:#fff;padding:1rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0000001a}.editor-title{font-size:1.5rem;font-weight:600}.editor-controls{display:flex;gap:1rem}.btn{padding:.5rem 1rem;border:none;border-radius:var(--border-radius);cursor:pointer;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.btn-primary{background-color:#fff;color:var(--primary-color)}.btn-primary:hover{background-color:#f1f1f1}.btn-secondary{background-color:#fff3;color:#fff}.btn-secondary:hover{background-color:#ffffff4d}.editor-main{display:flex;flex:1;overflow:hidden}.editor-sidebar{width:250px;background-color:#2d3436;color:#fff;padding:1rem;overflow-y:auto}.sidebar-title{font-size:1rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.file-tree{list-style:none}.file-item{padding:.5rem;border-radius:var(--border-radius);cursor:pointer;margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}.file-item:hover{background-color:#ffffff1a}.file-item.active{background-color:var(--primary-color)}.editor-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.editor-tabs{display:flex;background-color:#e9ecef;border-bottom:1px solid #dee2e6}.editor-tab{padding:.75rem 1.5rem;cursor:pointer;border-right:1px solid #dee2e6;position:relative;font-weight:500;color:#495057}.editor-tab.active{background-color:#fff;color:var(--primary-color)}.editor-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--primary-color)}.editor-views{flex:1;display:flex;overflow:hidden}.code-editor-container{flex:1;display:none;overflow:hidden}.code-editor-container.active{display:block}.code-editor{width:100%;height:100%}.preview-container{flex:1;padding:1rem;overflow:auto;background-color:#fff}.splitter{width:8px;background-color:#e9ecef;cursor:col-resize;transition:background-color .2s}.splitter:hover{background-color:var(--secondary-color)}.status-bar{background-color:#2d3436;color:#fff;padding:.5rem 1rem;font-size:.875rem;display:flex;justify-content:space-between}.status-item{display:flex;align-items:center;gap:.5rem}@media (max-width: 768px){.editor-main{flex-direction:column}.editor-sidebar{width:100%;height:200px}.editor-views{flex-direction:column}.splitter{width:100%;height:8px;cursor:row-resize}}.monaco-editor .margin{background-color:#f8f9fa!important}