/* =============================================================================
   APP LAYOUT STYLES - Main application structure and third-party library overrides
============================================================================= */

/* Main Content Area */
.main-content {
  display: flex;
  flex: 1 1;
  min-height: 0;
  height: calc(100vh - 74px); /* 50px toolbar + 24px status bar */
}

/* Split Panes Container */
.split-container {
  flex: 1 1;
  display: flex;
  min-height: 0;
}

/* Left Panel - Code Editor and Controls */
.left-panel {
  display: flex;
  flex-direction: column;
  min-width: 400px;
  flex: 1 1;
}

/* Right Panel - Visualization and G-Code */
.right-panel {
  display: flex;
  flex-direction: column;
  min-width: 400px;
  flex: 1 1;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* Allotment Styles - Third-party library overrides */
.allotment {
  position: relative;
  height: 100%;
  width: 100%;
}

.allotment > .allotment-pane {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.allotment-separator {
  background-color: var(--border-primary);
  position: relative;
}

.allotment-separator:hover {
  background-color: var(--accent-primary);
}

.allotment-separator.allotment-separator-resizing {
  background-color: var(--accent-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .left-panel, .right-panel {
    width: 100%;
    height: 50%;
  }
  
  .left-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
  }
}

.app-container,.app{display:flex;flex-direction:column;height:100vh;width:100vw;position:relative}.output-container{flex:1 1;overflow:hidden;background-color:var(--bg-primary)}
.main-layout{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.editor-wrapper{flex:1 1;display:flex;flex-direction:column}
.top-toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);background-color:var(--bg-secondary);border-bottom:1px solid var(--border-primary);padding:0 var(--space-md);flex-shrink:0}.top-toolbar .toolbar-left{display:flex;align-items:center;gap:var(--space-lg)}.top-toolbar .logo-link{text-decoration:none;color:inherit}.top-toolbar .logo-link:hover h1{color:var(--accent-primary)}.top-toolbar .toolbar-left h1{margin:0;font-size:var(--font-size-lg);font-weight:bold;color:var(--text-primary);transition:color .2s}.top-toolbar .sketch-title-container{display:flex;align-items:center;gap:var(--space-md)}.top-toolbar .sketch-thumbnail{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}.top-toolbar .thumbnail-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.top-toolbar .thumbnail-svg svg{width:100%;height:100%;object-fit:contain}.top-toolbar .sketch-title-input{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-family:var(--font-family);min-width:200px;max-width:300px;transition:border-color .2s}.top-toolbar .sketch-title-input:hover{border-color:var(--border-secondary)}.top-toolbar .sketch-title-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary)}.top-toolbar .sketch-title-display{margin:0;font-size:var(--font-size-lg);font-weight:bold;color:var(--text-primary);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-toolbar .toolbar-right{display:flex;align-items:center;gap:var(--space-lg)}.top-toolbar .save-section{display:flex;align-items:center;gap:var(--space-sm)}.top-toolbar .view-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background-color:rgba(0,0,0,0);border:2px solid #4caf50;color:#4caf50;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;font-family:var(--font-family);text-decoration:none;cursor:pointer;transition:all .2s ease}.top-toolbar .view-btn:hover{background-color:rgba(76,175,80,.1);border-color:#66bb6a;color:#66bb6a}.top-toolbar .view-btn:active{transform:translateY(1px)}.top-toolbar .save-btn{font-family:var(--font-family)}.top-toolbar .save-btn:disabled,.top-toolbar .save-btn.disabled{background-color:var(--bg-tertiary);border-color:var(--border-primary);color:var(--text-muted);cursor:not-allowed}.top-toolbar .last-saved{font-size:var(--font-size-xs);color:var(--text-muted);white-space:nowrap}.top-toolbar .examples-dropdown{display:flex;align-items:center;gap:var(--space-sm)}.top-toolbar .examples-dropdown label{font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap}.top-toolbar .examples-select{font-family:var(--font-family)}.top-toolbar .examples-select option{background-color:var(--bg-tertiary);color:var(--text-primary)}.top-toolbar .sketch-meta{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-xs);font-size:var(--font-size-xs);color:var(--text-muted)}.top-toolbar .sketch-meta .author a{color:var(--accent-primary);text-decoration:none}.top-toolbar .sketch-meta .author a:hover{text-decoration:underline}.top-toolbar .view-actions{display:flex;align-items:center;gap:var(--space-sm)}.top-toolbar .fork-btn,.top-toolbar .edit-btn{font-family:var(--font-family)}.top-toolbar .toolbar-center{display:flex;align-items:center;gap:var(--space-md)}.top-toolbar .run-btn{font-family:var(--font-detail);text-transform:uppercase;letter-spacing:.5px}.top-toolbar .run-btn:disabled{background-color:var(--bg-tertiary);border-color:var(--border-primary);color:var(--text-muted);cursor:not-allowed}.top-toolbar .toolbar-right .status{font-size:var(--font-size-sm);color:var(--text-secondary);font-family:var(--font-detail)}

/*# sourceMappingURL=e2c59f65767aa358.css.map*/