.ftw-notification-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(390px, calc(100vw - 28px));
  pointer-events: none;
}

.ftw-notification {
  --ftw-notification-accent: #139676;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 14px 12px;
  color: #1d2c28;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(19, 150, 118, 0.18);
  border-left: 4px solid var(--ftw-notification-accent);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(25, 42, 38, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.ftw-notification.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.ftw-notification.is-leaving {
  transform: translateY(8px);
  opacity: 0;
  filter: blur(2px);
}

.ftw-notification-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ftw-notification-accent);
  background: color-mix(in srgb, var(--ftw-notification-accent) 12%, transparent);
  border-radius: 999px;
  font-size: 15px;
}

.ftw-notification-body {
  min-width: 0;
  padding-top: 1px;
}

.ftw-notification-title {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: #10241f;
}

.ftw-notification-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: #3f5750;
  overflow-wrap: anywhere;
}

.ftw-notification-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #6b7b77;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.ftw-notification-close:hover,
.ftw-notification-close:focus {
  color: #10241f;
  background: rgba(16, 36, 31, 0.08);
  outline: none;
}

.ftw-notification-success {
  --ftw-notification-accent: #139676;
}

.ftw-notification-info {
  --ftw-notification-accent: #2f80ed;
}

.ftw-notification-warning {
  --ftw-notification-accent: #d58a00;
}

.ftw-notification-error {
  --ftw-notification-accent: #d94d4d;
}

@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  .ftw-notification-icon {
    background: rgba(19, 150, 118, 0.12);
  }
}

@media (max-width: 575.98px) {
  .ftw-notification-stack {
    right: 14px;
    bottom: 14px;
    width: calc(100vw - 28px);
  }

  .ftw-notification {
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    padding: 12px;
    border-radius: 12px;
  }

  .ftw-notification-icon {
    width: 34px;
    height: 34px;
  }
}