.flash {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;

  width: 360px;
  max-width: calc(100vw - 32px);

  position: fixed;
  overflow: hidden;
  border-radius: 16px;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);

  animation: flashIn .25s ease;
  transition: opacity .3s ease, transform .3s ease;
}

.flash__content {
  padding: 16px 18px 18px;
}

.flash__title {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.flash__message {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.flash__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  animation: flashProgress 4s linear forwards;
  transform-origin: left center;
}

.flash--success {
  background: rgba(236, 253, 245, 0.98);
  border: 1px solid #86efac;
  color: #166534;
}

.flash--success .flash__progress {
  background: #22c55e;
}

.flash--error {
  background: rgba(254, 242, 242, 0.98);
  border: 1px solid #f5b5b5;
  color: #d92d20;
}

.flash--error .flash__progress {
  background: #ef4444;
}

.flash--warning {
  background: rgba(255, 251, 235, 0.98);
  border: 1px solid #fcd34d;
  color: #92400e;
}

.flash--warning .flash__progress {
  background: #f59e0b;
}

.flash--info {
  background: rgba(239, 246, 255, 0.98);
  border: 1px solid #93c5fd;
  color: #1d4ed8;
}

.flash--info .flash__progress {
  background: #3b82f6;
}

.flash.is-hiding {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes flashIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flashProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}