fix: icons outside the pill — globe left, track center, hard-drive right

Moved icons to sit outside the toggle track on either side.
Both icons are always fully visible. The active side's icon
gets the accent color, the inactive side dims to secondary.
Track is a minimal 36×20px pill with a sliding thumb.
- Off: globe bright, thumb left, hard-drive dimmed
- On: globe dimmed, thumb right + yellow track, hard-drive accent

frontend/index.css

@@ -41,71 +41,65 @@ p {
 }
 
 .mode-toggle {
-    position: relative;
     display: flex;
     align-items: center;
-    width: 52px;
-    height: 26px;
-    border-radius: 13px;
-    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
+    gap: 6px;
     cursor: pointer;
     flex-shrink: 0;
+}
+
+.mode-toggle-track {
+    position: relative;
+    width: 36px;
+    height: 20px;
+    border-radius: 10px;
+    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.15));
     transition: background 0.2s ease;
 }
 
-.mode-toggle:hover {
-    background: rgba(255, 255, 255, 0.15);
+.mode-toggle:hover .mode-toggle-track {
+    background: rgba(255, 255, 255, 0.22);
 }
 
 .mode-toggle-thumb {
     position: absolute;
     top: 2px;
     left: 2px;
-    width: 22px;
-    height: 22px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     background: var(--yj-text-primary, #fff);
     transition: left 0.2s ease, background 0.2s ease;
-    z-index: 1;
 }
 
-.mode-toggle.active .mode-toggle-thumb {
-    left: 28px;
-    background: #000;
-}
-
-.mode-toggle.active {
+.mode-toggle.active .mode-toggle-track {
     background: var(--yj-accent, #ffd43b);
 }
 
+.mode-toggle.active .mode-toggle-thumb {
+    left: 18px;
+    background: #000;
+}
+
 .mode-icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    z-index: 2;
-    transition: opacity 0.2s ease;
-    pointer-events: none;
+    font-size: 14px;
+    transition: color 0.2s ease, opacity 0.2s ease;
 }
 
 .mode-icon-globe {
-    left: 7px;
-    color: #000;
-    opacity: 0;
+    color: var(--yj-text-primary, #fff);
 }
 
 .mode-icon-local {
-    right: 7px;
-    color: var(--yj-text-secondary, #b3b3b3);
-    opacity: 1;
+    color: var(--yj-text-secondary, #888);
 }
 
 .mode-toggle.active .mode-icon-globe {
-    opacity: 1;
+    color: var(--yj-text-secondary, #888);
 }
 
 .mode-toggle.active .mode-icon-local {
-    opacity: 0;
+    color: var(--yj-accent, #ffd43b);
 }
 
 ul {

frontend/index.html

@@ -17,7 +17,9 @@
         </hgroup>
         <div id="library-only-toggle" class="mode-toggle" title="Toggle Library Only mode">
             <wa-icon name="globe" class="mode-icon mode-icon-globe"></wa-icon>
+            <div class="mode-toggle-track">
                 <div class="mode-toggle-thumb"></div>
+            </div>
             <wa-icon name="hard-drive" class="mode-icon mode-icon-local"></wa-icon>
         </div>
         <library-filter></library-filter>