.notification-region {
  position: fixed;
  z-index: 10000;
  top: 22px;
  right: 22px;
  width: min(430px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.app-notification {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 30px 1fr 28px;
  align-items: start;
  gap: 10px;
  padding: 15px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 4px solid #0b8792;
  border-radius: 15px;
  color: #fff;
  background: rgba(15, 22, 24, .97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  animation: notification-enter .2s ease-out;
}

.app-notification.error { border-left-color: #d44c62; }
.app-notification.warning { border-left-color: #d49a38; }
.app-notification.leaving { opacity: 0; transform: translateY(-8px); transition: .18s ease; }
.app-notification p { margin: 2px 0 0; line-height: 1.45; font-size: 14px; }
.app-notification button { appearance: none; border: 0; background: transparent; color: #fff; opacity: .72; font-size: 22px; line-height: 1; cursor: pointer; }
.notification-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #0b8792; font-weight: 800; }
.app-notification.error .notification-mark { background: #d44c62; }
.app-notification.warning .notification-mark { background: #d49a38; }

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

@media (max-width: 700px) {
  .notification-region { top: 12px; right: 16px; }
}