✨ feat: Estúdio de Cenas em Camadas - IA desmonta imagem em elementos editáveis individualmente no canvas

public/style.css

@@ -1555,6 +1555,84 @@ code {
     padding-bottom: 16px !important;
   }
   
+  #minhaTurmaModal .settings-modal-body {
+    overflow-y: auto !important;
+    flex: none !important;
+    min-height: auto !important;
+    max-height: calc(92dvh - 120px) !important;
+  }
+  
+  #turmaConfigSection, #turmaAlunosSection {
+    flex-direction: column !important;
+    overflow-y: visible !important;
+    height: auto !important;
+  }
+  
+  #turmaConfigSection > div, #turmaAlunosSection > div {
+    border-right: none !important;
+    border-bottom: 1px solid var(--border-light) !important;
+    padding-right: 0 !important;
+    padding-bottom: 16px !important;
+    flex: none !important;
+    height: auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+  
+  #turmaConfigSection > div:last-child, #turmaAlunosSection > div:last-child {
+    border-bottom: none !important;
+    padding-bottom: 0 !important;
+    padding-left: 0 !important;
+  }
+  
+  #turmaConfigSection select, #turmaConfigSection input,
+  #turmaAlunosSection select, #turmaAlunosSection input {
+    width: 100% !important;
+  }
+
+  .comics-project-row {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: 8px !important;
+  }
+  
+  .comics-project-row select,
+  .comics-project-row input,
+  .comics-project-row button {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+
+  .cartaz-preview-panel {
+    min-width: 0 !important;
+    width: 100% !important;
+    flex: none !important;
+  }
+  
+  #cartazLeftConfigPanel, #cartazLeftCanvasPanel {
+    min-width: 0 !important;
+    width: 100% !important;
+    padding-right: 0 !important;
+    flex: none !important;
+  }
+  
+  .cartaz-header-container {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: 10px !important;
+  }
+  
+  .cartaz-header-actions {
+    flex-wrap: wrap !important;
+    width: 100% !important;
+    justify-content: flex-start !important;
+  }
+  
+  .cartaz-header-actions button {
+    flex: 1 1 auto !important;
+    text-align: center !important;
+  }
+
   #modelosRelatorioModal .settings-modal-body > div:last-child {
     padding-left: 0 !important;
     padding-top: 16px !important;
@@ -3739,6 +3817,48 @@ code {
   }
 }
 
+/* Camadas de Cena (Estúdio de Cenas em Camadas) */
+.canvas-scene-layer {
+  padding: 0 !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  overflow: hidden;
+}
+
+.canvas-scene-layer:hover {
+  border-color: rgba(139, 92, 246, 0.8);
+  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
+}
+
+.canvas-scene-layer.active-item {
+  border: 2.5px solid #8b5cf6 !important;
+  box-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
+}
+
+/* Animação dos dots de loading */
+@keyframes dot-pulse {
+  0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
+  30% { transform: scale(1.4); opacity: 1; }
+}
+
+/* Botão Estúdio de Cenas */
+#btnDecomposeScene:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
+}
+
+#btnDecomposeScene:disabled {
+  cursor: not-allowed;
+}
+
+/* Lista de camadas no painel */
+#sceneLayersItems > div:hover {
+  background: rgba(139, 92, 246, 0.12) !important;
+  border-color: rgba(139, 92, 246, 0.4) !important;
+}
+
+