.sharediv {
  position: fixed;
  top: max(.85rem, env(safe-area-inset-top));
  inset-inline-end: max(.85rem, env(safe-area-inset-right));
  z-index: 10;
  padding: 0;
}

.share-icon {
  width: 18px;
  height: 18px;
  padding: 0;
  vertical-align: middle;
  color: #fff !important;
}

.sharebutton,
sharebutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 44px;
  height: 44px;
  padding: 0 .85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(120deg,
              rgba(255, 255, 255, .10),
              rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 8px 22px rgba(4, 10, 26, .30),
    0 1px 3px rgba(4, 10, 26, .20);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .2s cubic-bezier(.2, .7, .3, 1);
}

.sharebutton-mb { display: none; }

@media (min-width: 600px) {
  .sharebutton,
  sharebutton { padding: 0 1.05rem; }
  .sharebutton-mb { display: inline; }
}

@media (hover: hover) and (pointer: fine) {
  sharebutton:hover,
  .sharebutton:hover {
    background: linear-gradient(120deg,
                rgba(255, 255, 255, .17),
                rgba(255, 255, 255, .09));
    transform: translateY(-1px);
    box-shadow:
      0 12px 28px rgba(4, 10, 26, .38),
      0 2px 6px rgba(4, 10, 26, .18);
    color: #fff;
  }
  .sharebutton:hover .share-icon {
    color: #fff !important;
  }
}
sharebutton:active,
.sharebutton:active {
  background: linear-gradient(120deg,
              rgba(255, 255, 255, .20),
              rgba(255, 255, 255, .13));
  transform: scale(.95);
}
.sharebutton:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 3px;
}

.toastdiv {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toastbox {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  margin-inline: auto;
  width: min(280px, calc(100vw - 2rem));
  padding: .75rem 1rem;
  background: rgba(9, 17, 35, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(3, 8, 22, .45);
  text-align: center;
  z-index: 20;
  transform: translateY(150%);
  transition: transform .3s ease;
}
.toastbox.toast-tox--active {
  transform: translateY(calc(-1 * max(1.5rem, env(safe-area-inset-bottom))));
}