.alerts-stack{
  position: fixed;
  top: 16px;
  right: 16px;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  z-index: 9999;
}

.alert{
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: #111;
  backdrop-filter: blur(8px);
}

.alert-icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  position: relative;
}

.alert-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
}

.alert-message{
  font-size: 13px;
  line-height: 1.35;
  opacity: .92;
}

.alert-close{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  opacity: .6;
  border-radius: 10px;
  width: 28px;
  height: 28px;
}
.alert-close:hover{ opacity: 1; background: rgba(0,0,0,.05); }

/* Types */
.alert-info    { border-left: 6px solid #2f80ed; }
.alert-success { border-left: 6px solid #27ae60; }
.alert-warning { border-left: 6px solid #f2c94c; }
.alert-error   { border-left: 6px solid #eb5757; }

.alert-info .alert-icon    { background: rgba(47,128,237,.12); }
.alert-success .alert-icon { background: rgba(39,174,96,.12); }
.alert-warning .alert-icon { background: rgba(242,201,76,.18); }
.alert-error .alert-icon   { background: rgba(235,87,87,.12); }