.notif {
  position: fixed;
  bottom: calc(1.5rem + var(--safe-bot));
  right: 1.5rem;
  background: var(--ocean);
  border: 1px solid var(--tide);
  border-radius: 10px;
  padding: .68rem 1.05rem;
  font-size: .79rem;
  color: var(--foam);
  z-index: 300;
  transform: translateY(120px);
  opacity: 0;
  transition: all .3s;
  max-width: 300px;
}

.notif.show {
  transform: translateY(0);
  opacity: 1;
}

.notif.ok  { border-color: var(--kelp); }
.notif.err { border-color: var(--coral); color: var(--coral); }