removed badges from "on page" section

popup/popup.css

@@ -1027,44 +1027,36 @@ body.dark .header-logo {
   margin-left: 4px;
 }
 
-.page-highlight-count {
-  background: var(--accent);
-  color: var(--accent-text);
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
 .page-highlight-nav {
   display: flex;
-  gap: 4px;
+  gap: 2px;
   flex-shrink: 0;
 }
 
 .page-highlight-nav button {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
-  border-radius: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: color 0.2s;
   padding: 0;
 }
 
-.page-highlight-nav button:hover {
-  background: var(--section-bg);
-  border-color: var(--accent);
-}
-
 .page-highlight-nav button i {
   font-size: 14px;
   color: var(--text-color);
+  opacity: 0.7;
+  transition: color 0.2s, opacity 0.2s;
+}
+
+.page-highlight-nav button:hover i {
+  color: var(--accent);
+  opacity: 1;
 }
 
 /* Exceptions Tab */

src/popup/PopupController.ts

@@ -600,7 +600,6 @@ export class PopupController {
             </span>
             ${highlight.count > 1 ? `<span class="page-highlight-position">${currentIndex + 1}/${highlight.count}</span>` : ''}
           </div>
-          <span class="page-highlight-count">${highlight.count}</span>
           ${highlight.count > 1 ? `
             <div class="page-highlight-nav">
               <button class="highlight-prev" title="${chrome.i18n.getMessage('previous') || 'Previous'}">