.pwa-install {
  display: inline-flex;
  min-width: 112px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  color: var(--cyan);
  cursor: pointer;
  font: 600 9px var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pwa-install:hover,
.pwa-install:focus-visible {
  border-color: var(--cyan);
  background: var(--surface-raised);
}

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

body.auth-locked .auth-dialog form > .pwa-install {
  width: 100%;
  margin-top: 12px;
}

.pwa-status {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  color: var(--text);
  font: 11px/1.55 var(--body);
}

@media (max-width: 740px) {
  .pwa-status { right: 14px; bottom: 14px; }
}

@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 740px) {
    .sidebar { padding-top: max(16px, env(safe-area-inset-top)); }
    .main-content {
      padding-right: max(14px, env(safe-area-inset-right));
      padding-bottom: max(24px, env(safe-area-inset-bottom));
      padding-left: max(14px, env(safe-area-inset-left));
    }
    .pwa-status {
      right: max(14px, env(safe-area-inset-right));
      bottom: max(14px, env(safe-area-inset-bottom));
      left: max(14px, env(safe-area-inset-left));
      width: auto;
    }
  }
}