html.app-mode, html.app-mode body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body.app-mode {
  background: #000;
}
body.app-mode #pwaInstallBar { display:none !important; }
body.app-mode .browser-only,
body.app-mode .browser-header,
body.app-mode .url-bar,
body.app-mode .top-browser-bar,
body.app-mode .payment-header,
body.app-mode .pay-header,
body.app-mode .close-x-browser,
body.app-mode .three-dot-menu,
body.app-mode .share-bar,
body.app-mode #share-bar { display:none !important; }

#pwaInstallBar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:2147483646;
  display:none;align-items:center;gap:12px;padding:12px 14px;
  border-radius:18px;background:rgba(16,16,16,.96);color:#fff;
  box-shadow:0 14px 36px rgba(0,0,0,.34);font-family:system-ui,-apple-system,Roboto,sans-serif;
}
#pwaInstallBar .pwa-install-logo{width:44px;height:44px;border-radius:12px;flex:0 0 44px}
#pwaInstallBar .pwa-install-copy{display:flex;flex-direction:column;min-width:0;flex:1;font-size:15px;font-weight:700;line-height:1.1}
#pwaInstallBar .pwa-install-copy small{margin-top:4px;font-size:12px;font-weight:500;opacity:.7}
#pwaInstallBtn{border:0;background:#1a73e8;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700}
#pwaInstallClose{border:0;background:transparent;color:rgba(255,255,255,.72);font-size:28px;line-height:1;padding:0 2px}

#pushPermissionGate{
  position:fixed;inset:0;z-index:2147483647;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
  font-family:system-ui,-apple-system,Roboto,sans-serif;
}
#pushPermissionGate.is-visible{display:flex}
#pushPermissionGate .push-gate-card{
  width:min(100%,380px);background:#111;color:#fff;border-radius:24px;
  padding:24px 20px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.45)
}
#pushPermissionGate .push-gate-icon{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,#1a73e8,#34a853);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 14px}
#pushPermissionGate h2{margin:0 0 10px;font-size:24px;line-height:1.15}
#pushPermissionGate p{margin:0 0 14px;font-size:14px;line-height:1.5;opacity:.84}
#pushPermissionGate .push-status{min-height:20px;margin:0 0 14px;font-size:13px;color:#cbd5e1}
#pushPermissionGate .push-actions{display:flex;flex-direction:column;gap:10px}
#allowPushBtn,#retryPushBtn{border:0;border-radius:999px;padding:13px 16px;font-size:14px;font-weight:700}
#allowPushBtn{background:#1a73e8;color:#fff}
#retryPushBtn{background:#27272a;color:#fff}
#pushPermissionGate .push-help{display:none;margin-top:12px;font-size:12px;line-height:1.45;opacity:.65}
#pushPermissionGate.is-denied .push-help,#pushPermissionGate.is-error .push-help{display:block}
body.push-locked{overflow:hidden !important}
body.push-locked > *:not(#pushPermissionGate){filter:blur(6px) brightness(.5);pointer-events:none !important}

@media (max-width:480px){
  #pwaInstallBar{left:10px;right:10px;bottom:10px;padding:10px 12px;border-radius:16px}
  #pwaInstallBtn{padding:9px 14px}
  #pushPermissionGate{padding:14px}
  #pushPermissionGate .push-gate-card{padding:20px 16px;border-radius:20px}
}

/* ---- PWA Install Modal ---- */
#pwaInstallModal {
  position: fixed; inset: 0; z-index: 2147483647;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  font-family: system-ui,-apple-system,Roboto,sans-serif;
}
#pwaInstallModal.is-visible { display: flex; }
body.pwa-modal-open { overflow: hidden !important; }

.pwa-modal-card {
  width: min(100%, 380px); background: #fff; border-radius: 24px;
  padding: 28px 22px 24px; text-align: center; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.pwa-modal-close {
  position: absolute; top: 14px; right: 16px; border: 0;
  background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pwa-modal-icon {
  width: 80px; height: 80px; border-radius: 20px;
  margin: 0 auto 16px; display: block; box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.pwa-modal-title {
  margin: 0 0 10px; font-size: 22px; font-weight: 800; color: #0f172a;
}
.pwa-modal-desc {
  margin: 0 0 20px; font-size: 14px; color: #64748b; line-height: 1.55;
}
.pwa-modal-btn {
  width: 100%; border: 0; background: #1a73e8; color: #fff;
  font-size: 16px; font-weight: 700; padding: 14px 20px;
  border-radius: 999px; cursor: pointer; font-family: inherit;
}
.pwa-modal-btn:active { opacity: .88; }

/* iOS step-by-step instructions */
.pwa-ios-steps { text-align: left; }
.pwa-ios-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-top: 1px solid #f1f5f9; font-size: 14px;
  color: #0f172a; line-height: 1.45;
}
.pwa-ios-step:first-child { border-top: 0; }
.pwa-ios-num {
  width: 26px; height: 26px; border-radius: 50%; background: #1a73e8;
  color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pwa-ios-step svg { display: inline; vertical-align: middle; margin: 0 2px; }

@media (max-width: 480px) {
  .pwa-modal-card { padding: 22px 16px 20px; border-radius: 20px; }
}


