#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  left: auto;
  transform: none;
  z-index: 4000;
  width: min(420px, calc(100% - 32px));
  pointer-events: none;
}
#toast-container .notification {
  pointer-events: auto;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
#toast-container .notification.success,
#toast-container .notification.ok {
  background: var(--ok, var(--success-color, #4caf50));
}
#toast-container .notification.error,
#toast-container .notification.danger {
  background: var(--err, var(--error-color, #f44336));
}
#toast-container .notification.warning {
  background: var(--warn, var(--warning-color, #ff9800));
}
#toast-container .notification.info {
  background: var(--primary, var(--primary-color, #4a6fa5));
}
#toast-container .notification .close-btn {
  margin-left: auto;
  background: none;
  border: 0;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}