diff --git a/public/index.html b/public/index.html
index b1b498e..60d2099 100644
--- a/public/index.html
+++ b/public/index.html
@@ -76,7 +76,7 @@
       <!-- Seção: Observações -->
       <div class="sidebar-actions-obs" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
         <!-- Botão: Minhas Observações -->
-        <button class="btn-observacoes" id="btnObservacoes">
+        <button class="btn-observacoes" id="btnObservacoes" style="border-color: #f43f5e; color: #f43f5e; background: rgba(244, 63, 94, 0.05);">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
           </svg>
@@ -118,7 +118,7 @@
         </button>
 
         <!-- Botão: Modelos de Relatório -->
-        <button class="btn-observacoes" id="btnModelosRelatorio">
+        <button class="btn-observacoes" id="btnModelosRelatorio" style="border-color: #14b8a6; color: #14b8a6; background: rgba(20, 184, 166, 0.05);">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
           </svg>
diff --git a/public/style.css b/public/style.css
index 53e81da..9dc33f2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2249,41 +2249,49 @@ code {
 
 /* Modo Música: Estilos e Cores (Roxo/Violeta) */
 .btn-prompt-mode.mode-music {
-  border-color: rgba(168, 85, 247, 0.3);
+  border-color: rgba(168, 85, 247, 0.4);
+  color: #c084fc;
+  background-color: rgba(168, 85, 247, 0.05);
 }
 .btn-prompt-mode.mode-music:hover {
   border-color: rgb(168, 85, 247);
-  background-color: rgba(168, 85, 247, 0.06);
-  color: rgb(216, 180, 254);
+  background-color: rgba(168, 85, 247, 0.1);
+  color: #d8b4fe;
 }
 
 /* Modo Vídeo: Estilos e Cores (Azul/Ciano) */
 .btn-prompt-mode.mode-video {
-  border-color: rgba(6, 182, 212, 0.3);
+  border-color: rgba(6, 182, 212, 0.4);
+  color: #22d3ee;
+  background-color: rgba(6, 182, 212, 0.05);
 }
 .btn-prompt-mode.mode-video:hover {
   border-color: rgb(6, 182, 212);
-  background-color: rgba(6, 182, 212, 0.06);
-  color: rgb(165, 243, 252);
+  background-color: rgba(6, 182, 212, 0.1);
+  color: #67e8f9;
 }
 
 /* Modo Imagem: Estilos e Cores (Laranja/Rosa) */
 .btn-prompt-mode.mode-image {
-  border-color: rgba(249, 115, 22, 0.3);
+  border-color: rgba(249, 115, 22, 0.4);
+  color: #fb923c;
+  background-color: rgba(249, 115, 22, 0.05);
 }
 .btn-prompt-mode.mode-image:hover {
   border-color: rgb(249, 115, 22);
-  background-color: rgba(249, 115, 22, 0.06);
-  color: rgb(253, 186, 116);
+  background-color: rgba(249, 115, 22, 0.1);
+  color: #fdba74;
 }
 
 /* Modo Texto/História: Estilos e Cores (Verde Kemily) */
 .btn-prompt-mode.mode-text {
-  border-color: rgba(16, 163, 127, 0.3);
+  border-color: rgba(16, 163, 127, 0.4);
+  color: #34d399;
+  background-color: rgba(16, 163, 127, 0.05);
 }
 .btn-prompt-mode.mode-text:hover {
   border-color: var(--brand-green);
-  background-color: rgba(16, 163, 127, 0.06);
+  background-color: rgba(16, 163, 127, 0.1);
   color: rgb(167, 243, 208);
 }