#notifications {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column-reverse;  
  align-items: flex-start;
  gap: 12px;
  z-index: 9999;
}

.notification {
  position: relative;
  background: #fff;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-weight: 500;
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  max-width: 320px; 
  word-wrap: break-word;
}

.notification.active {
  transform: translateX(0);
  opacity: 1;
}

.notification svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.notification rect {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.notification.info {
  background: #e8f1fd;
  color: #2d6cdf;
}
.notification.info rect { stroke: #2d6cdf; }

.notification.success {
  background: #e9f9ee;
  color: #2e7d32;
}
.notification.success rect { stroke: #2e7d32; }

.notification.error {
  background: #fdeaea;
  color: #d32f2f;
}
.notification.error rect { stroke: #d32f2f; }

.notification.warning {
  background: #fff8e1;
  color: #f57c00;
}
.notification.warning rect { stroke: #f57c00; }