ui-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: var(--layer-toast);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-7);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #f0f1f3;
  font-size: var(--fs-md);
  white-space: nowrap;
  box-shadow: var(--shadow-toast);
  opacity: 0;
  transform: translate(-50%, var(--sp-4));
  pointer-events: none;
  transition: var(--transition-slow);
}

ui-toast[visible] {
  opacity: 1;
  transform: translate(-50%, 0);
}

ui-toast .toast-dot {
  width: var(--sp-3);
  height: var(--sp-3);
  flex: none;
  border-radius: 50%;
  background: var(--amber);
}