feat: improve zoom control UX - circular button with colorful hover

Design improvements based on user feedback:
- Move current zoom value inside circular reset button
- Add colorful gradient (red→orange→blue→green) to slider on hover
- Make reset button perfectly circular (44px diameter)
- Dynamic value display updates in real-time inside button
- Maintains gray monochrome when not hovering
- Enhanced visual feedback with smooth color transitions
- Mobile responsive with smaller circular button (38px)

Technical changes:
- HTML: Moved #zoom-value-current span inside button
- CSS: border-radius 50%, min-width/min-height for perfect circle
- CSS: Gradient hover for both WebKit and Firefox sliders
- JavaScript: Already compatible (targets same element ID)

templates/index.html

@@ -472,16 +472,15 @@
             aria-valuenow="100"
             aria-valuetext="100%">
 
-        <span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100</span>
-
         <span class="zoom-value zoom-value-max" aria-hidden="true">200</span>
 
         <button
             id="zoom-reset"
             class="zoom-reset-btn"
             aria-label="{{if eq .Lang "es"}}Restablecer zoom al 100%{{else}}Reset zoom to 100%{{end}}"
-            title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}">
-            100
+            title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}"
+            aria-live="polite">
+            <span id="zoom-value-current">100</span>
         </button>
     </div>