From a32b4aa1d11e52d5e99811766fc91a6afbb9cbf2 Mon Sep 17 00:00:00 2001
From: EP <ep@Mac.lan>
Date: Wed, 20 Aug 2025 21:30:51 -0700
Subject: [PATCH] Mutation Lab: add spacing and colored variants for
 Copy/Download buttons

---
 css/style.css | 7 +++++--
 index.html    | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 9386ca1..5ca0b15 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2130,6 +2130,9 @@ html {
 }
 
 /* Mutation Lab actions */
-.mutation-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.mutation-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 12px 0; }
 .mutation-actions .action-button, .mutation-actions .transform-button { white-space: nowrap; }
-.mutation-actions .action-button i, .mutation-actions .transform-button i { margin-right: 6px; }
+.mutation-actions .action-button.copy { border-color: #1976d2; color: #90caf9; }
+.mutation-actions .action-button.copy:hover { color: #bbdefb; box-shadow: 0 0 0 1px rgba(144,202,249,.2) inset, 0 0 14px rgba(144,202,249,.18); }
+.mutation-actions .action-button.download { border-color: #2e7d32; color: #69f0ae; }
+.mutation-actions .action-button.download:hover { color: #b9f6ca; box-shadow: 0 0 0 1px rgba(105,240,174,.2) inset, 0 0 14px rgba(105,240,174,.18); }
diff --git a/index.html b/index.html
index f754ff8..09a3264 100644
--- a/index.html
+++ b/index.html
@@ -429,8 +429,8 @@
                         </div>
                         <div class="token-bomb-actions mutation-actions">
                             <button class="transform-button" @click="generateFuzzCases"><i class="fas fa-hammer"></i> Generate Cases</button>
-                            <button class="action-button" v-if="fuzzerOutputs.length" @click="copyAllFuzz"><i class="fas fa-copy"></i> Copy All</button>
-                            <button class="action-button" v-if="fuzzerOutputs.length" @click="downloadFuzz"><i class="fas fa-download"></i> Download</button>
+                            <button class="action-button copy" v-if="fuzzerOutputs.length" @click="copyAllFuzz"><i class="fas fa-copy"></i> Copy All</button>
+                            <button class="action-button download" v-if="fuzzerOutputs.length" @click="downloadFuzz"><i class="fas fa-download"></i> Download</button>
                         </div>
                         <div class="output-container" v-if="fuzzerOutputs.length">
                             <div class="token-tiles fuzzer-list" style="display:flex; flex-direction:column; gap:8px;">