:root {
  --site-registration-footer-height: calc(
    34px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))
  );
}

.site-registration-footer {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: var(--site-registration-footer-height);
  align-items: center;
  justify-content: center;
  padding: 6px 12px
    calc(6px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  background: rgb(243 246 250 / 96%);
  color: #65758b;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.site-registration-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-registration-footer .public-security-registration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.site-registration-footer img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#root > .app-frame {
  height: calc(100vh - var(--site-registration-footer-height));
  min-height: calc(100vh - var(--site-registration-footer-height));
}

#root > .login-page,
#root > .status-screen,
#root > .shared-note-page {
  min-height: calc(100vh - var(--site-registration-footer-height));
}

#root > .login-page {
  padding-bottom: calc(35px + var(--site-registration-footer-height));
}

#root > .status-screen {
  padding-bottom: var(--site-registration-footer-height);
}

#root > .shared-note-page {
  padding-bottom: calc(
    clamp(18px, 5vw, 64px) + var(--site-registration-footer-height)
  );
}

@media (max-width: 1023px) {
  #root > .app-frame {
    height: auto;
    padding-bottom: calc(
      var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) +
        var(--site-registration-footer-height)
    );
  }
}