:root {
  --ui-motion-fast: 160ms;
  --ui-motion-normal: 260ms;
  --ui-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-distance-sm: 8px;

  --ui-success-bg: #e9f9f0;
  --ui-success-border: #bfe6d3;
  --ui-success-text: #0f5132;
  --ui-success-icon: #1f9d59;

  --ui-error-bg: #fdeaea;
  --ui-error-border: #f1b5b5;
  --ui-error-text: #842029;
  --ui-error-icon: #d9483d;

  --ui-info-bg: #e9f1fe;
  --ui-info-border: #bfd3f4;
  --ui-info-text: #173a6a;
  --ui-info-icon: #2f6bb2;

  --ui-warning-bg: #fff3df;
  --ui-warning-border: #f2d09e;
  --ui-warning-text: #6a4417;
  --ui-warning-icon: #d4871f;
}

.ui-feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.ui-feedback-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  line-height: 1.4;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(var(--ui-distance-sm));
  opacity: 0;
  animation: ui-alert-in var(--ui-motion-normal) var(--ui-ease-standard) forwards;
  transition:
    opacity var(--ui-motion-fast) var(--ui-ease-standard),
    transform var(--ui-motion-fast) var(--ui-ease-standard);
}

.ui-alert__text {
  min-width: 0;
}

.ui-alert.is-leaving {
  opacity: 0;
  transform: translateY(calc(var(--ui-distance-sm) * -1));
  pointer-events: none;
}

.ui-alert--success {
  background: linear-gradient(180deg, var(--ui-success-bg), #dff4e9);
  border-color: var(--ui-success-border);
  color: var(--ui-success-text);
}

.ui-alert--success .ui-feedback-icon {
  color: var(--ui-success-icon);
}

.ui-alert--error {
  background: linear-gradient(180deg, var(--ui-error-bg), #f9dcdc);
  border-color: var(--ui-error-border);
  color: var(--ui-error-text);
}

.ui-alert--error .ui-feedback-icon {
  color: var(--ui-error-icon);
}

.ui-alert--info {
  background: linear-gradient(180deg, var(--ui-info-bg), #dde9fd);
  border-color: var(--ui-info-border);
  color: var(--ui-info-text);
}

.ui-alert--info .ui-feedback-icon {
  color: var(--ui-info-icon);
}

.ui-alert--warning {
  background: linear-gradient(180deg, var(--ui-warning-bg), #ffeaca);
  border-color: var(--ui-warning-border);
  color: var(--ui-warning-text);
}

.ui-alert--warning .ui-feedback-icon {
  color: var(--ui-warning-icon);
}

.ui-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2200;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
}

.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  line-height: 1.35;
  font-size: 0.92rem;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  animation: ui-toast-in var(--ui-motion-normal) var(--ui-ease-standard) forwards;
}

.ui-toast.is-leaving {
  animation: ui-toast-out var(--ui-motion-fast) ease forwards;
}

.ui-toast--success {
  background: var(--ui-success-bg);
  border-color: var(--ui-success-border);
  color: var(--ui-success-text);
}

.ui-toast--success .ui-feedback-icon {
  color: var(--ui-success-icon);
}

.ui-toast--error {
  background: var(--ui-error-bg);
  border-color: var(--ui-error-border);
  color: var(--ui-error-text);
}

.ui-toast--error .ui-feedback-icon {
  color: var(--ui-error-icon);
}

.ui-toast--info {
  background: var(--ui-info-bg);
  border-color: var(--ui-info-border);
  color: var(--ui-info-text);
}

.ui-toast--info .ui-feedback-icon {
  color: var(--ui-info-icon);
}

.ui-toast--warning {
  background: var(--ui-warning-bg);
  border-color: var(--ui-warning-border);
  color: var(--ui-warning-text);
}

.ui-toast--warning .ui-feedback-icon {
  color: var(--ui-warning-icon);
}

@keyframes ui-alert-in {
  from {
    opacity: 0;
    transform: translateY(var(--ui-distance-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui-toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-alert,
  .ui-toast {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ui-alert.is-leaving {
    opacity: 0 !important;
  }

  .ui-toast.is-leaving {
    animation: none !important;
  }
}