release: v4.9.1 — redesigned QR scanner, UI fixes, README overhaul

UI / design
- Rework the camera scan modal to the new "Start Secure" design: green
  viewfinder with corner brackets, animated scan line, spinner + live
  frame counter, and a blurred dark backdrop. Keep the Html5Qrcode
  #qr-reader video feed, styled to fill the square viewfinder.
- Fix Advanced (network) settings: the fixed landing header (z-50) was
  covering the panel's close button — raise the embedded overlay to z-60.
- Stack the connection-screen footer buttons ("Download desktop app" /
  "Advanced settings") full-width on mobile and tablet instead of in a row.

Docs
- Rewrite README to follow GitHub best practices: capability-oriented
  Features, How it works, and Security model sections; move release notes
  out of the README and point to CHANGELOG.md. Keep logo and screenshots.

Chore
- Bump version to 4.9.1 (header, package.json, manifest) and rebuild bundles.

src/styles/components.css

@@ -765,7 +765,22 @@ button i {
 @keyframes sbSpin { to { transform: rotate(360deg); } }
 @keyframes sbUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes sbNode { 0%,100% { box-shadow: 0 0 0 0 rgba(62,207,142,0.0); } 50% { box-shadow: 0 0 0 6px rgba(62,207,142,0.06); } }
+@keyframes sbScan { 0% { top: 8%; } 100% { top: 88%; } }
 @keyframes sbSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
+
+/* Camera scan modal — make the Html5Qrcode-injected video fill the square viewfinder */
+#qr-reader { width: 100%; height: 100%; border: none !important; }
+#qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
+#qr-reader img, #qr-reader__dashboard, #qr-reader__status_span { display: none !important; }
+
+/* Connection screen footer — stack "Download desktop app" / "Advanced settings"
+   full-width on mobile and tablet instead of side-by-side. Inline styles win on
+   specificity, so the responsive overrides are marked !important. */
+@media (max-width: 1024px) {
+    .sb-conn-footer { flex-direction: column !important; align-items: stretch !important; }
+    .sb-conn-footer > button { width: 100% !important; justify-content: center !important; }
+    .sb-conn-footer > .sb-platforms-menu { width: 100% !important; }
+}
 .sb-start textarea::placeholder, .sb-start input::placeholder { color: #56565e; }
 .sb-start .sb-sc::-webkit-scrollbar { width: 8px; }
 .sb-start .sb-sc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }