Style every MFA screen through the element system

The MFA pages (manage, TOTP activate/deactivate, recovery codes, security keys,
reauthenticate) are built almost entirely from allauth's `element` primitives, so
they are styled by overriding the elements rather than by rewriting eight page
templates. New allauth pages then inherit the look for free.

- field + img elements were missing entirely, so allauth fell back to bare HTML:
  the TOTP secret and recovery-code list rendered as unstyled inputs. The QR now
  sits on a white plate -- it is dark modules on a transparent ground, so on the
  dark theme it was dark-on-dark and phones could not scan it.
- button now honours the tags allauth sets. They were all flattened to
  btn-primary, which made "Deactivate" look exactly as safe as "View".
- the `code` field renders as a daisyUI otp wherever it appears, so the
  reauthenticate and activate pages get the same input as the login challenge.
  The boxes step aside past six characters: allauth accepts a TOTP code (6) or a
  recovery code (8) in that one field.

Fixes a crash: the security-key list does {% load humanize %}, which raised
TemplateSyntaxError because django.contrib.humanize was not installed. That page
500'd on every request; it is now installed and covered by a test.

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

templates/_base.html

@@ -122,6 +122,29 @@
             applyMode(currentMode());
         </script>
 
+        <script>
+            // A TOTP code is 6 characters, a recovery code 8, and allauth accepts either in
+            // the same field. The boxed otp layout only fits six, so past that we fall back
+            // to a plain input rather than letting the text spill out of the boxes. Boxing
+            // the field to six and calling it done would lock recovery codes out entirely.
+            document.querySelectorAll("[data-otp]").forEach((otp) => {
+                const input = otp.querySelector("input");
+                if (!input) return;
+
+                const fit = () => {
+                    const boxed = input.value.length <= 6;
+                    otp.classList.toggle("otp", boxed);
+                    otp.classList.toggle("otp-lg", boxed);
+                    otp.querySelectorAll("span").forEach((box) => box.classList.toggle("hidden", !boxed));
+                    input.classList.toggle("input", !boxed);
+                    input.classList.toggle("input-lg", !boxed);
+                };
+
+                input.addEventListener("input", fit);
+                fit();
+            });
+        </script>
+
         {% comment %}
             allauth puts page-level scripts and out-of-form markup here — notably the
             hidden `mfa_login` form the passkey button submits. Without this block that