Fix CSS specificity: add parent selectors to toggle-slider

The global .toggle-slider styles were overriding the specific
.toggle-switch-large .toggle-slider styles. Fixed by adding
.toggle-switch parent selector.

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

backend/app/utils/ssh_keys.py

@@ -22,11 +22,24 @@ async def sync_authorized_keys():
             devices = result.scalars().all()
 
             keys = []
+            # Security restrictions for tunnel keys:
+            # - no-pty: no terminal allocation (prevents shell)
+            # - no-X11-forwarding: no X11
+            # - no-agent-forwarding: no SSH agent
+            # - permitopen: only allow forwarding to localhost ports 22 and 80
+            restrictions = (
+                'no-pty,'
+                'no-X11-forwarding,'
+                'no-agent-forwarding,'
+                'permitopen="localhost:22",'
+                'permitopen="localhost:80"'
+            )
             for device in devices:
                 if device.config and 'ssh_public_key' in device.config:
                     ssh_key = device.config['ssh_public_key'].strip()
                     if ssh_key:
-                        keys.append(f"{ssh_key} # {device.mac_address}")
+                        # Format: restrictions key comment
+                        keys.append(f"{restrictions} {ssh_key} # device:{device.mac_address}")
 
             authorized_keys_content = "\n".join(keys) + "\n" if keys else ""
 

frontend/src/views/superadmin/DevicesView.vue

@@ -1279,11 +1279,11 @@ code { background: #f7fafc; padding: 4px 8px; border-radius: 4px; font-family: m
 .toggle-row:last-child { margin-bottom: 0; }
 .toggle-row span { font-size: 13px; font-weight: 500; color: #4a5568; }
 
-/* Toggle switch */
+/* Toggle switch (for modals) */
 .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
 .toggle-switch input { opacity: 0; width: 0; height: 0; }
-.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e0; border-radius: 26px; transition: 0.3s; }
-.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; }
+.toggle-switch .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e0; border-radius: 26px; transition: 0.3s; }
+.toggle-switch .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; }
 .toggle-switch input:checked + .toggle-slider { background-color: #667eea; }
 .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }
 .toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }