/* Layout - Control Panel and Canvas Container */

/* Control Panel */
.control-panel {
    width: 320px;
    min-width: 320px;
    background: #111111;
    border-right: 1px solid #2a2a2a;
    padding: 24px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.panel-header { display: flex; align-items: center; gap: 12px; }
.panel-title {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #ffffff;
}

.section { display: flex; flex-direction: column; gap: 14px; }
.section-title {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
}

/* Mode-specific sections */
.mode-section { display: none; }
.mode-section.active { display: flex; flex-direction: column; gap: 14px; }

/* Canvas Area */
.canvas-container { flex: 1; position: relative; background: #0a0a0a; }
#canvas { width: 100%; height: 100%; display: block; }
#videoElement { display: none; }

/* Adjust canvas when movie mode is active */
.canvas-container.movie-mode {
    height: calc(100vh - 180px);
}