feat: 分享传播与经文纸水墨背景

- 分享按钮：系统分享 + 二维码卡片（qr.png），移动端移入播放行不再遮挡标题
- og 分享卡片元数据 + og.png 封面；beforeinstallprompt 安装提示
- robots.txt / sitemap.xml / poster.png 传播物料
- .sutra-paper 宣纸底纹：桌面 bg.jpg，移动端竖版 bg-m.jpg，夜间模式罩层适配
- 移动端设置区重排为双列标签网格

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app.js

@@ -1037,3 +1037,64 @@ function openAdmin() {
   loadStats();
   card.querySelector("#admin-refresh").addEventListener("click", loadStats);
 }
+
+// ===== 分享与 PWA 安装提示 =====
+const btnShare = document.getElementById("btn-share");
+let installPromptEvt = null; // beforeinstallprompt 事件暂存，供分享卡片内"安装到主屏幕"使用
+window.addEventListener("beforeinstallprompt", (e) => {
+  e.preventDefault();
+  installPromptEvt = e;
+});
+
+/** 分享本站：两端统一弹二维码卡片，手机端贴底升起；支持系统分享时另有"发送给朋友"。 */
+btnShare.addEventListener("click", () => {
+  openShareCard(location.origin + "/");
+});
+
+/** 分享卡片：二维码扫码即达 + 复制链接 + 系统分享（如可用）+ 可安装时显示安装按钮。 */
+function openShareCard(url) {
+  const mask = document.createElement("div");
+  mask.className = "admin-mask share";
+  const card = document.createElement("div");
+  card.className = "admin-card share-card";
+  card.setAttribute("role", "dialog");
+  card.setAttribute("aria-label", "分享本站");
+  card.innerHTML = `
+    <div class="admin-title">分享本站</div>
+    <img class="share-qr" src="qr.png" alt="本站二维码">
+    <span class="share-link">${url}</span>
+    <div class="admin-actions">
+      ${navigator.share ? '<button type="button" class="admin-btn" id="share-native">发送给朋友</button>' : ""}
+      <button type="button" class="admin-btn" id="share-copy">复制链接</button>
+      ${installPromptEvt ? '<button type="button" class="admin-btn" id="share-install">安装到主屏幕</button>' : ""}
+      <button type="button" class="admin-btn" id="share-close">关闭</button>
+    </div>`;
+  mask.appendChild(card);
+  document.body.appendChild(mask);
+  const close = () => mask.remove();
+  mask.addEventListener("click", (e) => { if (e.target === mask) close(); });
+  card.querySelector("#share-close").addEventListener("click", close);
+  card.querySelector("#share-native")?.addEventListener("click", async () => {
+    try {
+      await navigator.share({
+        title: "经典诵读",
+        text: "心经、金刚经、道德经等经典在线诵读：千问语音合成，逐字高亮跟读，山寺配乐。",
+        url,
+      });
+    } catch { /* 用户取消分享 */ }
+  });
+  card.querySelector("#share-copy").addEventListener("click", async (e) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      e.target.textContent = "已复制";
+    } catch {
+      e.target.textContent = "复制失败";
+    }
+  });
+  card.querySelector("#share-install")?.addEventListener("click", async () => {
+    installPromptEvt.prompt();
+    await installPromptEvt.userChoice;
+    installPromptEvt = null;
+    close();
+  });
+}