@supports (padding: max(0px)) {
  .sidebar {
    padding-top: max(30px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(72px + env(safe-area-inset-top));
  }

  #toast {
    bottom: max(25px, calc(env(safe-area-inset-bottom) + 12px));
  }

  .auth-story,
  .auth-form-wrap,
  .shared-card {
    padding-top: max(25px, env(safe-area-inset-top));
    padding-bottom: max(25px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  @supports (padding: max(0px)) {
    .topbar {
      height: calc(64px + env(safe-area-inset-top));
    }
  }
}

.closebox-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 30px;
  background: #172135;
  color: #fff;
  text-align: center;
}

.closebox-lock-screen strong {
  font-size: 1.25rem;
}

.closebox-lock-screen small {
  color: #aab6cb;
}

.closebox-lock-mark {
  width: 54px;
  height: 64px;
  border: 4px solid #fff;
  border-radius: 14px;
  position: relative;
  margin-bottom: 8px;
}

.closebox-lock-mark::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

html.closebox-locking body > *:not(.closebox-lock-screen) {
  visibility: hidden !important;
}

html.closebox-locking .closebox-lock-screen {
  display: grid;
}