<div class="ccb-toast">
  <span class="ccb-toast-dot"></span><span class="ccb-toast-msg">Saved successfully</span
  ><button class="ccb-toast-x" aria-label="Dismiss"><span></span><span></span></button>
</div>

.ccb-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 14px;
  border-radius: 10px;
  background: #1a1a28;
  border: 1px solid rgba(46,204,138,0.25);
  color: #f0eeff; font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.45s cubic-bezier(0.55,0,0.45,1), opacity 0.45s;
}
.ccb-toast.is-out { transform: translateX(120%); opacity: 0; }
.ccb-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc8a; box-shadow: 0 0 8px rgba(46,204,138,0.5);
}
.ccb-toast-msg { white-space: nowrap; }
.ccb-toast-x {
  width: 22px; height: 22px;
  border: none; border-radius: 6px;
  background: transparent;
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.ccb-toast-x:hover { background: rgba(255,255,255,0.08); }
.ccb-toast-x span {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: #6b6987; border-radius: 1px;
  transition: background 0.2s;
}
.ccb-toast-x:hover span { background: #f0eeff; }
.ccb-toast-x span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-toast-x span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }

document.querySelectorAll('.ccb-toast').forEach(function(toast) {
  var x = toast.querySelector('.ccb-toast-x');
  if (!x) return;
  x.addEventListener('click', function() {
    toast.classList.add('is-out');
    setTimeout(function() { toast.classList.remove('is-out'); }, 1400);
  });
});