.rz-bookmark-btn {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(60, 60, 67, .16);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-elv, #fff) 92%, transparent);
  color: var(--brand-1, #3451b2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}

.rz-bookmark-floating {
  position: fixed;
  top: calc(var(--nav-h, 64px) + 12px);
  right: 14px;
  z-index: 76;
}

.rz-bookmark-host {
  display: contents;
}

.nav-r .rz-bookmark-btn {
  width: var(--icon-btn, 36px);
  height: var(--icon-btn, 36px);
  min-width: var(--icon-btn, 36px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav-r .rz-bookmark-btn:hover {
  background: var(--bg-soft, transparent);
  color: var(--brand-1, currentColor);
}

.rz-bookmark-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-1, #3451b2) 46%, transparent);
}

.rz-bookmark-btn:active {
  transform: translateY(0);
}

.rz-bookmark-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.rz-bookmark-btn::after {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--bg-elv, #fff);
  border-radius: 999px;
  background: var(--brand-1, #3451b2);
  content: "";
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}

.rz-bookmark-btn.has-position::after {
  opacity: 1;
  transform: scale(1);
}

.rz-bookmark-toast {
  position: fixed;
  top: calc(var(--nav-h, 64px) + 60px);
  right: 14px;
  z-index: 77;
  max-width: min(260px, calc(100vw - 28px));
  padding: 8px 11px;
  border: 1px solid rgba(60, 60, 67, .14);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elv, #fff) 94%, transparent);
  color: var(--t1, rgba(60, 60, 67, 1));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  font: 13px/1.5 var(--font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.rz-bookmark-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .rz-bookmark-floating {
    top: calc(var(--nav-h, 56px) + 10px);
    right: 10px;
  }

  .rz-bookmark-btn {
    width: 38px;
    height: 38px;
  }

  .rz-bookmark-toast {
    top: calc(var(--nav-h, 56px) + 54px);
    right: 10px;
  }
}