fix: PWA status bar & theming — black-translucent + dark bg match

- apple-mobile-web-app-status-bar-style: black-translucent
- theme-color/background_color → #1a1a2e (dark theme)
- body safe-area-inset padding for notch/status bar
- body bg-color to #1a1a2e for seamless PWA splash

webapp/tipitaka-web/index.html

@@ -11,13 +11,13 @@
 
     <!-- iOS PWA / Safari -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="Tipitaka มจร." />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
-    <!-- Theme color -->
-    <meta name="theme-color" content="#8b6914" />
-    <meta name="msapplication-TileColor" content="#faf6ef" />
+    <!-- Theme color — dark theme (#1a1a2e) for seamless PWA status bar on Android/iOS -->
+    <meta name="theme-color" content="#1a1a2e" />
+    <meta name="msapplication-TileColor" content="#1a1a2e" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

webapp/tipitaka-web/public/manifest.json

@@ -4,8 +4,8 @@
   "description": "พระไตรปิฎกฉบับมหาวิทยาลัยมหาจุฬาลงกรณราชวิทยาลัย — Tipitaka MCU Reader",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#faf6ef",
-  "theme_color": "#8b6914",
+  "background_color": "#1a1a2e",
+  "theme_color": "#1a1a2e",
   "orientation": "any",
   "icons": [
     {

webapp/tipitaka-web/src/index.css

@@ -29,6 +29,13 @@ body {
   display: flex;
   min-width: 320px;
   min-height: 100vh;
+  /* Safe area padding for PWA notch/status bar (iOS black-translucent) */
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  /* Default bg matches dark theme — seamless PWA splash/status bar */
+  background-color: #1a1a2e;
 }
 
 #root {