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/index.html

@@ -3,9 +3,10 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<link rel="stylesheet" href="/pwa-safe.css">
 <title>NeCloud Weather</title>
 <link rel="manifest" href="/manifest.json">
-<link rel="apple-touch-icon" href="/icons/icon.svg">
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
 <meta name="theme-color" content="#edf2f7" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="#070c14" media="(prefers-color-scheme: dark)">
 <meta name="apple-mobile-web-app-capable" content="yes">
@@ -41,6 +42,14 @@
     </div>
   </header>
 
+  <!-- Install-as-app prompt (phones, not yet installed, dismissible) -->
+  <div id="install-banner" class="install-banner hidden" role="region" aria-label="Install the app">
+    <span class="ib-ico" aria-hidden="true">📲</span>
+    <div class="ib-text"><b>Install NeCloud Weather</b><span>Add it to your Home Screen for a full-screen app.</span></div>
+    <button type="button" class="ib-btn" id="ib-how">How</button>
+    <button type="button" class="ib-x" id="ib-close" aria-label="Dismiss">✕</button>
+  </div>
+
   <!-- Loading: skeleton of the Now tab -->
   <div id="loading" class="loading hidden" aria-busy="true" aria-label="Loading weather">
     <div class="sk sk-hero"></div>
@@ -416,6 +425,9 @@
   <div id="tab-settings" class="tab-panel hidden">
     <div class="settings-wrap">
 
+      <div class="settings-section-label">Install the app</div>
+      <div id="install-card" class="install-card"></div>
+
       <div class="settings-section-label">Station</div>
       <div class="settings-nav-links">
         <a href="/?tab=station" class="settings-nav-link">Live Station</a>
@@ -1277,6 +1289,11 @@
   </button>
 </nav>
 
+<dialog id="install-dialog" class="install-dialog" aria-label="How to install the app">
+  <div class="install-dialog-head"><h2>Install the app</h2><button type="button" id="install-dialog-close" aria-label="Close">✕</button></div>
+  <div id="install-dialog-body"></div>
+</dialog>
+
 <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
 <script src="app.js"></script>
 <script src="station-live.js"></script>