html, body, #map { height: 100%; margin: 0; }
body { font-family: system-ui, sans-serif; }

.status {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000;
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: #111827; color: #fff; display: none;
}
.status.show { display: block; }

.fab {
  position: fixed; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1000;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: #2563eb; color: #fff; font-size: 22px; box-shadow: 0 2px 8px #0004; cursor: pointer;
}

.popup input { width: 180px; padding: 4px; margin-bottom: 6px; }
.popup button { margin-right: 4px; }
.pending { opacity: .6; }

.install {
  position: fixed; left: 12px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1000;
  padding: 0 16px; height: 48px; border-radius: 24px; border: 0;
  background: #2563eb; color: #fff; font-size: 15px; box-shadow: 0 2px 8px #0004; cursor: pointer;
}
.install[hidden] { display: none; }
.fab-2 { bottom: calc(84px + env(safe-area-inset-bottom)); }