fix: Use each button's hover color for at-bottom state + add zoom button

**Bug 1: Wrong at-bottom colors**
- All buttons were showing orange (#f39c12) when at bottom
- User wanted each button to use its own hover color

**Bug 2: Zoom button missing at-bottom state**
- Zoom/search button wasn't changing color at bottom

**Fix - Updated .at-bottom styles to match hover colors:**

Download PDF button:
- Was: Orange (#f39c12)
- Now: PDF Red (#cd6060) - matches hover

Print Friendly button:
- Was: Orange (#f39c12)
- Now: White background + Green icon (#27ae60) - matches hover

Shortcuts button:
- Kept: Orange (#f39c12) - already correct

Color Theme Switcher:
- Was: Uniform orange
- Now: Dynamic colors based on theme mode
  - Light mode: Yellow (#f39c12)
  - Dark mode: Blue (#3498db)
  - Auto mode: Purple (#9b59b6)

Info button:
- Already correct: Green (#27ae60)

Back-to-top button:
- Already correct: Green (#27ae60)

Zoom button:
- Added: Blue (#3498db) - matches hover
- Added to scroll handler in utils._hs

**Result**: Each button now shows its characteristic color when page
is scrolled to bottom, providing consistent visual feedback that matches
the hover state.

Files changed:
- static/hyperscript/utils._hs: Added zoom button
- static/css/main.css: Updated 3 button colors
- static/css/color-theme.css: Dynamic theme colors

static/css/color-theme.css

@@ -199,10 +199,20 @@
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
 }
 
-/* At-bottom state - unified orange for all theme modes */
-.color-theme-switcher.at-bottom {
+/* At-bottom state - dynamic colors based on theme mode (matches hover) */
+.color-theme-switcher.at-bottom[data-theme-mode="light"] {
   opacity: 1;
-  background: #f39c12 !important; /* Orange when at bottom */
+  background: #f39c12 !important; /* Warm sun yellow for light mode */
+}
+
+.color-theme-switcher.at-bottom[data-theme-mode="dark"] {
+  opacity: 1;
+  background: #3498db !important; /* Cool moon blue for dark mode */
+}
+
+.color-theme-switcher.at-bottom[data-theme-mode="auto"] {
+  opacity: 1;
+  background: #9b59b6 !important; /* Purple for auto mode */
 }
 
 .color-theme-switcher iconify-icon {

static/css/main.css

@@ -4070,6 +4070,11 @@ html {
     background: #3498db; /* Blue hover */
 }
 
+.zoom-toggle-btn.at-bottom {
+    opacity: 1;
+    background: #3498db; /* Blue - matches hover */
+}
+
 /* No special styling for active state - button looks same whether zoom is on or off */
 
 .shortcuts-btn {
@@ -4149,7 +4154,12 @@ html {
 
 .print-friendly-btn.at-bottom {
     opacity: 1;
-    background: #f39c12; /* Orange when at bottom */
+    background: white !important; /* White background - matches hover */
+    color: #27ae60; /* Green - matches hover */
+}
+
+.print-friendly-btn.at-bottom iconify-icon {
+    color: #27ae60; /* Green icon when at bottom */
 }
 
 /* Download Button (TOP POSITION) */
@@ -4197,7 +4207,7 @@ html {
 
 .download-btn.at-bottom {
     opacity: 1;
-    background: #f39c12; /* Orange when at bottom */
+    background: #cd6060 !important; /* PDF red - matches hover */
 }
 
 /* Mobile adjustments */

static/hyperscript/utils._hs

@@ -117,6 +117,7 @@ def handleScroll()
     add .at-bottom to #download-button
     add .at-bottom to #print-friendly-button
     add .at-bottom to .color-theme-switcher
+    add .at-bottom to #zoom-toggle-button
   end
 
   if not isAtBottom
@@ -126,6 +127,7 @@ def handleScroll()
     remove .at-bottom from #download-button
     remove .at-bottom from #print-friendly-button
     remove .at-bottom from .color-theme-switcher
+    remove .at-bottom from #zoom-toggle-button
   end
 
   -- Update last scroll position