fix: improve bidirectional sync between stylesheet and ElementPopup fields

Replace content watcher with customCss watcher and add isEditing watcher
to properly sync field values when CSS is edited in StylesheetViewer.

Changes:
- Watch customCss instead of content for real-time updates
- Watch isEditing to reload values when exiting edit mode
- Use isUpdatingFromStore + nextTick to prevent circular updates
- Ensure popup fields stay in sync with stylesheet changes

Now when editing CSS manually in the Code tab, ElementPopup fields
update automatically when exiting edit mode.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/ElementPopup.vue

@@ -598,10 +598,29 @@ watch(isEditable, async (newValue, oldValue) => {
 
 // Watch stylesheet changes to sync values
 watch(
-  () => stylesheetStore.content,
+  () => stylesheetStore.customCss,
   () => {
-    if (visible.value && !stylesheetStore.isEditing) {
+    if (visible.value && !isUpdatingFromStore) {
+      isUpdatingFromStore = true;
       loadValuesFromStylesheet();
+      nextTick(() => {
+        isUpdatingFromStore = false;
+      });
+    }
+  }
+);
+
+// Also watch when exiting edit mode
+watch(
+  () => stylesheetStore.isEditing,
+  (isEditing, wasEditing) => {
+    // When exiting edit mode, reload values
+    if (visible.value && wasEditing && !isEditing && !isUpdatingFromStore) {
+      isUpdatingFromStore = true;
+      loadValuesFromStylesheet();
+      nextTick(() => {
+        isUpdatingFromStore = false;
+      });
     }
   }
 );