.pwa-install[hidden], .pwa-hint[hidden] {
  display: none !important;
}

.pwa-install {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(234, 198, 96, .35);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(217, 179, 75, .2), rgba(156, 113, 23, .1));
  color: #f1d98a;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.pwa-install:hover {
  transform: translateY(-1px);
  border-color: rgba(234, 198, 96, .65);
  background: linear-gradient(135deg, rgba(217, 179, 75, .3), rgba(156, 113, 23, .16));
}

.pwa-install span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(145deg, #f1d98a, #a97715);
  color: #231804;
  font-size: 14px;
}

.pwa-install-login {
  margin: 16px 0 0;
  padding: 12px;
  border-color: #dfc779;
  background: #fffaf0;
  color: #795711;
}

.pwa-install-login:hover {
  background: #fff5d9;
  border-color: #c99b2e;
}

.pwa-hint {
  margin: 9px 0 0;
  color: #7d776c;
  text-align: center;
  font-size: 10px;
  line-height: 1.5;
}

.is-offline .gold-dot {
  background: #b42318;
  box-shadow: 0 0 0 5px rgba(180, 35, 24, .13);
}

.is-offline .topbar-title span:last-child::after {
  content: " • Hors connexion";
  color: #b42318;
}

@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
}