Install-as-app guide and iPhone safe-area support

- Install banner (phones), Settings guide and dialog with iPhone/iPad and Android steps,
  native Install button where supported; steps also on the dashboard Account page
- apple-touch-icon now a PNG (iOS ignores SVG icons)
- Shared pwa-safe.css: dark cap behind the status bar/Dynamic Island in the installed app,
  inset-aware offline banner, pull-to-refresh, bottom bars, full-screen map, dialogs
- Landscape-aware content gutters; measured top-bar height; viewport-fit=cover on every page

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

app/public/dashboard-account.html

@@ -5,6 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 <meta name="theme-color" content="#070c14">
 <link rel="manifest" href="/dashboard.webmanifest">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<link rel="stylesheet" href="/pwa-safe.css">
 <title>Account</title>
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -77,6 +80,16 @@ dialog .row { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top:
     <p class="hint">Changing your password signs you out everywhere else.</p>
   </div>
 
+  <div class="section" id="installSection">
+    <div class="section-hdr">Install this dashboard as an app</div>
+    <p class="hint" style="margin:0 0 0.7rem" id="installDone" hidden>✓ You're using the installed app.</p>
+    <div id="installSteps">
+      <p class="hint" style="margin:0 0 0.4rem"><b>iPhone / iPad (Safari):</b> tap the <b>Share</b> button, then <b>Add to Home Screen</b>, then <b>Add</b>.</p>
+      <p class="hint" style="margin:0"><b>Android (Chrome):</b> tap the <b>⋮ menu</b>, then <b>Install app</b> (or <b>Add to Home screen</b>), then <b>Install</b>.</p>
+      <p class="hint">Open the app from its Home Screen icon for full screen. The weather app at <b>/</b> installs separately the same way.</p>
+    </div>
+  </div>
+
   <div id="adminArea" class="hidden">
     <div class="section">
       <div class="section-hdr"><span>Users</span><span id="userCount" class="hint" style="margin:0"></span></div>
@@ -188,6 +201,9 @@ $('nuBtn').addEventListener('click', async () => {
   } catch (e) { flash($('nuMsg'), e.message, true); }
 });
 
+if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
+  $('installDone').hidden = false; $('installSteps').hidden = true;
+}
 (async () => {
   try {
     me = await api('/api/dashboard/me');