diff --git a/server/public/home.html b/server/public/home.html
index 1c31838..d45ed9a 100644
--- a/server/public/home.html
+++ b/server/public/home.html
@@ -27,6 +27,15 @@
which populates env(safe-area-inset-*) with real values on every device (notch, Dynamic Island, home
indicator). On the web these resolve to 0. All layout below pads with var(--sat)/var(--sab). */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--kb:0px;}
+ /* Native system-bar look (Android), chosen via a class on . Pseudo-elements fill/mark the status +
+ nav inset regions that are otherwise plain white under edge-to-edge. Exactly one class is set at a time. */
+ /* Option 1 — brand-blue bars (icons set to light/white to suit): */
+ html.native-app.sysbar-blue::before,html.native-app.sysbar-blue::after{content:"";position:fixed;left:0;right:0;background:#1F3B73;z-index:6000;pointer-events:none;}
+ html.native-app.sysbar-blue::before{top:0;height:env(safe-area-inset-top,0px);}
+ html.native-app.sysbar-blue::after{bottom:0;height:env(safe-area-inset-bottom,0px);}
+ /* Option 2 — clean white bars with a thin brand separator line (icons stay dark): */
+ html.native-app.sysbar-sep::before{content:"";position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:1.5px;background:rgba(31,59,115,.22);z-index:6000;pointer-events:none;}
+ html.native-app.sysbar-sep::after{content:"";position:fixed;bottom:env(safe-area-inset-bottom,0px);left:0;right:0;height:1.5px;background:rgba(31,59,115,.22);z-index:6000;pointer-events:none;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;position:fixed;inset:0;width:100%;}
/* ---- Top bar ---- */
@@ -1315,7 +1324,10 @@ function twemojify(_el){ /* native emoji: nothing to do */ }
// clock/battery/nav icons vanish). Set them to DARK content — in @capacitor-community/safe-area, style
// 'LIGHT' means "dark content on a light background". Also mirrored in capacitor.config.json (statusBarStyle/
// navigationBarStyle) for a permanent fix on the next build; this runtime call fixes already-installed APKs.
- if(p==='android'){ try{ var SA=C.Plugins&&C.Plugins.SafeArea; if(SA&&SA.setSystemBarsStyle){ SA.setSystemBarsStyle({ style:'LIGHT', type:'STATUS_BAR' }); SA.setSystemBarsStyle({ style:'LIGHT', type:'NAVIGATION_BAR' }); } }catch(_){} }
+ // OPTION 1 (brand-blue bars): fill the status/nav regions blue (CSS .sysbar-blue) + LIGHT/white icons so
+ // they contrast on the blue (plugin style 'DARK' = light content). Swap to Option 2 by changing the class to
+ // 'sysbar-sep' and the two styles below to 'LIGHT' (dark icons for white bars).
+ if(p==='android'){ r.classList.add('sysbar-blue'); try{ var SA=C.Plugins&&C.Plugins.SafeArea; if(SA&&SA.setSystemBarsStyle){ SA.setSystemBarsStyle({ style:'DARK', type:'STATUS_BAR' }); SA.setSystemBarsStyle({ style:'DARK', type:'NAVIGATION_BAR' }); } }catch(_){} }
// Keyboard. The device log proved that on our build (resize:none) the WebView does NOT resize and
// VisualViewport does NOT reflect the keyboard (clientHeight & vvHeight both stay full) — so the ONLY
// reliable signal is the Capacitor Keyboard plugin's reported height. Now that the iOS auto-zoom is