feat: improve page highlight with orange color and template grouping

- Add --color-page-highlight CSS variable (#ff8a50)
- Change page edge highlight from blue to orange
- Keep border visible while PagePopup is open
- Highlight all pages using the same template (data-page-type)
- Display dynamic page count in PagePopup header
- Emit close event from PagePopup for proper cleanup

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

src/components/PagePopup.vue

@@ -8,7 +8,7 @@
       <div class="header-left">
         <span class="page-label">@page</span>
         <span class="page-name">geoformat</span>
-        <span class="page-count">6 pages</span>
+        <span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
       </div>
       <button class="close-btn" @click="close">×</button>
     </div>
@@ -298,9 +298,12 @@ const props = defineProps({
   iframeRef: Object,
 });
 
+const emit = defineEmits(['close']);
+
 const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
 const selectedPageElement = ref(null);
+const pageCount = ref(0);
 const isEditable = ref(false);
 const inheritanceLocked = ref(true);
 const backgroundColorInput = ref(null);
@@ -462,13 +465,11 @@ const loadValuesFromStylesheet = () => {
   }
 };
 
-const open = (pageElement, event) => {
+const open = (pageElement, event, count = 1) => {
   selectedPageElement.value = pageElement;
+  pageCount.value = count;
   position.value = calculatePosition(event);
 
-  // Add border to the selected page
-  pageElement.style.outline = '2px solid #61afef';
-
   // Load values from stylesheet
   loadValuesFromStylesheet();
 
@@ -507,13 +508,10 @@ const open = (pageElement, event) => {
 };
 
 const close = () => {
-  // Remove border from the selected page
-  if (selectedPageElement.value) {
-    selectedPageElement.value.style.outline = '';
-    selectedPageElement.value = null;
-  }
+  selectedPageElement.value = null;
   visible.value = false;
   isEditable.value = false;
+  emit('close');
 };
 
 const toggleInheritance = () => {
@@ -602,7 +600,7 @@ defineExpose({ open, close, visible });
 }
 
 .page-label {
-  background: #ff8a50;
+  background: var(--color-page-highlight);
   color: white;
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
@@ -616,7 +614,7 @@ defineExpose({ open, close, visible });
 }
 
 .page-count {
-  color: #ff8a50;
+  color: var(--color-page-highlight);
   font-size: 0.875rem;
 }