.alert {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  position: relative;
}

.alert__icon { font-size: 1.25rem; font-weight: 700; line-height: 1; flex: 0 0 auto; margin-top: .1rem; }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: 800; margin-bottom: .25rem; }
.alert__text { opacity: .95; }
.alert__list { margin: .35rem 0 0 1.1rem; padding: 0; }
.alert__list li { margin: .2rem 0; }

.alert__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  opacity: .6;
}
.alert__close:hover { opacity: 1; }

.alert--success { background: linear-gradient(135deg, #d4edda, #c3e6cb); color: #155724; border-color: #b1dfbb; }
.alert--error   { background: linear-gradient(135deg, #f8d7da, #f5c6cb); color: #721c24; border-color: #f1b0b7; }

.alert.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}

@media (max-width: 768px) {
  .alert { padding: .9rem 1rem; gap: .75rem; }
}