.sofl-toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  width: min(424px, calc(100vw - 2rem));
  pointer-events: none;
}

.sofl-toast {
  --sofl-toast-accent: #0f172a;
  --sofl-toast-icon-bg: #eef2f7;
  --sofl-toast-edge-tint: #f8fafc;
  display: grid;
  grid-template-columns: 2.875rem minmax(0, 1fr) 1.75rem;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 1rem 1rem 1rem 1.1rem;
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: 18px;
  background:
    linear-gradient(90deg, var(--sofl-toast-edge-tint) 0, #fff 30%),
    #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .1), 0 2px 6px rgba(15, 23, 42, .04);
  color: #0f172a;
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(24px, 0, 0) scale(.98);
  transition: opacity .24s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}

.sofl-toast.sofl-toast-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.sofl-toast.sofl-toast-leaving {
  opacity: 0;
  transform: translate3d(18px, -4px, 0) scale(.98);
}

.sofl-toast-icon {
  display: inline-flex;
  width: 2.875rem;
  height: 2.875rem;
  align-items: center;
  justify-content: center;
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--sofl-toast-accent) 10%, transparent);
  border-radius: 12px;
  background: var(--sofl-toast-icon-bg);
  color: var(--sofl-toast-accent);
  font-size: 1.05rem;
}

.sofl-toast-content {
  min-width: 0;
  align-self: center;
}

.sofl-toast-title {
  margin-bottom: .3rem;
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.sofl-toast-title:empty {
  display: none;
}

.sofl-toast-message {
  color: #626b78;
  font-size: .9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sofl-toast-title:empty + .sofl-toast-message {
  padding-top: .15rem;
  color: #242c39;
  font-size: .92rem;
}

.sofl-toast-close {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  align-self: start;
  margin: -.15rem -.3rem 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8a9099;
  font-size: .95rem;
  transition: background-color .18s ease, color .18s ease;
}

.sofl-toast-close:hover,
.sofl-toast-close:focus-visible {
  background: rgba(15, 23, 42, .05);
  color: #0f172a;
}

.sofl-toast-close:focus-visible,
.sofl-toast-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sofl-toast-accent) 24%, transparent);
  outline-offset: 2px;
}

.sofl-toast-action {
  display: inline-flex;
  width: fit-content;
  min-height: 2.1rem;
  align-items: center;
  justify-content: center;
  margin-top: .72rem;
  padding: .38rem .95rem;
  border: 1px solid #d3d8df;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.sofl-toast-action:hover {
  border-color: #bb8c2b;
  background: #fff8e7;
  color: #75520d;
}

.sofl-toast-success {
  --sofl-toast-accent: #29964f;
  --sofl-toast-icon-bg: #eaf7ee;
  --sofl-toast-edge-tint: #f7fcf8;
}

.sofl-toast-info {
  --sofl-toast-accent: #0f172a;
  --sofl-toast-icon-bg: #edf1f6;
  --sofl-toast-edge-tint: #f7f9fc;
}

.sofl-toast-warning {
  --sofl-toast-accent: #b68017;
  --sofl-toast-icon-bg: #fff4d9;
  --sofl-toast-edge-tint: #fffbf2;
}

.sofl-toast-error {
  --sofl-toast-accent: #d34755;
  --sofl-toast-icon-bg: #fdecef;
  --sofl-toast-edge-tint: #fff8f9;
}

@media (max-width: 575.98px) {
  .sofl-toast-container {
    top: .75rem;
    right: .75rem;
    left: .75rem;
    width: auto;
  }

  .sofl-toast {
    grid-template-columns: 2.65rem minmax(0, 1fr) 1.65rem;
    gap: .8rem;
    min-height: 80px;
    padding: .85rem .85rem .85rem .9rem;
    border-radius: 16px;
    transform: translate3d(0, -16px, 0) scale(.985);
  }

  .sofl-toast.sofl-toast-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .sofl-toast.sofl-toast-leaving {
    transform: translate3d(0, -12px, 0) scale(.985);
  }

  .sofl-toast-icon {
    width: 2.65rem;
    height: 2.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sofl-toast {
    transition-duration: .01ms;
  }
}