Fix recovery codes being unreadable (light-on-light) when OS is in light mode but app theme is dark (v0.11.120)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "site-gateway",
-  "version": "0.11.118",
+  "version": "0.11.120",
   "private": true,
   "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.",
   "type": "module",

src/public/app.js

@@ -788,7 +788,7 @@ $("#mfa-setup-confirm-form").addEventListener("submit", async event => {
     state.user.mfaEnabled = true;
     renderAccount();
     $("#mfa-recovery-codes").textContent = result.recoveryCodes.join("\n");
-    $("#mfa-recovery-dialog").showModal();
+    requestAnimationFrame(() => $("#mfa-recovery-dialog").showModal());
     toast("Two-factor authentication enabled.");
   } catch (error) { $("#mfa-setup-error").textContent = error.message; }
 });
@@ -812,7 +812,7 @@ $("#account-mfa-recovery").addEventListener("click", async () => {
   try {
     const result = await api("/api/account/mfa/recovery-codes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ password }) });
     $("#mfa-recovery-codes").textContent = result.recoveryCodes.join("\n");
-    $("#mfa-recovery-dialog").showModal();
+    requestAnimationFrame(() => $("#mfa-recovery-dialog").showModal());
     toast("Recovery codes regenerated. Your old codes no longer work.");
   } catch (error) { toast(error.message, "error"); }
 });

src/public/index.html

@@ -7,7 +7,7 @@
   <title>Site Gateway</title>
   <meta name="description" content="Host sites, proxy services, and manage HTTPS from one simple dashboard.">
   <link rel="icon" type="image/png" href="/site-gateway-icon-approved.png">
-  <link rel="stylesheet" href="/styles.css?v=0.11.117">
+  <link rel="stylesheet" href="/styles.css?v=0.11.120">
 </head>
 
 <!-- ================================================================
@@ -430,6 +430,6 @@
   <div id="toast" class="toast" role="status"></div>
   <div id="update-banner" class="update-banner hidden" role="status"><span>A new version of Site Gateway is available.</span><div class="update-banner-actions"><button id="update-banner-refresh" class="button primary">Refresh</button><button id="update-banner-dismiss" class="text-button">Dismiss</button></div></div>
   <!-- App scripts: core (app.js) then extended views/admin (features.js) -->
-  <script src="/app.js?v=0.11.118" defer></script><script src="/features.js?v=0.11.114" defer></script>
+  <script src="/app.js?v=0.11.119" defer></script><script src="/features.js?v=0.11.114" defer></script>
 </body>
 </html>

src/public/styles.css

@@ -281,6 +281,6 @@ select{appearance:none!important;-webkit-appearance:none!important;background-re
 @media(max-width:760px){.performance-table th:nth-child(2),.performance-table td:nth-child(2){display:none}.performance-table th:nth-child(1),.performance-table td:nth-child(1){width:40%}.performance-table th:nth-child(3),.performance-table td:nth-child(3){width:30%}.performance-table th:nth-child(4),.performance-table td:nth-child(4){width:30%}}
 .mfa-qr{display:flex;justify-content:center;padding:16px;background:#fff;border-radius:12px;margin:16px 0}
 .mfa-qr svg{width:200px;height:200px}
-.mfa-recovery-codes{background:#0a1423;border:1px solid var(--line);border-radius:10px;padding:16px;font-size:14px;line-height:1.8;letter-spacing:.02em;white-space:pre-wrap;user-select:all}
-@media(prefers-color-scheme:light){.mfa-recovery-codes{background:#f3f6fa}}
+.mfa-recovery-codes{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:16px;font-size:14px;line-height:1.8;letter-spacing:.02em;white-space:pre-wrap;user-select:all}
+
 #account-view>.dashboard-panel+.dashboard-panel{margin-top:18px}