diff --git a/assets/css/style.css b/assets/css/style.css
index 1881bab1..830819fe 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,4 +1,7 @@
-/* MMPCreator - Folha de Estilos Principal */
+/* =============================================== */
+/* MMPCreator - Folha de Estilos Principal         */
+/* =============================================== */
+
 :root {
   --bg-body: #2d3035;
   --bg-toolbar: #3b3f45;
@@ -15,51 +18,50 @@
 }
 
 /* Esconde elementos não essenciais quando em modo embed */
-body.embed-mode .sample-browser,      /* Navegador de Samples */
+  body.embed-mode .sample-browser,      /* Navegador de Samples */
   body.embed-mode .global-toolbar,      /* Barra de ferramentas principal */
-  body.embed-mode #sidebar-toggle {
-  /* Botão de toggle da sidebar */
-  display: none !important;
-}
+  body.embed-mode #sidebar-toggle {     /* Botão de toggle da sidebar */
+    display: none !important;
+  }
+  
+  /* AJUSTE PARA O ZOOM DE 65% */
+  /* 1. Aplica o zoom na div principal do aplicativo */
+  body.embed-mode .app-container {
+    padding-left: 0; 
+    
+    /* Configura o zoom */
+    transform: scale(0.15);
+    transform-origin: top left; /* Garante que o zoom comece do canto superior esquerdo */
 
-/* AJUSTE PARA O ZOOM DE 65% */
-/* 1. Aplica o zoom na div principal do aplicativo */
-body.embed-mode .app-container {
-  padding-left: 0;
+    /* POSICIONAMENTO CRUCIAL: Fixa no canto 0,0 do body */
+    position: absolute; 
+    top: 0;
+    left: 0;
 
-  /* Configura o zoom */
-  transform: scale(0.15);
-  transform-origin: top left; /* Garante que o zoom comece do canto superior esquerdo */
+    /* Compensação de tamanho para o container do iframe */
+    width: calc(100vw / 0.15);
+    height: calc(100vh / 0.15);
+    
+    display: flex; 
+    flex-direction: column;
+    overflow: hidden; 
+  }
 
-  /* POSICIONAMENTO CRUCIAL: Fixa no canto 0,0 do body */
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  /* Compensação de tamanho para o container do iframe */
-  width: calc(100vw / 0.15);
-  height: calc(100vh / 0.15);
-
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* Ajusta o layout principal para ocupar toda a área visível */
-body.embed-mode .main-content {
-  flex-grow: 1;
-  height: auto;
-  width: auto;
-  overflow: hidden;
-}
-
-/* Garante que o body não tenha margens */
-body.embed-mode {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
+  /* Ajusta o layout principal para ocupar toda a área visível */
+  body.embed-mode .main-content {
+    flex-grow: 1; 
+    height: auto; 
+    width: auto;
+    overflow: hidden;
+  }
+  
+  /* Garante que o body não tenha margens */
+  body.embed-mode {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
 
 /* =============================================== */
 /* LAYOUT E ESTRUTURA GLOBAL
@@ -69,26 +71,13 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   background-color: var(--bg-body);
   color: var(--text-light);
-  display: block; 
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
 }
 
-.studio-wrapper {
-  display: flex;          /* O flex vem para cá */
-  width: 100%;
-  height: 85vh;          /* Define uma altura para o app (ajuste conforme necessário) */
-  overflow: hidden;       /* O app não deve ter scroll externo */
-  position: relative;
-  background-color: var(--bg-body);
-  border: 1px solid var(--border-color); /* Opcional: borda para separar do site */
-}
-
-body.knob-dragging {
-  cursor: ns-resize;
-}
-body.slice-tool-active .timeline-container {
-  cursor: crosshair;
-}
+body.knob-dragging { cursor: ns-resize; }
+body.slice-tool-active .timeline-container { cursor: crosshair; }
 
 .app-container {
   display: flex;
@@ -100,87 +89,83 @@ body.slice-tool-active .timeline-container {
 
 /* Estilos do Piano Roll */
 .piano-roll-editor {
-  position: absolute;
-  top: 60px; /* Abaixo do header global */
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #2b2e33;
-  z-index: 50; /* Fica acima dos outros editores */
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid var(--border-color, #444);
+    position: absolute;
+    top: 60px; /* Abaixo do header global */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #2b2e33;
+    z-index: 50; /* Fica acima dos outros editores */
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid var(--border-color, #444);
 }
 
 .piano-roll-toolbar {
-  height: 40px;
-  background-color: #363a40;
-  border-bottom: 1px solid #444;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  gap: 15px;
-  color: #ccc;
+    height: 40px;
+    background-color: #363a40;
+    border-bottom: 1px solid #444;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    gap: 15px;
+    color: #ccc;
 }
 
 .piano-roll-workspace {
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-  position: relative;
-  background-color: #222;
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    background-color: #222;
 }
 
 .piano-keys-container {
-  width: 60px;
-  background-color: #1e1e1e;
-  border-right: 1px solid #444;
-  overflow: hidden; /* O scroll será controlado via JS para sincronia */
-  position: relative;
-  z-index: 2;
+    width: 60px;
+    background-color: #1e1e1e;
+    border-right: 1px solid #444;
+    overflow: hidden; /* O scroll será controlado via JS para sincronia */
+    position: relative;
+    z-index: 2;
 }
 
 .piano-grid-container {
-  flex: 1;
-  overflow: auto; /* Aqui acontece o scroll real */
-  position: relative;
-  background-color: #252525;
-  cursor: crosshair;
+    flex: 1;
+    overflow: auto; /* Aqui acontece o scroll real */
+    position: relative;
+    background-color: #252525;
+    cursor: crosshair;
 }
 
 /* Cores para as notas no canvas */
-.piano-key-white {
-  fill: #fff;
-}
-.piano-key-black {
-  fill: #000;
-}
+.piano-key-white { fill: #fff; }
+.piano-key-black { fill: #000; }
 
 /* Container da visualização melódica na lista de trilhas */
 .track-mini-piano-roll {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: #222;
-  border-radius: 4px;
-  cursor: pointer;
-  overflow: hidden;
-  border: 1px solid #444;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #222;
+    border-radius: 4px;
+    cursor: pointer;
+    overflow: hidden;
+    border: 1px solid #444;
 }
 
 .track-mini-piano-roll:hover {
-  border-color: #666;
-  background-color: #2a2a2a;
+    border-color: #666;
+    background-color: #2a2a2a;
 }
 
 /* As notinhas dentro da miniatura */
 .mini-note {
-  position: absolute;
-  background-color: #ffbb00; /* Cor laranja padrão LMMS */
-  height: 4px; /* Notas finas */
-  border-radius: 1px;
-  opacity: 0.9;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    position: absolute;
+    background-color: #ffbb00; /* Cor laranja padrão LMMS */
+    height: 4px; /* Notas finas */
+    border-radius: 1px;
+    opacity: 0.9;
+    box-shadow: 0 0 2px rgba(0,0,0,0.5);
 }
 
 /* =============================================== */
@@ -189,48 +174,42 @@ body.slice-tool-active .timeline-container {
 
 /* Quando o container .step-sequencer tiver esta classe, ele muda de comportamento */
 .step-sequencer.mode-piano {
-  display: block !important; /* Sobrescreve o display: flex original */
-  gap: 0 !important; /* Remove o espaçamento de botões */
-  width: 100%; /* Ocupa toda a largura disponível */
-  height: 54px; /* Altura fixa para garantir visualização */
-  position: relative;
-  background-color: #1e1e1e;
-  border-radius: 4px;
-  border: 1px solid var(--border-color);
-  overflow: hidden; /* Corta notas que passem da borda */
-  margin-top: 4px; /* Centraliza verticalmente na track */
+    display: block !important;     /* Sobrescreve o display: flex original */
+    gap: 0 !important;             /* Remove o espaçamento de botões */
+    width: 100%;                   /* Ocupa toda a largura disponível */
+    height: 54px;                  /* Altura fixa para garantir visualização */
+    position: relative;
+    background-color: #1e1e1e;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    overflow: hidden;              /* Corta notas que passem da borda */
+    margin-top: 4px;               /* Centraliza verticalmente na track */
 }
 
 /* Ajuste fino para a miniatura interna */
 .track-mini-piano-roll {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: linear-gradient(
-    to right,
-    #222 0%,
-    #222 50%,
-    #252525 50%,
-    #252525 100%
-  );
-  background-size: 25% 100%; /* Cria linhas verticais sutis de compasso */
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: linear-gradient(to right, #222 0%, #222 50%, #252525 50%, #252525 100%);
+    background-size: 25% 100%; /* Cria linhas verticais sutis de compasso */
 }
 
 /* Garante que as notas apareçam */
 .mini-note {
-  position: absolute;
-  background-color: #ffbb00;
-  height: 4px;
-  border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
-  pointer-events: none; /* Deixa o clique passar para o container pai */
-  min-width: 2px; /* Garante que notas muito curtas sejam visíveis */
+    position: absolute;
+    background-color: #ffbb00; 
+    height: 4px; 
+    border-radius: 2px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.8);
+    pointer-events: none; /* Deixa o clique passar para o container pai */
+    min-width: 2px; /* Garante que notas muito curtas sejam visíveis */
 }
 
 /* Efeito hover para indicar interatividade */
 .step-sequencer.mode-piano:hover {
-  border-color: #666;
-  background-color: #262626;
+    border-color: #666;
+    background-color: #262626;
 }
 
 /* =============================================== */
@@ -293,7 +272,7 @@ body.sidebar-hidden .sample-browser {
   transition: transform 0.2s ease-in-out;
 }
 .folder-name::before {
-  content: "\f0da";
+  content: '\f0da';
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   margin-right: 8px;
@@ -304,7 +283,7 @@ body.sidebar-hidden .sample-browser {
   transform: rotate(90deg);
 }
 .folder-item.open > .folder-name > .folder-icon::before {
-  content: "\f07c";
+  content: '\f07c';
 }
 .browser-content li.file-item {
   padding: 5px;
@@ -335,75 +314,41 @@ body.sidebar-hidden .sample-browser {
 /* =============================================== */
 /* ÁREA DE CONTEÚDO E TOOLBARS
 /* =============================================== */
-.global-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 8px 15px;
-  background-color: var(--bg-toolbar);
-  border-bottom: 2px solid var(--border-color);
-  height: 50px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-.main-content {
-  flex-grow: 1;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  overflow: hidden;
-}
+.global-toolbar { display: flex; align-items: center; gap: 20px; padding: 8px 15px; background-color: var(--bg-toolbar); border-bottom: 2px solid var(--border-color); height: 50px; box-sizing: border-box; flex-shrink: 0; }
+.main-content { flex-grow: 1; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
 .beat-editor {
   flex: 1;
   background-color: var(--bg-editor);
   border: 1px solid var(--border-color);
   border-radius: 8px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
-.editor-header {
-  background-color: var(--bg-toolbar);
-  padding: 4px 10px;
-  font-size: 0.8rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
-}
-.editor-toolbar {
-  background-color: var(--bg-toolbar);
-  padding: 5px 10px;
-  border-bottom: 2px solid var(--border-color);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
+.editor-header { background-color: var(--bg-toolbar); padding: 4px 10px; font-size: .8rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
+.editor-toolbar { background-color: var(--bg-toolbar); padding: 5px 10px; border-bottom: 2px solid var(--border-color); flex-shrink: 0; display: flex; align-items: center; gap: 15px; }
 
 /* Estilo para o botão de gravação */
 #record-btn.active.recording {
-  color: var(--accent-red);
-  animation: pulse-red 1.5s infinite;
+    color: var(--accent-red);
+    animation: pulse-red 1.5s infinite;
 }
 
 /* Animação de "pulsar" */
 @keyframes pulse-red {
-  0% {
-    opacity: 1;
-    text-shadow: 0 0 3px var(--accent-red);
-  }
-  50% {
-    opacity: 0.7;
-    text-shadow: 0 0 10px var(--accent-red);
-  }
-  100% {
-    opacity: 1;
-    text-shadow: 0 0 3px var(--accent-red);
-  }
+    0% {
+        opacity: 1;
+        text-shadow: 0 0 3px var(--accent-red);
+    }
+    50% {
+        opacity: 0.7;
+        text-shadow: 0 0 10px var(--accent-red);
+    }
+    100% {
+        opacity: 1;
+        text-shadow: 0 0 3px var(--accent-red);
+    }
 }
 
 #live-waveform-canvas {
@@ -477,12 +422,8 @@ body.sidebar-hidden .sample-browser {
   min-height: 72px;
   box-sizing: border-box;
 }
-.track-lane.active-track {
-  background-color: #40454d;
-}
-.track-lane.drag-over {
-  border: 2px dashed var(--accent-green);
-}
+.track-lane.active-track { background-color: #40454d; }
+.track-lane.drag-over { border: 2px dashed var(--accent-green); }
 
 .track-lane .track-info {
   display: flex;
@@ -493,97 +434,64 @@ body.sidebar-hidden .sample-browser {
   padding: 0 10px;
   border-right: 1px solid var(--bg-toolbar);
 }
-.track-mute {
-  width: 25px;
-  height: 12px;
-  background-color: var(--accent-green);
-  border-radius: 6px;
-  cursor: pointer;
-  border: 1px solid var(--border-color);
-  box-shadow: inset 0 0 2px #000;
-  transition: background-color 0.2s, opacity 0.2s;
-}
-.track-mute:hover {
-  opacity: 0.8;
-}
-.track-mute.active {
-  background-color: var(--text-dark);
-  opacity: 0.7;
-}
+.track-mute { width: 25px; height: 12px; background-color: var(--accent-green); border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); box-shadow: inset 0 0 2px #000; transition: background-color 0.2s, opacity 0.2s; }
+.track-mute:hover { opacity: 0.8; }
+.track-mute.active { background-color: var(--text-dark); opacity: 0.7; }
 
-.track-lane .track-controls {
-  display: flex;
-  gap: 5px;
-  margin: 0 10px;
-  padding-left: 10px;
-  border-left: 1px solid var(--bg-toolbar);
-  flex-shrink: 0;
-}
+.track-lane .track-controls { display: flex; gap: 5px; margin: 0 10px; padding-left: 10px; border-left: 1px solid var(--bg-toolbar); flex-shrink: 0; }
 
 /* --- CORREÇÃO DE LARGURA DOS STEPS --- */
-.step-sequencer-wrapper {
-  flex-grow: 1;
-  /* Remove overflow-x para forçar os steps a caberem na tela, ou mantem se quiser scroll horizontal em telas pequenas */
-  /* overflow-x: auto;  <-- Comentei para testar o alinhamento perfeito */
-  overflow-y: hidden;
-  padding-bottom: 8px;
-  display: flex;
-  align-items: center;
-  padding-right: 10px; /* Espaçamento na direita pra não colar na borda */
+.step-sequencer-wrapper { 
+    flex-grow: 1; 
+    /* Remove overflow-x para forçar os steps a caberem na tela, ou mantem se quiser scroll horizontal em telas pequenas */
+    /* overflow-x: auto;  <-- Comentei para testar o alinhamento perfeito */
+    overflow-y: hidden; 
+    padding-bottom: 8px; 
+    display: flex; 
+    align-items: center; 
+    padding-right: 10px; /* Espaçamento na direita pra não colar na borda */
 }
 
-.step-sequencer {
-  display: flex;
-  gap: 2px; /* Reduzi o gap para ficar mais compacto e fluido */
-  width: 100%; /* Ocupa toda a largura disponível da trilha */
+.step-sequencer { 
+    display: flex; 
+    gap: 2px; /* Reduzi o gap para ficar mais compacto e fluido */
+    width: 100%; /* Ocupa toda a largura disponível da trilha */
 }
 
-.step-wrapper {
-  position: relative;
-  flex: 1; /* MÁGICA: Faz cada step crescer igualmente para preencher o espaço */
-  display: flex;
-  flex-direction: column;
+.step-wrapper { 
+    position: relative; 
+    flex: 1; /* MÁGICA: Faz cada step crescer igualmente para preencher o espaço */
+    display: flex;
+    flex-direction: column;
 }
 
-.step-marker {
-  position: absolute;
-  top: -16px;
-  left: 0;
-  width: 100%;
-  text-align: center; /* Centraliza o número do compasso */
-  font-size: 0.6rem;
-  color: var(--text-dark);
-  user-select: none;
+.step-marker { 
+    position: absolute; 
+    top: -16px; 
+    left: 0; 
+    width: 100%; 
+    text-align: center; /* Centraliza o número do compasso */
+    font-size: .6rem; 
+    color: var(--text-dark); 
+    user-select: none; 
 }
 
-.step {
-  width: 100%; /* Ocupa 100% do wrapper (que é flexível agora) */
-  height: 28px;
-  background-color: #2a2a2a;
-  border: 1px solid #4a4a4a;
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background-color 0.1s, transform 0.1s;
-  box-sizing: border-box; /* Garante que a borda não aumente o tamanho total */
+.step { 
+    width: 100%; /* Ocupa 100% do wrapper (que é flexível agora) */
+    height: 28px; 
+    background-color: #2a2a2a; 
+    border: 1px solid #4a4a4a; 
+    border-radius: 2px; 
+    cursor: pointer; 
+    transition: background-color .1s, transform 0.1s; 
+    box-sizing: border-box; /* Garante que a borda não aumente o tamanho total */
 }
 /* --------------------------------------- */
 
-.step-dark {
-  background-color: #1e1e1e;
-}
-.step:hover {
-  background-color: #555;
-  border-color: #888;
-}
-.step.active {
-  background-color: var(--accent-green);
-  border: 1px solid #fff;
-  box-shadow: 0 0 8px var(--accent-green);
-}
-.step.playing {
-  transform: scale(1.1);
-  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8);
-}
+.step-dark { background-color: #1e1e1e; }
+.step:hover { background-color: #555; border-color: #888; }
+.step.active { background-color: var(--accent-green); border: 1px solid #fff; box-shadow: 0 0 8px var(--accent-green); }
+.step.playing { transform: scale(1.1); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8); }
 
 /* =================================================================== */
 /* EDITOR DE ÁUDIO - LAYOUT PRINCIPAL
@@ -593,7 +501,7 @@ body.sidebar-hidden .sample-browser {
   background-color: var(--bg-editor);
   border: 1px solid var(--border-color);
   border-radius: 8px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -612,9 +520,7 @@ body.sidebar-hidden .sample-browser {
   min-height: 90px;
   box-sizing: border-box;
 }
-.audio-track-lane.drag-over {
-  background-color: #40454d;
-}
+.audio-track-lane.drag-over { background-color: #40454d; }
 .audio-track-lane .track-info {
   width: var(--track-info-width);
   flex-shrink: 0;
@@ -624,19 +530,8 @@ body.sidebar-hidden .sample-browser {
   background-color: #383c42;
   border-right: 2px solid var(--border-color);
 }
-.track-info-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-}
-.track-name {
-  color: var(--accent-red);
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+.track-info-header { display: flex; align-items: center; gap: 8px; width: 100%; }
+.track-name { color: var(--accent-red); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .timeline-container {
   flex-grow: 1;
   position: relative;
@@ -651,29 +546,11 @@ body.sidebar-hidden .sample-browser {
   --step-width: 32px;
   --beat-width: 128px;
   --bar-width: 512px;
-  background-size: var(--bar-width) 100%, var(--beat-width) 100%,
-    var(--step-width) 100%;
-  background-image: repeating-linear-gradient(
-      to right,
-      #666 0,
-      #666 1px,
-      transparent 1px,
-      transparent 100%
-    ),
-    repeating-linear-gradient(
-      to right,
-      #444 0,
-      #444 1px,
-      transparent 1px,
-      transparent 100%
-    ),
-    repeating-linear-gradient(
-      to right,
-      #3a3e44 0,
-      #3a3e44 1px,
-      transparent 1px,
-      transparent 100%
-    );
+  background-size: var(--bar-width) 100%, var(--beat-width) 100%, var(--step-width) 100%;
+  background-image:
+    repeating-linear-gradient(to right, #666 0, #666 1px, transparent 1px, transparent 100%),
+    repeating-linear-gradient(to right, #444 0, #444 1px, transparent 1px, transparent 100%),
+    repeating-linear-gradient(to right, #3a3e44 0, #3a3e44 1px, transparent 1px, transparent 100%);
 }
 
 /* =============================================== */
@@ -722,7 +599,7 @@ body.sidebar-hidden .sample-browser {
   background: linear-gradient(to bottom, #5c626b, #4a4f57);
   border: 1px solid var(--border-color-dark);
   border-radius: 4px;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
   display: flex;
   align-items: center;
   /* --- CORREÇÃO: Remove o padding horizontal --- */
@@ -732,61 +609,14 @@ body.sidebar-hidden .sample-browser {
   user-select: none;
   color: var(--text-light);
 }
-.timeline-clip:active,
-.timeline-clip.dragging {
-  cursor: grabbing;
-  z-index: 1000;
-  border-color: var(--accent-blue);
-  opacity: 0.9;
-}
-.clip-name {
-  position: absolute;
-  top: 4px;
-  left: 8px;
-  font-size: 0.75rem;
-  font-weight: bold;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: 2px 6px;
-  border-radius: 3px;
-  pointer-events: none;
-}
-.waveform-canvas-clip {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-.audio-track-lane .track-controls {
-  display: flex;
-  justify-content: flex-start;
-  gap: 15px;
-  border-left: none;
-  padding-left: 0;
-  margin: 0;
-}
-.clip-resize-handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 8px;
-  cursor: ew-resize;
-  z-index: 10;
-}
-.clip-resize-handle.left {
-  left: 0;
-}
-.clip-resize-handle.right {
-  right: 0;
-}
-.playhead {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2px;
-  height: 100%;
-  background-color: var(--accent-red);
-  z-index: 50;
-  pointer-events: none;
-}
+.timeline-clip:active, .timeline-clip.dragging { cursor: grabbing; z-index: 1000; border-color: var(--accent-blue); opacity: 0.9; }
+.clip-name { position: absolute; top: 4px; left: 8px; font-size: 0.75rem; font-weight: bold; background-color: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 3px; pointer-events: none; }
+.waveform-canvas-clip { width: 100%; height: 100%; display: block; }
+.audio-track-lane .track-controls { display: flex; justify-content: flex-start; gap: 15px; border-left: none; padding-left: 0; margin: 0; }
+.clip-resize-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 10; }
+.clip-resize-handle.left { left: 0; }
+.clip-resize-handle.right { right: 0; }
+.playhead { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background-color: var(--accent-red); z-index: 50; pointer-events: none; }
 #loop-region {
   display: none; /* Começa escondido por padrão */
   position: absolute;
@@ -807,410 +637,100 @@ body.sidebar-hidden .sample-browser {
 #loop-region:active {
   cursor: grabbing;
 }
-.loop-handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 10px;
-  cursor: ew-resize;
-}
-.loop-handle.left {
-  left: -5px;
-}
-.loop-handle.right {
-  right: -5px;
-}
+.loop-handle { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
+.loop-handle.left { left: -5px; }
+.loop-handle.right { right: -5px; }
 
 /* --- ESTILOS ADICIONADOS --- */
 #slice-tool-btn.active,
 #resize-tool-trim.active,
-#resize-tool-stretch.active {
-  color: var(--accent-blue);
+#resize-tool-stretch.active { 
+  color: var(--accent-blue); 
   background-color: var(--bg-editor);
   border-radius: 3px;
 }
-#audio-editor-loop-btn.active {
-  color: var(--accent-green);
-}
+#audio-editor-loop-btn.active { color: var(--accent-green); }
 
 /* =============================================== */
 /* COMPONENTES GERAIS (KNOBS, BOTÕES, INPUTS)
 /* =============================================== */
-.knob-container {
-  text-align: center;
-  font-size: 0.7rem;
-  color: var(--text-dark);
-}
-.knob-container {
-  text-align: center;
-  font-size: 0.7rem;
-  color: var(--text-dark);
-}
-.knob {
-  width: 28px;
-  height: 28px;
-  background-color: var(--bg-toolbar);
-  border-radius: 50%;
-  border: 1px solid var(--border-color);
-  margin-bottom: 2px;
-  cursor: grab;
-  box-shadow: inset 0 0 4px #222;
-  position: relative;
-}
-.knob:active {
-  cursor: grabbing;
-}
-.knob-indicator {
-  width: 2px;
-  height: 8px;
-  background-color: var(--text-light);
-  position: absolute;
-  top: 2px;
-  left: 50%;
-  transform-origin: bottom center;
-  transform: translateX(-50%) rotate(0deg);
-  border-radius: 1px;
-}
-.interactive-input-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-.compasso-group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.value-input {
-  background: 0 0;
-  border: 0;
-  outline: 0;
-  color: var(--accent-green);
-  font-weight: 700;
-  font-size: 1.4rem;
-  font-family: Courier New, Courier, monospace;
-  text-align: center;
-  padding: 0;
-  width: 55px;
-}
-.compasso-input {
-  width: 25px;
-}
-.compasso-separator {
-  color: var(--accent-green);
-  font-weight: 700;
-  font-size: 1.4rem;
-  font-family: Courier New, Courier, monospace;
-  margin: 0 2px;
-}
-.value-input::-webkit-outer-spin-button,
-.value-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.value-input[type="number"] {
-  -moz-appearance: textfield;
-}
-.adjust-btn {
-  background: 0 0;
-  border: 0;
-  color: var(--text-dark);
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  padding: 0 5px;
-  transition: color 0.2s;
-  line-height: 1;
-}
-.adjust-btn:hover {
-  color: #fff;
-}
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 0 10px;
-}
-.control-group i {
-  font-size: 1.2rem;
-  cursor: pointer;
-  color: var(--text-light);
-  transition: color 0.2s;
-}
-.control-group i:hover {
-  color: #fff;
-}
-.fa-play,
-.fa-pause {
-  color: var(--accent-green) !important;
-}
-.divider {
-  width: 1px;
-  height: 25px;
-  background-color: var(--border-color);
-}
-.info-display-group {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-.info-display {
-  background-color: #1a1c1e;
-  padding: 5px 8px;
-  border-radius: 3px;
-  text-align: center;
-}
-.info-display .label {
-  color: var(--text-dark);
-  font-size: 0.6rem;
-  text-transform: uppercase;
-}
-.spacer {
-  flex-grow: 1;
-}
-#metronome-btn {
-  background: 0 0;
-  border: 1px solid var(--text-dark);
-  color: var(--accent-green);
-  font-family: inherit;
-  font-weight: 700;
-  font-size: 0.8rem;
-  padding: 5px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-#metronome-btn:hover {
-  border-color: var(--text-light);
-  background-color: var(--bg-editor);
-}
-#metronome-btn.active {
-  background-color: var(--accent-green);
-  color: var(--bg-body);
-  border-color: var(--accent-green);
-}
+.knob-container { text-align: center; font-size: .7rem; color: var(--text-dark); }
+.knob-container { text-align: center; font-size: .7rem; color: var(--text-dark); }
+.knob { width: 28px; height: 28px; background-color: var(--bg-toolbar); border-radius: 50%; border: 1px solid var(--border-color); margin-bottom: 2px; cursor: grab; box-shadow: inset 0 0 4px #222; position: relative; }
+.knob:active { cursor: grabbing; }
+.knob-indicator { width: 2px; height: 8px; background-color: var(--text-light); position: absolute; top: 2px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); border-radius: 1px; }
+.interactive-input-container { display: flex; align-items: center; justify-content: center; gap: 4px; }
+.compasso-group { display: flex; align-items: center; gap: 4px; }
+.value-input { background: 0 0; border: 0; outline: 0; color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; text-align: center; padding: 0; width: 55px; }
+.compasso-input { width: 25px; }
+.compasso-separator { color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; margin: 0 2px; }
+.value-input::-webkit-outer-spin-button, .value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.value-input[type=number] { -moz-appearance: textfield; }
+.adjust-btn { background: 0 0; border: 0; color: var(--text-dark); font-size: 1rem; font-weight: 700; cursor: pointer; padding: 0 5px; transition: color .2s; line-height: 1; }
+.adjust-btn:hover { color: #fff; }
+.control-group { display: flex; align-items: center; gap: 15px; padding: 0 10px; }
+.control-group i { font-size: 1.2rem; cursor: pointer; color: var(--text-light); transition: color .2s; }
+.control-group i:hover { color: #fff; }
+.fa-play, .fa-pause { color: var(--accent-green) !important; }
+.divider { width: 1px; height: 25px; background-color: var(--border-color); }
+.info-display-group { display: flex; align-items: center; gap: 5px; }
+.info-display { background-color: #1a1c1e; padding: 5px 8px; border-radius: 3px; text-align: center; }
+.info-display .label { color: var(--text-dark); font-size: .6rem; text-transform: uppercase; }
+.spacer { flex-grow: 1; }
+#metronome-btn { background: 0 0; border: 1px solid var(--text-dark); color: var(--accent-green); font-family: inherit; font-weight: 700; font-size: .8rem; padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: all .2s; }
+#metronome-btn:hover { border-color: var(--text-light); background-color: var(--bg-editor); }
+#metronome-btn.active { background-color: var(--accent-green); color: var(--bg-body); border-color: var(--accent-green); }
 
 /* =============================================== */
 /* MODAL E MENUS
 /* =============================================== */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 2000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0s 0.3s, opacity 0.3s;
-}
-.modal-overlay.visible {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0s, opacity 0.3s;
-}
-.modal-content {
-  background-color: var(--bg-body);
-  padding: 1.5rem 2rem;
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-  width: 100%;
-  max-width: 500px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  max-height: 90vh;
-}
-.modal-close {
-  position: absolute;
-  top: 10px;
-  right: 15px;
-  font-size: 1.5rem;
-  color: var(--text-dark);
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-.modal-close:hover {
-  color: var(--text-light);
-}
-.modal-title {
-  margin: 0;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--bg-toolbar);
-  color: var(--text-light);
-  text-align: center;
-  flex-shrink: 0;
-}
-.modal-section h3 {
-  margin-top: 0;
-  margin-bottom: 0.8rem;
-  font-size: 1rem;
-  color: var(--text-light);
-}
-#server-projects-list {
-  max-height: 250px;
-  overflow-y: auto;
-  background-color: var(--bg-toolbar);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 0.5rem;
-  min-height: 50px;
-}
-#server-projects-list .project-item {
-  background-color: var(--bg-editor);
-  padding: 10px 15px;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-  border: 1px solid transparent;
-}
-#server-projects-list .project-item:last-child {
-  margin-bottom: 0;
-}
-#server-projects-list .project-item:hover {
-  background-color: var(--bg-body);
-  color: #fff;
-  border-color: var(--accent-green);
-}
-.modal-button {
-  background-color: var(--bg-toolbar);
-  color: var(--text-light);
-  border: 1px solid var(--border-color);
-  padding: 0.8rem 1.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s, border-color 0.2s;
-  width: 100%;
-  text-align: center;
-}
-.modal-button:hover {
-  background-color: #4a4f57;
-  border-color: #333;
-}
-#timeline-context-menu {
-  position: fixed;
-  display: none;
-  background-color: var(--bg-toolbar);
-  border: 1px solid var(--border-color-dark);
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  padding: 5px 0;
-  z-index: 2000;
-  font-size: 0.9rem;
-}
-#timeline-context-menu div {
-  padding: 8px 15px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-#timeline-context-menu div:hover {
-  background-color: var(--accent-blue);
-  color: white;
-}
+.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 1rem; visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s; }
+.modal-overlay.visible { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s; }
+.modal-content { background-color: var(--bg-body); padding: 1.5rem 2rem; border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 100%; max-width: 500px; position: relative; display: flex; flex-direction: column; gap: 1.5rem; max-height: 90vh; }
+.modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; border: none; background: none; }
+.modal-close:hover { color: var(--text-light); }
+.modal-title { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bg-toolbar); color: var(--text-light); text-align: center; flex-shrink: 0; }
+.modal-section h3 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1rem; color: var(--text-light); }
+#server-projects-list { max-height: 250px; overflow-y: auto; background-color: var(--bg-toolbar); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.5rem; min-height: 50px; }
+#server-projects-list .project-item { background-color: var(--bg-editor); padding: 10px 15px; border-radius: 4px; margin-bottom: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s; border: 1px solid transparent; }
+#server-projects-list .project-item:last-child { margin-bottom: 0; }
+#server-projects-list .project-item:hover { background-color: var(--bg-body); color: #fff; border-color: var(--accent-green); }
+.modal-button { background-color: var(--bg-toolbar); color: var(--text-light); border: 1px solid var(--border-color); padding: 0.8rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, border-color 0.2s; width: 100%; text-align: center; }
+.modal-button:hover { background-color: #4a4f57; border-color: #333; }
+#timeline-context-menu { position: fixed; display: none; background-color: var(--bg-toolbar); border: 1px solid var(--border-color-dark); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); padding: 5px 0; z-index: 2000; font-size: 0.9rem; }
+#timeline-context-menu div { padding: 8px 15px; cursor: pointer; white-space: nowrap; }
+#timeline-context-menu div:hover { background-color: var(--accent-blue); color: white; }
 
 /* =============================================== */
 /* ESTILOS RESPONSIVOS
 /* =============================================== */
 @media (max-width: 1200px) {
-  .info-display-group {
-    gap: 2px;
-  }
-  .info-display {
-    padding: 4px 6px;
-  }
-  .value-input {
-    font-size: 1.2rem;
-    width: 45px;
-  }
-  .compasso-input {
-    width: 20px;
-  }
+  .info-display-group { gap: 2px; }
+  .info-display { padding: 4px 6px; }
+  .value-input { font-size: 1.2rem; width: 45px; }
+  .compasso-input { width: 20px; }
 }
 @media (max-width: 992px) {
-  .global-toolbar {
-    gap: 10px;
-    flex-wrap: wrap;
-    height: auto;
-    padding-bottom: 10px;
-  }
-  .main-content {
-    padding-top: 100px;
-  }
-  .info-display-group {
-    order: 3;
-    width: 100%;
-    justify-content: space-around;
-  }
-  .spacer {
-    display: none;
-  }
+  .global-toolbar { gap: 10px; flex-wrap: wrap; height: auto; padding-bottom: 10px; }
+  .main-content { padding-top: 100px; }
+  .info-display-group { order: 3; width: 100%; justify-content: space-around; }
+  .spacer { display: none; }
 }
 @media (max-width: 768px) {
-  .sample-browser {
-    transform: translateX(-100%);
-    position: fixed;
-    width: 280px;
-  }
-  body:not(.sidebar-hidden) .sample-browser {
-    transform: translateX(0);
-  }
-  #sidebar-toggle {
-    left: 5px;
-    transform: translateX(0);
-    position: fixed;
-  }
-  .global-toolbar {
-    padding-left: 45px;
-  }
-  .main-content {
-    padding: 10px;
-  }
-  .track-lane,
-  .audio-track-lane {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 15px;
-    padding: 15px;
-  }
-  .track-lane .track-info,
-  .audio-track-lane .track-info,
-  .track-lane .track-controls,
-  .audio-track-lane .track-controls {
-    width: 100%;
-    border: none;
-    padding: 0;
-  }
-  .track-lane .track-controls,
-  .audio-track-lane .track-controls {
-    justify-content: space-around;
-  }
+  .sample-browser { transform: translateX(-100%); position: fixed; width: 280px; }
+  body:not(.sidebar-hidden) .sample-browser { transform: translateX(0); }
+  #sidebar-toggle { left: 5px; transform: translateX(0); position: fixed; }
+  .global-toolbar { padding-left: 45px; }
+  .main-content { padding: 10px; }
+  .track-lane, .audio-track-lane { flex-direction: column; align-items: stretch; gap: 15px; padding: 15px; }
+  .track-lane .track-info, .audio-track-lane .track-info, .track-lane .track-controls, .audio-track-lane .track-controls { width: 100%; border: none; padding: 0; }
+  .track-lane .track-controls, .audio-track-lane .track-controls { justify-content: space-around; }
 }
 
 /* =============================================== */
 /* SCROLLBARS
 /* =============================================== */
-::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
-}
-::-webkit-scrollbar-track {
-  background: var(--border-color);
-}
-::-webkit-scrollbar-thumb {
-  background: var(--bg-toolbar);
-  border-radius: 5px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
+::-webkit-scrollbar { height: 10px; width: 10px; }
+::-webkit-scrollbar-track { background: var(--border-color); }
+::-webkit-scrollbar-thumb { background: var(--bg-toolbar); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: #555; }
\ No newline at end of file