seperate color

src/components/SettingsPanel.vue

@@ -28,8 +28,19 @@ const currentOpacity = computed({
     }
 });
 
+const currentColor = computed({
+    get: () => store.selectedImage?.color ?? store.watermarkSettings.color,
+    set: (val) => {
+        if (store.selectedIndex >= 0) {
+            store.setImageSetting(store.selectedIndex, 'color', val);
+        } else {
+            store.updateWatermarkSettings({ color: val });
+        }
+    }
+});
+
 const applyAll = () => {
-    if (confirm("Apply current size and opacity settings to ALL images? This will reset individual adjustments.")) {
+    if (confirm("Apply current settings (Size, Opacity, Color) to ALL images?")) {
         store.applySettingsToAll();
     }
 };
@@ -44,7 +55,7 @@ const applyAll = () => {
           </div>
           <button 
             @click="applyAll" 
-            title="Apply Size & Opacity to All Images"
+            title="Apply Settings to All Images"
             class="bg-gray-700 hover:bg-gray-600 p-1.5 rounded text-xs text-blue-300 transition-colors flex items-center gap-1"
           >
              <Copy class="w-3 h-3" /> All
@@ -72,10 +83,10 @@ const applyAll = () => {
              <Palette class="w-4 h-4 text-gray-400" />
              <input 
                 type="color" 
-                v-model="store.watermarkSettings.color"
+                v-model="currentColor"
                 class="w-8 h-8 rounded cursor-pointer bg-transparent border-none p-0"
              />
-             <span class="text-xs text-gray-300 font-mono">{{ store.watermarkSettings.color }}</span>
+             <span class="text-xs text-gray-300 font-mono">{{ currentColor }}</span>
           </div>
       </div>