fix: encryption ring renders as a true circle, not a squashed ellipse

The enc canvas was drawn at 233x120 internally but .recon-chart-box canvas
forced width:100%/height:100% onto a ~233x115 box, scaling the bitmap and
flattening the ring. #recon-encryption is now a static 112px square with the
doughnut drawn at height 112, so internal and CSS pixels match (1:1) and the
circle stays circular. Verified on device: box and bitmap both 112x112,
card fits without overflow, legend intact, no JS exceptions.

payload/user/remote_access/pager-webui/www/css/app.css

@@ -325,6 +325,7 @@ html.dark .muted { color: #bdbdbd; }
 }
 .recon-chart-box { position: relative; flex: 1; min-height: 0; margin-top: auto; }
 .recon-chart-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+#recon-encryption { position: static; display: block; width: 112px; height: 112px; margin: 0 auto; }
 .recon-no-data { font-style: italic; color: #787878; display: flex; justify-content: center; align-items: center; padding: 8px; text-align: center; }
 .recon-enc-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; align-items: baseline; }
 .recon-enc-entry { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); }

payload/user/remote_access/pager-webui/www/js/views.js

@@ -2310,7 +2310,7 @@ views.recon = (root) => {
     if (enc && typeof MiniChart !== 'undefined' && MiniChart.doughnut) {
       try {
         if (aps.length) {
-          MiniChart.doughnut(enc, encSegs, { legend: false, height: 120 });
+          MiniChart.doughnut(enc, encSegs, { legend: false, height: 112 });
           enc.classList.remove('hidden');
           encEmpty.classList.add('hidden');
         } else {